/* ─────────────────────────────────────────────────────────────
   CapFire — identité graphique (direction « Industry / acier »)
   Une seule feuille : jetons + composants. Aucune dépendance.
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root{
  /* Fonds et encre — thème sombre : fond bleu nuit dégradé, texte clair.
     --cf-on-accent reste toujours clair, quel que soit le thème : c'est la couleur de texte
     des éléments à fond plein acier (boutons, badges, puces d'étape...), jamais celle du fond
     de page — dissocier les deux évite qu'un texte devienne illisible sur son propre bouton
     si le thème de la page change indépendamment. */
  --cf-bg:#05070f;
  --cf-surface:#111834;
  --cf-ink:#eef1f7;
  --cf-line:rgba(238,241,247,.16);
  --cf-muted:rgba(238,241,247,.62);
  --cf-on-accent:#f4f6fa;

  /* Acier — la voix unique de la marque */
  --cf-steel:#5980a6;
  --cf-steel-100:#eef6ff;
  --cf-steel-200:#d6ebff;
  --cf-steel-300:#b5d9fd;
  --cf-steel-600:#597ea3;
  --cf-steel-700:#8fb3d6;
  --cf-steel-800:#2c455d;
  --cf-steel-900:#1d2d3d;

  /* Neutres */
  --cf-grey-300:rgba(238,241,247,.14);
  --cf-grey-400:rgba(238,241,247,.35);
  --cf-grey-600:rgba(238,241,247,.5);
  --cf-grey-700:rgba(238,241,247,.75);

  /* Codage des univers : deux pas d'acier + un neutre. --cf-u-finance pointe sur un bleu clair
     (plutôt que --cf-steel-800, trop sombre pour rester visible sur le fond nuit) — --cf-steel-800
     lui-même reste inchangé, encore utilisé ailleurs comme texte foncé sur puce claire. */
  --cf-u-finance:var(--cf-steel-300);
  --cf-u-immo:var(--cf-steel);
  --cf-u-savoir:var(--cf-grey-700);

  /* Typographie */
  --cf-head:"Barlow Condensed",system-ui,sans-serif;
  --cf-body:"Barlow",system-ui,sans-serif;

  /* Espacement (échelle 0.85×) */
  --cf-1:3.4px; --cf-2:6.8px; --cf-3:10.2px; --cf-4:13.6px; --cf-6:20.4px; --cf-8:27.2px;
}

*,*::before,*::after{box-sizing:border-box}
/* Fond bleu nuit dégradé : un spot lumineux ancré en haut de chaque page, qui s'estompe vers
   le bleu nuit uni en descendant — comme un halo de projecteur plutôt qu'une texture répétée. */
body{
  margin:0;color:var(--cf-ink);font-family:var(--cf-body);font-size:15px;line-height:1.55;
  background-color:var(--cf-bg);
  background-image:radial-gradient(ellipse 1100px 800px at 50% -120px, rgba(34,64,168,.55), rgba(5,7,15,0) 70%);
  background-repeat:no-repeat;
}
h1,h2,h3,h4,h5,h6{font-family:var(--cf-head);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 var(--cf-2)}
h1{font-size:40px} h2{font-size:28px} h3{font-size:25px} h4{font-size:20px} h5{font-size:16px}
h6{font-size:13px;letter-spacing:.08em;text-transform:uppercase}
p{margin:0 0 var(--cf-3)}
a{color:var(--cf-steel);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--cf-steel-700);text-decoration:underline}
img{display:block;max-width:100%}
figure{margin:0}
figcaption{font-size:11px;margin-top:var(--cf-1);color:var(--cf-muted);letter-spacing:.06em;text-transform:uppercase}
:focus{outline:none}
:focus-visible{outline:2px solid var(--cf-steel);outline-offset:2px}
::selection{background:rgba(89,128,166,.3)}

.cf-muted{color:var(--cf-muted)}
.cf-num{font-variant-numeric:tabular-nums}
.cf-kicker{font-family:var(--cf-body);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cf-steel)}
.cf-wrap{max-width:1180px;margin:0 auto;padding:0 var(--cf-6)}

/* ── Cadre blueprint : tout objet porte un filet et 4 repères « + » ── */
.cf-bp{position:relative;border:1px solid var(--cf-line);border-radius:0}
.cf-bp>.cf-corner{position:absolute;width:11px;height:11px;color:rgba(238,241,247,.55)}
.cf-bp>.cf-corner::before,.cf-bp>.cf-corner::after{content:"";position:absolute;background:currentColor}
.cf-bp>.cf-corner::before{left:5px;top:0;width:1px;height:100%}
.cf-bp>.cf-corner::after{top:5px;left:0;width:100%;height:1px}
.cf-bp>.tl{top:-6px;left:-6px} .cf-bp>.tr{top:-6px;right:-6px}
.cf-bp>.bl{bottom:-6px;left:-6px} .cf-bp>.br{bottom:-6px;right:-6px}

/* ── Marque ── */
.cf-mark{width:28px;height:28px;background:var(--cf-steel);display:grid;place-items:center;flex:none}
.cf-mark svg{width:17px;height:17px}
.cf-mark--lg{width:46px;height:46px} .cf-mark--lg svg{width:27px;height:27px}
.cf-mark-img{width:28px;height:28px;border-radius:7px;flex:none}
.cf-brand{display:flex;align-items:center;gap:var(--cf-2);font-family:var(--cf-head);font-weight:600;font-size:19px;color:var(--cf-ink)}

/* ── Navigation ── */
.cf-nav{display:flex;align-items:center;gap:var(--cf-6);padding:var(--cf-3) var(--cf-6);border-bottom:1px solid var(--cf-line);background:var(--cf-bg)}
.cf-nav-links{display:flex;gap:var(--cf-6);align-items:center}
.cf-nav-links a{color:inherit;font-size:14px;padding-bottom:2px;border-bottom:2px solid transparent;white-space:nowrap}
.cf-nav-links a:hover{color:var(--cf-steel);text-decoration:none}
.cf-nav-links a[aria-current=page]{color:var(--cf-steel);border-bottom-color:var(--cf-steel)}
.cf-spacer{flex:1}
.cf-only-sm{display:none}

/* ── Boutons ── */
.cf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font-family:var(--cf-head);font-weight:600;font-size:14px;line-height:1.2;color:var(--cf-ink);
  background:transparent;border:1px solid var(--cf-line);border-radius:0;padding:var(--cf-2) 12px;text-decoration:none;white-space:nowrap}
.cf-btn:hover{background:rgba(238,241,247,.07);color:var(--cf-ink);text-decoration:none}
.cf-btn:active{background:rgba(238,241,247,.14)}
.cf-btn--primary{background:var(--cf-steel);border-color:var(--cf-steel);color:var(--cf-on-accent)}
.cf-btn--primary:hover{background:var(--cf-steel-600);border-color:var(--cf-steel-600);color:var(--cf-on-accent)}
.cf-btn--primary:active{background:var(--cf-steel-700)}
.cf-btn--ghost{border-color:transparent;color:var(--cf-steel);padding-inline:0}
.cf-btn--ghost:hover{background:rgba(89,128,166,.1)}
.cf-btn--icon{width:36px;height:36px;padding:0}
.cf-btn--block{width:100%;margin-top:var(--cf-2)}
.cf-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Champs ── */
.cf-input{width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;color:var(--cf-ink);
  background:var(--cf-surface);border:1px solid var(--cf-line);border-radius:0;caret-color:var(--cf-steel)}
.cf-input:hover{border-color:rgba(238,241,247,.45)}
.cf-input:focus-visible{border-color:var(--cf-steel);outline-offset:0}
.cf-search{position:relative}
.cf-search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--cf-muted)}
.cf-search .cf-input{padding-left:30px}

/* ── Segmenté ── */
.cf-seg{display:inline-flex;border:1px solid var(--cf-line)}
.cf-seg--block{display:flex;width:100%}
.cf-seg-opt{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;
  font-size:13px;cursor:pointer;background:transparent;color:var(--cf-muted);border:0;font-family:inherit}
.cf-seg-opt+.cf-seg-opt{border-left:1px solid var(--cf-line)}
.cf-seg--block .cf-seg-opt{flex:1}
.cf-seg-opt:hover{background:rgba(238,241,247,.07)}
.cf-seg-opt[aria-selected=true]{background:var(--cf-steel);color:var(--cf-on-accent)}

/* ── Rail d'univers ── */
.cf-rail{border-top:1px solid var(--cf-line)}
.cf-rail-item{display:flex;width:100%;align-items:center;gap:var(--cf-2);padding:9px 10px;
  border:0;border-bottom:1px solid var(--cf-line);background:transparent;cursor:pointer;
  color:var(--cf-muted);font-family:var(--cf-head);font-weight:600;font-size:15px;text-align:left}
.cf-rail-item:hover{background:rgba(238,241,247,.05)}
.cf-rail-item[aria-selected=true]{background:var(--cf-steel);color:var(--cf-on-accent)}
.cf-rail-item .cf-dot{width:10px;height:10px;flex:none}
.cf-rail-item .cf-count{font-family:var(--cf-body);font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
.cf-rail-item span:nth-child(2){flex:1}

/* ── Grille modulaire des simulateurs ── */
.cf-group+.cf-group{margin-top:var(--cf-8)}
.cf-group-head{display:flex;align-items:center;gap:var(--cf-3);padding-bottom:6px;margin-bottom:var(--cf-4);border-bottom:1px solid var(--cf-line)}
.cf-group-head .cf-dot{width:12px;height:12px;flex:none}
.cf-group-head h6{margin:0}
.cf-group-note{margin-left:auto;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cf-muted)}
.cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--cf-bg)}
.cf-cell{display:flex;flex-direction:column;gap:7px;min-height:120px;padding:var(--cf-4);background:var(--cf-bg);
  border-right:1px solid var(--cf-line);border-bottom:1px solid var(--cf-line);
  text-decoration:none;color:inherit}
.cf-cell:hover{background:rgba(89,128,166,.14);text-decoration:none;color:inherit}
.cf-cell-top{display:flex;align-items:center;gap:9px}
.cf-cell-top svg{width:17px;height:17px;flex:none}
.cf-cell-title{font-family:var(--cf-head);font-weight:600;font-size:17px;line-height:1.15}
.cf-cell-body{margin:0;font-size:13px;color:var(--cf-muted);flex:1}
.cf-cell-out{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cf-steel-700)}
.cf-cell-out svg{width:12px;height:12px}
.cf-u-finance{color:var(--cf-u-finance)} .cf-u-immo{color:var(--cf-u-immo)} .cf-u-savoir{color:var(--cf-u-savoir)}
.cf-bg-finance{background:var(--cf-u-finance)} .cf-bg-immo{background:var(--cf-u-immo)} .cf-bg-savoir{background:var(--cf-u-savoir)}

/* Filtre : le conteneur porte data-cat, les groupes hors sélection disparaissent */
.cf-cats[data-cat="finance"] .cf-group:not([data-cat="finance"]),
.cf-cats[data-cat="immobilier"] .cf-group:not([data-cat="immobilier"]),
.cf-cats[data-cat="savoir"] .cf-group:not([data-cat="savoir"]){display:none}

/* ── Cartes ── */
.cf-card{display:flex;flex-direction:column;gap:var(--cf-2);padding:var(--cf-4);background:transparent;border:1px solid var(--cf-line)}
.cf-card--row{flex-direction:row;align-items:center;gap:var(--cf-4)}
.cf-card-title{font-family:var(--cf-head);font-weight:600;font-size:17px;line-height:1.2}
.cf-card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--cf-muted)}

/* ── Étiquettes ── */
.cf-tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:0}
.cf-tag--outline{border:1px solid var(--cf-steel);color:var(--cf-steel)}
.cf-tag--fill{background:var(--cf-steel-100);color:var(--cf-steel-800)}

/* ── Tableaux ── */
.cf-table{width:100%;border-collapse:collapse;font-size:14px}
.cf-table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cf-muted);
  padding:var(--cf-2);border-bottom:1px solid var(--cf-line);font-weight:500}
.cf-table td{padding:var(--cf-2);border-bottom:1px solid rgba(238,241,247,.08);vertical-align:top}
.cf-table tbody tr:hover{background:rgba(238,241,247,.04)}
.cf-step{display:inline-flex;align-items:center;gap:8px;font-family:var(--cf-head);font-weight:600;font-size:15px}
.cf-step i{width:19px;height:19px;background:var(--cf-steel);color:var(--cf-on-accent);display:grid;place-items:center;font-size:12px;font-style:normal;flex:none}
.cf-step--end i{background:var(--cf-steel-900)}

/* ── Curseur ── */
.cf-slider{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;display:block;cursor:grab;accent-color:var(--cf-steel)}
.cf-slider::-webkit-slider-runnable-track{height:6px;background:var(--cf-grey-300);border-radius:0}
.cf-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:22px;margin-top:-8px;border-radius:0;
  background:var(--cf-steel);border:1px solid var(--cf-steel-700)}
.cf-slider::-moz-range-track{height:6px;background:var(--cf-grey-300)}
.cf-slider::-moz-range-thumb{width:14px;height:22px;border-radius:0;background:var(--cf-steel);border:1px solid var(--cf-steel-700)}
.cf-scale{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.06em;color:var(--cf-muted)}

/* ── Chiffres clés ── */
.cf-big{font-family:var(--cf-head);font-weight:600;font-size:76px;line-height:.85;color:var(--cf-steel-700);font-variant-numeric:tabular-nums}
.cf-big-unit{font-family:var(--cf-head);font-weight:600;font-size:24px;color:var(--cf-steel-700)}
.cf-stat{font-family:var(--cf-head);font-weight:600;font-size:20px;font-variant-numeric:tabular-nums}
.cf-stat-label{font-size:11.5px;color:var(--cf-muted)}
.cf-bar{height:8px;background:var(--cf-grey-300)}
.cf-bar>span{display:block;height:8px;background:var(--cf-steel)}

/* ── Signaux du diagnostic ── */
.cf-signal{display:flex;align-items:center;gap:var(--cf-2);padding:8px 0;border-bottom:1px solid var(--cf-line);font-size:13px}
.cf-signal:last-child{border-bottom:0}
.cf-signal span:nth-child(2){flex:1}
.cf-signal i{width:16px;height:16px;display:grid;place-items:center;flex:none;font-style:normal}
.cf-signal i svg{width:10px;height:10px}
.cf-ok i{background:var(--cf-steel);color:var(--cf-on-accent)}
.cf-warn i{border:1px solid var(--cf-muted);color:var(--cf-muted)}
.cf-signal .cf-ref{font-size:11px;color:var(--cf-muted)}

/* ── Barre d'onglets mobile ── */
.cf-tabbar{display:none}

/* ── Barre d'onglets mobile (sous 900px) ── */
.cf-mtabbar,.cf-msheet{display:none}

/* ── Intermédiaire (tablette, fenêtre étroite) : on garde la structure ── */
@media (max-width:1180px){
  .cf-nav-links{gap:var(--cf-4)}
  .cf-nav-links a{font-size:13px}
  .cf-cols{grid-template-columns:180px 1fr!important}
  .cf-grid{grid-template-columns:repeat(2,1fr)}
  .cf-group-note{display:none}
}

/* ── Mobile : la structure desktop se replie sur le motif de la maquette ── */
@media (max-width:900px){
  h1{font-size:27px} h2{font-size:22px}
  .cf-wrap{padding:0 var(--cf-4)}
  .cf-nav{gap:var(--cf-3);padding:var(--cf-3) var(--cf-4)}
  .cf-nav-links,.cf-nav .cf-search,.cf-hide-sm,#mobile-menu-btn{display:none}
  /* Barre d'onglets mobile : fixée en bas, icône + libellé, onglet actif souligné en acier. */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .cf-mtabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(5,7,15,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--cf-line);padding:0 4px env(safe-area-inset-bottom)}
  .cf-mtab{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    height:62px;padding:6px 2px 4px;background:none;border:none;color:var(--cf-muted);font-family:var(--cf-body);
    font-size:11px;font-weight:500;letter-spacing:.01em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .cf-mtab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .cf-mtab svg{width:23px;height:23px;transition:transform .2s}
  .cf-mtab::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:2px;background:var(--cf-steel);transform:scaleX(0);transition:transform .25s}
  .cf-mtab:hover{color:var(--cf-ink);text-decoration:none}
  .cf-mtab.is-active{color:var(--cf-steel-300)}
  .cf-mtab.is-active::before{transform:scaleX(1)}
  .cf-mtab.is-active svg{transform:translateY(-1px)}
  .cf-mtab:active svg{transform:scale(.9)}
  /* Panneau « Plus » : feuille qui monte depuis le bas, au-dessus de la barre d'onglets. */
  .cf-msheet{display:block;position:fixed;inset:0;z-index:39;pointer-events:none}
  .cf-msheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
  .cf-msheet-panel{position:absolute;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));max-height:calc(100vh - 140px);overflow-y:auto;
    background:var(--cf-surface);border-top:1px solid var(--cf-line);padding:8px 16px 18px;
    transform:translateY(calc(100% + 80px));transition:transform .32s cubic-bezier(.16,.84,.3,1)}
  .cf-msheet.is-open{pointer-events:auto}
  .cf-msheet.is-open .cf-msheet-backdrop{opacity:1}
  .cf-msheet.is-open .cf-msheet-panel{transform:none}
  .cf-msheet-grip{width:40px;height:4px;background:var(--cf-grey-400);margin:2px auto 8px}
  .cf-msheet-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cf-steel-700);margin:14px 0 4px}
  .cf-msheet-link{display:flex;align-items:center;gap:12px;padding:12px 4px;font-size:15px;color:var(--cf-ink);border-bottom:1px solid var(--cf-line);text-decoration:none}
  .cf-msheet-link:hover{color:var(--cf-ink);text-decoration:none;background:rgba(238,241,247,.04)}
  .cf-msheet-link svg{width:18px;height:18px;color:var(--cf-muted);flex:none}
  .cf-msheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  .cf-msheet-actions .cf-btn{padding:12px;font-size:15px}
  .cf-only-sm{display:block}
  .cf-cols{display:block!important}
  .cf-rail{display:flex;overflow-x:auto;border-top:0;gap:0;border:1px solid var(--cf-line);margin-bottom:var(--cf-6)}
  .cf-rail-item{border-bottom:0;white-space:nowrap;width:auto;font-size:13px;padding:8px 12px}
  .cf-rail-item+.cf-rail-item{border-left:1px solid var(--cf-line)}
  .cf-rail-item .cf-dot{display:none}
  .cf-grid{grid-template-columns:1fr;gap:0;background:transparent}
  /* Ligne mobile : titre + libellé de résultat en sous-titre + flèche à droite */
  .cf-cell{position:relative;display:grid;grid-template-columns:1fr;align-items:center;row-gap:1px;
    min-height:0;padding:12px 22px 12px 0;border-right:0;border-bottom:1px solid var(--cf-line)}
  .cf-cell-body{display:none}
  .cf-cell-out{font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--cf-muted);padding-left:26px}
  .cf-cell-out svg{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--cf-steel)}
  .cf-big{font-size:60px} .cf-big-unit{font-size:20px}
  .cf-card--row{gap:var(--cf-3);padding:var(--cf-3)}
  .cf-table thead{display:none}
  .cf-table td{display:block;border-bottom:0;padding:2px var(--cf-2)}
  .cf-table tbody tr{display:block;padding:var(--cf-3) 0;border-bottom:1px solid var(--cf-line)}
  .cf-tabbar{position:sticky;bottom:0;display:flex;background:var(--cf-bg);border-top:1px solid var(--cf-line);padding:var(--cf-2) var(--cf-3) var(--cf-4)}
  .cf-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--cf-grey-600);font-size:10px;letter-spacing:.04em;text-transform:uppercase}
  .cf-tabbar a[aria-current=page]{color:var(--cf-steel)}
  .cf-tabbar svg{width:20px;height:20px}
}

/* ─────────────────────────────────────────────────────────────
   Dynamique : transitions et micro-interactions.
   Rien qui casse la grammaire du blueprint (pas d'ombre portée, pas
   d'arrondi, pas de carte flottante) — juste du mouvement sur ce qui
   change déjà d'état : couleur, position du curseur, apparition.
   ───────────────────────────────────────────────────────────── */
a,.cf-btn,.cf-input,.cf-seg-opt,.cf-rail-item,.cf-cell,.cf-tag,.cf-card,
.cf-nav-links a,.cf-tabbar a,.cf-bar>span,.cf-sim-back{
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease,transform .12s ease,width .5s ease;
}
/* Pseudo-éléments préfixés navigateur : jamais mélangés à une liste de sélecteurs normaux —
   un seul sélecteur non reconnu dans une liste invalide la règle entière (WebKit et Gecko
   ignorent chacun le pseudo-élément de l'autre, ce qui aurait annulé toutes les transitions
   ci-dessus si elles avaient partagé la même règle). */
.cf-slider::-webkit-slider-thumb{ transition:transform .12s ease; }
.cf-slider::-moz-range-thumb{ transition:transform .12s ease; }
.cf-btn:active,.cf-rail-item:active,.cf-cell:active,.cf-seg-opt:active{transform:scale(.97)}
.cf-btn--primary:hover{transform:translateY(-1px)}
.cf-mark svg,.cf-cell-out svg{transition:transform .18s ease}
.cf-cell:hover .cf-cell-out svg{transform:translateX(3px)}

/* Un écran qui prend la vedette (SPA à base de .screen.active, ou tout conteneur qui
   apparaît) glisse légèrement au lieu d'apparaître d'un coup. Redémarre à chaque fois
   que l'élément repasse de display:none à display:block/flex. */
.screen.active,.cf-fade-in{animation:cfFadeIn .4s cubic-bezier(.16,.8,.3,1) both}
@keyframes cfFadeIn{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}}

/* Chiffres qui changent en direct (curseurs, recalculs) : la valeur ne saute plus, elle glisse. */
.cf-num{transition:color .2s ease}

.cf-sim-back:hover{color:var(--accent)}

/* Simulation "lancée" à la demande (tous les simulateurs) : le bouton déclenche un calcul, avec
   un temps de latence volontaire et une animation de tracé pour donner l'impression d'un calcul
   complexe. Le résultat précédent se grise dès que le formulaire change, jusqu'à la relance.
   Voir launchSim() / markSimStale() / animateChartLinesDrawIn() dans js/app.js. */
.cf-spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--cf-line); border-top-color:var(--accent);
  animation:cfSpin .8s linear infinite;
}
@keyframes cfSpin{ to{ transform:rotate(360deg); } }

.sim-computing{ opacity:0.35; filter:grayscale(0.4); pointer-events:none; transition:opacity .2s ease; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}