/* FIRE — même palette que Dark Majestic (base : page PEA) */
:root {
  --bg: #000;
  --surface: #05070b;
  --surface-2: #090d14;
  --border: rgba(157, 184, 217, 0.14);
  --ice: #9db8d9;
  --text: #e6edf7;
  --muted: #8b99ad;
  --blue: #2e9bff;      /* nominal */
  --red: #d4301f;       /* inflation / perte */
  --green: #7dd3fc;     /* réel positif / gain : bleu glacier de la page maître, plus de vert (19/10/2026) */
  --gold: #f5c451;
}

/* barre de navigation toujours visible, même en défilant vers le bas (pleine largeur, fond flouté) */
header.top { position: sticky; top: 0; z-index: 100; max-width: none; margin: 0;
  padding: 12px max(16px, calc((100vw - 1160px) / 2 + 16px));
  background: rgba(0, 0, 0, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
section, #simulation, #depart, :is(#besoin, #zoneDuree), #evolution { scroll-margin-top: 84px; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}
.stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 7% 4%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 19% 11%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 34% 3%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 52% 7%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 63% 16%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 84% 5%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 91% 13%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 3% 24%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 24% 28%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 43% 24%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 58% 33%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 76% 26%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 97% 35%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 12% 50%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 28% 46%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 49% 52%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 71% 55%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 2% 70%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 21% 78%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 38% 84%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 53% 76%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 66% 79%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 86% 71%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 95% 87%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 14% 98%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 47% 97%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 62% 93%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 80% 90%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 99% 96%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 5% 8%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 27% 6%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 46% 14%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 93% 22%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 8% 36%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 69% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 56%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 96% 48%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 16% 62%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 60% 66%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 82% 80%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 6% 90%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 30% 94%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 74% 96%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 35% 72%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 88% 64%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,.25), transparent),
    radial-gradient(1.5px 1.5px at 64% 88%, rgba(125,211,252,.5), transparent),
    radial-gradient(1.5px 1.5px at 22% 44%, rgba(125,211,252,.4), transparent);
}
header, main, footer { position: relative; z-index: 1; }
main { max-width: 1160px; margin: 0 auto; padding: 0 16px 40px; }
a { color: var(--blue); }
b, strong { font-weight: 600; }

/* ---------- En-tête ---------- */
.top {
  max-width: 1160px; margin: 0 auto; padding: 18px 16px;
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
}
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ice); text-decoration: none;
  font-family: "Michroma", sans-serif; font-size: .8rem; letter-spacing: .2em;
}
.logo img { width: 34px; height: 34px; border-radius: 50%; }
.fil { color: var(--muted); font-size: .82rem; letter-spacing: .08em; }
.fil a { color: var(--muted); text-decoration: none; }
.fil a:hover { color: var(--text); }
.sommaire { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.sommaire a {
  color: var(--muted); text-decoration: none; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 4px;
}
.sommaire a:hover { color: var(--text); background: var(--surface-2); }

/* ---------- Numéros de repère (discrets) ---------- */
.no {
  display: inline-block; vertical-align: .12em; margin-right: .7em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .62rem; font-weight: 400;
  letter-spacing: .04em; text-transform: none; line-height: 1.5;
  color: var(--muted); opacity: .75; padding: 0 5px; border: 1px solid var(--border); border-radius: 3px;
}
.sommaire .no { margin-right: .45em; opacity: .6; }
.no.coin { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; background: rgba(0,0,0,.55); }
.repere { color: var(--muted); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 26px; }

/* ---------- Titres ---------- */
h1, h2 { font-family: "Michroma", sans-serif; font-weight: 400; color: var(--ice); text-transform: uppercase; }
h1 { font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: .12em; line-height: 1.2; }
h2 { font-size: clamp(1.05rem, 2.6vw, 1.4rem); letter-spacing: .1em; margin-bottom: 6px; }
h3 { font-weight: 600; font-size: 1rem; color: var(--text); margin-bottom: 6px; }
.sur { color: var(--green); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 8px; }
.intro { color: var(--muted); max-width: 72ch; }
section { margin-top: 56px; scroll-margin-top: 16px; }
.tete-section { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- Héros ---------- */
.heros { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: center; margin-top: 24px; }
.heros .intro { margin-top: 14px; font-size: 1.02rem; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin-top: 26px; }
.tuile {
  position: relative; padding: 16px 18px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); overflow: hidden;
}
.tuile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c, var(--blue)), transparent);
}
.tuile .lib { color: var(--muted); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.tuile .val { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--c, var(--text)); margin: 6px 0 2px; white-space: nowrap; }
.tuile .det { color: var(--muted); font-size: .8rem; }
.pos { color: var(--green) !important; }
.neg { color: var(--red) !important; }

/* ---------- Blocs ---------- */
.bloc { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 18px; }
.bloc + .bloc { margin-top: 16px; }
.graph { width: 100%; height: 440px; }
.note { color: var(--muted); font-size: .8rem; margin-top: 10px; }

/* boutons segmentés */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex-wrap: wrap; }
.seg button {
  background: transparent; color: var(--muted); border: 0; padding: 7px 12px; cursor: pointer;
  font: inherit; font-size: .8rem; letter-spacing: .06em;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--blue); }

/* formulaires */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px 14px; margin: 16px 0 6px; }
.form label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
/* champs alignés : dans une rangée, toutes les cases commencent à la même hauteur, quel que soit le nombre de lignes du libellé (charte 6.12.29, 19/10/2026) */
.form label > input, .form label > select, .form label > .pctwrap { margin-top: auto; }
.form input, .form select, .choix-annee {
  background: #0a0f18; color: var(--text); border: 1px solid var(--border); border-radius: 5px;
  padding: 9px 10px; font: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0; width: 100%;
}
.form input:focus, .form select:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
.form .case { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--text); align-self: end; padding-bottom: 8px; }
.form .case input { width: auto; accent-color: var(--blue); }
.cache { display: none !important; }

/* verdict du simulateur */
.verdict {
  margin: 16px 0; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--border);
  border-left: 3px solid var(--c, var(--blue)); background: var(--surface-2); font-size: .98rem;
}

/* tableaux */
.tableau { overflow: visible; margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
th:first-child, td:first-child { text-align: left; }
thead th { position: sticky; top: 0; background: #0b111c; color: var(--muted); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
tbody tr:hover { background: var(--surface-2); }
details > summary { cursor: pointer; color: var(--ice); margin-top: 14px; font-size: .9rem; }

/* ---------- L'essentiel ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.carte { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 16px 18px; }
.carte p, .carte li { color: var(--muted); font-size: .9rem; }
.carte ul { padding-left: 18px; }
.carte .chiffre { font-weight: 600; color: var(--text); font-size: 1.2rem; margin-bottom: 4px; }

/* ---------- Pigeons ---------- */
.pigeon { position: relative; margin: 0; border: 1px dashed rgba(157,184,217,.3); border-radius: 8px; padding: 10px; background: var(--surface); }
.pigeon .cadre { aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; background: #070b12; display: grid; place-items: center; }
.pigeon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pigeon svg { width: 100%; height: 100%; display: block; }
.pigeon figcaption { color: var(--muted); font-size: .84rem; font-style: italic; margin-top: 8px; text-align: center; }
.pigeon.penche { transform: rotate(1.5deg); }
.pigeon.penche-g { transform: rotate(-1.5deg); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.pigeon-entre { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }

/* ---------- Pied ---------- */
footer { border-top: 1px solid var(--border); margin-top: 56px; padding: 18px 16px; text-align: center; color: var(--muted); font-size: .76rem; }
footer p + p { margin-top: 6px; }

@media (max-width: 820px) {
  .heros { grid-template-columns: 1fr; }
  .heros .pigeon { max-width: 320px; }
  .sommaire { margin-left: 0; }
  .graph { height: 360px; }
  .pigeon-entre { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Spécifique PEA ---------- */
.formule { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; background: #0a0f18; border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin: 12px 0; color: var(--text); overflow-x: visible; white-space: normal; overflow-wrap: anywhere; }
.formule b { color: var(--gold); }
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.camp { border: 1px solid var(--border); border-radius: 6px; padding: 16px; background: var(--surface); border-top: 2px solid var(--c, var(--blue)); }
.camp h3 { color: var(--c, var(--text)); }
.camp table td { border-bottom: 1px dashed var(--border); }
.camp .total td { font-weight: 600; color: var(--text); border-bottom: 0; font-size: 1rem; }
td.fort { background: rgba(125,211,252,.08); }
@media (max-width: 820px) { .duel { grid-template-columns: 1fr; } }
/* Devise sous le logo de l'en-tête (demande de l'utilisateur : toujours sous le logo) */
.logo .marque { display: inline-flex; flex-direction: column; line-height: 1.25; }
.logo .marque small {
  font-family: "Inter", system-ui, sans-serif; font-size: .56rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase; color: #8b99ad; margin-top: 3px;
}
/* ---------- Spécifique FIRE ---------- */
.heros { grid-template-columns: 1fr 380px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.visuel { position: relative; margin: 0; border: 1px dashed rgba(157,184,217,.3); border-radius: 8px; padding: 10px; background: var(--surface); }
.visuel .cadre { aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden; background: #070b12; display: grid; place-items: center; color: var(--muted); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.visuel img, .visuel svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.visuel figcaption { color: var(--muted); font-size: .8rem; font-style: italic; margin-top: 8px; text-align: center; }
.visuel.penche { transform: rotate(1.5deg); }
.visuel.penche-g { transform: rotate(-1.5deg); }
.galerie .cadre { aspect-ratio: 4 / 3; }
.carte .punch { color: var(--gold); font-size: .86rem; font-style: italic; margin-bottom: 6px; }
.carte.actif { border-color: var(--green); box-shadow: 0 0 0 1px rgba(125,211,252,.35); }
.statut-ok { color: var(--green); }
.statut-ind { color: var(--gold); }
.opt-barista.cache, .opt-coast.cache { display: none !important; }
td.gauche { text-align: left; white-space: normal; min-width: 260px; }
@media (max-width: 820px) { .heros { grid-template-columns: 1fr; } .duo { max-width: 420px; } }.heros.un { grid-template-columns: 1fr; }
.duo#vignettes { max-width: 700px; margin: 26px auto 8px; }
.duo#vignettes .cadre { aspect-ratio: 3 / 4; }
.duo#vignettes .visuel:first-child { transform: rotate(-1.2deg); }
.duo#vignettes .visuel:last-child { transform: rotate(1.2deg); }
.visuel figcaption b { color: var(--text); font-style: normal; }.duo#vignettes { align-items: start; }
.duo#vignettes .cadre { aspect-ratio: auto; display: block; }
.duo#vignettes .cadre img { height: auto; object-fit: contain; }.depart .form.trois { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: start; }
.depart .q { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--gold); color: #000; font-weight: 600; font-size: .72rem; }
.depart .q2 { display: flex; flex-direction: column; gap: 10px; }
.depart label.dev { font-size: .68rem; }/* vignettes du haut : seuls les chiffres sont colorés (avec une aura) ; carte et libellé restent neutres */
#tuiles .tuile::before { background: linear-gradient(90deg, transparent, rgba(157,184,217,.35), transparent); }
#tuiles .val { text-shadow: 0 0 14px color-mix(in srgb, var(--c) 75%, transparent), 0 0 36px color-mix(in srgb, var(--c) 40%, transparent); }
#tuiles .det { display: none; }/* pastilles 1-2-3 : jaune chaleureux (ambre doré) avec aura */
.depart .q { background: radial-gradient(circle at 35% 30%, #ffd873, #ffab24 60%, #ff8f1f); color: #2a1400;
  box-shadow: 0 0 10px 1px rgba(255,176,46,.65), 0 0 26px 4px rgba(255,140,30,.35); }
/* mots de l'intro : blanc gras souligné d'un trait chaud (option 1) */
.mot { color: #fff; border-bottom: 2px solid var(--u); padding-bottom: 1px; }

/* ---------- alignement (tout sur les mêmes lignes) ---------- */
#tuiles { align-items: stretch; }
#tuiles .tuile { display: flex; flex-direction: column; justify-content: space-between; }
#tuiles .lib { min-height: 2.8em; line-height: 1.4; }
#tuiles .val { margin: 4px 0 0; }
.form.trois { align-items: end; }
.form.trois > label, .depart .q2 label { justify-content: flex-end; }
.form.trois > label > input, .form.trois > label > select { margin-top: auto; }
.depart .form.trois { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px 20px; }
.depart .q2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 10px 12px; align-items: end; }
.depart .q2 label { display: flex; flex-direction: column; gap: 5px; }
.depart label.dev { font-size: .76rem; }
/* trois questions : une par ligne, tout aligné à gauche, champs de même hauteur */
.form input, .form select { height: 44px; }
.depart .form.trois { grid-template-columns: 1fr; max-width: 600px; gap: 20px; align-items: start; }
.depart .form.trois > label { justify-content: flex-start; }
.depart .q2 { grid-template-columns: 1fr 1fr; }

/* vignettes de l'intro : même format, pas d'inclinaison, alignées */
.duo#vignettes .visuel:first-child, .duo#vignettes .visuel:last-child { transform: none; }
.duo#vignettes .cadre img { aspect-ratio: 302 / 418; width: 100%; }
/* champs "Change the assumptions" : libellés courts sur une ligne, alignés en haut, même taille de police */
:is(#besoin, #zoneDuree) .form.trois { align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
:is(#besoin, #zoneDuree) .form.trois > label { font-size: .72rem; letter-spacing: .06em; justify-content: flex-start; white-space: nowrap; }
:is(#besoin, #zoneDuree) .form.trois > label > input { margin-top: 0; }
/* trois colonnes : champ + petite vignette explicative dessous */
:is(#besoin, #zoneDuree) .form.trois.cols { align-items: stretch; }
:is(#besoin, #zoneDuree) .form.trois .col { display: flex; flex-direction: column; gap: 10px; }
:is(#besoin, #zoneDuree) .form.trois .col > label { display: flex; flex-direction: column; gap: 5px; font-size: .72rem; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
:is(#besoin, #zoneDuree) .form.trois .col > label > input { text-transform: none; }
:is(#besoin, #zoneDuree) .form.trois .col > label > input#fDevO { text-transform: uppercase; }
.explic { flex: 1; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 12px 14px; }
.explic b { display: block; color: var(--text); font-weight: 600; font-size: .86rem; margin-bottom: 4px; }
.explic p { color: var(--muted); font-size: .8rem; line-height: 1.5; }
/* 1.5 : question + vignette explicative côte à côte */
.protege { display: grid; grid-template-columns: minmax(min(220px, 100%), 1fr) 2fr; gap: 14px; align-items: stretch; margin: 10px 0 14px; }
.protege label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.protege label select { background: #0a0f18; color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 9px 10px; font: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0; height: 44px; margin-top: auto; }
@media (max-width: 700px) { .protege { grid-template-columns: 1fr; } }
/* 1.5 : même présentation que les trois colonnes de 1.4 (champ, puis vignette explicative dessous) */
.protege { display: flex; flex-direction: column; gap: 10px; width: calc((100% - 28px) / 3); min-width: 230px; }
@media (max-width: 700px) { .protege { width: 100%; } }
/* 1.4 : cinq colonnes ; libellés sur 2 lignes maximum, champs alignés en bas de la ligne de libellé */
:is(#besoin, #zoneDuree) .form.trois.cols { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; }
:is(#besoin, #zoneDuree) .form.trois .col > label { display: grid; grid-template-rows: 2.7em auto; gap: 5px; white-space: normal; line-height: 1.35; }
:is(#besoin, #zoneDuree) .form.trois .col > label > input, :is(#besoin, #zoneDuree) .form.trois .col > label > select { align-self: end; }
/* signe % juste après le chiffre saisi (largeur mesurée par fire.js) */
.pctwrap { position: relative; display: block; }
.pctwrap::after { content: "%"; position: absolute; top: 50%; left: calc(var(--w, 0px) + 5px); transform: translateY(-50%); color: var(--muted); font-size: .95rem; pointer-events: none; }
.pctwrap > input { width: 100%; }
/* 1.4 : six colonnes = 3 x 2 */
:is(#besoin, #zoneDuree) .form.trois.cols { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* mots de l'intro : couleurs chaudes avec aura (plus de soulignement) */
.mot { color: var(--u); border-bottom: 0; padding-bottom: 0; font-weight: 600;
  text-shadow: 0 0 10px color-mix(in srgb, var(--u) 80%, transparent), 0 0 26px color-mix(in srgb, var(--u) 45%, transparent); }
/* 1.6 détail des calculs : flèche + deux tableaux */
details.calcul { margin-top: 14px; }
details.calcul > summary { list-style: none; cursor: pointer; color: var(--ice); font-size: .95rem; padding: 8px 0; }
details.calcul > summary::-webkit-details-marker { display: none; }
details.calcul > summary::before { content: "▶"; display: inline-block; margin-right: 10px; color: #ffb454; font-size: .8rem; transition: transform .2s; text-shadow: 0 0 10px rgba(255,140,30,.8); }
details.calcul[open] > summary::before { transform: rotate(90deg); }
details.calcul h4 { margin: 18px 0 6px; font-size: .95rem; font-weight: 600; color: var(--text); }
details.calcul h4 .note { font-weight: 300; margin: 0; }
details.calcul .tableau { max-height: none; }
details.calcul th { white-space: normal; min-width: 96px; vertical-align: bottom; }
/* curseur horizontal (change) */
:is(#besoin, #zoneDuree) .form.trois .col > label .curseur { display: flex; align-items: center; gap: 12px; height: 44px; align-self: end; }
.curseur input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, rgba(var(--bc-rgb,255,154,46),.9) 0, rgba(var(--bc-rgb,255,154,46),.9) var(--pos, 50%), rgba(157,184,217,.2) var(--pos, 50%), rgba(157,184,217,.2) 100%); box-shadow: 0 0 12px rgba(var(--bc2-rgb,255,140,30),.35); }
.curseur input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--bc-l,#ffd873), var(--bc,#ff9f1c)); border: 0; box-shadow: 0 0 10px 2px rgba(var(--bc-rgb,255,170,40),.75), 0 0 22px rgba(var(--bc2-rgb,255,120,20),.4); }
.curseur input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--bc,#ffab24); border: 0; box-shadow: 0 0 10px 2px rgba(var(--bc-rgb,255,170,40),.75), 0 0 22px rgba(var(--bc2-rgb,255,120,20),.4); }
.curseur input[type=range]:disabled { opacity: .55; cursor: not-allowed; }
.curseur output { min-width: 96px; text-align: right; color: #ffd640; font-weight: 600; font-size: .9rem; text-shadow: 0 0 10px rgba(255,140,30,.7); text-transform: none; letter-spacing: 0; white-space: normal; }
:is(#besoin, #zoneDuree) .form.trois .col > label.neutre, label.neutre { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 10px; color: var(--text); text-transform: none; letter-spacing: 0; font-size: .8rem; white-space: normal; grid-template-rows: none; }
label.neutre input { width: auto; height: auto; accent-color: #ff9a2e; margin: 0; }
/* curseur de change : simple barre horizontale sans couleur, avec des dents pour montrer les crans (1 dent = 1 %, dent longue = 0 %) */
.curseur input[type=range] { height: 26px; border-radius: 0; box-shadow: none; cursor: pointer;
  background-color: transparent;
  background-image:
    linear-gradient(rgba(157,184,217,.55), rgba(157,184,217,.55)),                         /* la barre */
    repeating-linear-gradient(90deg, rgba(157,184,217,.6) 0 1px, transparent 1px 5%),       /* les dents (une par %) */
    linear-gradient(rgba(157,184,217,.6), rgba(157,184,217,.6)),                            /* dent de fin (+10 %) */
    linear-gradient(rgba(230,237,247,.9), rgba(230,237,247,.9));                            /* dent longue au centre (0 %) */
  background-repeat: no-repeat;
  background-size: calc(100% - 20px) 1px, calc(100% - 20px) 10px, 1px 10px, 2px 20px;
  background-position: 10px 50%, 10px 50%, calc(100% - 10px) 50%, 50% 50%; }
.curseur input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 26px; }
.curseur input[type=range]::-webkit-slider-thumb { margin-top: 3px; }
.curseur input[type=range]::-moz-range-track { background: transparent; height: 26px; }
/* curseur de change : de -5 % à +5 %, un cran par % (11 dents) */
.curseur input[type=range] { background-image: linear-gradient(rgba(157,184,217,.55), rgba(157,184,217,.55)), repeating-linear-gradient(90deg, rgba(157,184,217,.6) 0 1px, transparent 1px 10%), linear-gradient(rgba(157,184,217,.6), rgba(157,184,217,.6)), linear-gradient(rgba(230,237,247,.9), rgba(230,237,247,.9)); }

/* change : colonne double largeur, barre plus longue, chiffre saisissable à droite */
:is(#besoin, #zoneDuree) .form.trois .col.large { grid-column: span 2; }
@media (max-width: 700px) { :is(#besoin, #zoneDuree) .form.trois .col.large { grid-column: auto; } }
.curseur input[type=range] { min-width: 180px; }
.curseur .pctwrap { flex: none; width: 96px; }
.curseur .pctwrap > input { width: 100%; text-align: left; }
/* vignettes 1.4 : deux par ligne, chacune avec sa barre à dents et son chiffre saisissable à droite */
:is(#besoin, #zoneDuree) .form.trois.cols { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
:is(#besoin, #zoneDuree) .form.trois .col.large { grid-column: auto; }
.pctwrap::after { content: attr(data-suf); }
.curseur.gen input[type=range] { min-width: 120px;
  background-image:
    linear-gradient(rgba(157,184,217,.55), rgba(157,184,217,.55)),
    repeating-linear-gradient(90deg, rgba(157,184,217,.6) 0 1px, transparent 1px calc(100% / var(--n, 10))),
    linear-gradient(rgba(157,184,217,.6), rgba(157,184,217,.6));
  background-size: calc(100% - 20px) 1px, calc(100% - 20px) 10px, 1px 10px;
  background-position: 10px 50%, 10px 50%, calc(100% - 10px) 50%; }
.sous-titre { color: var(--muted); font-size: .86rem; margin: 2px 0 10px; }
.sous-titre b { color: #ffd640; font-weight: 600; text-shadow: 0 0 10px rgba(255,140,30,.6); }

/* 1.6 : tableaux entièrement visibles, sans barre de défilement (toutes les lignes, colonnes ajustées à la largeur) */
details.calcul .tableau { max-height: none; overflow: visible; border: 1px solid var(--border); }
details.calcul table { width: 100%; table-layout: fixed; font-size: .66rem; }
details.calcul th, details.calcul td { padding: 5px 4px; white-space: nowrap; overflow: hidden; }
details.calcul th { white-space: normal; min-width: 0; font-size: .58rem; letter-spacing: .02em; line-height: 1.25; vertical-align: bottom; position: static; }
details.calcul th:first-child, details.calcul td:first-child { width: 34px; }
details.calcul td { text-overflow: clip; }
.explic .fort { color: var(--text); font-weight: 600; }
.explic .aide { display: block; margin-top: 6px; color: var(--muted); font-size: .74rem; font-style: italic; }

/* curseur de change : un cran tous les 0,5 % (petites dents), une dent plus haute tous les 1 %, dent longue à 0 % */
.curseur input#fFxRange { background-image:
    linear-gradient(rgba(157,184,217,.55), rgba(157,184,217,.55)),
    repeating-linear-gradient(90deg, rgba(157,184,217,.45) 0 1px, transparent 1px 5%),
    repeating-linear-gradient(90deg, rgba(157,184,217,.7) 0 1px, transparent 1px 10%),
    linear-gradient(rgba(157,184,217,.7), rgba(157,184,217,.7)),
    linear-gradient(rgba(230,237,247,.9), rgba(230,237,247,.9));
  background-size: calc(100% - 20px) 1px, calc(100% - 20px) 6px, calc(100% - 20px) 12px, 1px 12px, 2px 20px;
  background-position: 10px 50%, 10px 50%, 10px 50%, calc(100% - 10px) 50%, 50% 50%; }
details.calcul table { font-size: .62rem; }
details.calcul th { font-size: .54rem; }

details.calcul table { font-size: var(--tf, .62rem); }
details.calcul th { font-size: calc(var(--tf, .62rem) * .88); }

/* tableaux principaux : chiffres bien lisibles ; le détail technique est dans un sous-menu */
details.calcul .tableau.gros { overflow: visible; max-height: none; }
details.calcul .tableau.gros table { table-layout: auto; font-size: .92rem; }
details.calcul .tableau.gros th { font-size: .74rem; letter-spacing: .04em; white-space: normal; padding: 10px 10px; }
details.calcul .tableau.gros td { padding: 9px 10px; white-space: nowrap; overflow: visible; }
details.calcul .tableau.gros td .pc { color: var(--muted); font-size: .76rem; margin-left: 4px; }
details.calcul .tableau.gros td.vente { color: #ffb454; }
details.calcul.etapes { margin-top: 8px; }
details.calcul.etapes > summary { font-size: .82rem; color: var(--muted); }
/* tableaux principaux : taille pilotée par --tf (ajustée à la largeur), et séparation avant la dérivation du capital */
details.calcul .tableau.gros table { font-size: var(--tf, .92rem); }
details.calcul .tableau.gros th { font-size: calc(var(--tf, .92rem) * .8); padding: 8px 6px; }
details.calcul .tableau.gros td { padding: 8px 6px; }
details.calcul .tableau.gros th.sep, details.calcul .tableau.gros td.sep { border-left: 1px solid rgba(255,180,84,.35); }
/* deux petits tableaux lisibles l'un sous l'autre dans chaque scénario */
.sous-tab { margin: 14px 0 6px; font-weight: 600; color: var(--text); font-size: .95rem; }
.sous-tab span { font-weight: 300; color: var(--muted); font-size: .8rem; }
.tableau.gros table + .sous-tab, .tableau.gros .sous-tab:not(:first-child) { margin-top: 22px; }
details.calcul .tableau.gros td .pc { display: inline-block; }
details.calcul .tableau.gros td.muet { color: var(--muted); }

/* explication de l'année 1 et petits tableaux clairs */
.histoire { margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid #ffb454; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: .86rem; line-height: 1.65; }
.histoire b { color: var(--text); }
details.calcul .tableau.gros th em { font-style: normal; font-weight: 400; opacity: .75; text-transform: none; letter-spacing: 0; }
details.calcul .tableau.gros td.muet { color: var(--muted); }
.formule-t { margin: 2px 0 8px; padding: 8px 12px; border-radius: 6px; background: #0a0f18; border: 1px dashed var(--border); color: var(--text); font-size: .84rem; }

/* titres de scénario avec pastille de couleur (rouge = règle des 4 %, jaune = montant réel) + un seul tableau ① revenu | ② capital */
h4.scen { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; letter-spacing: .06em; }
h4.scen .pastille { width: 14px; height: 14px; border-radius: 4px; flex: none; align-self: center; }
h4.scen.s4 .pastille { background: rgba(255,45,85,.45); border: 1px solid #ff2d55; box-shadow: 0 0 12px #ff2d55; }
h4.scen.sr .pastille { background: rgba(255,214,64,.45); border: 1px solid #ffd640; box-shadow: 0 0 12px rgba(255,140,30,.9); }
h4.scen.s4 { color: #ff6b85; } h4.scen.sr { color: #ffd640; }
table.deux th.grp1, table.deux th.grp2 { text-align: center; font-size: calc(var(--tf, .92rem) * .95); color: var(--text); border-bottom: 1px solid var(--border); }
table.deux th.grp1 { background: rgba(125,211,252,.06); } table.deux th.grp2 { background: rgba(255,180,84,.07); }
table.deux th span { display: block; font-weight: 300; text-transform: none; letter-spacing: 0; opacity: .75; }
/* 4 onglets : revenu / capital, règle des 4 % (rouge) / montant réel (jaune) */
.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.onglets button { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 9px 14px; font: inherit; font-size: .84rem; cursor: pointer; letter-spacing: .03em; }
.onglets button:hover { color: var(--text); }
.onglets button.o4[aria-selected="true"] { color: #fff; border-color: #ff2d55; background: rgba(255,45,85,.16); box-shadow: 0 0 16px rgba(255,45,85,.45); }
.onglets button.oR[aria-selected="true"] { color: #fff; border-color: #ffd640; background: rgba(255,214,64,.14); box-shadow: 0 0 16px rgba(255,140,30,.5); }
.panneau-onglet[hidden] { display: none; }
.onglets button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; flex: 1 1 200px; }
.onglets button b { font-size: .95rem; color: inherit; }
.onglets button span { font-size: .72rem; opacity: .8; letter-spacing: 0; }
.onglets button i { font-style: normal; font-weight: 600; }
/* les deux boutons de départ, sous les photos */
.modes { max-width: 900px; margin: 22px auto 10px; text-align: center; }
.modes-titre { color: var(--ice); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin-bottom: 12px; }
.modes-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modes-btns button { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px 20px; font: inherit; font-size: 1rem; line-height: 1.35; color: var(--text); cursor: pointer;
  background: radial-gradient(120% 160% at 0% 0%, rgba(255,180,84,.14), transparent 60%), var(--surface); border: 1px solid rgba(255,180,84,.35); border-radius: 10px; box-shadow: 0 0 22px -8px rgba(255,140,30,.55); transition: transform .15s, box-shadow .15s; }
.modes-btns button:hover { transform: translateY(-2px); box-shadow: 0 0 30px -4px rgba(255,140,30,.75); }
.modes-btns button[aria-pressed="true"] { border-color: #ffd640; box-shadow: 0 0 34px -2px rgba(255,180,60,.85), inset 0 0 22px -12px #ffd640; }
.modes-btns .num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #2a1400; background: radial-gradient(circle at 35% 30%, #ffd873, #ff9f1c); box-shadow: 0 0 14px rgba(255,170,40,.75); }
#simulation[hidden] { display: none; }
@media (max-width: 700px) { .modes-btns { grid-template-columns: 1fr; } }
/* ---------- spécifique « acheter ou louer » ---------- */
h4.groupe-titre { margin: 22px 0 10px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); font-weight: 400; border-top: 1px solid var(--border); padding-top: 14px; }
.alerte { margin-top: 10px; padding: 10px 14px; border: 1px solid rgba(255,154,46,.5); border-left: 3px solid #ff9a2e; border-radius: 6px; background: rgba(255,154,46,.07); color: var(--text); font-size: .86rem; }
.champ-prix[hidden] { display: none; }
/* barre coupée en deux : le montant à gauche, la monnaie à droite (même logique pour tous les montants) */
.split { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 5px; background: #0a0f18; overflow: hidden; height: 44px; }
.split:focus-within { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.split input { background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: none !important; height: 100% !important; margin: 0; padding: 0 12px; font: inherit; font-size: .95rem; color: var(--text); text-transform: none; letter-spacing: 0; min-width: 0; }
.split input[type="number"] { flex: 1 1 auto; width: auto; }
.split input[type="text"] { flex: 0 0 72px; width: 72px; text-align: center; text-transform: uppercase; border-left: 1px solid var(--border) !important; color: var(--muted); }
.split input[type="text"]:focus { color: var(--text); }
.split input[type="text"] { flex: 0 0 88px !important; width: 88px !important; padding: 0 6px !important; font-weight: 600; letter-spacing: .06em; }

.split select { flex: 0 0 88px; width: 88px; background: transparent !important; border: 0 !important; border-left: 1px solid var(--border) !important; border-radius: 0 !important; outline: none !important; height: 100% !important; padding: 0 6px !important; margin: 0; font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: .06em; text-align: center; text-align-last: center; color: var(--muted); cursor: pointer; }
.split select:focus { color: var(--text); }
.split select option { background: #0a0f18; color: var(--text); }
/* laisse la place au bouton de langue (fixe, en haut à droite, ajouté par langue.js) */
header.top { padding-right: max(150px, calc((100vw - 1160px) / 2 + 16px)); }

/* espace entre le montant et la monnaie / l'unité */
.pctwrap::after { margin-left: 7px; }

/* aucun fond plein derrière les textes (27/10/2026) : le fond des textes est transparent, jamais un aplat noir ; les cadres gardent leur fond (--surface) */
/* vignettes ALIGNÉES (charte graphique, section Components) : le libellé, la valeur et le détail de toutes les vignettes d'une même rangée sont sur les mêmes lignes, quelle que soit la longueur des textes (sous-grille : 3 lignes communes) */
.tuiles { align-items: stretch; }
.tuiles > .tuile { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }

/* VOLETS REPLIABLES (charte graphique) : même composant partout — cadre, grande flèche grise transparente, fermé par défaut */
details.explication, details.avertissement, details.calcul { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); margin: 20px 0 0; max-width: none; text-align: left; }
details.explication > summary, details.avertissement > summary, details.calcul > summary { display: flex; align-items: center; gap: 16px; padding: 14px 18px; cursor: pointer; list-style: none; color: var(--text); font-size: .95rem; line-height: 1.4; }
details.explication > summary::-webkit-details-marker, details.avertissement > summary::-webkit-details-marker, details.calcul > summary::-webkit-details-marker { display: none; }
details.explication > summary::before, details.avertissement > summary::before, details.calcul > summary::before { content: ""; flex: none; width: 11px; height: 11px; margin: 0 4px 0 2px; border: 0; border-right: 3px solid rgba(157,184,217,.45); border-bottom: 3px solid rgba(157,184,217,.45); background: none; text-shadow: none; transform: rotate(-45deg); transition: transform .2s, border-color .2s; }
details.explication[open] > summary::before, details.avertissement[open] > summary::before, details.calcul[open] > summary::before { transform: rotate(45deg); }
details.explication > summary:hover::before, details.avertissement > summary:hover::before, details.calcul > summary:hover::before { border-right-color: rgba(157,184,217,.8); border-bottom-color: rgba(157,184,217,.8); }
details.explication > summary:hover, details.avertissement > summary:hover, details.calcul > summary:hover { color: var(--ice, var(--text)); }
details.explication > :not(summary), details.avertissement > :not(summary), details.calcul > :not(summary) { margin-left: 18px; margin-right: 18px; margin-bottom: 16px; }
details.explication > summary, details.avertissement > summary, details.calcul > summary { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
details.explication > summary, details.avertissement > summary, details.calcul > summary { color: var(--ice, #9db8d9); }
details.explication > summary:hover, details.avertissement > summary:hover, details.calcul > summary:hover { color: #c5d7ee; }

/* curseurs : aura pulsante quand la souris est sur la pastille (ou pendant qu'on la glisse) ; désactivée si le visiteur réduit les animations */
@keyframes aura-curseur {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(var(--bc-rgb,255,170,40),.75), 0 0 22px rgba(var(--bc2-rgb,255,120,20),.4); }
  50% { box-shadow: 0 0 14px 4px rgba(var(--bc-rgb,255,170,40),.9), 0 0 30px 6px rgba(var(--bc2-rgb,255,120,20),.5); }
}
.curseur input[type=range]::-webkit-slider-thumb:hover, .curseur input[type=range]:active::-webkit-slider-thumb { animation: aura-curseur 1.8s ease-in-out infinite; }
.curseur input[type=range]::-moz-range-thumb:hover, .curseur input[type=range]:active::-moz-range-thumb { animation: aura-curseur 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .curseur input[type=range]::-webkit-slider-thumb:hover, .curseur input[type=range]:active::-webkit-slider-thumb,
  .curseur input[type=range]::-moz-range-thumb:hover, .curseur input[type=range]:active::-moz-range-thumb { animation: none; }
}

/* effets au survol (charte graphique, section « Hover effects ») : aura pulsante des gros chiffres, ligne orangée qui tourne autour des champs, aura pulsante de la barre des curseurs */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes aura-chiffre {
  0%, 100% { text-shadow: 0 0 14px color-mix(in srgb, currentColor 75%, transparent), 0 0 36px color-mix(in srgb, currentColor 40%, transparent); }
  50% { text-shadow: 0 0 20px color-mix(in srgb, currentColor 90%, transparent), 0 0 48px color-mix(in srgb, currentColor 58%, transparent); }
}
.tuile:hover .val, .res-bloc:hover .res-val, .stat:hover .stat-val { animation: aura-chiffre 1.8s ease-in-out infinite; }
@keyframes tour-champ { to { --ang: 360deg; } }
@keyframes pouls-champ { 0%, 100% { box-shadow: 0 0 4px rgba(255,170,40,.3); } 50% { box-shadow: 0 0 12px 1px rgba(255,170,40,.7); } }
.form input:not([type=range]):not([type=checkbox]):not([type=radio]):hover, .form select:hover, .choix-annee:hover {
  border: 2px solid transparent; padding: 8px 9px;
  background: linear-gradient(#0a0f18, #0a0f18) padding-box, conic-gradient(from var(--ang), transparent 0 70%, #ff9f1c 84%, #ffd640 93%, transparent 100%) border-box;
  animation: tour-champ 2.6s linear infinite, pouls-champ 1.8s ease-in-out infinite;
}
@keyframes aura-barre {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--bc2-rgb,255,140,30),.3); }
  50% { box-shadow: 0 0 20px 3px rgba(var(--bc-rgb,255,170,40),.65); }
}
.curseur input[type=range]:not(:disabled):hover { animation: aura-barre 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tuile:hover .val, .res-bloc:hover .res-val, .stat:hover .stat-val, .curseur input[type=range]:hover { animation: none; }
  .form input:hover, .form select:hover, .choix-annee:hover { animation: none; }
}

/* titres au survol (charte graphique, « Hover effects ») : le titre passe en gras sans changer de largeur (contour de 0,55 px : aucun saut de mise en page) */
h1:hover, h2:hover, h3:hover, h4:hover, summary:hover, .form label:hover, .tuile .lib:hover, .res-lib:hover, .stat-lib:hover, .groupe-titre:hover { -webkit-text-stroke: .55px currentColor; }
.form label:hover input, .form label:hover select, .form label:hover output, .form label:hover .pctwrap::after { -webkit-text-stroke: 0; }
@media (prefers-reduced-motion: reduce) { h1:hover, h2:hover, h3:hover, h4:hover, summary:hover { -webkit-text-stroke: 0; } }

/* champs « montant + monnaie » (.split) : la ligne orangée qui tourne fait le tour de la boîte entière, pas des champs intérieurs */
.split:hover { border: 2px solid transparent; background: linear-gradient(#0a0f18, #0a0f18) padding-box, conic-gradient(from var(--ang), transparent 0 70%, #ff9f1c 84%, #ffd640 93%, transparent 100%) border-box; animation: tour-champ 2.6s linear infinite, pouls-champ 1.8s ease-in-out infinite; }
.split input:hover, .split select:hover { animation: none !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { .split:hover { animation: none; } }

/* aura sous un volet quand la souris le survole (charte graphique, « Hover effects ») */
details.explication > summary, details.avertissement > summary, details.calcul > summary { transition: box-shadow .25s, border-color .25s; }
details.explication > summary:hover, details.avertissement > summary:hover, details.calcul > summary:hover { border-color: rgba(46,155,255,.5); box-shadow: 0 8px 18px -8px rgba(46,155,255,.7), 0 0 14px -4px rgba(46,155,255,.35); }

/* Aura au survol des cartes (charte, « Hover effects », 11/10/2026) : la carte (explication, question de la FAQ…) prend une bordure gris clair et une aura douce ; une carte « actif » garde son vert. */
.carte { transition: border-color .25s, box-shadow .25s; }
.carte:hover { border-color: rgba(214,222,232,.6); box-shadow: 0 0 0 1px rgba(214,222,232,.2), 0 0 18px rgba(214,222,232,.25), 0 0 42px -8px rgba(214,222,232,.3); }
.carte.actif:hover { border-color: var(--green); box-shadow: 0 0 0 1px rgba(125,211,252,.5), 0 0 18px rgba(125,211,252,.35); }
.carte:hover .no { color: #ffb020; border-color: rgba(255,176,32,.65); opacity: 1; text-shadow: 0 0 8px rgba(255,176,32,.55); }
.no { transition: color .25s, border-color .25s, text-shadow .25s; }
@media (prefers-reduced-motion: reduce) { .carte { transition: none; } }
/* Vignettes de la section 1 : cadre rectangulaire 3:2 (image entière visible) */
.duo#vignettes .visuel .cadre { aspect-ratio: 3 / 2; }
.duo#vignettes .visuel .cadre { display: block; }
.duo#vignettes .visuel .cadre img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
@media (max-width: 720px) { .duo#vignettes { grid-template-columns: 1fr; } }

/* pastille de numéro (1.1, 1.2…) : jaune orangé avec aura au survol */
.no { transition: color .15s, border-color .15s, box-shadow .15s, text-shadow .15s; }
.no:hover { color: #ffb020; border-color: #ffb020; text-shadow: 0 0 8px rgba(255,176,32,.9); box-shadow: 0 0 12px rgba(255,176,32,.7), inset 0 0 6px rgba(255,176,32,.25); cursor: default; }

/* règle de la charte (11/10/2026) : pastille de numéro jaune orangé avec aura au survol */
.no { transition: color .15s, border-color .15s, box-shadow .15s, text-shadow .15s; }
.no:hover { color: #ffb020; border-color: #ffb020; text-shadow: 0 0 8px rgba(255,176,32,.9); box-shadow: 0 0 12px rgba(255,176,32,.7), inset 0 0 6px rgba(255,176,32,.25); cursor: default; }

/* règle de la charte (11/10/2026) : un champ qui n'est qu'une liste (monnaie…) reste compact, à droite de son libellé, jamais en longue barre dessous */
.col > label:has(> .split > select:only-child) { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; flex-wrap: wrap; }
.col > label:has(> .split > select:only-child) > .split { flex: 0 0 140px; width: 140px; height: 38px; }

/* champ « Vices total » : modifiable, donc cadre plein (les pointillés sont réservés aux chiffres officiels verrouillés), à droite de la monnaie */
.vices-total { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 5px; background: #0a0f18; color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.vices-total b { color: #ffd640; font-size: .95rem; letter-spacing: .02em; }
.vices-total em { font-style: normal; letter-spacing: .04em; text-transform: none; }
.vices-total input { width: 92px; height: 28px; padding: 0 8px; background: #0a0f18; border: 1px solid var(--border); border-radius: 4px; color: #ffd640; font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: .02em; cursor: text; }
.vices-total input:hover, .vices-total input:focus { border-color: #ffb020; outline: none; }

/* « Vices total » à l'extrémité droite de la ligne de la monnaie */
.col:has(#q_devise) .vices-total { margin-left: auto; }

/* règle de la charte (11/10/2026) : un montant modifiable porte un crayon jaune orangé à droite */
.vices-total input { background-image: url("images/crayon.svg"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; padding-right: 36px; }
.split:has(> input[type="number"]) { position: relative; }
.split:has(> input[type="number"])::before, .pctwrap:has(> input[type="number"])::before { content: ""; position: absolute; top: 50%; right: 36px; width: 16px; height: 16px; margin-top: -8px; background: url("images/crayon.svg") no-repeat center / 16px 16px; pointer-events: none; z-index: 1; }
.split:has(> input[type="number"]):has(> select)::before { right: 104px; }
.curseur .pctwrap::before { display: none; }

/* règle de la charte (11/10/2026) : chiffre fixe = valeur forcément constante, cadre en pointillés + cadenas, non modifiable */
.chiffre-fixe { display: flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px dashed rgba(157,184,217,.38); border-radius: 5px; background: #05070b; color: #9fd8ff; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.chiffre-fixe b { color: var(--text, #e6edf7); font-size: 1rem; }
.chiffre-fixe i { margin-left: auto; font-style: normal; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #8b99ad); }

/* règle de la charte « Cards » (11/10/2026) appliquée aux encadrés d'aide sous les champs : au survol, bordure et aura gris clair */
.explic { transition: border-color .25s, box-shadow .25s; }
.explic:hover { border-color: rgba(214,222,232,.6); box-shadow: 0 0 0 1px rgba(214,222,232,.2), 0 0 18px rgba(214,222,232,.25), 0 0 42px -8px rgba(214,222,232,.3); }
@media (prefers-reduced-motion: reduce) { .explic { transition: none; } }
/* Page Vice (14/10/2026) : « Vices total » à gauche, monnaie à droite ; hypothèses repliées par défaut (volet 1.4) */
.col:has(#q_devise) .vices-total { margin-left: 0; margin-right: auto; }
.vices-total .dev-total { font-weight: 600; color: var(--muted); font-size: .72rem; letter-spacing: .1em; }

/* FLÈCHE DES VOLETS (demande du propriétaire, 19/10/2026, charte 6.12.21) : plus grande, gris clair avec aura gris clair ; l'aura pulse au survol pour montrer qu'on peut déplier */
details.explication > summary::before, details.avertissement > summary::before, details.calcul > summary::before { width: 18px; height: 18px; margin: 0 8px 0 4px; border-right: 4px solid #d6dbe3; border-bottom: 4px solid #d6dbe3; filter: drop-shadow(0 0 4px rgba(214,219,227,.9)) drop-shadow(0 0 10px rgba(214,219,227,.5)); }
details.explication > summary:hover::before, details.avertissement > summary:hover::before, details.calcul > summary:hover::before, details.explication > summary:focus-visible::before, details.avertissement > summary:focus-visible::before, details.calcul > summary:focus-visible::before { border-right-color: #ffffff; border-bottom-color: #ffffff; animation: volet-fleche-pulse 1.6s ease-in-out infinite; }
@keyframes volet-fleche-pulse { 50% { filter: drop-shadow(0 0 6px rgba(235,238,243,1)) drop-shadow(0 0 18px rgba(214,219,227,.8)); } }
@media (prefers-reduced-motion: reduce) { details.explication > summary:hover::before, details.avertissement > summary:hover::before, details.calcul > summary:hover::before, details.explication > summary:focus-visible::before, details.avertissement > summary:focus-visible::before, details.calcul > summary:focus-visible::before { animation: none; } }
/* téléphone : les cases d'un formulaire ne dépassent jamais leur cadre (23/10/2026) */
.form > *, .form label { min-width: 0; }
/* téléphone : la note d'un volet à calcul passe à la ligne au lieu d'élargir la page (23/10/2026) */
details > summary > *, details.calcul > summary .note { min-width: 0; }
details.calcul > summary .note { white-space: normal; overflow-wrap: anywhere; }
.form .curseur, .form .pctwrap, .form input, .form select { max-width: 100%; min-width: 0; box-sizing: border-box; }
/* 02/11/2026 : total des vices : passe à la ligne au lieu de déborder sur téléphone (texte long ou traduit) */
.vices-total { flex-wrap: wrap; height: auto; min-height: 38px; max-width: 100%; box-sizing: border-box; row-gap: 4px; padding-top: 4px; padding-bottom: 4px; }