/* Outils gratuits (11 nov. 2026) : hub /outils/ et pages d'outils. Jetons du socle (base.css), orange réservé aux repères et au bouton principal. */

/* ---------- Hub : une carte par outil, avec un aperçu d'interface ---------- */
.ot-liste{list-style:none;padding:0;margin:0;display:grid;gap:clamp(12px,1.2vw,18px)}
@media (min-width:900px){ .ot-liste{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ot-carte{display:grid;grid-template-rows:auto 1fr auto;gap:clamp(28px,3vw,44px);block-size:100%;min-block-size:clamp(420px,36vw,520px);padding:clamp(24px,2.4vw,36px);border-radius:var(--r-md);background:var(--night);color:var(--on-night);transition:background-color var(--d-1) ease}
.ot-carte__haut{display:flex;justify-content:space-between;gap:16px;color:var(--on-night-2)}
.ot-carte__haut .meta{color:inherit}
.ot-carte__bas{display:grid;gap:14px;align-content:end}
.ot-carte__titre{font-size:var(--fs-h3l);font-weight:450;letter-spacing:-.045em;line-height:1.02}
.ot-carte__texte{max-inline-size:34em;color:var(--on-night-2);font-size:var(--fs-base);line-height:1.5}
.ot-carte__lien{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-block-start:10px;padding-block-start:18px;border-block-start:1px solid var(--line-night)}
.ot-carte__fl{inline-size:48px;block-size:48px;border-color:var(--line-night)}
.ot-carte__fl svg{inline-size:18px;block-size:18px;transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ot-carte:hover{background:var(--night-2)}
  .ot-carte:hover .ot-carte__lien .roll > span,.ot-carte:hover .ot-carte__lien .roll::after{transform:translateY(-100%)}
  .ot-carte:hover .ot-carte__fl{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .ot-carte:hover .ot-carte__fl svg{transform:translateX(3px)}
}
.ot-carte:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ot-visuel{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;min-block-size:clamp(170px,14vw,210px);padding:clamp(20px,2.4vw,32px);border-radius:calc(var(--r-md) - 6px);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-night)}
.ot-puce{display:inline-flex;align-items:center;min-block-size:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-night);color:var(--on-night-2);font-size:var(--fs-sm)}
.ot-puce.is-on{background:var(--on-night);border-color:var(--on-night);color:var(--night)}
.ot-visuel--migration{flex-direction:column;align-items:stretch;gap:8px}
.ot-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-sm);background:var(--night);font-family:var(--mono);font-size:var(--fs-xs);color:var(--on-night-2)}
.ot-ligne span:last-child{color:var(--on-night)}
.ot-ligne i{font-style:normal;color:var(--accent)}
.ot-suite{margin-block-start:24px}

/* ---------- Pages d'outil : questions ou saisie à gauche, résultat collant à droite ---------- */
.ot-outil{display:grid;gap:clamp(40px,5vw,72px);align-items:start}
@media (min-width:1024px){
  .ot-outil{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter)}
  .ot-resultat{position:sticky;top:110px}
}
.ot-questions{list-style:none;padding:0;margin:0;display:grid;border-block-start:1px solid var(--line)}
.ot-q{border-block-end:1px solid var(--line)}
.ot-q fieldset{border:0;margin:0;padding:clamp(22px,2.2vw,32px) 0;display:grid;gap:18px;min-inline-size:0}
.ot-q legend{display:flex;align-items:baseline;gap:14px;padding:0;margin-block-end:18px;font-size:var(--fs-xl);font-weight:450;letter-spacing:-.03em;line-height:1.2}
.ot-q legend .meta{color:var(--ink-2)}
.ot-choix{display:flex;flex-wrap:wrap;gap:8px}
.ot-choix__btn{display:inline-flex;align-items:center;min-block-size:46px;padding:0 18px;border-radius:var(--r-pill);border:1px solid rgb(13 13 13 / .28);background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-sm);letter-spacing:-.01em;cursor:pointer;transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease}
.ot-choix__btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ot-choix__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .ot-choix__btn:not([aria-pressed="true"]):hover{border-color:var(--ink)} }

.ot-resultat{display:grid;gap:12px}
.ot-carte-res{display:grid;gap:18px;padding:clamp(24px,2.4vw,36px);border-radius:var(--r-md);background:var(--night);color:var(--on-night)}
.ot-res__haut{display:flex;justify-content:space-between;gap:12px;color:var(--on-night-2)}
.ot-res__haut .meta{color:inherit}
.ot-jauge{block-size:2px;background:var(--line-night);border-radius:2px;overflow:hidden}
.ot-jauge i{display:block;block-size:100%;inline-size:0;background:var(--accent);transition:inline-size var(--d-2) var(--ease-out)}
.ot-res__verdict{font-size:var(--fs-lg);letter-spacing:-.02em;line-height:1.3;color:var(--on-night-2)}
.ot-res__verdict.is-win{font-size:var(--fs-h3);font-weight:450;letter-spacing:-.04em;line-height:1.08;color:var(--on-night)}
.ot-res__accroche{color:var(--on-night-2);line-height:1.5}
.ot-detail{display:grid;gap:18px;padding-block-start:18px;border-block-start:1px solid var(--line-night)}
.ot-scores{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ot-score{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;align-items:center;gap:14px;font-size:var(--fs-sm);color:var(--on-night-2)}
.ot-score__barre{block-size:6px;border-radius:6px;background:var(--line-night);overflow:hidden}
.ot-score__barre i{display:block;block-size:100%;inline-size:0;background:var(--on-night-2);transition:inline-size var(--d-2) var(--ease-out)}
.ot-score.is-win{color:var(--on-night)}
.ot-score.is-win .ot-score__barre i{background:var(--accent)}
.ot-score__pct{color:inherit}
.ot-raisons{list-style:none;padding:0;margin:0;display:grid}
.ot-raisons li{padding-block:11px;border-block-start:1px solid var(--line-night);line-height:1.4}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.ot-res__lien a{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.ot-res__note{font-size:var(--fs-xs);color:var(--on-night-2);line-height:1.5}
.ot-cta{margin-block-start:8px}
.ot-merci{padding:18px 22px;border-radius:var(--r-md);background:var(--white);font-size:var(--fs-md)}

/* ---------- Formulaire prénom + e-mail ---------- */
form.lead{display:grid;gap:20px;padding:clamp(24px,2.4vw,36px);border-radius:var(--r-md);background:var(--white);box-shadow:0 0 0 1px var(--line)}
.lead__piege{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.lead__tete{display:grid;gap:8px}
.lead__titre{font-size:var(--fs-xl);font-weight:450;letter-spacing:-.03em;line-height:1.15}
.lead__texte{color:var(--ink-2);line-height:1.5}
.lead__champs{display:grid;gap:18px}
@media (min-width:640px){ .lead__champs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.lead__champ{display:grid;gap:6px}
.lead__champ label{font-size:var(--fs-sm);color:var(--ink-2)}
.lead__champ input{inline-size:100%;font:inherit;font-size:var(--fs-md);color:var(--ink);background:transparent;border:0;border-block-end:1px solid var(--line);padding:8px 0;outline:none;transition:border-color var(--d-1) ease}
.lead__champ input:focus{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.lead__accord{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2);cursor:pointer}
.lead__accord input{inline-size:18px;block-size:18px;margin:1px 0 0;accent-color:var(--ink)}
.lead__accord a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.lead__erreur,.lead__echec{font-size:var(--fs-sm);color:#B03A00}
.lead__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.lead__envoi{justify-self:start;cursor:pointer;font:inherit}
.lead__envoi:disabled{opacity:.5;cursor:progress}

/* ---------- Planificateur : saisie, tableau, export ---------- */
.ot-outil--migration{grid-template-columns:minmax(0,1fr)}
.ot-saisie{display:grid;gap:clamp(20px,2vw,32px)}
@media (min-width:900px){ .ot-saisie{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)} }
.ot-champ{display:grid;gap:12px;align-content:start}
.ot-champ label{display:flex;align-items:baseline;gap:12px;font-size:var(--fs-xl);font-weight:450;letter-spacing:-.03em}
.ot-champ label .meta{color:var(--ink-2)}
.ot-opt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);font-weight:400}
.ot-champ textarea{inline-size:100%;min-block-size:14rem;resize:vertical;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--white);font-family:var(--mono);font-size:var(--fs-xs);line-height:1.7;color:var(--ink);outline:none;transition:border-color var(--d-1) ease}
.ot-champ textarea::placeholder{color:var(--ink-2);opacity:.7}
.ot-champ textarea:focus{border-color:var(--ink)}
.ot-plan{display:grid;gap:20px}
.ot-plan__tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px}
.ot-plan__tete h2{font-size:var(--fs-h3l)}
.ot-stats{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--fs-sm);color:var(--ink-2)}
.ot-stats span{display:inline-flex;align-items:center;gap:8px}
.ot-stats b{color:var(--ink);font-weight:500}
.ot-pt{display:inline-block;inline-size:8px;block-size:8px;border-radius:50%;flex:none}
.ot-pt--garde{background:var(--ink-2)}
.ot-pt--redirige{background:var(--accent)}
.ot-pt--verif{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ot-table{position:relative;overflow-x:auto;border-block-start:1px solid var(--line)}
.ot-table table{inline-size:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ot-table th{padding:12px 10px 12px 0;text-align:start;font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);border-block-end:1px solid var(--line)}
.ot-table td{padding:12px 10px 12px 0;border-block-end:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-xs);word-break:break-all;vertical-align:top}
.ot-table td.ot-fl{color:var(--accent);word-break:normal}
.ot-statut{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:var(--fs-sm);white-space:nowrap}
.ot-table__voile{padding:14px 0;color:var(--ink-2);font-size:var(--fs-sm)}
.ot-export{display:grid;gap:12px}
.ot-formats{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ot-copier{margin-inline-start:auto;cursor:pointer;font:inherit}
.ot-sortie{margin:0;max-block-size:22rem;overflow:auto;padding:18px 20px;border-radius:var(--r-md);background:var(--night);color:var(--on-night);font-family:var(--mono);font-size:var(--fs-xs);line-height:1.7;white-space:pre}
.ot-outil--migration .ot-res__note{color:var(--ink-2);font-size:var(--fs-sm)}
.ot-lead--clair{max-inline-size:760px}

@media (prefers-reduced-motion: reduce){ .ot-carte,.ot-carte__fl svg,.ot-choix__btn,.ot-jauge i,.ot-score__barre i,.lead__champ input,.ot-champ textarea{transition:none} }

/* Les blocs masqués par le script (détail, formulaire, export) restent masqués malgré leur display */
.ot-outil [hidden],.ot-merci[hidden]{display:none!important}

/* ===================================================================================================
   Simulateurs pas à pas (11 nov. 2026), à comparer avec l'interrupteur (Comparateur) :
   B : une étape à la fois, en pleine largeur ; C : la même étape, avec un récapitulatif à côté.
   Sans JavaScript, la page garde la mise en page d'origine (toutes les questions, tous les champs).
   =================================================================================================== */
.ot-pas,.ot-revoir,.ot-etapes,.ot-pas-bas,.ot-recap,.ot-suivi,.ot-q__bas,.ot-choix__touche{display:none}
.ot-pas__prec{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding:0 4px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.ot-pas__prec svg{inline-size:16px;block-size:16px}
.ot-pas__prec.ot-plan__modifier{display:none}
.ot-pas__prec:disabled{opacity:.35;cursor:default}
@media (hover:hover) and (pointer:fine){ .ot-pas__prec:not(:disabled):hover{color:var(--ink)} }
.ot-pas__prec:focus-visible,.ot-revoir:focus-visible,.ot-etapes button:focus-visible,.ot-recap button:focus-visible,.ot-suivi button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.ot-revoir{justify-self:start;padding:0;border:0;background:none;color:var(--on-night);font:inherit;font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:.22em;cursor:pointer}
@keyframes ot-entre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Choisir sa stack : mécanique commune à B et C ---------- */
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-pas{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 16px}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-pas .meta{justify-self:end;color:var(--ink-2)}
.ot-pas__jauge{grid-column:1 / -1;block-size:4px;border-radius:4px;background:var(--line);overflow:hidden}
.ot-pas__jauge i{display:block;block-size:100%;inline-size:0;background:var(--accent);transition:inline-size var(--d-2) var(--ease-out)}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-questions{border:0}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-q{display:none;border:0}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-q.is-courante{display:block;animation:ot-entre var(--d-2) var(--ease-out) both}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-q fieldset{padding:0}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-q legend{display:grid;gap:14px;margin-block-end:28px;font-size:var(--fs-h3);letter-spacing:-.045em;line-height:1.08}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix__btn{display:grid;align-content:space-between;justify-items:start;gap:16px;min-block-size:clamp(108px,9vw,132px);padding:18px 20px 20px;border-radius:var(--r-md);border-color:var(--line);background:var(--white);font-size:var(--fs-lg);letter-spacing:-.02em;text-align:start;line-height:1.25}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix__touche{display:inline-grid;place-items:center;inline-size:26px;block-size:26px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix__btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix__btn[aria-pressed="true"] .ot-choix__touche{background:var(--accent);box-shadow:none;color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){ :is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix__btn:not([aria-pressed="true"]):hover{border-color:var(--ink);transform:translateY(-2px)} }
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix__btn{transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease,transform var(--d-1) var(--ease-out)}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-q__bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-block-start:20px}
.ot-q__suivante{cursor:pointer;font:inherit}
@media (hover:none){ .ot-q__aide{visibility:hidden} }
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack]:not(.is-fini) .ot-resultat{display:none}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack].is-fini .ot-questions,:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack].is-fini .ot-pas{display:none}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack].is-fini .ot-resultat{position:static;animation:ot-entre var(--d-2) var(--ease-out) both}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-revoir{display:inline}

/* B : une étape à la fois, en pleine largeur ; l'écran de résultat sur deux colonnes */
html[data-mise-stack="b"] [data-stack].ot-outil{grid-template-columns:minmax(0,1fr);align-content:start;max-inline-size:900px;margin-inline:auto;min-block-size:min(80vh,760px)}
html[data-mise-stack="b"] [data-stack].is-fini.ot-outil{max-inline-size:1180px}
@media (min-width:1024px){
  html[data-mise-stack="b"] [data-stack].is-fini .ot-resultat{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:var(--gutter);row-gap:0;align-items:stretch}
  /* Variante B : carte noire et carte du formulaire à la même hauteur, « Revoir mes réponses » calé en bas */
  html[data-mise-stack="b"] [data-stack].is-fini .ot-carte-res{display:flex;flex-direction:column;align-items:stretch}
  html[data-mise-stack="b"] [data-stack].is-fini .ot-revoir{align-self:flex-start;margin-block-start:auto}
  html[data-mise-stack="b"] [data-stack].is-fini .ot-lead{display:grid}
  html[data-mise-stack="b"] [data-stack].is-fini .ot-merci{margin-block-start:12px}
  html[data-mise-stack="b"] [data-stack].is-fini .ot-carte-res{grid-row:1 / span 3}
  html[data-mise-stack="b"] [data-stack].is-fini .ot-resultat > :not(.ot-carte-res){grid-column:2}
}

/* C : la même étape, avec le récapitulatif des réponses à côté (cliquable pour revenir à une question) */
html[data-mise-stack="c"] [data-stack].ot-outil{grid-template-columns:minmax(0,1fr);align-content:start;min-block-size:min(80vh,760px)}
html[data-mise-stack="c"] [data-stack] .ot-recap{display:grid;gap:16px;align-content:start;padding:clamp(20px,2vw,28px);border-radius:var(--r-md);background:var(--white);box-shadow:0 0 0 1px var(--line)}
@media (min-width:1024px){
  html[data-mise-stack="c"] [data-stack].ot-outil{grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);column-gap:var(--gutter)}
  html[data-mise-stack="c"] [data-stack] .ot-pas,html[data-mise-stack="c"] [data-stack] .ot-questions,html[data-mise-stack="c"] [data-stack] .ot-resultat{grid-column:1}
  html[data-mise-stack="c"] [data-stack] .ot-recap{grid-column:2;grid-row:2 / span 3;position:sticky;top:110px}
}
.ot-recap__liste{list-style:none;padding:0;margin:0;display:grid}
.ot-recap__liste li{border-block-start:1px solid var(--line)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.ot-recap__liste button{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;inline-size:100%;padding:12px 0;border:0;background:none;color:var(--ink-2);font:inherit;text-align:start;cursor:pointer}
.ot-recap__liste .meta{grid-row:1 / span 2;color:inherit}
.ot-recap__q{font-size:var(--fs-sm);line-height:1.3}
.ot-recap__r{font-size:var(--fs-xs);color:var(--ink-2);opacity:.7}
.ot-recap__r.is-ok{opacity:1;color:var(--ink);font-weight:500}
.ot-recap__liste li.is-courante button{color:var(--ink)}
.ot-recap__liste li.is-courante .ot-recap__q{font-weight:600}
.ot-recap__liste li.is-courante .meta{color:var(--accent)}
.ot-recap__tete{padding:14px 16px;border-radius:var(--r-sm);background:var(--night);color:var(--on-night);font-weight:500;letter-spacing:-.015em}
/* Sous 1024 px, le récapitulatif ferait doublon avec la barre de progression : masqué */
@media (max-width:1023.98px){ html[data-mise-stack="c"] [data-stack] .ot-recap{display:none} }

/* ---------- Planificateur : mécanique commune à B et C (trois étapes) ---------- */
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-saisie{grid-template-columns:minmax(0,1fr)}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-champ label{font-size:var(--fs-h3);letter-spacing:-.04em;line-height:1.1}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-champ textarea{min-block-size:18rem}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-pas-bas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:8px}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-pas-bas .pill--accent{margin-inline-start:auto}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-pas-bas .pill{cursor:pointer;font:inherit}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-plan__modifier{display:inline-flex}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-plan__tete h2{font-size:var(--fs-h3)}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration][data-pas="1"] .ot-champ:nth-child(2),
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration][data-pas="2"] .ot-champ:nth-child(1),
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration]:not([data-pas="3"]) .ot-plan,
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration][data-pas="3"] .ot-saisie{display:none}
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-champ,:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-plan{animation:ot-entre var(--d-2) var(--ease-out) both}
.ot-detecte{font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.ot-detecte:empty{display:none}

/* B : barre d'étapes en haut, une étape à la fois en pleine largeur */
html[data-mise-migration="b"] [data-migration].ot-outil{max-inline-size:960px;margin-inline:auto}
html[data-mise-migration="b"] [data-migration] .ot-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.ot-etapes button{display:grid;gap:6px;inline-size:100%;padding:14px 0 0;border:0;border-block-start:3px solid var(--line);background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-sm);text-align:start;cursor:pointer;transition:color var(--d-1) ease,border-color var(--d-1) ease}
.ot-etapes button .meta{color:inherit}
.ot-etapes button.is-fait{border-color:var(--ink);color:var(--ink)}
.ot-etapes button[aria-current="step"]{border-color:var(--accent);color:var(--ink);font-weight:500}

/* C : l'étape à gauche, le suivi (étapes et compteurs en direct) à droite */
html[data-mise-migration="c"] [data-migration] .ot-suivi{display:grid;gap:18px;align-content:start;padding:clamp(20px,2vw,28px);border-radius:var(--r-md);background:var(--white);box-shadow:0 0 0 1px var(--line)}
@media (min-width:1024px){
  html[data-mise-migration="c"] [data-migration].ot-outil{grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);column-gap:var(--gutter)}
  html[data-mise-migration="c"] [data-migration] .ot-saisie,html[data-mise-migration="c"] [data-migration] .ot-plan{grid-column:1;grid-row:2}
  html[data-mise-migration="c"] [data-migration] .ot-suivi{grid-column:2;grid-row:2;position:sticky;top:110px}
}
.ot-suivi__etapes{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.ot-suivi__etapes button{display:flex;align-items:center;gap:12px;inline-size:100%;min-block-size:48px;padding:0 14px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-sm);text-align:start;cursor:pointer}
.ot-suivi__etapes button .meta{color:inherit}
.ot-suivi__etapes button.is-fait{color:var(--ink)}
.ot-suivi__etapes button[aria-current="step"]{background:var(--night);color:var(--on-night);font-weight:500}
.ot-suivi__etapes button[aria-current="step"] .meta{color:var(--accent)}
.ot-suivi__chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.ot-suivi__chiffres div{display:grid;gap:4px;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg)}
.ot-suivi__chiffres dt{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}
.ot-suivi__chiffres dd{margin:0;font-size:var(--fs-xl);font-weight:450;letter-spacing:-.03em}
/* Sous 1024 px, le suivi passe sous le titre de section, avant le champ */
@media (max-width:1023.98px){
  html[data-mise-migration="c"] [data-migration] .ot-intro{order:-2}
  html[data-mise-migration="c"] [data-migration] .ot-suivi{order:-1;padding:6px;gap:0}
  /* Version compacte : les trois étapes sur une ligne, sans titre ni compteurs */
  html[data-mise-migration="c"] [data-migration] .ot-suivi > .meta,html[data-mise-migration="c"] [data-migration] .ot-suivi__chiffres{display:none}
  html[data-mise-migration="c"] [data-migration] .ot-suivi__etapes{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  html[data-mise-migration="c"] [data-migration] .ot-suivi__etapes button{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-block-size:56px;padding:8px 10px;font-size:var(--fs-xs);line-height:1.2}
}

@media (prefers-reduced-motion: reduce){ html [data-stack] .ot-q.is-courante,html [data-stack].is-fini .ot-resultat,html [data-migration] .ot-champ,html [data-migration] .ot-plan{animation:none} .ot-pas__jauge i,.ot-etapes button,html [data-stack] .ot-choix__btn{transition:none} html [data-stack] .ot-choix__btn:hover{transform:none} }

/* Titre au-dessus des étapes (simulateurs), et légende des statuts du plan */
.ot-intro{display:grid;gap:10px}
.ot-intro h2{font-size:var(--fs-h2s);letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.ot-intro p{max-inline-size:44rem;line-height:1.5;white-space:pre-line}
[data-stack] .ot-intro,[data-migration] .ot-intro{grid-column:1 / -1}
.ot-legende{max-inline-size:62ch;font-size:var(--fs-sm);line-height:1.5}
/* En pas à pas, le numéro de l'étape est déjà dans la barre d'étapes : on ne le répète pas devant le titre du champ */
:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-champ label .meta{display:none}
/* Pas à pas : le numéro de question fait doublon avec « Question n sur 7 » ; « Question suivante » reste grisé tant qu'on n'a pas répondu */
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-q legend .meta{display:none}
.ot-q:not(:has([aria-pressed="true"])) .ot-q__suivante{opacity:.4;pointer-events:none}
/* Écrans tactiles : pas de clavier, donc ni rappel des touches ni numéros de touche */
@media (hover:none){.ot-q__aide,:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix__btn .ot-choix__touche{display:none} :is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-choix__btn{align-content:center;min-block-size:64px}}

/* Le formulaire porte la classe .lead, qui donne aussi le grand corps du chapeau du hero (base.css) : on revient au corps courant */
form.lead{font-size:var(--fs-base);line-height:1.5;letter-spacing:normal}
/* Champs du formulaire plus bas : ligne serrée sous le libellé */
.lead__champ{gap:2px}
.lead__champ input{padding:2px 0 5px;line-height:1.3}

/* Simulateurs B et C : hiérarchie titre de section (--fs-h2s) > question ou étape (--fs-h3), espacements resserrés */
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack].ot-outil,:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration].ot-outil{row-gap:clamp(24px,2.6vw,36px)}
:is(html[data-mise-stack="b"],html[data-mise-stack="c"]) [data-stack] .ot-intro,:is(html[data-mise-migration="b"],html[data-mise-migration="c"]) [data-migration] .ot-intro{margin-block-end:clamp(0px,.3vw,4px)}
html[data-mise-stack="b"] [data-stack].ot-outil,html[data-mise-migration="b"] [data-migration].ot-outil{max-inline-size:1080px}

/* ==================================================================
   Quel CMS choisir (12 nov. 2026, retours de Sacha) : résultat ouvert, puis le guide sous l'outil
================================================================== */
.ot-res__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-block-start:6px}
/* Espacements : l'outil, puis la méthode tout près (le résultat fait déjà office de fin de section) */
[data-stack].ot-outil{padding-block-end:clamp(56px,6vw,96px)}
html[data-mise-stack="c"] [data-stack].ot-outil.is-fini{min-block-size:0}
.ot-guide h2{font-size:var(--fs-h2s);letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.ot-guide__methode{display:grid;gap:clamp(20px,2.4vw,32px);align-items:start;padding-block:0 clamp(64px,8vw,120px)}
@media (min-width:1024px){ .ot-guide__methode{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter)} }
.ot-guide__texte{max-inline-size:44rem;font-size:var(--fs-lg);line-height:1.5;color:var(--ink-2);white-space:pre-line;text-wrap:pretty}
.ot-guide__tete{display:grid;gap:12px}
.ot-guide__tete p{max-inline-size:40rem;font-size:var(--fs-md)}

/* Comparatif en section sombre */
.ot-sombre__in{display:grid;gap:clamp(32px,4vw,56px);padding-block:clamp(64px,8vw,128px)}
.ot-sombre h2{font-size:var(--fs-h2s);letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.ot-sombre .ot-guide__tete p{color:var(--on-night-2)}

/* Comparatif : lignes en grille (cinq colonnes égales et aérées, 12 nov. 2026), une carte par plateforme sur mobile.
   Les rôles ARIA posés dans le HTML gardent la lecture en tableau malgré le display modifié.
   Au survol d'une ligne, le volet descend comme sur les FAQ (faq.js, attribut data-volet). */
.ot-comparatif table,.ot-comparatif thead,.ot-comparatif tbody{display:block}
.ot-comparatif table{font-size:var(--fs-sm);line-height:1.45}
.ot-comparatif tr{display:grid;grid-template-columns:minmax(0,.8fr) repeat(4,minmax(0,1fr));column-gap:clamp(28px,3.6vw,64px);align-items:start}
.ot-comparatif tbody tr{position:relative;padding-block:24px;border-block-start:1px solid var(--line-night)}
.ot-comparatif tbody tr:last-child{border-block-end:1px solid var(--line-night)}
.ot-comparatif th,.ot-comparatif td{display:block;padding:0;text-align:start}
.ot-comparatif thead th{padding-block-end:14px;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-2)}
.ot-comparatif tbody th{font-size:var(--fs-lg);font-weight:450;letter-spacing:-.025em;line-height:1.2}
.ot-comparatif tbody th a{color:var(--on-night);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;transition:text-decoration-color var(--d-1) ease}
@media (hover:hover) and (pointer:fine){ .ot-comparatif tbody th a:hover{text-decoration-color:currentColor} }
.ot-comparatif td{color:var(--on-night-2);text-wrap:pretty}
.ot-comparatif td:last-child{color:var(--on-night)}
.ot-comparatif tbody tr .volet{inset-inline:calc(-1 * clamp(14px,1.4vw,22px))}
@media (max-width:899.98px){
  .ot-comparatif thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .ot-comparatif tr{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .ot-comparatif tbody tr{padding-block:22px}
  .ot-comparatif tbody th{margin-block-end:4px}
  .ot-comparatif td{display:grid;gap:2px}
  .ot-comparatif td::before{content:attr(data-col);font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-2)}
}

/* Nos exemples : cartes projets avec mockup, comme sur l'accueil */
.ot-guide--exemples{display:grid;gap:clamp(32px,4vw,56px);padding-block-end:clamp(72px,8vw,128px)}
.ot-projets{display:grid;gap:clamp(40px,5vw,56px) var(--gutter)}
@media (min-width:900px){ .ot-projets{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ot-projets li{display:grid}
.ot-projet{display:grid;align-content:start;gap:12px}
.ot-projet__media{display:block;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--grey)}
.ot-projet__media img{inline-size:100%;block-size:100%;object-fit:cover;transition:scale var(--d-3) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .ot-projet:hover .ot-projet__media img{scale:1.04} }
.ot-projet__tete{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-block-start:6px}
.ot-projet__nom{font-size:var(--fs-xl);font-weight:450;letter-spacing:-.03em;line-height:1.15}
.ot-projet__tete .meta{color:var(--ink-2);white-space:nowrap}
.ot-projet__texte{max-inline-size:34em;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
.ot-projet:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-md)}
@media (prefers-reduced-motion:reduce){ .ot-projet__media img{transition:none} }

/* FAQ : mêmes règles que les pages de service (service.css), cette page ne charge pas cette feuille */
.faq__head{display:grid;gap:20px;margin-block-end:clamp(32px,4vw,64px);justify-items:start}
.q{border-block-start:1px solid var(--line)}
.q:last-child{border-block-end:1px solid var(--line)}
.q summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(18px,2vw,30px);cursor:pointer;list-style:none;font-size:var(--fs-h3l);font-weight:450;letter-spacing:-.04em;line-height:1.08}
.q summary::-webkit-details-marker{display:none}
.q summary svg{inline-size:clamp(20px,2vw,30px);block-size:clamp(20px,2vw,30px);flex:none;transition:rotate var(--d-2) var(--ease-out),color var(--d-1) ease}
.q[open] summary svg{rotate:45deg}
.q p{color:var(--ink-2);max-inline-size:36em;padding-block-end:clamp(22px,2.4vw,36px);font-size:var(--fs-md);line-height:1.5}
@media (hover:hover) and (pointer:fine){ .q summary:hover svg{color:var(--accent)} }
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion: no-preference){
    :root{interpolate-size:allow-keywords}
    .q::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
    .q[open]::details-content{block-size:auto}
  }
}
/* Sur cette page, la FAQ suit la hiérarchie du guide : titre de section en --fs-h2s, questions en --fs-h3 */
.ot-outil ~ #questions h2{font-size:var(--fs-h2s);letter-spacing:-.045em;line-height:1.05}
.ot-outil ~ #questions .q summary{font-size:var(--fs-h3);letter-spacing:-.035em}


/* ==================================================================
   Récapitulatif imprimable (12 nov. 2026) : affiché après le formulaire, « Télécharger en PDF » imprime la fiche seule
================================================================== */
.ot-recap-pdf{scroll-margin-top:120px;display:grid;gap:clamp(20px,2.4vw,32px);padding:clamp(24px,3vw,48px);border-radius:var(--r-md);background:var(--white);box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.ot-recap-pdf[hidden]{display:none}
.ot-recap-pdf:focus{outline:none}
.ot-recap-pdf__tete{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-2)}
.ot-recap-pdf__tete .meta{color:inherit}
.ot-recap-pdf h2{font-size:var(--fs-h3);letter-spacing:-.04em;line-height:1.1}
.ot-recap-pdf__chapo{color:var(--ink-2);font-size:var(--fs-md);max-inline-size:40rem}
.ot-recap-pdf__bloc{display:grid;gap:10px;padding-block-start:clamp(16px,2vw,24px);border-block-start:1px solid var(--line);break-inside:avoid}
.ot-recap-pdf__bloc h3{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ot-recap-pdf__verdict{font-size:var(--fs-xl);font-weight:450;letter-spacing:-.03em;line-height:1.2}
.ot-recap-pdf__scores{display:grid;gap:8px}
.ot-recap-pdf__scores li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) 3.4em;align-items:center;gap:14px;font-size:var(--fs-sm)}
.ot-recap-pdf__scores .num{text-align:end;color:var(--ink-2);font-family:var(--mono);font-size:var(--fs-xs)}
.ot-recap-pdf__barre{block-size:6px;border-radius:6px;background:var(--grey);overflow:hidden}
.ot-recap-pdf__barre i{display:block;block-size:100%;background:var(--ink)}
.ot-recap-pdf__liste{display:grid;gap:6px;padding-inline-start:1.1em;list-style:disc}
.ot-recap-pdf__reponses{display:grid;gap:8px;margin:0}
.ot-recap-pdf__reponses div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding-block:6px;border-block-end:1px solid var(--line);font-size:var(--fs-sm)}
.ot-recap-pdf__reponses div:last-child{border:0}
.ot-recap-pdf__reponses dt{color:var(--ink-2)}
.ot-recap-pdf__reponses dd{margin:0}
.ot-recap-pdf__actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:599.98px){ .ot-recap-pdf__scores li{grid-template-columns:minmax(0,1fr) 3.4em} .ot-recap-pdf__barre{grid-column:1 / -1;grid-row:2} .ot-recap-pdf__reponses div{grid-template-columns:minmax(0,1fr);gap:2px} }

/* Impression : seule la copie de la fiche (#impression) sort, en noir sur blanc, sans le bouton */
@media print{
  html.imprime,html.imprime body{background:#fff!important}
  html.imprime body > *:not(#impression){display:none!important}
  html.imprime #impression{display:grid!important;box-shadow:none;border-radius:0;padding:0;background:#fff;color:#000;font-size:11pt}
  html.imprime #impression .ot-recap-pdf__actions{display:none!important}
  html.imprime #impression .ot-recap-pdf__barre{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:16mm}
}

/* Plateforme écartée par une réponse : grisée, sans barre */
.ot-score.is-ecartee{opacity:.45}
.ot-score.is-ecartee .ot-score__pct{letter-spacing:.02em}