/* ==================================================================
   SIMULATEUR MaPrimeAdapt' SOSEN, version 3.2 (25/09/2026)
   Même composition que la maquette validée dans la propale (04/08/2026) :
   logo et pastille en tête, étape et barre, question en navy, choix en
   cartes, bandeau de confiance. Tokens relevés dans le CSS de production
   de sosen.fr le 31/08/2026. Une seule police : Plus Jakarta Sans.
   Tout est préfixé .sos-, aucun sélecteur global.

   Contraste. Le vert de la charte (#5bae8b) ne fait que 2,67 avec du
   blanc. Dans le simulateur, le texte des boutons verts passe en navy
   #243d5f graisse 800 à 19 px : 4,13, soit AA pour du texte en gros
   caractères (gras de 18,7 px et plus). Au survol, 4,96. Le vert sert de
   fond et de trait, jamais de couleur de texte : le texte vert est en
   #2f6b52 (6,28 sur blanc).
   ================================================================== */
.sos-wrap{
  --fond:#f1f6f6; --encre:#020f13; --navy:#243d5f; --vert:#5bae8b; --vert-h:#76bc9f;
  --vert-f:#3a7a5f; --vert-t:#2f6b52; --vert-p:#eef7f2; --ligne:#e3e5e5; --doux:#f5f9ff;
  --gris:#4f5f6c; --jaune:#fec054; --rouge:#b3412e;
  --ombre:0 1px 2px #011d2612;
  --eo:cubic-bezier(.16,1,.3,1); --eq:cubic-bezier(.25,1,.5,1);
  position:relative; width:100%; max-width:640px; margin:0 auto;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.125rem; line-height:1.55; font-weight:400; color:var(--encre); text-align:left;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  background:#fff; border:1px solid var(--ligne); border-radius:16px;
  box-shadow:var(--ombre),0 28px 56px -32px rgba(36,61,95,.30);
  scroll-margin-top:96px;
}
.sos-wrap *,.sos-wrap *::before,.sos-wrap *::after{box-sizing:border-box}
.sos-wrap [hidden]{display:none!important}
.sos-sprite{position:absolute;width:0;height:0;overflow:hidden}
.sos-in{padding:36px 40px 30px}

/* ---------- en-tête ---------- */
.sos-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 30px}
.sos-head img{display:block;height:40px;width:auto;max-width:none}
.sos-free{font-size:.9375rem;font-weight:700;line-height:1.2;color:var(--vert-t);background:#e6f3ec;padding:7px 14px;border-radius:999px;white-space:nowrap}

/* ---------- progression ---------- */
.sos-prog{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px}
.sos-st{display:inline-block;font-size:1rem;font-weight:700;color:var(--navy)}
.sos-pc{font-size:.9375rem;color:var(--gris);font-variant-numeric:tabular-nums}
.sos-bar{position:relative;height:8px;margin:0 0 34px;border-radius:8px;background:#e2ebe8;overflow:hidden}
.sos-bar i{position:absolute;inset:0;border-radius:8px;background:var(--vert);transform:translateX(-75%);transition:transform .7s var(--eo)}

/* ---------- écrans ---------- */
.sos-ec{display:none}
.sos-ec.on{display:block}
.sos-wrap h2{
  font-family:inherit;font-size:1.875rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;
  color:var(--navy);margin:0 0 10px;text-wrap:balance;
}
.sos-wrap h2:focus{outline:none}
.sos-sub{font-size:1.125rem;line-height:1.55;color:var(--gris);margin:0 0 26px;max-width:34em}
.sos-q{font-size:1.0625rem;font-weight:700;color:var(--navy);margin:0 0 12px}

/* ---------- choix : de vrais boutons radio, le style vit sur le label ---------- */
/* pas de grille ni de flex sur un fieldset : Safari l'a longtemps ignoré */
.sos-grp{display:block;min-width:0;margin:0;padding:0;border:0}
.sos-grp>.sos-opt+.sos-opt,.sos-grp>.sos-q+.sos-opt,.sos-grp>.sos-note+.sos-opt{margin-top:12px}
.sos-note{margin:10px 0 0;padding:12px 14px;font-size:1rem;line-height:1.5;color:var(--encre);background:var(--doux);border-radius:10px}
.sos-grp legend,.sos-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sos-opt{position:relative;margin:0}
.sos-opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sos-opt label{
  display:flex;align-items:center;gap:16px;min-height:74px;margin:0;padding:14px 18px;
  font-size:1.1875rem;font-weight:700;line-height:1.3;color:var(--encre);
  background:#fff;border:1.5px solid var(--ligne);border-radius:12px;cursor:pointer;
  transition:border-color .16s var(--eq),background-color .16s var(--eq),box-shadow .16s var(--eq),transform .16s var(--eq);
}
.sos-tx{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.sos-opt small{display:block;margin-top:4px;font-size:1rem;font-weight:500;line-height:1.4;color:var(--gris)}
.sos-ic{flex:0 0 auto;width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s}
.sos-age{flex:0 0 auto;min-width:62px;white-space:nowrap;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums;transition:color .16s}
.sos-ck{
  flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:2px solid #7a8a91;background:#fff;
  transition:background-color .16s var(--eq),border-color .16s var(--eq);
}
.sos-ck svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20}
.sos-opt input:checked+label{border-color:var(--vert);background:var(--vert-p);box-shadow:inset 0 0 0 1px var(--vert),var(--ombre)}
.sos-opt input:checked+label .sos-ic{stroke:var(--vert-t)}
.sos-opt input:checked+label .sos-age{color:var(--vert-t)}
.sos-opt input:checked+label .sos-ck{background:var(--vert-f);border-color:var(--vert-f);animation:sosPop .3s var(--eo)}
.sos-opt input:checked+label .sos-ck svg{stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--eo) .06s}
.sos-opt input:focus-visible+label{outline:3px solid var(--navy);outline-offset:3px}
.sos-opt input:active+label{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .sos-opt input:hover+label{border-color:var(--vert-h);box-shadow:0 10px 24px -16px rgba(36,61,95,.45);transform:translateY(-1px)}
  .sos-opt input:checked:hover+label{transform:none}
}
@keyframes sosPop{from{transform:scale(.7)}to{transform:scale(1)}}

/* nombre de personnes : tuiles chiffrées */
.sos-grille{margin-bottom:28px}
.sos-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sos-grille label{justify-content:center;min-height:64px;padding:10px 8px;font-size:1.375rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;text-align:center}
.sos-grille input:checked+label{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 10px 22px -12px rgba(36,61,95,.7)}
.sos-rev .sos-q{margin:0 0 12px}
.sos-rev .sos-tx{font-variant-numeric:tabular-nums}
/* v3.2 : le montant exact, facultatif, sous les tranches */
.sos-rfr{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--ligne)}
.sos-rfrw{position:relative;max-width:320px}
.sos-rfrw input{padding-right:46px;font-variant-numeric:tabular-nums}
.sos-eur{position:absolute;right:16px;top:50%;margin-top:-.7em;font-size:1.1875rem;font-weight:700;line-height:1.4;color:var(--gris);pointer-events:none}
.sos-rfr-ok{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:1rem;font-weight:700;line-height:1.4;color:var(--vert-t)}
.sos-rfr-ok:empty{display:none}
.sos-rfr-ok svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:var(--vert-f);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- champs ---------- */
.sos-f{margin:0 0 18px}
.sos-fcp{margin:26px 0 0}
.sos-f>label{display:block;margin:0 0 8px;font-size:1rem;font-weight:700;line-height:1.3;color:var(--navy)}
.sos-fac{font-weight:500;color:var(--gris)}
.sos-f input{
  display:block;width:100%;min-height:58px;margin:0;padding:14px 16px;
  font-family:inherit;font-size:1.1875rem;font-weight:600;line-height:1.3;color:var(--encre);
  background:#fff;border:1.5px solid #cdd6d6;border-radius:10px;box-shadow:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color .16s var(--eq),box-shadow .16s var(--eq);
}
.sos-f input::placeholder{color:#7b8a93;font-weight:500;opacity:1}
/* focus des champs : bordure navy (11:1) et halo, sans double cadre */
.sos-f input:focus,.sos-f input:focus-visible{border-color:var(--navy);box-shadow:0 0 0 3px rgba(36,61,95,.2);outline:none}
.sos-cpw{position:relative}
.sos-cpw input{padding-left:50px;padding-right:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sos-cpw.dep input{padding-right:200px}
.sos-cpi{position:absolute;left:16px;top:50%;width:24px;height:24px;margin-top:-12px;fill:none;stroke:var(--gris);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .16s}
.sos-cpw.dep .sos-cpi{stroke:var(--vert-t)}
.sos-cpd{
  position:absolute;right:10px;top:50%;height:36px;margin-top:-18px;max-width:calc(100% - 130px);
  display:flex;align-items:center;gap:6px;padding:0 12px 0 8px;border-radius:8px;
  background:var(--vert-p);color:var(--vert-t);font-size:.9375rem;font-weight:700;white-space:nowrap;overflow:hidden;
  pointer-events:none;
}
.sos-cpd:empty{display:none}
.sos-cpd svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--vert-f);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.sos-cpd span{overflow:hidden;text-overflow:ellipsis}
.sos-aide{margin:10px 0 0;font-size:1rem;line-height:1.5;color:var(--gris)}
.sos-er{display:none;margin-top:8px;font-size:1rem;font-weight:600;line-height:1.4;color:var(--rouge)}
.sos-f.ko input{border-color:var(--rouge);box-shadow:0 0 0 1px var(--rouge)}
.sos-f.ko .sos-er{display:block}

/* case de consentement : la case seule est une cible de 48 px, le libellé entier est cliquable */
.sos-consent{margin:4px 0 22px}
.sos-case{position:relative}
.sos-case input{position:absolute;left:0;top:0;z-index:1;width:48px;height:48px;margin:0;opacity:0;cursor:pointer}
.sos-case label{display:flex;align-items:flex-start;gap:12px;min-height:48px;margin:0;padding:10px 0 2px;font-size:1.125rem;font-weight:500;line-height:1.5;color:var(--encre);cursor:pointer}
.sos-cb{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;margin:0 0 0 10px;border:2px solid #7a8a91;border-radius:6px;background:#fff;transition:background-color .16s var(--eq),border-color .16s var(--eq)}
.sos-cb svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20}
.sos-case input:checked+label .sos-cb{background:var(--vert-f);border-color:var(--vert-f);animation:sosPop .3s var(--eo)}
.sos-case input:checked+label .sos-cb svg{stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--eo) .06s}
.sos-case input:focus-visible+label .sos-cb{outline:3px solid var(--navy);outline-offset:3px}
.sos-case label a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sos-consent.ko .sos-cb{border-color:var(--rouge);box-shadow:0 0 0 1px var(--rouge)}
.sos-consent .sos-er{padding-left:50px}

/* ---------- boutons ---------- */
.sos-act{display:flex;align-items:center;gap:12px;margin-top:30px}
.sos-cta{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:58px;margin:0;padding:14px 24px;
  font-family:inherit;font-size:1.1875rem;font-weight:800;line-height:1.2;letter-spacing:0;text-align:center;text-decoration:none;
  color:var(--navy);background:var(--vert);border:0;border-radius:8px;cursor:pointer;
  box-shadow:var(--ombre),0 12px 24px -14px rgba(58,122,95,.75);
  transition:background-color .16s var(--eq),transform .16s var(--eq),box-shadow .16s var(--eq),color .16s;
}
a.sos-cta{color:var(--navy);text-decoration:none}
.sos-cta svg{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s var(--eo)}
.sos-cta:not([disabled]):active{transform:scale(.98)}
.sos-cta[disabled]{color:#56666a;background:#e9eeed;box-shadow:none;cursor:not-allowed}
.sos-cta.sos-attente{cursor:progress}
.sos-cta.sos-attente::after{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:sosTour .7s linear infinite}
@keyframes sosTour{to{transform:rotate(360deg)}}
.sos-retour{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:58px;margin:0;padding:0 20px;
  font-family:inherit;font-size:1.0625rem;font-weight:700;line-height:1.2;color:var(--navy);
  background:#fff;border:1.5px solid #cdd6d6;border-radius:8px;cursor:pointer;
  transition:border-color .16s var(--eq),background-color .16s var(--eq);
}
.sos-retour svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s var(--eo)}
.sos-retour:active{background:var(--fond)}
@media (hover:hover) and (pointer:fine){
  .sos-cta:not([disabled]):hover{background:var(--vert-h);transform:translateY(-1px);box-shadow:var(--ombre),0 16px 28px -14px rgba(58,122,95,.8)}
  .sos-cta:not([disabled]):hover svg{transform:translateX(3px)}
  .sos-retour:hover{border-color:var(--navy)}
  .sos-retour:hover svg{transform:translateX(-3px)}
}
.sos-wrap :focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.sos-reprise{margin-top:12px;text-align:center}
.sos-lien{min-height:48px;border:0;background:none;padding:0 12px;text-decoration:underline;text-underline-offset:4px;color:var(--gris);font-weight:600}
.sos-lien:hover{color:var(--navy)}

/* ---------- résultat ---------- */
.sos-res{text-align:center}
.sos-res .sos-sub{margin-left:auto;margin-right:auto}
.sos-rond{display:grid;place-items:center;width:78px;height:78px;margin:2px auto 18px;border-radius:50%;background:#e6f3ec;box-shadow:inset 0 0 0 2px var(--vert)}
.sos-rond svg{width:40px;height:40px;fill:none;stroke:var(--vert-t);stroke-width:3.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32}
.sos-rond b{font-size:2.125rem;font-weight:800;line-height:1;color:var(--vert-t)}
.sos-rond.att{background:#fff4dc;box-shadow:inset 0 0 0 2px var(--jaune)}
.sos-rond.att b{color:#8a5d00}
.sos-rond.non{background:#eef2f5;box-shadow:inset 0 0 0 2px #c3ced6}
.sos-rond.non b{color:var(--gris);font-family:Georgia,serif;font-style:italic}

.sos-estim{margin:4px 0 16px;padding:22px 24px 20px;text-align:left;background:var(--vert-p);border:1px solid #d3e9dd;border-radius:14px}
.sos-estim .lab{margin:0 0 4px;font-size:1rem;font-weight:700;color:var(--vert-t)}
.sos-estim .val{font-size:1.75rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
.sos-estim .val b{color:var(--vert-t);font-variant-numeric:tabular-nums}
.sos-estim .note{margin-top:14px;font-size:1rem;line-height:1.5;color:var(--gris)}
.sos-estim .note b{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.sos-jauge{margin:18px 0 0}
.sos-jauge .tr{position:relative;height:14px;border-radius:14px;background:#d3e6dc;overflow:hidden}
.sos-jauge .rem{position:absolute;inset:0;border-radius:14px;background:var(--vert-f)}
.sos-jauge.att .rem{background:var(--vert)}
.sos-jauge .lg{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;margin-top:8px;font-size:.9375rem;line-height:1.35;color:var(--gris);font-variant-numeric:tabular-nums}
.sos-jauge .lg b{font-weight:800;color:var(--navy)}
.sos-jauge .lg span{white-space:nowrap}
.sos-cnt{position:relative;display:inline-block}
.sos-cnt.run{color:transparent!important}
.sos-cnt.run::after{content:attr(data-v);position:absolute;left:0;top:0;white-space:nowrap;color:var(--c,var(--navy))}
.sos-estim .val .sos-cnt{--c:var(--vert-t)}

/* v3.2 : l'aide du département, même carte que MaPrimeAdapt', reliée par un « plus » */
.sos-et{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;margin:-28px auto -16px;border-radius:50%;background:var(--vert-f);box-shadow:0 0 0 5px #fff}
.sos-et svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.sos-res h2+.sos-estim{margin-top:20px}
.sos-reserve{margin:0 0 16px;font-size:1rem;line-height:1.5;color:var(--gris);text-align:center}

.sos-info{display:flex;align-items:flex-start;gap:14px;margin:0 0 12px;padding:16px 18px;text-align:left;font-size:1.125rem;line-height:1.55;color:var(--encre);background:var(--doux);border-radius:12px}
.sos-info>svg{flex:0 0 auto;width:26px;height:26px;margin-top:1px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sos-info strong{font-weight:700;color:var(--navy)}
.sos-info ul{margin:8px 0 0;padding-left:20px}
.sos-info li{margin:0 0 4px}
.sos-info.plus{background:var(--vert-p);box-shadow:inset 0 0 0 1px #d3e9dd}
.sos-info.plus>svg{stroke:var(--vert-t)}
.sos-info.navy{background:#eef2f7}
.sos-info a{color:var(--navy);font-weight:800;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}

.sos-bloc{margin-top:28px;padding-top:26px;border-top:1px solid var(--ligne)}
.sos-envoi{margin-top:6px}
.sos-reassure{margin:14px 0 0;text-align:center;font-size:.9375rem;line-height:1.55;color:var(--gris)}
.sos-reassure a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

.sos-merci{text-align:center;padding:8px 0 4px}
.sos-tel{
  display:inline-flex;align-items:center;gap:10px;min-height:58px;margin-top:6px;padding:10px 24px;
  font-size:1.5rem;font-weight:800;letter-spacing:-.01em;color:var(--vert-t);text-decoration:none;font-variant-numeric:tabular-nums;
  background:var(--vert-p);border:1.5px solid #cfe6da;border-radius:8px;
}
.sos-tel svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- bandeau de confiance ---------- */
.sos-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:30px;padding-top:18px;border-top:1px solid var(--ligne)}
.sos-trust span{display:inline-flex;align-items:center;gap:7px;font-size:.9375rem;font-weight:600;color:var(--gris)}
.sos-trust svg{width:18px;height:18px;fill:none;stroke:var(--vert-f);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- téléphone ---------- */
@media (max-width:560px){
  .sos-wrap{border-radius:14px}
  .sos-in{padding:22px 18px 20px}
  .sos-head{margin-bottom:24px}
  .sos-head img{height:34px}
  .sos-free{font-size:.875rem;padding:6px 12px}
  .sos-bar{margin-bottom:26px}
  .sos-wrap h2{font-size:1.625rem}
  .sos-sub{margin-bottom:22px}
  .sos-opt label{gap:14px;min-height:70px;padding:13px 14px}
  .sos-ic{width:28px;height:28px}
  .sos-age{min-width:54px;font-size:1.0625rem}
  .sos-estim{padding:18px 18px 16px}
  .sos-estim .val{font-size:1.5rem}
  .sos-info{padding:14px 15px;gap:12px}
  /* le bouton principal reste sous le pouce : la barre d'actions colle au
     bas de l'écran tant que l'étape défile */
  .sos-act{position:sticky;bottom:0;z-index:2;margin:24px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 var(--ligne),0 -12px 20px -16px rgba(2,15,19,.25)}
  .sos-retour{padding:0 14px;font-size:1rem}
  .sos-cta{padding:14px 12px}
  /* sur téléphone la flèche décorative laisse la place au libellé, qui tient sur une ligne */
  .sos-act .sos-cta svg{display:none}
  .sos-trust{gap:6px 16px;margin-top:24px}
  .sos-tel{font-size:1.375rem}
}
@media (max-width:360px){
  .sos-retour span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sos-retour{width:58px;padding:0}
}

/* ---------- mouvement réduit : rien ne bouge, tout reste lisible ---------- */
@media (prefers-reduced-motion:reduce){
  .sos-wrap *,.sos-wrap *::before,.sos-wrap *::after{animation:none!important;transition:none!important}
  .sos-cta.sos-attente::after{border-right-color:currentColor;opacity:.5}
}
