[hidden] { display: none !important; }
.toujours { display: inline !important; }

/* Barre d'avancement */
.barre { max-width: 695px; margin: 20px auto 0; padding: 0 20px; }
.barre div { height: 4px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.barre span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent-3), var(--accent)); transition: width .5s cubic-bezier(.2,.8,.2,1); }

.q { max-width: 695px; margin: 0 auto; padding: 28px 20px 100px; }
.retour { background: none; border: 0; color: var(--doux); font: inherit; font-size: 14px; cursor: pointer; padding: 0; margin-bottom: 22px; }
.retour:hover { color: var(--texte); }
.ecran { animation: entre .45s cubic-bezier(.2,.8,.2,1); }
@keyframes entre { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.kicker { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.q h1 { font-size: 27px; letter-spacing: -.03em; line-height: 1.02; margin-bottom: 4px; }
.q h1 .doux { color: var(--accent); }
.q .aide { color: var(--doux); margin-top: 10px; }
.centre { text-align: center; } .centre .kicker { text-align: center; }

/* Options : mêmes cartes que la référence */
.options { margin-top: 34px; display: grid; gap: 10px; max-width: 640px; }
.options.deux { grid-template-columns: 1fr 1fr; }
.opt { position: relative; text-align: left; font: inherit; color: var(--texte); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--bord); border-radius: 11px; padding: 16px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--edge); transition: border-color .16s, background .16s, transform .16s, box-shadow .16s; }
.opt:hover { border-color: var(--bord-3); transform: translateY(-1px); }
.opt.choisi { border-color: rgba(174,185,204,.55); background: linear-gradient(180deg, rgba(174,185,204,.14), rgba(174,185,204,.05)); box-shadow: 0 0 0 1px rgba(174,185,204,.2), 0 16px 40px -22px var(--accent-glow); }
.opt b { font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; }
.opt small { color: var(--doux); font-size: 14px; }
.opt .illu { width: 46px; height: 32px; color: var(--accent); margin-bottom: 10px; }
.options.deux .opt { padding: 20px 20px 16px; }

/* Échelle 1 à 5 */
.echelle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 34px; }
.echelle .opt { align-items: center; text-align: center; padding: 14px 6px; }
.echelle .opt b { font-family: var(--titre); font-size: 22px; }
.echelle .opt small { font-size: 11px; line-height: 1.2; }

.continuer { margin-top: 28px; width: 100%; max-width: 640px; justify-content: center; }
.continuer:disabled { opacity: .35; cursor: default; box-shadow: none; }
.champ { width: 100%; max-width: 640px; margin-top: 30px; padding: 16px 18px; border-radius: 11px; background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--bord-2); color: var(--texte); font: inherit; box-shadow: var(--edge); }
textarea.champ { min-height: 120px; resize: vertical; }
.champ:focus { outline: none; border-color: rgba(174,185,204,.55); }
.petit { color: var(--doux-3); font-size: 12.5px; margin-top: 12px; }

/* Curseur de revenu */
.curseur-bloc { margin-top: 40px; text-align: center; }
.montant { font-family: var(--titre); font-size: 54px; font-weight: 600; letter-spacing: -.04em; }
.palier { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.curseur { width: 100%; margin: 28px 0 10px; accent-color: #fff; }
.calcul-clients { color: var(--doux); font-size: 15px; }

.carte { background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--bord); border-radius: 14px; padding: 20px; margin-top: 18px; box-shadow: var(--edge); text-align: left; }
.a-remplir { border-style: dashed; border-color: var(--bord-3); color: var(--doux); text-align: center; }
.liste-points { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 24px; }
.liste-points li { display: flex; gap: 12px; } .liste-points li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(174,185,204,.14); color: var(--accent); display: grid; place-items: center; font-size: 12px; }

/* Chargement */
.anneau { width: 170px; height: 170px; margin: 30px auto; position: relative; }
.anneau svg { transform: rotate(-90deg); }
.anneau b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titre); font-size: 42px; font-weight: 600; }
.anneau b small { font-size: 18px; color: var(--doux); }
.liste { list-style: none; padding: 0; display: grid; gap: 12px; max-width: 360px; margin: 0 auto; text-align: left; }
.liste li { display: flex; gap: 10px; align-items: center; color: var(--doux-3); transition: color .3s; }
.liste li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.liste li.fait { color: var(--texte); } .liste li.fait::before { content: "✓"; display: grid; place-items: center; font-size: 11px; background: #fff; color: #000; border-color: #fff; }

.voile { position: fixed; inset: 0; background: rgba(5,5,8,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modale { background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--bord-2); border-radius: 20px; padding: 26px; max-width: 440px; width: 100%; animation: entre .35s ease; box-shadow: 0 24px 60px -24px rgba(0,0,0,.9); }
.modale h2 { font-size: 24px; margin-bottom: 8px; } .modale p { color: var(--doux); } .modale .options { margin-top: 22px; }

/* Projection */
.proj-montant { font-family: var(--titre); font-size: 40px; font-weight: 600; letter-spacing: -.04em; margin: 18px 0 4px; }
.proj-montant em { font-style: normal; color: var(--doux); font-size: 22px; margin: 0 6px; }
.graphe { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 18px; }
.graphe i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--accent-2), rgba(174,185,204,.2)); animation: monte .9s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
@keyframes monte { from { transform: scaleY(0); } }
.mois { display: flex; justify-content: space-between; color: var(--doux-3); font-family: var(--mono); font-size: 11px; margin-top: 8px; }

/* Serment (empreinte) */
.empreinte { width: 120px; height: 120px; margin: 36px auto 14px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--bord-2); background: radial-gradient(circle, rgba(174,185,204,.12), transparent 70%); color: var(--accent); cursor: pointer; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.empreinte svg { width: 58px; height: 58px; }
.empreinte::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #fff; clip-path: inset(100% 0 0 0); transition: clip-path 1.6s linear; }
.empreinte.appui::after { clip-path: inset(0 0 0 0); }
.empreinte.ok { color: #fff; background: radial-gradient(circle, rgba(174,185,204,.35), transparent 70%); }

/* Formules */
.remise { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(242,167,220,.35); background: rgba(242,167,220,.06); margin-top: 22px; }
.remise b { font-weight: 600; } .remise span { font-family: var(--mono); font-size: 12px; padding: 4px 9px; border-radius: 7px; background: #f2a7dc; color: #1a0b16; font-weight: 600; }
.formules { display: grid; gap: 12px; margin-top: 18px; }
.formule { text-align: left; font: inherit; color: var(--texte); border-radius: 14px; border: 1px solid var(--bord); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); padding: 18px 20px; cursor: pointer; box-shadow: var(--edge); position: relative; transition: border-color .16s; }
.formule.choisi { border-color: rgba(174,185,204,.6); box-shadow: 0 0 0 1px rgba(174,185,204,.25), 0 16px 40px -22px var(--accent-glow); }
.formule-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.formule-haut b { font-size: 18px; font-weight: 600; }
.formule-prix { text-align: right; }
.formule-prix s { color: var(--doux-3); margin-right: 8px; font-size: 14px; }
.formule-prix strong { font-family: var(--titre); font-size: 24px; font-weight: 600; }
.formule-prix small { display: block; color: var(--doux); font-size: 12.5px; }
.formule ul { list-style: none; padding: 0; margin-top: 12px; display: none; gap: 6px; color: var(--doux); font-size: 14px; }
.formule.choisi ul { display: grid; }
.formule ul li::before { content: "✓  "; color: var(--accent); }
.populaire { position: absolute; top: -10px; right: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: var(--accent-2); color: #0a0a0d; font-weight: 600; }
.payer { position: relative; background: transparent; color: #fff; border: 0; box-shadow: none; }
.payer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(90deg, #f2a7dc, #7aa2f7, #f2a7dc); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.payer:hover { background: rgba(242,167,220,.08); }
.garantie { display: flex; gap: 14px; align-items: flex-start; }
.garantie svg { flex: none; color: var(--accent); }
.garantie small { color: var(--doux-3); }
.faq-mini details { border-bottom: 1px solid var(--bord); padding: 16px 0; }
.faq-mini summary { font-size: 15.5px; }

@media (max-width: 480px) {
  .q { padding: 22px 16px 90px; } .barre { padding: 0 16px; }
  .montant { font-size: 46px; }
}

/* Note qui sort sous la réponse après le clic */
.note-tiroir { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.22,.8,.24,1); }
.options.deux > .note-tiroir { grid-column: 1 / -1; }
.note-tiroir > * { overflow: hidden; min-height: 0; }
.note-tiroir.ouvert { grid-template-rows: 1fr; }
.note-choix { margin: 5px 0 3px; padding: 11px 14px; border: 1px solid var(--bord-2); border-left: 2px solid var(--accent); border-radius: 0 11px 11px 0; background: rgba(174,185,204,.09); font-size: 14px; line-height: 1.45; transition: opacity .35s, transform .35s; transform-origin: top center; }
.note-tiroir:not(.ouvert) > .note-choix { opacity: 0; transform: translateY(-10px) scaleY(.97); }
@media (min-width: 640px) { .note-choix { margin: 6px 0 4px; padding: 14px 18px; font-size: 15px; line-height: 1.5; } }

/* Chargement, comme la référence */
.calcul .aide { margin-bottom: 22px; }
.calcul-anneau { position: relative; width: 190px; margin: 6px auto 0; }
.calcul-anneau svg { display: block; width: 100%; transform: rotate(-90deg); }
.anneau-fond { fill: none; stroke: var(--bg-3); stroke-width: 6; }
.anneau-trait { fill: none; stroke: var(--accent-2); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .2s linear; filter: drop-shadow(0 0 8px var(--accent-glow)); }
.calcul-pct { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; margin: 0; }
.calcul-pct b { font-family: var(--titre); font-size: 46px; font-weight: 600; letter-spacing: -.04em; }
.calcul-pct i { font-style: normal; color: var(--doux); font-size: 20px; margin-left: 2px; }
.calcul-etapes { list-style: none; margin: 26px auto 0; padding: 0; max-width: 340px; display: grid; gap: 14px; text-align: left; }
.calcul-etape { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--doux-3); transition: color .3s; }
.calcul-coche { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--bord-2); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.calcul-etape.encours, .calcul-etape.fait { color: var(--texte); }
.calcul-etape.encours .calcul-coche { border-color: var(--accent); border-right-color: transparent; animation: tourne .9s linear infinite; }
.calcul-etape.fait .calcul-coche { border-color: #3ddc84; background: rgba(61,220,132,.15); }
.calcul-etape.fait .calcul-coche::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #3ddc84; border-bottom: 2px solid #3ddc84; transform: rotate(-45deg) translate(1px,-1px); }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Fenêtre pendant le calcul */
.modale { padding: 30px 30px 26px; }
.popup-question { font-family: var(--titre); font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.popup-detail { margin-top: 10px; font-size: 14.5px; color: var(--doux); }
.popup-actions { margin-top: 24px; display: flex; gap: 10px; }
.popup-actions .btn { flex: 1; justify-content: center; padding: 13px 16px; }

/* PC : même colonne centrée, un peu plus d'air */
@media (min-width: 900px) { .q { padding-top: 48px; } .q h1 { font-size: 34px; } }