/* Simulateur patrimonial S'investir Conseil
   Tout est scope sous .simu : rien ne fuit vers le theme WordPress, rien n'entre.
   .simu-page  : pleine page (deploiement autonome)
   .simu-embed : integre dans une page du site ; --simu-top = hauteur du header fixe */

.simu{
  --encre:#01040B; --marine:#0C2241; --or:#F7DA89; --or-profond:#8A6A1E;
  --degrade:linear-gradient(135deg,#0C2241 0%,#00040C 100%);
  --papier:#FBFAF7; --carte:#FFFFFF;
  --trait:#E6E1D6; --trait-fort:#CFC7B5; --ardoise:#6B6862;
  --alerte:#9B2C2C;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Newsreader,ui-serif,"New York",Georgia,serif;
  --r:14px; --ease:cubic-bezier(.22,.61,.36,1);
  --simu-top:0px;

  background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  display:grid;grid-template-columns:296px 1fr;
}
.simu-page{min-height:100vh}
.simu *,.simu *::before,.simu *::after{box-sizing:border-box}
.simu :focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:4px}
.simu h1,.simu h2,.simu h3,.simu h4{text-wrap:balance;color:inherit}
.simu button,.simu input{font-family:inherit;letter-spacing:normal;text-transform:none}
.simu a{color:inherit}

/* ─────────────────────────── dossier vivant ─────────────────────────── */
.simu .dossier{
  border-right:1px solid var(--trait);padding:30px 26px;
  position:sticky;top:var(--simu-top);height:calc(100vh - var(--simu-top));
  display:flex;flex-direction:column;overflow:hidden;
}
.simu .marque{width:54px;height:54px;background:url(logo.webp) no-repeat left center / contain}
.simu .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.simu .dossier-titre{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--or-profond);margin:34px 0 4px}
.simu .fentes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.simu .fente{padding:13px 0;border-top:1px solid var(--trait)}
.simu .fente:first-child{border-top:0}
.simu .fente dt{font-size:11.5px;color:var(--ardoise);margin-bottom:5px;letter-spacing:.02em}
.simu .fente dd{margin:0;font-size:14px;line-height:1.35;min-height:19px}
.simu .fente dd.vide::after{content:"";display:block;height:1px;width:34px;background:var(--trait-fort);margin-top:8px}
.simu .fente dd.remplie.neuve{animation:simu-arrive .45s var(--ease) both}
@keyframes simu-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.simu .jauge{margin-top:6px}
.simu .jauge-piste{position:relative;height:1px;background:var(--trait-fort);margin:16px 0 9px}
.simu .jauge-pion{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--marine);border:2px solid var(--papier);transform:translate(-50%,-50%);transition:left .5s var(--ease)}
.simu .jauge-legende{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ardoise)}

.simu .compteur{margin-top:auto;padding-top:18px;border-top:1px solid var(--trait);font-size:12.5px;color:var(--ardoise);line-height:1.45}
.simu .compteur b{display:block;font-family:var(--serif);font-optical-sizing:auto;font-size:28px;font-weight:500;color:var(--encre);line-height:1;margin-bottom:5px}
.simu .compteur.masque{visibility:hidden}

/* ─────────────────────────── scène ─────────────────────────── */
.simu .scene{padding:60px 56px 110px;display:flex;justify-content:center}
.simu .colonne{width:100%;max-width:620px;min-width:0}
@keyframes simu-entre{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.simu .fil{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.simu .fil-etape{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or-profond)}
.simu .fil-barre{flex:1;height:1px;background:var(--trait)}
.simu .fil-barre i{display:block;height:1px;background:var(--marine);transition:width .45s var(--ease)}

.simu .echo{font-size:13.5px;color:var(--ardoise);border-left:2px solid var(--or);padding:2px 0 2px 13px;margin:0 0 22px}
.simu .question{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.012em;margin:0 0 13px}
.simu .aide{color:var(--ardoise);font-size:15px;margin:0 0 32px;max-width:54ch}

/* accueil */
.simu .intro-titre{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(34px,4.6vw,54px);line-height:1.06;letter-spacing:-.015em;margin:0 0 22px}
.simu .intro-texte{font-size:17px;color:var(--ardoise);margin:0 0 30px;max-width:52ch;line-height:1.55}
.simu .intro-liste{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:1px;background:var(--trait);border-radius:var(--r);overflow:hidden}
.simu .intro-liste li{background:var(--carte);padding:15px 20px;display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:baseline;font-size:15px}
.simu .intro-liste li span{font-size:11px;font-weight:600;color:var(--or-profond);letter-spacing:.06em}
.simu .intro-meta{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13px;color:var(--ardoise);margin:26px 0 0}
.simu .intro-meta b{color:var(--encre);font-weight:600}
.simu .intro-sommaire{font-size:12px;color:var(--ardoise);letter-spacing:.02em;margin:38px 0 0;padding-top:18px;border-top:1px solid var(--trait)}
.simu .intro-sommaire b{color:var(--encre);font-weight:600}

/* cartes */
.simu .cartes{display:grid;gap:8px}
.simu .carte{
  appearance:none;width:100%;text-align:left;cursor:pointer;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:17px 20px;font-size:16px;line-height:1.45;color:inherit;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.simu .carte .fin{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:20px}
.simu .carte .fleche{opacity:0;transform:translateX(-4px);transition:.18s var(--ease);color:var(--or-profond)}
.simu .carte:hover{border-color:var(--trait-fort);transform:translateY(-1px);box-shadow:0 6px 18px rgba(1,4,11,.05)}
.simu .carte:hover .fleche{opacity:1;transform:none}
.simu .carte[aria-pressed="true"]{color:#fff;border-color:var(--marine);transition-delay:.06s}
.simu .carte[aria-pressed="true"] .fleche{opacity:1;transform:none;color:var(--or)}
.simu .carte kbd{display:none}

/* montant */
.simu .montant{border-bottom:1px solid var(--trait-fort);padding-bottom:13px;margin-bottom:24px;display:flex;align-items:baseline;gap:12px}
.simu .montant input{font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(40px,5.8vw,60px);line-height:1;border:0;background:none;padding:0;width:100%;color:inherit;letter-spacing:-.015em;font-variant-numeric:tabular-nums;box-shadow:none}
.simu .montant input:focus{outline:none}
.simu .montant .devise{font-family:var(--serif);font-size:clamp(26px,3.8vw,36px);color:var(--ardoise)}
.simu .jetons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.simu .jeton{appearance:none;cursor:pointer;font-size:13.5px;background:none;border:1px solid var(--trait);border-radius:999px;padding:8px 15px;color:var(--ardoise);transition:.16s var(--ease)}
.simu .jeton:hover{border-color:var(--trait-fort);color:var(--encre)}
.simu .jeton[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff}

/* email */
.simu .champ{width:100%;font-size:17px;padding:16px 18px;color:inherit;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);margin-bottom:12px;box-shadow:none}
.simu .champ:focus{outline:none;border-color:var(--encre)}
.simu .champ[aria-invalid="true"]{border-color:var(--alerte)}
.simu .erreur{font-size:13px;color:var(--alerte);margin:0 0 12px}
.simu .consentement{font-size:12px;color:var(--ardoise);line-height:1.5;margin:0 0 26px;max-width:58ch}

/* barre d'actions */
.simu .barre{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
.simu .retour{appearance:none;background:none;border:0;cursor:pointer;font-size:14px;color:var(--ardoise);padding:8px 0}
.simu .retour:hover{color:var(--encre)}
.simu .retour[hidden]{display:none}
.simu .suite{appearance:none;cursor:pointer;font-size:15px;font-weight:600;background:var(--degrade);color:#fff;border:0;border-radius:999px;padding:14px 30px;transition:.18s var(--ease);text-decoration:none;display:inline-block}
.simu .suite:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(12,34,65,.28)}
.simu .suite:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}

/* ─────────────────────────── résultat ─────────────────────────── */
.simu .res .bloc{animation:simu-entre .5s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
.simu .res-tete{border-bottom:1px solid var(--trait);padding-bottom:32px;margin-bottom:38px}
.simu .profil{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(38px,5.4vw,58px);line-height:1.02;letter-spacing:-.018em;margin:0 0 24px}
.simu .spectre-piste{position:relative;height:1px;background:var(--trait-fort);margin:46px 0 10px}
.simu .spectre-marque{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--marine);border:2px solid var(--papier);transform:translate(-50%,-50%);animation:simu-glisse 1s var(--ease) .2s both}
.simu .spectre-bulle{position:absolute;bottom:14px;transform:translateX(-50%);font-size:12px;font-weight:600;white-space:nowrap;animation:simu-glisse 1s var(--ease) .2s both}
/* Animations CSS uniquement : leur etat de repos est l'etat final. Si JS ou rAF est
   ralenti (onglet en arriere-plan, iframe), rien ne reste cache. */
@keyframes simu-glisse{from{left:0}}
.simu .graphe .trace{animation:simu-trace 1.4s var(--ease) .3s both}
@keyframes simu-trace{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.simu .graphe .fin-courbe{animation:simu-fondu .5s ease 1.6s both}
@keyframes simu-fondu{from{opacity:0}}
.simu .spectre-legende{display:flex;justify-content:space-between;font-size:12px;color:var(--ardoise)}
.simu .spectre-legende b{font-weight:600;color:var(--encre)}
.simu .hypothese{font-size:14px;color:var(--ardoise);margin:20px 0 0}
.simu .hypothese b{color:var(--encre);font-weight:600;white-space:nowrap}

.simu .bloc{margin-bottom:44px}
.simu .bloc-titre{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or-profond);margin:0 0 18px}
.simu .bloc-note{font-size:13px;color:var(--ardoise);margin:-8px 0 20px;max-width:58ch}

.simu .masses{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.simu .masse{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:18px}
.simu .masse dt{font-size:12.5px;color:var(--ardoise);margin-bottom:8px}
.simu .masse dd{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:21px;line-height:1.2}

.simu .points{list-style:none;margin:0;padding:0}
.simu .point{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:20px 0;border-top:1px solid var(--trait)}
.simu .point:first-child{border-top:0;padding-top:0}
.simu .point-num{font-size:12px;font-weight:600;color:var(--or-profond);padding-top:3px}
.simu .point h4{margin:0 0 6px;font-size:16.5px;font-weight:600;line-height:1.3}
.simu .point p{margin:0;font-size:14px;color:var(--ardoise);line-height:1.55}

.simu .enjeux{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--trait);border-radius:var(--r);overflow:hidden}
.simu .enjeu{background:var(--carte);padding:17px 20px}
.simu .enjeu h4{margin:0 0 4px;font-size:15px;font-weight:600}
.simu .enjeu p{margin:0;font-size:13.5px;color:var(--ardoise);line-height:1.5}

.simu .graphe{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:20px 18px 14px;overflow-x:auto}
.simu .graphe svg{display:block;width:100%;height:auto}
.simu .graphe-pied{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--ardoise);margin-top:12px;padding-top:12px;border-top:1px solid var(--trait)}
.simu .cle{display:inline-block;width:16px;height:2px;vertical-align:middle;margin-right:7px;background:var(--encre)}
.simu .chiffres{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.simu .chiffre{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:16px 18px}
.simu .chiffre dt{font-size:12.5px;color:var(--ardoise);margin-bottom:6px}
.simu .chiffre dd{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:24px;line-height:1.1}
.simu .chiffre dd small{display:block;font-family:var(--sans);font-weight:400;font-size:13px;color:var(--ardoise);margin-top:6px}

.simu .cta{color:#fff;border-radius:18px;padding:40px 36px;margin-bottom:20px;position:relative;overflow:hidden;min-height:240px;
  background:linear-gradient(135deg,#00040C 0%,#0C2241 46%,#556175 100%)}
.simu .cta::before{content:"";position:absolute;right:26px;top:50%;width:250px;height:250px;transform:translateY(-50%);
  background:url(logo.webp) center / contain no-repeat;opacity:.62;pointer-events:none}
.simu .cta > *{position:relative;z-index:1}
.simu .cta h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:27px;line-height:1.14;margin:0 0 10px;color:#fff}
.simu .cta p{margin:0 0 22px;font-size:14.5px;color:rgba(255,255,255,.7)}
@media (min-width:901px){.simu .cta h3,.simu .cta p{max-width:58%}}
.simu .cta-bouton{display:inline-block;cursor:pointer;font-size:15px;font-weight:600;background:var(--or);color:var(--encre);border:0;border-radius:999px;padding:14px 30px;transition:.18s var(--ease);text-decoration:none}
.simu .cta-bouton:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(247,218,137,.28)}
.simu .mentions{font-size:11.5px;color:var(--ardoise);line-height:1.55;max-width:72ch;margin:0 0 26px}
.simu .reprendre{appearance:none;background:none;border:1px solid var(--trait);border-radius:999px;cursor:pointer;font-size:13.5px;color:var(--ardoise);padding:10px 20px}
.simu .reprendre:hover{border-color:var(--trait-fort);color:var(--encre)}

/* ─────────────────────────── mobile ─────────────────────────── */
@media (max-width:900px){
  .simu{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .simu .dossier{position:static;height:auto;border-right:0;border-bottom:1px solid var(--trait);padding:16px 20px;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;overflow:visible}
  .simu .marque{width:40px;height:40px}
  .simu .dossier-titre,.simu .fentes,.simu .jauge{display:none}
  .simu .compteur{margin:0;padding:0;border:0;text-align:right;font-size:11.5px;max-width:48%}
  .simu .compteur b{display:inline;font-size:15px;margin:0}
  .simu .scene{padding:32px 20px 90px}
  .simu .masses,.simu .chiffres{grid-template-columns:1fr}
  .simu .cta{padding:28px 22px;min-height:0}
  .simu .cta::before{width:160px;height:160px;right:-6px;top:auto;bottom:-22px;transform:none;opacity:.42}
  .simu .barre{flex-direction:row-reverse}
  .simu .suite{flex:1;text-align:center}
  .simu .intro-meta{gap:6px 18px}
}
@media (min-width:901px){
  .simu .carte kbd{display:inline-block;font-family:var(--sans);font-size:10.5px;color:var(--trait-fort);border:1px solid var(--trait);border-radius:5px;padding:1px 5px;justify-self:end;transition:.18s var(--ease)}
  .simu .carte:hover kbd{display:none}
  .simu .carte[aria-pressed="true"] kbd{display:none}
}
@media (prefers-reduced-motion:reduce){
  .simu *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════ MOUVEMENT ═══════════════════════════
   Regle : n'animer que transform, opacity et clip-path. Etat de repos = etat final. */

/* 1. transition entre ecrans : sortie breve, entree en cascade */
/* Pas de maintien de l'etat final : si le timer de bascule est retarde, l'ecran revient au lieu de rester vide. */
.simu .vue.sort{animation:simu-sort .16s var(--ease)}
@keyframes simu-sort{to{opacity:0;transform:translateY(-10px)}}
.simu .vue:not(.res) > *{animation:simu-entre .45s var(--ease) both}
.simu .vue:not(.res) > :nth-child(2){animation-delay:50ms}
.simu .vue:not(.res) > :nth-child(3){animation-delay:100ms}
.simu .vue:not(.res) > :nth-child(4){animation-delay:150ms}
.simu .vue:not(.res) > :nth-child(5){animation-delay:200ms}
.simu .vue:not(.res) > :nth-child(6){animation-delay:250ms}
.simu .vue:not(.res) > :nth-child(7){animation-delay:300ms}
.simu .vue:not(.res) > .cartes,.simu .vue:not(.res) > .intro-liste,.simu .vue:not(.res) > .intro-titre{animation:none}
.simu .carte{animation:simu-entre .4s var(--ease) both;animation-delay:calc(150ms + var(--k,0) * 40ms)}
.simu .vue.sort > *,.simu .vue.sort .carte{animation:none}

/* 2. selection de carte : balayage encre de gauche a droite */
.simu .carte{position:relative;isolation:isolate;overflow:hidden}
.simu .carte::before{content:"";position:absolute;inset:0;background:var(--degrade);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease);z-index:-1}
.simu .carte[aria-pressed="true"]::before{transform:scaleX(1)}
.simu .carte:active{transform:scale(.995)}

/* 3. accueil orchestre : mots du titre, puis liste, bouton, mentions ; traits du dossier */
.simu .intro-titre .m{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.simu .intro-titre .m i{display:inline-block;font-style:normal;animation:simu-monte .75s var(--ease) both;animation-delay:calc(var(--k,0) * 55ms)}
@keyframes simu-monte{from{transform:translateY(112%)}}
.simu .vue:not(.res) > .intro-texte{animation-delay:.5s}
.simu .intro-liste li{animation:simu-entre .5s var(--ease) both;animation-delay:calc(.65s + var(--k,0) * 90ms)}
.simu .vue:not(.res) > .barre{animation-delay:.95s}
.simu .vue:not(.res) > .intro-meta{animation-delay:1.05s}
.simu .vue:not(.res) > .intro-sommaire{animation-delay:1.15s}
.simu .fente dd.vide::after{transform-origin:left}
.simu .dossier.debut .fente dd.vide::after{animation:simu-trait .6s var(--ease) both;animation-delay:calc(.3s + var(--k,0) * 70ms)}
@keyframes simu-trait{from{transform:scaleX(0)}}

/* 4. cartes sur deux colonnes quand les libelles sont courts */
@media (min-width:901px){.simu .cartes.courtes{grid-template-columns:1fr 1fr}}

/* 5. dossier : un trait or se dessine sous la ligne qui vient de se remplir, puis seche */
.simu .fente dd.remplie{position:relative}
.simu .fente dd.remplie.neuve::after{content:"";position:absolute;left:0;bottom:-7px;height:1px;width:100%;background:var(--or-profond);transform-origin:left;animation:simu-encre 1.6s var(--ease) both}
@keyframes simu-encre{0%{transform:scaleX(0);opacity:1}40%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* 6. compteur : le chiffre roule quand il change */
.simu .compteur-n{display:inline-block}
.simu .compteur-n.roule{animation:simu-roule .4s var(--ease) both}
@keyframes simu-roule{from{transform:translateY(55%);opacity:0}}

/* 7. resultat : titre balaye, montants qui se posent */
.simu .res .res-tete{animation:simu-entre .5s var(--ease) both}
.simu .profil{animation:simu-balaye .9s var(--ease) .15s both}
@keyframes simu-balaye{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.simu .masse dd,.simu .chiffre dd{animation:simu-pose .6s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + .25s)}
@keyframes simu-pose{from{transform:scale(1.03);filter:blur(2px);opacity:0}}

/* 8. bouton or : reflet au survol */
.simu .cta-bouton{position:relative;overflow:hidden}
.simu .cta-bouton::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:28%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(0) skewX(-16deg);pointer-events:none}
.simu .cta-bouton:hover::after{animation:simu-reflet .85s var(--ease)}
@keyframes simu-reflet{to{transform:translateX(560%) skewX(-16deg)}}

@media (prefers-reduced-motion:reduce){
  .simu .vue.sort{animation:none;opacity:1}
  .simu .carte::before{transition:none}
}