/* =========================================================
   Monsieur Click · Outils gratuits / Free tools
   1. Widgets (.mct)  2. Sections des pages outils (.tl-*)  3. Maquettes du hub (.tlm-*)
   Les couleurs reprennent les tokens du site (tokens.css) avec repli,
   pour que les widgets restent utilisables hors du site.
   ========================================================= */

/* ---------- 1. Widgets ---------- */
.mct{
  --mct-green:var(--ink,#0b2c23);
  --mct-green-2:var(--ink-4,#184a3b);
  --mct-accent:var(--gold,#d7ae78);
  --mct-accent-ink:var(--gold-ink,#6e4f24);
  --mct-accent-soft:#f6ecd9;
  --mct-bg:var(--paper-3,#fbf8f1);
  --mct-bg-soft:var(--paper,#f3eee2);
  --mct-ink:var(--text-dark,#1a2b24);
  --mct-muted:var(--muted-dark,#4d5c52);
  --mct-line:rgba(11,44,35,.16);
  --mct-ok:#1d7a55;--mct-warn:#8a5a14;--mct-bad:#a13a1f;
  font-family:var(--sans,system-ui,-apple-system,"Segoe UI",sans-serif);
  color:var(--mct-ink);background:var(--mct-bg);
  border:1px solid var(--mct-line);border-radius:22px;
  padding:clamp(20px,3.4vw,40px);max-width:920px;margin:0 auto;box-sizing:border-box;
  line-height:1.6;font-size:16px;text-align:left;
  box-shadow:0 30px 60px -40px rgba(11,44,35,.55);
}
.mct *,.mct *::before,.mct *::after{box-sizing:border-box}
.mct h3{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin:0 0 .5rem;color:var(--mct-green)}
.mct h4{font-size:17px;font-weight:650;margin:1.6rem 0 .6rem;color:var(--mct-green)}
.mct p{margin:.3rem 0 .9rem;color:var(--mct-ink)}
.mct .mct-lead{color:var(--mct-muted);margin-bottom:1.4rem}
.mct .mct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.mct .mct-full{grid-column:1/-1}
@media (max-width:640px){.mct .mct-grid{grid-template-columns:1fr}}
.mct label{display:block;font-weight:600;font-size:14px;margin-bottom:.35rem;color:var(--mct-ink)}
.mct .mct-hint{display:block;font-weight:400;color:var(--mct-muted);font-size:13px;margin-top:.3rem;line-height:1.5}
.mct .mct-hint a{color:var(--mct-accent-ink);text-decoration:underline}
.mct input[type=text],.mct input[type=url],.mct input[type=tel],.mct input[type=email],
.mct input[type=number],.mct input[type=time],.mct select,.mct textarea{
  width:100%;font:inherit;font-size:16px;color:var(--mct-ink);background:#fff;
  border:1px solid var(--mct-line);border-radius:12px;padding:.65rem .85rem;min-height:48px;margin:0;
}
.mct textarea{min-height:100px;resize:vertical}
.mct input:focus,.mct select:focus,.mct textarea:focus{outline:2px solid var(--mct-accent);outline-offset:1px;border-color:var(--mct-accent)}
.mct .mct-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:auto;
  font:inherit;font-weight:650;font-size:15px;cursor:pointer;text-decoration:none;
  background:var(--mct-green);color:var(--paper,#f3eee2)!important;border:1px solid var(--mct-green);border-radius:999px;
  padding:.7rem 1.35rem;min-height:48px;transition:background .2s,transform .2s;line-height:1.2;
}
.mct .mct-btn:hover{background:var(--mct-green-2)}
.mct .mct-btn:active{transform:translateY(1px)}
.mct .mct-btn-ghost{background:transparent;color:var(--mct-green)!important;border:1px solid var(--mct-green)}
.mct .mct-btn-ghost:hover{background:var(--mct-bg-soft)}
.mct .mct-btn-accent{background:var(--mct-accent);border-color:var(--mct-accent);color:var(--ink-btn,#0f2a21)!important}
.mct .mct-btn-accent:hover{background:var(--gold-2,#e8c89a)}
.mct .mct-chips{display:flex;flex-wrap:wrap;gap:8px;margin:.45rem 0 1rem;padding:0;list-style:none}
.mct .mct-chip{font:inherit;font-size:14px;cursor:pointer;background:#fff;color:var(--mct-green);border:1px solid var(--mct-line);border-radius:999px;padding:.45rem .9rem;min-height:40px}
.mct .mct-chip:hover,.mct .mct-chip[aria-pressed=true]{background:var(--mct-green);color:var(--paper,#f3eee2);border-color:var(--mct-green)}
.mct .mct-out{background:#fff;border:1px solid var(--mct-line);border-radius:16px;padding:clamp(16px,2.4vw,24px);margin-top:1.4rem}
.mct .mct-out > :first-child{margin-top:0}
.mct .mct-code{display:block;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;background:var(--mct-bg-soft);border:1px dashed var(--mct-line);border-radius:12px;color:var(--mct-ink);padding:.85rem;white-space:pre-wrap;word-break:break-all;margin:.45rem 0 .85rem;max-height:420px;overflow:auto}
.mct .mct-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mct .mct-toast{color:var(--mct-ok);font-weight:600;font-size:14px;opacity:0;transition:opacity .2s}
.mct .mct-toast.on{opacity:1}
.mct .mct-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:.6rem 0 1.1rem}
@media (max-width:640px){.mct .mct-kpis{grid-template-columns:1fr}}
.mct .mct-kpi{background:var(--mct-bg-soft);border-radius:14px;padding:1rem;text-align:center}
.mct .mct-kpi b{display:block;font-family:var(--serif,Georgia,serif);font-weight:400;font-size:40px;line-height:1.05;color:var(--mct-green)}
.mct .mct-kpi span{font-size:13px;color:var(--mct-muted)}
.mct .mct-note{font-size:14px;color:var(--mct-muted)}
.mct .mct-alert{border-left:3px solid var(--mct-accent);background:var(--mct-accent-soft);padding:.75rem 1rem;border-radius:10px;font-size:14.5px;margin:.9rem 0;color:var(--mct-ink)}
.mct .mct-alert.bad{border-color:var(--mct-bad);background:#fbece6}
.mct .mct-alert.ok{border-color:var(--mct-ok);background:#e9f4ee}
.mct .mct-tablewrap{overflow-x:auto;border-radius:12px;border:1px solid var(--mct-line)}
.mct table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff}
.mct th,.mct td{padding:.55rem .8rem;border-bottom:1px solid var(--mct-line);text-align:left;color:var(--mct-ink)}
.mct th{background:var(--mct-green);color:var(--paper,#f3eee2);font-weight:600}
.mct tr.hit td{background:#e9f4ee;font-weight:700}
.mct .mct-bar{height:8px;background:#e7e0cf;border-radius:99px;overflow:hidden;margin:.3rem 0 .8rem}
.mct .mct-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mct-green),var(--green,#1d7a55));border-radius:99px;transition:width .5s}
.mct .mct-q{border:1px solid var(--mct-line);border-radius:14px;padding:.9rem 1rem;margin:0 0 .7rem;background:#fff}
.mct .mct-q legend{font-weight:600;font-size:15.5px;padding:0;float:left;width:100%;margin-bottom:.55rem;color:var(--mct-ink)}
.mct .mct-opts{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.mct .mct-opts label{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;font-size:14px;margin:0;cursor:pointer;background:var(--mct-bg-soft);border:1px solid var(--mct-line);border-radius:999px;padding:.4rem .9rem;min-height:40px}
.mct .mct-opts input{accent-color:var(--mct-green);margin:0}
.mct .mct-opts label.on{background:var(--mct-green);color:var(--paper,#f3eee2);border-color:var(--mct-green)}
.mct .mct-pillar{display:flex;align-items:center;gap:12px;font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--mct-accent-ink);font-weight:650;margin:1.6rem 0 .7rem}
.mct .mct-pillar:before{content:'';width:28px;height:1px;background:currentColor}
.mct .mct-score{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.mct .mct-ring{--v:0;width:136px;height:136px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--mct-accent) calc(var(--v) * 1%),#e7e0cf 0)}
.mct .mct-ring b{width:110px;height:110px;border-radius:50%;background:var(--mct-green);color:var(--paper,#f3eee2);display:grid;place-items:center;font-family:var(--serif,Georgia,serif);font-weight:400;font-size:38px}
.mct ol.mct-prio{list-style:decimal;padding-left:1.3rem;margin:.4rem 0}
.mct ol.mct-prio li{margin-bottom:.7rem;color:var(--mct-ink)}
.mct ul.mct-list{list-style:disc;padding-left:1.2rem;margin:.4rem 0 .9rem}
.mct ul.mct-list li{margin-bottom:.3rem;color:var(--mct-ink)}
.mct .mct-cta{margin-top:1.6rem;background:var(--mct-green);border-radius:16px;padding:1.2rem 1.3rem;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.mct .mct-cta p{margin:0;max-width:540px;font-size:15px;color:var(--muted,#c3cdc0)}
.mct .mct-cta strong{color:var(--paper,#f3eee2);font-weight:650}
.mct .mct-serp{background:#fff;border:1px solid var(--mct-line);border-radius:14px;padding:1rem 1.1rem;font-family:Arial,Helvetica,sans-serif;max-width:640px}
.mct .mct-serp .s-site{display:flex;align-items:center;gap:10px;font-size:14px;color:#202124;line-height:1.3}
.mct .mct-serp .s-fav{width:28px;height:28px;border-radius:50%;background:var(--mct-bg-soft);border:1px solid #ecedef;display:grid;place-items:center;font-size:12px;color:var(--mct-green);font-weight:700;flex:none}
.mct .mct-serp .s-url{font-size:12px;color:#4d5156}
.mct .mct-serp .s-title{color:#1a0dab;font-size:20px;line-height:1.3;margin:6px 0 3px;word-wrap:break-word}
.mct .mct-serp .s-desc{color:#4d5156;font-size:14px;line-height:1.58}
.mct .mct-count{font-size:13px;font-weight:600;display:block;margin-top:.3rem}
.mct .mct-count.ok{color:var(--mct-ok)}.mct .mct-count.warn{color:var(--mct-warn)}.mct .mct-count.bad{color:var(--mct-bad)}
.mct .mct-qr{background:#fff;display:inline-block;padding:12px;border-radius:12px;border:1px solid var(--mct-line);line-height:0}
.mct .mct-days{display:grid;grid-template-columns:120px 1fr 1fr 90px;gap:8px;align-items:center;font-size:15px}
.mct .mct-days label{margin:0;font-weight:500}
.mct .mct-days input[type=time]{min-width:0;padding:.5rem .4rem}
@media (max-width:640px){.mct .mct-days{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.mct .mct-days .mct-dl{grid-column:1/-1;font-weight:600;margin-top:.35rem}}
.mct .mct-plan{border:2px solid var(--mct-accent);border-radius:18px;padding:1.1rem 1.2rem;background:var(--mct-bg)}
.mct .mct-plan h3{margin-top:.5rem}
.mct .mct-plan .tag{display:inline-block;background:var(--mct-accent-soft);color:var(--mct-accent-ink);font-weight:700;font-size:12px;border-radius:99px;padding:.25rem .7rem;text-transform:uppercase;letter-spacing:.08em}

/* ---------- 2. Pages outils : fonds de section ---------- */
.tl-paper{background:var(--paper,#f3eee2)}
.tl-sand{background:var(--paper-2,#e9e1cf)}
.tl-ivory{background:var(--ivory,#f6ecd9)}
.tl-ink{background:var(--ink,#0b2c23)}
.tl-deep{background:var(--ink-3,#134034)}
.tl-forest{background:var(--green-deep,#1d5a45)}
.tl-copper{background:#96482a}
.tl-paper,.tl-sand,.tl-ivory{color:var(--text-dark,#1a2b24)}
.tl-paper p,.tl-sand p,.tl-ivory p,.tl-paper li,.tl-sand li,.tl-ivory li{color:var(--muted-dark,#4d5c52)}
.tl-paper em,.tl-sand em,.tl-ivory em{color:var(--gold-ink-2,#7a5a2e)}
.tl-paper .mc-kicker,.tl-sand .mc-kicker,.tl-ivory .mc-kicker{color:var(--gold-ink,#6e4f24)}
.tl-ink,.tl-deep,.tl-forest,.tl-copper{color:var(--paper,#f3eee2)}
.tl-ink p,.tl-deep p,.tl-forest p,.tl-ink li,.tl-deep li,.tl-forest li{color:var(--muted,#c3cdc0)}
.tl-forest p,.tl-forest li{color:#d6e4da}
.tl-copper p,.tl-copper li{color:#f8e8d4}
.tl-ink em,.tl-deep em,.tl-forest em{color:var(--gold,#d7ae78)}
.tl-copper em{color:#fbe3c1}
.tl-copper .mc-kicker{color:#fbe3c1}
.tl-btn-dark{background:var(--ink,#0b2c23)!important;border-color:var(--ink,#0b2c23)!important;color:var(--paper,#f3eee2)!important}
.tl-btn-line{background:transparent!important;border:1px solid currentColor!important;color:inherit!important}
.tl-paper .tl-btn-line,.tl-sand .tl-btn-line,.tl-ivory .tl-btn-line{color:var(--ink,#0b2c23)!important}
.tl-copper .mc-btn:not(.tl-btn-line){background:var(--ivory,#f6ecd9);border-color:var(--ivory,#f6ecd9)}

/* Hub : une section par outil */
.tl-tool{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,96px);align-items:center}
.tl-tool.tl-flip>.tl-copy{order:2}
.tl-tool>*{min-width:0}
.tl-num{display:block;font-family:var(--serif,Georgia,serif);font-size:clamp(64px,8vw,120px);line-height:.9;opacity:.22;margin-bottom:6px}
.tl-copy .mc-h2{margin-top:18px}
.tl-copy>p{font-size:18px;margin-top:22px;max-width:600px}
.tl-gets{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.tl-gets li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:16px}
.tl-gets li:before{content:'✓';width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:rgba(215,174,120,.22);color:var(--gold,#d7ae78)}
.tl-paper .tl-gets li:before,.tl-sand .tl-gets li:before,.tl-ivory .tl-gets li:before{background:rgba(122,90,46,.12);color:var(--gold-ink,#6e4f24)}
.tl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.tl-actions .mc-btn{width:auto}
.tl-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;list-style:none}
.tl-legend a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(11,44,35,.2);font-size:14px;font-weight:600;color:var(--ink,#0b2c23)}
.tl-legend a:hover{background:var(--ink,#0b2c23);color:var(--paper,#f3eee2)}
.tl-legend b{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:18px;color:var(--gold-ink,#6e4f24)}
.tl-legend a:hover b{color:var(--gold,#d7ae78)}
@media (max-width:900px){.tl-tool{grid-template-columns:1fr}.tl-tool.tl-flip>.tl-copy{order:0}}

/* Page outil */
.tl-widget-wrap{max-width:960px;margin:0 auto}
.tl-widget-wrap .tl-privacy{text-align:center;font-size:14px;margin-top:18px}
.tl-related .pg-card-link{background:var(--ink-4,#184a3b)}
.tl-related .pg-card-link p{color:var(--muted,#c3cdc0)}

/* ---------- 3. Maquettes illustratives (hub) ---------- */
.tlm{position:relative;background:#fff;color:#1d2622;border-radius:22px;padding:24px;box-shadow:0 40px 70px -38px rgba(0,0,0,.6),0 0 0 1px rgba(11,44,35,.08);font-size:14px;line-height:1.5}
.tlm small{color:#5d6762}
.tlm-cap{display:block;font-size:12px;margin-top:12px;opacity:.75}
.tlm-row{display:flex;align-items:center;gap:18px}
.tlm-ring{--v:68;width:110px;height:110px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#d7ae78 calc(var(--v)*1%),#ece6d8 0)}
.tlm-ring b{width:86px;height:86px;border-radius:50%;background:#0b2c23;color:#f3eee2;display:grid;place-items:center;font-family:var(--serif,Georgia,serif);font-weight:400;font-size:32px}
.tlm-bars{flex:1;display:grid;gap:10px}
.tlm-bars div{font-size:13px;font-weight:600}
.tlm-bars i{display:block;height:7px;border-radius:9px;background:#ece6d8;margin-top:4px;overflow:hidden}
.tlm-bars i:after{content:'';display:block;height:100%;width:var(--w);background:#0b2c23;border-radius:9px}
.tlm-tag{display:inline-block;margin-top:16px;padding:6px 12px;border-radius:99px;background:#f6ecd9;color:#6e4f24;font-weight:600;font-size:13px}
.tlm-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7;background:#0f2a21;color:#cfd6cb;border-radius:14px;padding:18px;white-space:pre;overflow:hidden}
.tlm-code .k{color:#e8c89a}.tlm-code .s{color:#9fd3b2}
.tlm-serp{font-family:Arial,Helvetica,sans-serif}
.tlm-serp .u{font-size:12px;color:#4d5156}
.tlm-serp .t{font-size:19px;color:#1a0dab;margin:4px 0}
.tlm-serp .d{font-size:13.5px;color:#4d5156}
.tlm-serp hr{border:0;border-top:1px solid #eee;margin:16px 0}
.tlm-meter{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tlm-meter span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:#e9f4ee;color:#1d7a55}
.tlm-phone{max-width:280px;margin:0 auto;border:8px solid #0b2c23;border-radius:30px;padding:18px 16px;background:#f3eee2}
.tlm-phone .h{font-family:var(--serif,Georgia,serif);font-size:23px;line-height:1.1;color:#0b2c23}
.tlm-phone .sub{font-size:12.5px;color:#4d5c52;margin:8px 0 12px}
.tlm-phone .b{display:inline-block;background:#d7ae78;color:#0f2a21;font-weight:700;font-size:12px;border-radius:99px;padding:7px 14px}
.tlm-checks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:6px;font-size:13px}
.tlm-checks li{display:flex;gap:8px;align-items:center}
.tlm-checks b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:#e9f4ee;color:#1d7a55}
.tlm-checks .no b{background:#fbece6;color:#a13a1f}
.tlm-url{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all;line-height:1.9}
.tlm-url mark{background:#f6ecd9;color:#6e4f24;border-radius:6px;padding:1px 5px}
.tlm-ga{margin-top:16px;display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:13px;border-top:1px solid #eee;padding-top:12px}
.tlm-ga b{font-weight:700;color:#0b2c23}
.tlm-big{font-family:var(--serif,Georgia,serif);font-size:54px;line-height:1;color:#0b2c23}
.tlm-big em{font-style:normal;color:#b4603b}
.tlm-stars{color:#d7ae78;font-size:22px;letter-spacing:3px;margin-top:6px}
.tlm-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.tlm-mini div{background:#f3eee2;border-radius:12px;padding:10px;text-align:center;font-size:12px}
.tlm-mini b{display:block;font-family:var(--serif,Georgia,serif);font-weight:400;font-size:26px;color:#0b2c23}
.tlm-qr{width:120px;height:120px;flex:none;border-radius:10px;outline:1px solid #e5e0d4;shape-rendering:crispEdges}
.tlm-bubble{background:#f3eee2;border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:13.5px}
.tlm-chat{background:#ece5dd;border-radius:16px;padding:18px}
.tlm-chat .in{background:#fff;border-radius:12px 12px 12px 4px;padding:10px 12px;max-width:85%;font-size:13.5px}
.tlm-chat .out{display:flex;gap:8px;align-items:flex-end;margin-top:14px}
.tlm-chat .out span{flex:1;background:#fff;border-radius:22px;padding:10px 14px;font-size:13.5px}
.tlm-chat .out b{width:42px;height:42px;border-radius:50%;background:#1d7a55;color:#fff;display:grid;place-items:center;font-size:16px}
.tlm-plans{display:grid;gap:10px}
.tlm-plans div{display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e0d4;border-radius:14px;padding:14px 16px}
.tlm-plans div.on{border:2px solid #d7ae78;background:#fbf8f1}
.tlm-plans b{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:22px;color:#0b2c23}
.tlm-plans span{font-size:12px;color:#5d6762}
.tlm-plans .on span{color:#6e4f24;font-weight:700}