/* ═══════════════════════════════════════════════════════════════
   AcquiScan — site vitrine
   Charte : Web_presentation/DESIGN.md (référence « Huly ») — à respecter pour toute modification.
   - Deux couleurs de marque seulement : Electric Iris #5683da (action) et Ember Pulse #ff8964 (ponctuation).
   - Inter pour tout le texte fonctionnel ; Sora (substitut d'Esbuild) pour les titres ≥ 28 px uniquement.
   - Boutons et étiquettes en pilule (9999px), cartes 12px, panneaux 30px, champs 4px.
   - Faisceau « aurora » (iris → corail → blanc) une seule fois par page : le premier écran.
   - Clair par défaut ; mode sombre sur demande (bouton de la barre de navigation).
   Polices hébergées sur le site (aucune ressource externe, aucun traceur).
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/fonts/sora.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  /* Jetons de la charte */
  --color-obsidian-canvas: #303236;
  --color-void: #090a0c;
  --color-charcoal-card: #111111;
  --color-slate-edge: #4a4b50;
  --color-iron-veil: #6b6c6d;
  --color-smoke: #95979e;
  --color-ash: #a9a9aa;
  --color-frost: #d1d1d1;
  --color-linen: #e5e5e7;
  --color-snow: #ffffff;
  --color-electric-iris: #5683da;
  --color-ember-pulse: #ff8964;
  --color-molasses: #5a250a;

  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;

  --radius-tags: 9999px; --radius-cards: 12px; --radius-inputs: 4px; --radius-panels: 30px; --radius-buttons: 9999px;
  --shadow-sm: rgba(0, 0, 0, 0.15) 0px 4px 6px 0px;
  --shadow-md: rgba(0, 0, 0, 0.35) 0px 4px 16px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.5) 0px 6px 25px 0px;
  --page: 1200px; --section-gap: 96px; --card-padding: 24px; --element-gap: 12px;
  --ease: cubic-bezier(.28, .11, .32, 1);

  /* Rôles — mode clair (par défaut) */
  --fond: var(--color-snow);
  --fond-2: #f6f6f6;
  --surface: var(--color-snow);
  --texte: #050506;
  --texte-2: var(--color-obsidian-canvas);
  --texte-3: var(--color-iron-veil);
  --bord: var(--color-linen);
  --bord-2: var(--color-frost);
  --icone: var(--color-smoke);
  --iris: var(--color-electric-iris);
  --ember: var(--color-ember-pulse);
  --iris-doux: rgba(86, 131, 218, .12);
  /* Electric Iris assombri pour les petits textes sur fond teinté (contraste AA 4,5:1 en clair). */
  --iris-texte: color-mix(in srgb, var(--color-electric-iris) 72%, #000);
  /* Iris foncé pour boutons pleins (accessibilité) : texte blanc à 4,80:1 (survol 5,65:1), contre 3,71:1 sur #5683da.
     Réservé au fond des boutons pleins bleus ; partout ailleurs, Electric Iris reste #5683da. Identique en sombre. */
  --iris-fonce: #4a71bb;
  --iris-fonce-survol: #4366aa;
  /* Liens dans le texte courant : iris foncé #3e5e9d (6,38:1 sur blanc), soulignés. En sombre : --iris-texte-sombre. */
  --lien-texte: var(--iris-texte);
  --ember-doux: rgba(255, 137, 100, .14);
  --ombre-carte: var(--shadow-sm);
  color-scheme: light;
}
/* Mode sombre : seulement sur demande. Élévation par bordures, pas par ombres. */
:root[data-theme="dark"] {
  --fond: var(--color-void);
  --fond-2: var(--color-obsidian-canvas);
  --surface: var(--color-charcoal-card);
  --texte: var(--color-snow);
  --texte-2: var(--color-ash);
  --texte-3: var(--color-smoke);
  --bord: var(--color-slate-edge);
  --bord-2: var(--color-slate-edge);
  --icone: var(--color-smoke);
  --ombre-carte: none;
  --iris-texte: var(--color-electric-iris);
  /* Iris éclairci pour les liens du texte en sombre : #89a8e5, 8,30:1 sur #090a0c, 7,91:1 sur #111111, 5,38:1 sur #303236
     (#5683da seul tombe à 3,46:1 sur #303236). */
  --iris-texte-sombre: #89a8e5;
  --lien-texte: var(--iris-texte-sombre);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte); font-family: var(--font-inter);
  font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--iris); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Liens dans le texte courant (paragraphes, listes et tableaux du contenu) : iris foncé, soulignés pour ne pas
   dépendre de la seule couleur. Boutons, navigation, pied de page et liens stylés (avec une classe) ne sont pas concernés. */
:where(main p, main li, main td) a:not([class]) { color: var(--lien-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(main p, main li, main td) a:not([class]):hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fond), 0 0 0 6px rgba(86, 131, 218, .55); border-radius: 6px; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-cards); }

/* ── Navigation : transparente sur le premier écran, floutée au défilement ── */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.defile { background: color-mix(in srgb, var(--fond) 80%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom-color: var(--bord); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; color: var(--texte); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav-liens { display: flex; align-items: center; gap: 4px; }
.nav-liens a { white-space: nowrap; color: var(--texte-2); font-size: 14px; padding: 8px 12px; border-radius: var(--radius-tags); transition: color .2s, background .2s; }
.nav-liens a:hover, .nav-liens a[aria-current] { color: var(--texte); background: var(--fond-2); text-decoration: none; }
.nav-cta { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; background: none; border: 0; color: var(--texte); padding: 8px; cursor: pointer; }
@media (max-width: 1240px) {
  .nav-liens { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 10px 16px 18px; background: var(--fond); border-bottom: 1px solid var(--bord); }
  .nav.ouvert .nav-liens { display: flex; }
  .nav.ouvert { background: var(--fond); }
  .nav-liens a { font-size: 16px; padding: 12px; }
  .menu-btn { display: block; }
  .nav-cta .btn-ghost { display: none; }
}
@media (max-width: 520px) {
  .nav-cta .btn-bleu { display: none; } /* l'appel à l'action reste dans le premier écran et le menu */
  .wrap { padding: 0 16px; }
}
.nav-liens .lien-inscription { display: none; }
@media (max-width: 520px) { .nav-liens .lien-inscription { display: block; color: var(--iris); font-weight: 500; } }

/* ── Interrupteur clair / sombre ── */
.theme-btn { position: relative; flex-shrink: 0; width: 50px; height: 28px; padding: 0; border-radius: var(--radius-tags); border: 1px solid var(--bord-2); background: var(--fond-2); cursor: pointer; transition: background .3s var(--ease), border-color .3s; }
.theme-btn:hover { border-color: var(--iris); }
.theme-pouce { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--color-snow); color: var(--ember); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), background .35s, color .35s; }
.theme-pouce svg { grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--ease); }
.theme-pouce .ic-lune { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-pouce { transform: translateX(22px); background: var(--color-charcoal-card); color: var(--color-snow); box-shadow: none; }
:root[data-theme="dark"] .theme-pouce .ic-soleil { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme-pouce .ic-lune { opacity: 1; transform: none; }

/* ── Langue FR / EN : simple lien vers la page équivalente, même gabarit que l'interrupteur de thème ── */
.langue-btn { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 2px; border-radius: var(--radius-tags); border: 1px solid var(--bord-2); background: var(--fond-2); font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1; color: var(--texte-2); transition: border-color .3s; }
.langue-btn:hover { text-decoration: none; border-color: var(--iris); color: var(--texte); }
.langue-btn span { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: var(--radius-tags); }
.langue-btn .langue-actuelle { background: var(--color-snow); color: var(--color-void); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .langue-btn .langue-actuelle { background: var(--color-charcoal-card); color: var(--color-snow); box-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Version anglaise : légende des aperçus (le logiciel est en français) et bandeau des pages légales traduites */
.legende-apercu { display: table; margin: 14px auto 0; padding: 4px 12px; border-radius: var(--radius-tags); font-size: 12px; color: var(--texte-2); text-align: center; background: color-mix(in srgb, var(--fond) 88%, transparent); }
.legal .avis-traduction { margin: 0 0 28px; padding: 16px 20px; border-radius: var(--radius-cards); background: var(--ember-doux); color: var(--texte); font-size: 14px; }
.legal .avis-traduction a { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }

/* ── Boutons (pilules) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-buttons);
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, box-shadow .25s, border-color .2s, color .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-bleu { background: var(--iris-fonce); color: var(--color-snow); }
.btn-bleu:hover { background: var(--iris-fonce-survol); box-shadow: 0 0 0 6px rgba(86, 131, 218, .18), 0 10px 30px rgba(86, 131, 218, .45); }
/* Contour bien lisible sur fond clair comme sur fond sombre (et par-dessus le faisceau). */
.btn-ghost { background: color-mix(in srgb, var(--fond) 70%, transparent); color: var(--texte); border-color: color-mix(in srgb, var(--texte) 38%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.btn-blanc { background: var(--color-snow); color: var(--color-void); }
.btn-blanc:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); }
.btn-sm { padding: 10px 20px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* ── Typographie ── */
h1, h2 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--texte); }
h1 { font-size: clamp(46px, 7.2vw, 80px); line-height: .95; letter-spacing: -0.05em; }
h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1; letter-spacing: -0.04em; }
h3 { font-family: var(--font-inter); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin: 0; color: var(--texte); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 4px 12px; border-radius: var(--radius-tags);
  font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--iris-texte); background: var(--iris-doux);
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.doux { color: var(--texte-3); }
.lead { font-size: 18px; line-height: 1.5; letter-spacing: -0.02em; color: var(--texte-2); max-width: 640px; margin: 24px 0 0; }
.centre { text-align: center; }
.centre .lead, .centre .heros-actions { margin-left: auto; margin-right: auto; justify-content: center; }
.petite-note { font-size: 13px; color: var(--texte-3); margin: 0; }

/* ── Sections : bandes alternées, 96px ── */
section { padding: var(--section-gap) 0; }
.gris { background: var(--fond-2); }
.tete-section { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.tete-section .lead { margin-left: auto; margin-right: auto; }
.etroit { max-width: 760px; margin: 0 auto; }
/* Performance : les sections sous le premier écran ne sont mises en page qu'à l'approche de l'écran
   (premier affichage bien plus léger, surtout les émojis et flèches servis par les polices du système).
   « auto » mémorise la hauteur réelle une fois la section affichée ; les estimations suivent les hauteurs mesurées.
   La classe « differe » est posée par le générateur, jamais au-dessus d'une cible d'ancre (catégories du blog). */
.differe { content-visibility: auto; contain-intrinsic-size: auto 650px; }
footer { content-visibility: auto; contain-intrinsic-size: auto 415px; }
@media (max-width: 900px) {
  .differe { contain-intrinsic-size: auto 1100px; }
  footer { contain-intrinsic-size: auto 805px; }
}

/* ── Premier écran : faisceau « aurora » ── */
/* Le premier écran passe sous la barre de navigation transparente (le faisceau part du haut de la page). */
.heros { position: relative; margin-top: -64px; padding: 136px 0 104px; overflow: hidden; isolation: isolate; }
.heros .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aurora::before { /* le faisceau vertical */
  content: ''; position: absolute; top: -25%; left: 64%; width: 16%; height: 135%;
  background: linear-gradient(180deg, rgba(86, 131, 218, 0) 0%, rgba(86, 131, 218, .85) 30%, rgba(255, 137, 100, .85) 64%, rgba(255, 255, 255, .95) 86%, rgba(255, 255, 255, 0) 100%);
  filter: blur(42px); transform: rotate(10deg); opacity: .7;
}
.aurora .coeur { /* fin trait lumineux au centre du faisceau */
  position: absolute; top: -10%; left: calc(64% + 7%); width: 3px; height: 110%; transform: rotate(10deg); transform-origin: top;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .9) 60%, rgba(255, 220, 190, .9) 80%, transparent);
  filter: blur(2px); opacity: 0;
}
:root[data-theme="dark"] .aurora .coeur { opacity: .9; }
.aurora::after { /* l'éclat chaud à la base */
  content: ''; position: absolute; left: 50%; bottom: -260px; width: 620px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 129, .55), rgba(255, 218, 159, .25) 55%, transparent);
  filter: blur(20px); opacity: .6;
}
:root[data-theme="dark"] .heros { background: var(--color-void); }
:root[data-theme="dark"] .aurora::before { opacity: 1; filter: blur(34px); }
:root[data-theme="dark"] .aurora::after { opacity: .7; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.heros-note { margin-top: 18px; font-size: 13px; color: var(--texte-3); }
@media (max-width: 900px) {
  .heros { padding: 104px 0 72px; }
  .heros .wrap { grid-template-columns: 1fr; }
  .aurora::before { left: 55%; width: 40%; }
}

/* ── Aperçu du produit (interface réelle, toujours en sombre, comme le logiciel) ── */
.apercu {
  position: relative; border-radius: var(--radius-cards); background: var(--color-charcoal-card); border: 1px solid var(--color-slate-edge);
  box-shadow: var(--shadow-xl); color: var(--color-snow); overflow: hidden; font-size: 14px;
}
.apercu-barre { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid #1e1f22; background: #0e0e10; }
.apercu-barre span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-slate-edge); }
.apercu-barre em { font-style: normal; margin-left: 10px; font-size: 11px; color: var(--color-smoke); }
.apercu-corps { padding: 18px; display: grid; gap: 10px; }
.apercu-titre { display: flex; justify-content: space-between; align-items: center; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.apercu-ligne { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius-cards); background: #18191c; border: 1px solid #222327; }
.apercu-ligne strong { display: block; font-weight: 500; letter-spacing: -0.01em; }
.apercu-ligne small { color: var(--color-ash); font-size: 12px; }
.apercu-prix { text-align: right; font-weight: 600; }
.apercu-prix small { display: block; font-weight: 400; }
.apercu .puces { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.apercu-flottant { position: absolute; z-index: 2; padding: 12px 14px; border-radius: var(--radius-cards); background: var(--color-charcoal-card); border: 1px solid var(--color-slate-edge); box-shadow: var(--shadow-md); color: var(--color-snow); font-size: 13px; line-height: 1.35; }
.apercu-flottant strong { display: block; font-size: 14px; font-weight: 600; }
.apercu-flottant small { color: var(--color-ash); }
.apercu-scene { position: relative; padding: 24px 0 24px 24px; }
.apercu-scene .apercu-flottant { left: -12px; bottom: -6px; display: flex; gap: 10px; align-items: center; }
.apercu-flottant .point { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px rgba(255, 137, 100, .2); flex-shrink: 0; }
.apercu-flottant .avatar { width: 30px; height: 30px; border-radius: 50%; }
.apercu-analyse p { margin: 0; color: var(--color-ash); font-size: 13px; line-height: 1.5; }
.apercu-analyse p strong { color: var(--color-snow); font-weight: 600; }
.apercu-entete { display: flex; gap: 14px; align-items: center; }
.apercu-entete strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.verdict { color: #8fb0ee; }
.apercu .doux { color: var(--color-ash); } /* l'aperçu est toujours sombre : gris clair lisible (contraste AA) */
@media (max-width: 900px) { .apercu-scene { padding: 8px 0 28px; } .apercu-scene .apercu-flottant { left: 8px; } }

/* Étiquettes (pilules) */
.puce { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-tags); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--iris-texte); background: var(--iris-doux); }
.puce.ember { color: var(--ember); background: var(--ember-doux); }
.apercu .puce:not(.ember) { color: #8fb0ee; } /* iris éclairci : contraste suffisant sur le fond sombre de l'aperçu */
.puce.neutre { color: var(--color-ash); background: rgba(169, 169, 170, .12); }
.puce-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--color-ash); }
.puce-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--iris); box-shadow: 0 0 0 3px rgba(86, 131, 218, .25); }

/* Anneau de note (pourcentage par classe : la politique de sécurité interdit les styles en ligne) */
.anneau { --p: 78; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; position: relative; flex-shrink: 0; color: var(--color-snow);
  background: conic-gradient(var(--iris) calc(var(--p) * 1%), #2a2b2f 0); }
.anneau::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--color-charcoal-card); }
.apercu-ligne .anneau::before { background: #18191c; }
.anneau span { position: relative; }
.anneau.grand { width: 60px; height: 60px; font-size: 19px; }
.n85 { --p: 85; } .n78 { --p: 78; } .n72 { --p: 72; } .n64 { --p: 64; } .n58 { --p: 58; }

/* ── Profils : panneaux 30px, lueur d'angle ── */
.profils { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profil {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 36px;
  border-radius: var(--radius-panels); color: var(--texte); background: var(--surface); border: 1px solid var(--bord);
  box-shadow: var(--ombre-carte); transition: transform .3s var(--ease), border-color .3s;
}
.profil::after { content: ''; position: absolute; z-index: -1; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, var(--teinte-lueur), transparent); opacity: .5; transition: opacity .3s; }
.profil:hover { transform: translateY(-4px); text-decoration: none; border-color: var(--teinte); }
.profil:hover::after { opacity: .8; }
.profil.bleu { --teinte: var(--iris); --teinte-lueur: rgba(86, 131, 218, .45); }
.profil.orange { --teinte: var(--ember); --teinte-lueur: rgba(255, 170, 129, .55); }
.profil h3 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.profil p { color: var(--texte-2); margin: 0; }
.profil .suite { margin-top: auto; font-weight: 500; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; color: var(--teinte, var(--iris)); }
.profils-secondaires { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.profil.petit { padding: 22px 24px; flex-direction: row; align-items: center; gap: 18px; border-radius: var(--radius-cards); box-shadow: none; }
.profil.petit::after { display: none; }
.profil.petit:hover { border-color: var(--iris); }
.profil.petit h3 { font-family: var(--font-inter); font-size: 16px; letter-spacing: -0.02em; }
.profil.petit p { font-size: 14px; }
@media (max-width: 760px) { .profils, .profils-secondaires { grid-template-columns: 1fr; } .profil { padding: 28px; } }

/* Icônes : traits monochromes, jamais multicolores */
.icone { width: 44px; height: 44px; border-radius: var(--radius-cards); display: inline-grid; place-items: center; flex-shrink: 0; color: var(--icone); border: 1px solid var(--bord); background: var(--fond); }
.icone svg { width: 22px; height: 22px; }
.profil .icone { color: var(--teinte, var(--icone)); }

/* ── Cartes de fonctionnalités ── */
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grille.deux { grid-template-columns: repeat(2, 1fr); }
.carte { position: relative; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--radius-cards); padding: var(--card-padding); box-shadow: var(--ombre-carte); }
.carte .icone { margin-bottom: 18px; }
.carte p { color: var(--texte-2); margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.carte .bientot { display: inline-flex; margin-top: 14px; padding: 4px 10px; border-radius: var(--radius-tags); font-size: 11px; font-weight: 500; color: var(--ember); background: var(--ember-doux); }
@media (max-width: 900px) { .grille, .grille.deux { grid-template-columns: 1fr; } }

/* Compteurs (chiffres en grand) */
.stat { text-align: center; padding: 28px 20px; }
.stat strong { display: block; font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--texte); }
.stat p { margin-top: 12px; }

/* ── Étapes ── */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: e; }
.etapes.quatre { grid-template-columns: repeat(4, 1fr); }
.etape { padding: var(--card-padding); border-radius: var(--radius-cards); background: var(--surface); border: 1px solid var(--bord); }
.etape::before { counter-increment: e; content: counter(e, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: var(--radius-tags); background: var(--iris-doux); color: var(--iris); font-size: 12px; font-weight: 600; margin-bottom: 18px; }
.etape p { color: var(--texte-2); margin: 10px 0 0; font-size: 14px; }
@media (max-width: 1000px) { .etapes.quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .etapes, .etapes.quatre { grid-template-columns: 1fr; } }

/* ── Comparatif ── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare .carte h3 { margin-bottom: 16px; }
.compare ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.compare li { padding-left: 28px; position: relative; color: var(--texte-2); font-size: 15px; }
.compare li::before { position: absolute; left: 0; top: 0; font-weight: 600; }
.compare .moins li::before { content: '✕'; color: var(--texte-3); }
.compare .plus { border-color: var(--iris); box-shadow: 0 0 0 4px var(--iris-doux); }
.compare .plus li::before { content: '✓'; color: var(--iris); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* ── Page tarifs ── */
.tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 820px; margin: 0 auto; }
.tarif { padding: 32px; }
.carte .tarif-prix { margin: 16px 0 0; font-family: var(--font-display); font-size: 56px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--texte); }
.tarif-prix small { font-family: var(--font-inter); font-size: 16px; font-weight: 400; letter-spacing: -0.01em; color: var(--texte-2); }
.tarif-action { max-width: 820px; margin: 32px auto 0; text-align: center; }
.tarif-action .petite-note { margin-top: 16px; }
.tarif-devis { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 820px; margin: 32px auto 0; }
.tarif-devis .btn { flex-shrink: 0; }
.tarif-limites { max-width: 820px; margin: 32px auto 0; }
@media (max-width: 760px) {
  .tarifs { grid-template-columns: minmax(0, 1fr); }
  .tarif { padding: 24px; }
  .tarif-devis { flex-direction: column; align-items: flex-start; }
}

/* Liste cochée */
.coches { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.coches li { padding-left: 34px; position: relative; font-size: 16px; color: var(--texte-2); }
.coches li strong { color: var(--texte); font-weight: 600; }
.coches li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--iris-doux); color: var(--iris); }

/* Bloc texte + visuel */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 36px; } }

/* Maquette de téléphone : conversation Telegram réelle du produit */
.telephone { width: min(320px, 100%); margin: 0 auto; border-radius: var(--radius-panels); border: 8px solid var(--color-charcoal-card); outline: 1px solid var(--color-slate-edge); background: linear-gradient(160deg, #d9e5c3, #b9cfb0); box-shadow: var(--shadow-xl); overflow: hidden; font-size: 14px; color: #000; letter-spacing: 0; }
.telephone .entete { display: flex; align-items: center; gap: 10px; padding: 14px; background: #517da2; color: #fff; }
.telephone .entete img { width: 38px; height: 38px; border-radius: 50%; }
.telephone .entete span { display: block; font-size: 12px; opacity: .8; }
.telephone .fil { display: flex; flex-direction: column; gap: 9px; padding: 14px 12px 22px; }
.message { max-width: 88%; padding: 9px 11px; border-radius: 14px; background: #fff; align-self: flex-start; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); line-height: 1.4; }
.message.moi { align-self: flex-end; background: #effdde; }
.message .lien { margin-top: 8px; padding: 7px; border-radius: 9px; background: rgba(81, 125, 162, .14); color: #3a6d99; font-weight: 600; text-align: center; }

/* Encadrés */
/* Accueil : l'avant et le pendant en premier, l'après en bloc complémentaire. */
.parcours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.parcours .carte h3 { margin-top: 14px; }
.parcours .coches { margin-top: 18px; }
.parcours .coches li { font-size: 14px; }
.parcours-apres { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 16px; padding: 32px; border-radius: var(--radius-panels); background: var(--surface); border: 1px solid var(--bord); }
.parcours-apres h3 { margin-top: 14px; }
.parcours-apres p { color: var(--texte-2); margin: 10px 0 0; font-size: 14px; }
.parcours-apres .btn { flex-shrink: 0; }
@media (max-width: 760px) {
  .parcours { grid-template-columns: minmax(0, 1fr); }
  .parcours-apres { flex-direction: column; align-items: flex-start; padding: 24px; }
}
.encadre { padding: 20px 24px; border-radius: var(--radius-cards); background: var(--iris-doux); color: var(--texte); font-size: 15px; }
.encadre.orange { background: var(--ember-doux); }
.encadre.etroit { max-width: 820px; margin: 32px auto 0; }

/* ── FAQ ── */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--bord); padding: 20px 0; }
.faq summary { cursor: pointer; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bord-2); font-size: 18px; font-weight: 400; line-height: 1; color: var(--texte-2); transition: transform .25s var(--ease), background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--iris-doux); color: var(--iris); border-color: transparent; }
.faq details p { color: var(--texte-2); margin: 12px 0 0; font-size: 15px; }

/* ── Appel final : bande sombre, éclat chaud discret (pas de second faisceau) ── */
.cta-final { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 120px 0; background: var(--color-void); color: var(--color-snow); }
.cta-final::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 100%; width: 900px; height: 520px; transform: translate(-50%, -55%); border-radius: 50%; background: radial-gradient(closest-side, rgba(86, 131, 218, .45), rgba(255, 137, 100, .18) 60%, transparent); filter: blur(10px); }
.cta-final h2 { color: var(--color-snow); max-width: 900px; margin: 0 auto; }
.cta-final .lead { color: var(--color-ash); margin-left: auto; margin-right: auto; }
.cta-final .heros-actions { justify-content: center; }

/* ── Formulaires (champs 4px) ── */
.formulaire { display: grid; gap: 16px; max-width: 620px; padding: 32px; border-radius: var(--radius-panels); background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--ombre-carte); }
.champ { display: grid; gap: 6px; }
.champ label { font-size: 13px; font-weight: 500; color: var(--texte-2); }
.champ input, .champ select, .champ textarea { font: inherit; font-size: 15px; padding: 12px 14px; border-radius: var(--radius-inputs); border: 1px solid var(--bord-2); background: var(--fond); color: var(--texte); width: 100%; transition: border-color .2s, box-shadow .2s; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 4px var(--iris-doux); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.statut { font-size: 14px; min-height: 1.5em; margin: 0; }
.statut.ok { color: var(--iris); }
.statut.erreur { color: var(--ember); }
.titre-page { font-size: clamp(40px, 5.4vw, 64px); }
.contact-email { margin-top: 28px; }

/* ── Pages légales ── */
.legal { max-width: 800px; margin: 0 auto; padding: 72px 24px 96px; }
.legal h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 12px; }
.legal h2 { font-family: var(--font-inter); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--texte-2); font-size: 15px; }
.legal h3 { font-family: var(--font-inter); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 32px 0 8px; }
.legal blockquote { margin: 16px 0; padding: 20px 24px; border-radius: var(--radius-cards); background: var(--iris-doux); }
.legal blockquote p { color: var(--texte); font-size: 14px; }
.legal .maj { color: var(--texte-3); font-size: 13px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
@media (max-width: 760px) { .legal table { display: block; overflow-x: auto; } } /* tableaux larges : défilement dans le tableau, jamais de la page */
.legal th, .legal td { text-align: left; padding: 10px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.legal th { color: var(--texte); font-weight: 600; }
/* Confidentialité : refus de la mesure d'audience */
.choix-mesure { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 0 8px; padding: 16px; border: 1px solid var(--bord); border-radius: 12px; }
.legal .choix-mesure-etat { margin: 0; font-size: 14px; color: var(--texte-3); flex: 1 1 260px; }
.a-completer { background: var(--ember-doux); color: var(--ember); padding: 1px 6px; border-radius: var(--radius-inputs); font-weight: 600; }

/* Page 404 */
.page-404 .icone-404 { width: 96px; height: 96px; margin: 0 auto 24px; border-radius: var(--radius-panels); }

/* ── Pied de page ── */
footer { background: var(--fond-2); padding: 64px 0 40px; font-size: 14px; color: var(--texte-2); border-top: 1px solid var(--bord); }
.pied { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
.pied .presentation { max-width: 300px; }
.pied .badge-annuaire { display: inline-block; margin-top: 16px; border-radius: 12px; }
.pied .badge-annuaire img { display: block; }
.pied .pied-titre { margin: 0 0 12px; font-family: var(--font-inter); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--texte); letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 1000px) { .pied { grid-template-columns: repeat(4, 1fr); } .pied > div:first-child { grid-column: 1 / -1; } }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: var(--texte-2); }
.pied a:hover { color: var(--texte); }
.pied-bas { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--bord); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--texte-3); font-size: 12px; }
@media (max-width: 760px) { .pied { grid-template-columns: 1fr 1fr; } }

/* ═════════════ Blog, articles et simulateur ═════════════ */
/* Premier écran sobre (une colonne) : même faisceau, décalé à droite pour laisser le texte lisible. */
.heros-simple { padding: 120px 0 64px; }
.heros-simple .wrap { grid-template-columns: minmax(0, 1fr); }
.heros-simple .wrap > div { max-width: 820px; }
.heros-simple .aurora::before { left: 78%; }
.heros-simple .aurora .coeur { left: 85%; }
@media (max-width: 900px) { .heros-simple { padding: 96px 0 48px; } }
.titre-article { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.04em; }
section[id] { scroll-margin-top: 64px; }

/* Fil d'Ariane */
.ariane { margin: 0 0 20px; font-size: 13px; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; color: var(--texte-3); }
.ariane li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ariane li + li::before { content: '›'; color: var(--texte-3); }
.ariane a { color: var(--texte-2); }
.ariane [aria-current] { color: var(--texte-3); max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 24px 0 0; font-size: 14px; color: var(--texte-3); }

/* Mise en page de l'article : sommaire collant + colonne de lecture */
.section-article { padding: 64px 0 96px; }
.article-grille { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 64px; justify-content: center; align-items: start; }
.article-grille > .article-corps:only-child { grid-column: 1 / -1; max-width: 720px; margin: 0 auto; }
.sommaire { position: sticky; top: 88px; font-size: 14px; }
.sommaire-titre { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--texte); }
.sommaire ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--bord); display: grid; gap: 10px; }
.sommaire a { display: block; color: var(--texte-2); line-height: 1.35; }
.sommaire a:hover { color: var(--texte); }
@media (max-width: 1000px) {
  .article-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sommaire { position: static; padding: 20px 24px; border: 1px solid var(--bord); border-radius: var(--radius-cards); background: var(--fond-2); }
}
.article-corps { min-width: 0; font-size: 17px; line-height: 1.7; color: var(--texte-2); }
.article-corps > :first-child { margin-top: 0; }
.article-corps h2 { font-size: clamp(28px, 3.4vw, 34px); line-height: 1.1; letter-spacing: -0.03em; margin: 56px 0 16px; scroll-margin-top: 88px; }
.article-corps h3 { font-size: 20px; margin: 36px 0 10px; scroll-margin-top: 88px; }
.article-corps h4 { font-size: 17px; font-weight: 600; color: var(--texte); margin: 28px 0 8px; }
.article-corps p { margin: 0 0 18px; }
.article-corps ul, .article-corps ol { margin: 0 0 22px; padding-left: 24px; display: grid; gap: 8px; }
.article-corps li::marker { color: var(--iris); font-weight: 600; }
.article-corps strong { color: var(--texte); font-weight: 600; }
/* Liens du texte : couleur du texte (contraste) soulignée en iris */
.article-corps a:not(.btn) { color: var(--texte); text-decoration: underline; text-decoration-color: var(--iris); text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-corps a:not(.btn):hover { color: var(--iris); }
.article-corps hr { border: 0; border-top: 1px solid var(--bord); margin: 40px 0; }
.article-corps code { font-size: .9em; padding: 1px 6px; border-radius: var(--radius-inputs); background: var(--fond-2); }
.tableau { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--bord); border-radius: var(--radius-cards); }
.tableau table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tableau th, .tableau td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau th { color: var(--texte); font-weight: 600; background: var(--fond-2); }

/* Encadré « En bref » (citations Markdown) */
.en-bref { position: relative; margin: 0 0 32px; padding: 22px 24px 22px 28px; border-radius: var(--radius-cards); background: var(--iris-doux); border: 1px solid rgba(86, 131, 218, .25); color: var(--texte); font-size: 16px; line-height: 1.6; }
.en-bref::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--iris); }
.en-bref > :last-child { margin-bottom: 0; }
.article-corps .en-bref-titre { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte); }
.en-bref-titre::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }

/* Encart vers le simulateur */
.encart-outil { display: flex; gap: 18px; align-items: flex-start; margin: 40px 0; padding: var(--card-padding); border-radius: var(--radius-cards); border: 1px solid var(--bord); background: var(--fond-2); }
.encart-outil .encart-outil-titre { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--texte); }
.encart-outil p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--texte-2); }
.wrap > .encart-outil { max-width: 820px; margin: 0 auto; }
@media (max-width: 520px) { .encart-outil { flex-direction: column; } }

/* Appel à l'action dans l'article : panneau 30px sombre, lueur d'angle */
.cta-article { position: relative; overflow: hidden; isolation: isolate; margin: 48px 0; padding: 36px; border-radius: var(--radius-panels); background: var(--color-void); border: 1px solid var(--color-slate-edge); }
.cta-article::after { content: ''; position: absolute; z-index: -1; right: -140px; top: -160px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 129, .45), rgba(86, 131, 218, .2) 60%, transparent); }
.article-corps .cta-article-titre { margin: 0 0 12px; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--color-snow); }
.article-corps .cta-article p { color: var(--color-ash); font-size: 16px; }
.cta-article .heros-actions { margin-top: 24px; }
@media (max-width: 520px) { .cta-article { padding: 28px 22px; } .cta-article .btn { white-space: normal; text-align: center; } }

.faq-article { margin: 0 0 8px; }
.article-corps .faq details p { margin: 12px 0 0; font-size: 16px; }
.article-corps .sources-titre { font-family: var(--font-inter); font-size: 20px; letter-spacing: -0.02em; margin-top: 48px; }
.article-corps .sources { font-size: 14px; line-height: 1.5; color: var(--texte-3); }
.article-corps .article-avertissement { margin-top: 32px; font-size: 13px; }

/* Cartes d'articles */
.carte-article { display: flex; flex-direction: column; gap: 10px; color: var(--texte); transition: transform .3s var(--ease), border-color .3s; }
.carte-article:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--iris); }
.carte-article .puce { align-self: flex-start; }
.carte.carte-article p { margin: 0; flex: 1; }
.carte-article small { font-size: 13px; }
.categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.categories .puce { font-size: 13px; padding: 6px 14px; }
.categories .puce:hover { text-decoration: none; background: var(--iris); color: var(--color-snow); }
.titre-categorie { margin-bottom: 32px; }

/* Simulateur */
.section-simu { padding: 48px 0 96px; }
.simulateur { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: start; }
.simu-form { position: sticky; top: 88px; max-width: none; }
.simu-intro { margin: 0; font-size: 13px; color: var(--texte-3); }
.champ-unite { position: relative; display: flex; align-items: center; }
.champ-unite input { padding-right: 52px; font-variant-numeric: tabular-nums; }
.champ-unite span { position: absolute; right: 14px; font-size: 14px; color: var(--texte-3); pointer-events: none; }
.champ small { font-size: 12px; line-height: 1.4; color: var(--texte-3); }
.champ input[aria-invalid="true"] { border-color: var(--ember); }
.simu-form .statut.erreur { color: var(--texte); }
.simu-form .statut.erreur:not(:empty) { padding: 10px 14px; border-radius: var(--radius-cards); background: var(--ember-doux); }
.simu-form .statut:empty { display: none; }
.simu-resultats { display: grid; gap: 16px; transition: opacity .2s; }
.simu-resultats.en-attente { opacity: .4; }
.resultats-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.resultat .resultat-libelle { margin: 0; font-size: 13px; font-weight: 500; color: var(--texte-3); }
.resultat .resultat-valeur { margin: 6px 0 0; font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.04em; color: var(--texte); font-variant-numeric: tabular-nums; }
.resultat-principal .resultat-valeur { font-size: clamp(40px, 5vw, 56px); }
.resultat .resultat-note { margin-top: 12px; font-size: 14px; }
.resultat-reste { border-color: var(--iris); box-shadow: 0 0 0 4px var(--iris-doux); }
.resultat-reste.negatif { border-color: var(--ember); box-shadow: 0 0 0 4px var(--ember-doux); }
.jauge { position: relative; height: 10px; margin-top: 22px; border-radius: var(--radius-tags); background: var(--fond-2); border: 1px solid var(--bord); }
.jauge-zone { position: absolute; top: 0; bottom: 0; left: 30%; width: 30%; background: rgba(86, 131, 218, .35); }
.jauge-repere { position: absolute; top: 50%; left: var(--pos, 0%); width: 18px; height: 18px; border-radius: 50%; background: var(--ember); border: 3px solid var(--surface); box-shadow: var(--shadow-sm); transform: translate(-50%, -50%); transition: left .3s var(--ease); }
.jauge.vide .jauge-repere { display: none; }
.jauge-legende { position: relative; height: 18px; margin-top: 8px; font-size: 11px; color: var(--texte-3); }
.jauge-legende span { position: absolute; transform: translateX(-50%); }
.jauge-legende span:nth-child(1) { left: 0; transform: none; }
.jauge-legende span:nth-child(2) { left: 30%; }
.jauge-legende span:nth-child(3) { left: 60%; }
.jauge-legende span:nth-child(4) { right: 0; transform: none; }
.barre { height: 10px; margin-top: 16px; border-radius: var(--radius-tags); background: var(--fond-2); border: 1px solid var(--bord); overflow: hidden; }
.barre span { display: block; height: 100%; width: var(--part, 0%); border-radius: inherit; background: var(--iris); transition: width .3s var(--ease); }
.barre.depasse span { background: var(--ember); }
.simu-confidentialite { margin-top: 20px; }
@media (max-width: 900px) { .simulateur { grid-template-columns: minmax(0, 1fr); } .simu-form { position: static; } }
@media (max-width: 520px) { .resultats-grille { grid-template-columns: minmax(0, 1fr); } .formulaire { padding: 24px; } }

/* ── Apparition au défilement ── */
.apparait { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .apparait { opacity: 1; transform: none; }
}