/* ==========================================================================
   Simulateur « Combien ça rapporte ? » : styles propres à la page
   (complète site.css). Version simplifiée du 25/10/2026 : choix en haut,
   coût et « ce que ça comprend » en dessous, formulaire email déplié au clic.
   ========================================================================== */

.page-simulateur{padding-bottom:72px}
@media (min-width:1080px){.page-simulateur{padding-bottom:0}}
.hero--sim{min-height:auto;padding-bottom:40px}
.hero--sim h1{font-size:clamp(2.6rem,8vw,7rem)}

/* Les blocs masqués selon la formule restent masqués malgré leur display:grid */
.page-simulateur [hidden]{display:none!important}

/* ---------- Mise en page ---------- */
.sim{background:var(--beige-2);padding:32px 0 64px}
@media (min-width:1000px){.sim{padding:64px 0 96px}}

/* ---------- Choix ---------- */
.sim-form{display:grid;gap:14px;max-width:1100px}
.sim-bloc{background:var(--beige);border-radius:6px;padding:20px 18px;display:grid;gap:16px}
@media (min-width:760px){.sim-bloc{padding:26px 28px}}
.sim-bloc.champs-2{gap:20px}
.num{color:var(--gold-deep);font-family:var(--display);font-size:1.3rem;font-weight:200;margin-right:12px}
.champ{display:grid;gap:8px;align-content:start}
.champ label,.champ .label,.sim-bloc>.label{font-weight:600;font-size:1rem;display:flex;align-items:baseline;flex-wrap:wrap}
.champ label small{font-weight:400;color:var(--ink-soft);font-size:.85rem;margin-left:6px}
.champs-2{display:grid;gap:18px}
@media (min-width:640px){.champs-2{grid-template-columns:1fr 1fr}}
.aide{font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.aide b{color:var(--ink)}

.sim-form input[type=number],.sim-form input[type=date],.sim-rapporte input[type=email],.sim-rapporte input[type=text],.sim-rapporte input[type=tel],.sim-rapporte input[type=number]{
  width:100%;min-height:48px;padding:10px 14px;border:1px solid rgba(25,30,56,.28);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:1.05rem}
.sim-form input:focus-visible,.sim-rapporte input:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
[aria-invalid=true]{border-color:#B3261E!important;box-shadow:0 0 0 1px #B3261E}

.curseur{display:grid;grid-template-columns:1fr 100px;gap:14px;align-items:center}
.curseur input[type=number]{text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ink) var(--pct,50%),rgba(25,30,56,.18) var(--pct,50%))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(25,30,56,.18)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);margin-top:-12px}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold);border:3px solid var(--ink)}
input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#note-valeur{margin-left:auto;font-family:var(--display);font-size:1.5rem;font-weight:300;color:var(--ink);border:1px solid rgba(25,30,56,.28);background:#fff;border-radius:6px;padding:2px 12px}

/* Formules : Intégrale | À la carte */
.formules{display:grid;gap:16px}
@media (min-width:860px){.formules{grid-template-columns:1fr 1fr;gap:0}.groupe--carte{border-left:1px solid rgba(25,30,56,.25);padding-left:24px}.groupe:first-child{padding-right:24px}}
.groupe-titre{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;margin-bottom:10px}
.groupe-titre small{font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--ink-soft);font-size:.82rem;margin-left:6px}
.groupe-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formule{position:relative;display:block;cursor:pointer}
.formule input{position:absolute;opacity:0;inset:0}
.formule span{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:96px;border:1px solid rgba(25,30,56,.25);border-radius:6px;padding:14px;background:#fff;text-align:center;transition:border-color .2s,background .2s,color .2s,box-shadow .2s}
.formule b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;line-height:1.25}
.formule small{font-size:.8rem;color:var(--ink-soft)}
.formule input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.formule--ch input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:inset 0 -4px 0 var(--gold)}
.formule--cc input:checked+span{background:var(--noir);border-color:var(--noir);color:var(--cream);box-shadow:inset 0 -4px 0 var(--gold-soft,#D9C38A)}
.formule--cs input:checked+span{background:var(--bleu);border-color:var(--bleu);color:#fff}
.formule--cv input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:inset 0 -4px 0 var(--cv-orange)}
.formule input:checked+span small{color:rgba(255,255,255,.75)}
.formule--cs b{color:var(--bleu)}
.formule--cv b{color:var(--navy)}
.formule input:checked+span b{color:inherit}

.case{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem;line-height:1.5}
.case input{width:22px;height:22px;margin-top:1px;flex:none;accent-color:var(--ink)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Résultat : ce que ça coûte | ce que ça comprend ---------- */
.sim-resultats{display:grid;gap:14px;margin-top:22px;max-width:1100px;align-items:start}
@media (min-width:960px){.sim-resultats{grid-template-columns:1.1fr .9fr;gap:20px}}
.sim-resultat{background:var(--ink);color:#fff;border-radius:8px;padding:24px 20px;display:grid;gap:14px}
@media (min-width:760px){.sim-resultat{padding:32px}}
.sim-resultat h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.sim-resultat h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:rgba(255,255,255,.7);margin:14px 0 2px}
.sim-resultat h3 small{text-transform:none;letter-spacing:0;font-family:var(--body);margin-left:6px}
.ligne{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.ligne>span:first-child{font-size:.97rem}
.ligne small{display:block;font-size:.8rem;color:rgba(255,255,255,.6);margin-top:2px}
.ligne>span:last-child{white-space:nowrap;text-align:right;font-family:var(--display);font-size:1.3rem;font-weight:300}
.ligne>span:last-child small{display:inline;margin-left:2px}
.ligne s{color:rgba(255,255,255,.5);font-size:.9rem;margin-right:8px}
.ligne--sous-total{border-bottom:0}
.ligne--sous-total>span:last-child{font-weight:400}
.ligne--total{border:1px solid var(--gold);border-radius:6px;padding:12px 14px;margin:6px 0 4px}
.ligne--total>span:first-child{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em}
.ligne--total small{font-family:var(--body);text-transform:none;letter-spacing:0}
.ligne--total>span:last-child{color:var(--gold);font-size:1.8rem}
.ligne--total-2>span:last-child{font-size:1.5rem}
.conditions{list-style:none;display:grid;gap:8px;margin-top:6px;font-size:.92rem}
.conditions li{padding-left:12px;border-left:3px solid rgba(255,255,255,.3)}
.conditions .cond-alerte{border-left-color:var(--gold);color:var(--gold)}
.conditions .cond-ok{border-left-color:#7FC48F}
.sim-resultat .btn{justify-self:start;margin-top:8px}
.sim-resultat .mention{font-size:.78rem;color:rgba(255,255,255,.55)}
.sim-erreur{background:rgba(229,182,45,.15);border-left:3px solid var(--gold);padding:10px 12px;font-size:.92rem}

.sim-comprend{background:#fff;border-radius:8px;padding:24px 20px}
@media (min-width:760px){.sim-comprend{padding:32px}}
@media (min-width:960px){.sim-comprend{position:sticky;top:calc(var(--nav-h) + 20px)}}
.sim-comprend h2{font-family:var(--display);font-weight:300;text-transform:uppercase;font-size:1.45rem;letter-spacing:.03em;margin:10px 0 16px}
.comprend{list-style:none;display:grid;gap:12px}
.comprend li{padding-left:28px;position:relative;font-size:.93rem;line-height:1.5;color:var(--ink-soft)}
.comprend li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold-deep);font-weight:700}
.comprend b{display:block;color:var(--ink)}
.comprend-plus-titre,.comprend-sans-titre{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;margin:4px 0 10px}
.comprend--plus{background:var(--beige);border-radius:6px;padding:14px;margin-bottom:16px}
.comprend-sans-titre{margin-top:20px}
.comprend--sans li{color:var(--ink-soft)}
.comprend--sans li::before{content:"✕";color:rgba(25,30,56,.4)}
.comprend-frais{margin-top:16px;padding:12px 14px;background:var(--beige);border-radius:6px;font-size:.92rem}
.lien-integrale{display:inline-block;margin-top:14px;font-weight:600;color:var(--ink)}

/* Barre de résumé collée en bas sur mobile */
.sim-barre{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--beige);text-decoration:none;font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.sim-barre b{font-weight:400;color:var(--gold);font-size:1.1rem;letter-spacing:0}
@media (min-width:1080px){.sim-barre{display:none}}

/* ---------- Voir ce que ça rapporte ---------- */
.sim-rapporte{max-width:820px;margin-top:40px;display:grid;gap:18px}
.sim-carte{background:#fff;border-radius:8px;padding:22px 18px;display:grid;gap:18px;box-shadow:0 10px 40px rgba(25,30,56,.08)}
@media (min-width:760px){.sim-carte{padding:30px}}
.sim-carte .btn{justify-self:start}
.sim-message{font-size:.95rem;min-height:1.2em}
.sim-message.erreur{color:#B3261E}
.sim-message.info{color:var(--ink-soft)}
.sim-ok{border-left:4px solid var(--gold)}

/* ---------- Ajustements du 25/10/2026 (soir) ---------- */
/* (i) : explication d'un chiffre */
.i{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;font:italic 600 .72rem/1 Georgia,serif;cursor:pointer;vertical-align:1px;opacity:.75;position:relative}
.i::after{content:"";position:absolute;inset:-12px}
.i:hover,.i[aria-expanded=true]{opacity:1;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.i:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.i-texte{display:block;margin:8px 0 2px;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.1);font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.9);font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--body)}
/* Pourcentage mis en avant (à la carte) */
.taux-principal{display:flex;align-items:center;gap:18px;margin:10px 0 4px;padding:16px;border:1px solid var(--gold);border-radius:8px}
.taux-valeur{font-family:var(--display);font-weight:300;font-size:clamp(3rem,10vw,4.2rem);line-height:1;color:var(--gold);white-space:nowrap}
.taux-libelle{font-size:1rem;font-weight:600}
.taux-libelle small{display:block;font-weight:400;font-size:.85rem;color:rgba(255,255,255,.7);margin-top:4px}
/* Deux boutons d'action */
.sim-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.sim-actions .btn{margin:0}
@media (max-width:560px){.taux-principal{flex-direction:column;align-items:flex-start;gap:6px}}
/* Logos dans les boutons de formule (25/10/2026) : carte blanche, bordure à la couleur de la marque une fois choisie */
.formule span{min-height:128px;gap:8px}
.formule-logo{display:block;height:62px;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
.formule--ch input:checked+span,.formule--cc input:checked+span,.formule--cs input:checked+span,.formule--cv input:checked+span{background:#fff;color:var(--ink)}
.formule input:checked+span small{color:var(--ink-soft)}
.formule--ch input:checked+span{border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy),inset 0 -6px 0 var(--gold)}
.formule--cc input:checked+span{border-color:#1F6FB2;box-shadow:inset 0 0 0 2px #1F6FB2,inset 0 -6px 0 #1F6FB2}
.formule--cs input:checked+span{border-color:var(--bleu);box-shadow:inset 0 0 0 2px var(--bleu),inset 0 -6px 0 var(--gold)}
.formule--cv input:checked+span{border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy),inset 0 -6px 0 var(--cv-orange)}
.formule input:not(:checked)+span{opacity:.82}