/* Pallier — la feuille de style du tunnel (V45, C76 : sortie d'index.html) */
:root{ color-scheme:light only;
  --foret:#12312A; --foret-doux:#41625A; --brume:#8AA39B;
  --creme:#FFFCF4; --creme-2:#F9F3E7; --blanc:#fff;
  --lime:#CFE996; --lime-ombre:#9DBC62;
  --abricot:#F3A57F; --abricot-doux:#FCEBE1;
  --ciel:#AEDCE8; --ciel-doux:#E7F3F7;
  --lilas:#CEC6EC; --lilas-doux:#F0EDFA;
  --r:22px; --r-l:34px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#FFFCF4}

/* ═══ fond peint en dur : un vrai élément, pas une propriété ═══ */
#fond{position:fixed;inset:0;z-index:-2;background:#FFFCF4}
#fond .motif{position:absolute;inset:0;opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2312312A' stroke-opacity='0.05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 22c0 0 7 8 7 12a7 7 0 0 1-14 0c0-4 7-12 7-12z'/%3E%3Cpath d='M128 26l-7 10h6l-2 8 8-11h-6z'/%3E%3Ccircle cx='58' cy='96' r='7'/%3E%3Cpath d='M58 103v11m-3-6h6'/%3E%3Cpath d='M140 100l14 14m-16-11a6 6 0 1 1 3-3'/%3E%3Cpath d='M92 148c0 0 6 7 6 10a6 6 0 0 1-12 0c0-3 6-10 6-10z'/%3E%3Crect x='16' y='142' width='18' height='13' rx='3'/%3E%3Cpath d='M164 62l-6 8h5l-2 7 7-10h-5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:190px 190px}
#fond .halo{position:absolute;border-radius:50%;filter:blur(70px)}
#fond .h1{width:360px;height:360px;background:#AEDCE8;opacity:.28;top:-150px;right:-130px}
#fond .h2{width:320px;height:320px;background:#CFE996;opacity:.22;bottom:-170px;left:-120px}

body{color:var(--foret);
  font-family:"Gabarito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column;overscroll-behavior-y:none;overflow-x:hidden}

h1,h2,h3{font-weight:900;letter-spacing:-.03em;line-height:1.04}
[tabindex="-1"]:focus{outline:none}   /* focus programmatique (annonce d'écran) : pas d'anneau visuel */

.rail{position:fixed;top:0;left:0;right:0;height:5px;background:rgba(18,49,42,.09);z-index:70}
.rail i{display:block;height:100%;width:0;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,var(--ciel),var(--lime));transition:width .55s cubic-bezier(.2,.85,.3,1)}

/* ═══ en-tête de marque ═══ */
.entete{position:sticky;top:0;z-index:65;background:rgba(255,252,244,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:2px solid rgba(18,49,42,.08)}
.entete-in{width:100%;max-width:540px;margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:10px}
.retour[hidden]{display:none}
.retour{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--creme-2);
  border:2.5px solid var(--foret);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;margin-right:2px}
.retour:active{transform:scale(.92)}
.retour svg{width:19px;height:19px}
.marque{display:flex;align-items:center;gap:9px;background:none;border:none;padding:0;
  font:inherit;cursor:pointer;color:var(--foret)}
.marque .sigle{width:34px;height:34px;flex-shrink:0}
.marque .mot{font-size:1.34rem;font-weight:900;letter-spacing:-.055em;line-height:1}
.marque .mot em{font-style:normal;color:var(--lime-ombre)}
.entete .menu{margin-left:auto;display:flex;align-items:center;gap:7px;background:var(--creme-2);
  border:2px solid var(--foret);border-radius:999px;padding:7px 14px;font:inherit;
  font-size:.82rem;font-weight:800;color:var(--foret);cursor:pointer}
.entete .menu:active{transform:scale(.96)}
.entete .menu svg{width:14px;height:14px}

/* ═══ panneau plein écran ═══ */
.panneau{position:fixed;inset:0;z-index:90;background:var(--creme);overflow-y:auto;
  transform:translateY(100%);transition:transform .42s cubic-bezier(.16,.9,.3,1),visibility 0s linear .42s;
  -webkit-overflow-scrolling:touch;
  /* v40 (retour HB) : fermé, le panneau n'existe plus — sur iPhone, le rebond en bas de page
     faisait apparaître sa tête « À propos de Pallier » sous le contenu */
  visibility:hidden;pointer-events:none}
.panneau.ouvert{transform:translateY(0);visibility:visible;pointer-events:auto;transition-delay:0s}
.panneau-tete{position:sticky;top:0;background:var(--creme);z-index:2;
  padding:14px 20px;display:flex;align-items:center;border-bottom:2px solid rgba(18,49,42,.08)}
.panneau-tete b{font-size:1.05rem;font-weight:900}
.fermer{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--foret);
  color:var(--creme);border:none;font-size:1.1rem;cursor:pointer;display:flex;
  align-items:center;justify-content:center;font-family:inherit}
.fermer:active{transform:scale(.92)}
.panneau-corps{max-width:540px;margin:0 auto;padding:24px 20px 50px}
.panneau h2{font-size:1.7rem;margin:0 0 10px}
.panneau h3{font-size:1.18rem;margin:34px 0 12px}
.panneau p{font-size:1rem;color:var(--foret-doux);font-weight:600;line-height:1.55;margin:0 0 14px}
.panneau p.fort{color:var(--foret);font-weight:700}

.pas{display:flex;gap:14px;align-items:flex-start;background:var(--blanc);
  border:2.5px solid var(--foret);border-radius:var(--r);padding:15px 17px;
  box-shadow:0 4px 0 var(--foret);margin-bottom:11px}
.pas .rond{flex-shrink:0;width:44px;height:44px;border-radius:14px;border:2.5px solid var(--foret);
  display:flex;align-items:center;justify-content:center}
.pas .rond.c1{background:var(--ciel)} .pas .rond.c2{background:var(--lime)}
.pas .rond.c3{background:var(--abricot)} .pas .rond.c4{background:var(--lilas)}
.pas .rond svg{width:24px;height:24px}
.pas b{display:block;font-size:1.03rem;font-weight:800;line-height:1.25}
.pas span{display:block;font-size:.89rem;color:var(--foret-doux);font-weight:600;margin-top:3px;line-height:1.45}

.engagement{display:flex;gap:11px;align-items:flex-start;padding:13px 0;
  border-bottom:2px solid var(--creme-2)}
.engagement:last-child{border-bottom:none}
.engagement .co{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--lime);
  border:2px solid var(--foret);display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:900;margin-top:2px}
.engagement b{display:block;font-size:.99rem;font-weight:800}
.engagement span{display:block;font-size:.87rem;color:var(--foret-doux);font-weight:600;line-height:1.45}

.encart{background:var(--foret);color:var(--creme);border-radius:var(--r);padding:20px 22px;margin-top:26px}
.encart b{display:block;font-size:1.06rem;font-weight:900;margin-bottom:6px}
.encart p{color:#B6C9C2;font-size:.9rem;margin:0}
.encart .lien{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:var(--lime);
  color:var(--foret);border:none;border-radius:999px;padding:12px 20px;font:inherit;
  font-size:.92rem;font-weight:900;cursor:pointer}
.pied-panneau{margin-top:30px;font-size:.78rem;color:var(--foret-doux);font-weight:600;line-height:1.6}

main{flex:1;width:100%;max-width:540px;margin:0 auto;padding:16px 20px 16px;position:relative;z-index:1}
.etape{display:none!important}
.etape.on{display:block!important}
.etape.on>*{animation:monte .46s cubic-bezier(.16,.9,.3,1) both}
.etape.on>*:nth-child(2){animation-delay:.06s}
.etape.on>*:nth-child(3){animation-delay:.12s}
.etape.on>*:nth-child(4){animation-delay:.18s}
@keyframes monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.kicker{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:800;color:var(--foret);background:var(--lime);
  border-radius:999px;padding:6px 13px;margin:0 0 14px}
h1{font-size:2.55rem;margin:0 0 12px}
.sous{font-size:1.05rem;color:var(--foret-doux);margin:0 0 22px;line-height:1.45;max-width:31ch;font-weight:600}
.serment{font-size:.92rem;font-weight:700;color:var(--foret);background:var(--creme-2);
  border:2.5px solid var(--foret);border-radius:16px;box-shadow:0 3px 0 var(--foret);
  padding:10px 14px;margin:-8px 0 20px;line-height:1.4;max-width:40ch}
.serment b{background:var(--lime);padding:0 5px;border-radius:6px}
.q-avance{font-size:.8rem;font-weight:800;color:var(--foret-doux);margin:14px 0 6px}
.q-avance.ok{color:var(--foret);margin-top:18px}
.q-faite{display:flex;width:100%;align-items:center;gap:10px;background:var(--creme-2);
  border:2px solid rgba(18,49,42,.25);border-radius:14px;padding:10px 14px;margin:0 0 8px;
  font:inherit;text-align:left;cursor:pointer;color:var(--foret)}
.q-faite em{font-style:normal;font-size:.76rem;font-weight:800;color:var(--foret-doux);flex:1;min-width:0}
.q-faite b{font-size:.88rem;font-weight:900}
.q-faite span{font-size:.74rem;font-weight:800;color:var(--foret-doux);text-decoration:underline;flex-shrink:0}
#reprise{margin-top:14px}
#reprise a+a{margin-top:8px}
#reprise a{display:block;background:var(--ciel-doux);border:2.5px solid var(--foret);border-radius:16px;
  box-shadow:0 3px 0 var(--foret);padding:12px 16px;font-weight:800;color:var(--foret);
  text-decoration:none;font-size:.95rem}
.vignettes img.douteuse{border-color:#B4552D;box-shadow:0 0 0 2px #F3A57F}

/* ═══ mot qui tourne ═══ */
.tourne{position:relative;display:inline-block;padding:0 5px;white-space:nowrap}
.tourne i{font-style:normal;position:relative;z-index:1}
.tourne::after{content:'';position:absolute;left:0;right:0;bottom:.07em;height:.34em;border-radius:4px;
  background:var(--lime);z-index:0;transition:background .45s ease}
.tourne.sort i{animation:sort .32s cubic-bezier(.5,0,.9,.3) both}
.tourne.entre i{animation:entreMot .42s cubic-bezier(.16,.9,.3,1) both}
@keyframes sort{to{opacity:0;transform:translateY(-15px) rotate(-3deg)}}
@keyframes entreMot{from{opacity:0;transform:translateY(17px) rotate(3deg)}to{opacity:1;transform:none}}

/* ═══ scène — plus petite, le texte domine ═══ */
.scene{width:100%;max-width:186px;margin:0 auto 6px;display:block;overflow:visible}
.scene.large{max-width:290px}
#camion{animation:roule 9s cubic-bezier(.3,.8,.35,1) infinite}
@keyframes roule{0%,4%{transform:translateX(-180px)}22%,76%{transform:translateX(0)}92%,100%{transform:translateX(-180px)}}
.scene .bulle{transform-origin:center;transform-box:fill-box;animation:flotte 3.2s ease-in-out infinite}
.scene .bulle.b2{animation-delay:.5s} .scene .bulle.b3{animation-delay:1s}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#coche{transform-origin:center;transform-box:fill-box;animation:coche 9s ease-in-out infinite}
@keyframes coche{0%,76%{opacity:0;transform:scale(.3)}84%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.8)}}

/* ═══ les 3 étapes, en bande compacte ═══ */
.bande{display:flex;gap:8px;margin:22px 0 0}
.bande div{flex:1;text-align:center;background:var(--blanc);border:2px solid var(--foret);
  border-radius:16px;padding:12px 8px;box-shadow:0 3px 0 var(--foret)}
.bande b{display:block;font-size:1.35rem;font-weight:900;line-height:1;color:var(--foret)}
.bande span{display:block;font-size:.78rem;font-weight:700;line-height:1.25;margin-top:5px}

/* v36 — la case de consentement : une vraie case, alignée sur son texte (avant : aucune
   règle, la case héritait de input{width:100%;padding:16px} et flottait seule) */
.consent{display:flex;align-items:flex-start;gap:12px;margin:22px 0 0;cursor:pointer;
  font-size:.92rem;font-weight:700;line-height:1.45;color:var(--foret)}
.consent input{width:24px;height:24px;flex-shrink:0;margin:1px 0 0;padding:0;box-shadow:none;
  border:2.5px solid var(--foret);border-radius:7px;background:var(--blanc);accent-color:var(--foret);cursor:pointer}
.consent input:focus-visible{outline:3px solid var(--abricot);outline-offset:3px}
.consent a{color:var(--foret)}
/* v36 — blocs pliables (écran « ce qui vous attend ») : l'essentiel visible, le détail à un tap */
details.pli{background:var(--blanc);border:2.5px solid var(--foret);border-radius:var(--r);
  box-shadow:0 4px 0 var(--foret);margin-bottom:16px;overflow:hidden}
details.pli summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 16px;background:var(--creme-2)}
details.pli summary::-webkit-details-marker{display:none}
details.pli summary::after{content:'▾';margin-left:auto;font-size:1rem;transition:transform .25s}
details.pli[open] summary{border-bottom:2.5px solid var(--foret)}
details.pli[open] summary::after{transform:rotate(180deg)}
details.pli summary:focus-visible{outline:3px solid var(--abricot);outline-offset:-3px}
/* v36 — état « lecture en cours » du récap */
.recap-attente{display:flex;align-items:center;gap:9px;padding:10px 17px;font-size:.84rem;
  font-weight:700;color:var(--foret-doux);border-top:2px solid var(--creme-2)}
.recap-attente i{width:9px;height:9px;border-radius:50%;background:var(--foret);flex-shrink:0;animation:bat 1.6s ease-in-out infinite}
/* v38 — « c'est juste ? » sous les pistes */
.avis-ia{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:.84rem;font-weight:700}
.avis-ia .puce{font-size:.82rem;padding:7px 12px}
.avis-ia .ok{color:var(--foret)}
.avis-ia .lab-corr{display:block;width:100%;font-size:.8rem;font-weight:800}
.avis-ia textarea{min-height:56px;font-size:.92rem;padding:10px 12px;border-radius:12px;box-shadow:0 3px 0 var(--foret)}

/* ═══ cartes ═══ */
.choix{display:grid;gap:11px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;
  border:2.5px solid var(--foret);border-radius:var(--r);padding:13px 15px;cursor:pointer;
  color:var(--foret);box-shadow:0 4px 0 var(--foret);transition:transform .13s,box-shadow .13s}
.opt:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--foret)}
.opt:active,.opt.pris{transform:translateY(4px);box-shadow:0 0 0 var(--foret)}
.opt:focus-visible{outline:3px solid var(--abricot);outline-offset:4px}
.opt.t-eau{background:var(--ciel-doux)} .opt.t-elec{background:var(--abricot-doux)}
.opt.t-serrure{background:#EFF7E2} .opt.t-chauffe{background:var(--lilas-doux)}
.opt.t-autre,.opt.plein{background:var(--creme-2)}
.opt.entree-projet{background:var(--lime-doux,#EFF7E2)}
.mini-vert{display:inline-block;background:var(--lime);border-radius:6px;padding:1px 6px;
  font-weight:800;font-size:.78rem;color:var(--foret);margin-top:2px}
.opt.entree-urgent{background:var(--abricot-doux)}
.opt.entree-calme{background:var(--ciel-doux)}
.etape[data-e="1"] .bande{margin:0 0 16px}
.etape[data-e="1"] h1{font-size:2.15rem;margin-bottom:9px}
.etape[data-e="1"] .sous{margin-bottom:18px;font-size:.99rem}
.etape[data-e="1"] .kicker{margin-bottom:11px}
.etape[data-e="1"] .rassure{margin-top:14px}
.opt .vig{flex-shrink:0;width:52px;height:52px}
.opt .txt{flex:1;min-width:0}
.opt .txt b{display:block;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.opt .txt span{display:block;font-size:.83rem;color:var(--foret-doux);margin-top:1px;font-weight:600}
.opt .fl{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--foret);
  color:var(--creme);display:flex;align-items:center;justify-content:center;font-size:.9rem}

/* ═══ champs ═══ */
label.lab{display:block;font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--foret-doux);margin:0 0 8px}
input,textarea,select{width:100%;font:inherit;font-size:1.05rem;font-weight:600;padding:16px 17px;
  border:2.5px solid var(--foret);border-radius:var(--r);background:var(--blanc);color:var(--foret);
  box-shadow:0 4px 0 var(--foret)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2312312A' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
input::placeholder,textarea::placeholder{color:var(--foret-doux);opacity:.8;font-weight:500}
input:focus,textarea:focus{outline:none;box-shadow:0 4px 0 var(--abricot);border-color:var(--abricot)}
textarea{min-height:120px;resize:vertical;line-height:1.5}
#qp-texte{min-height:88px;font-size:1rem}   /* v40 — la phrase du projet « autre » */
.champ+.champ{margin-top:20px}
.suggestions{list-style:none;margin:10px 0 0;padding:0;border:2.5px solid var(--foret);
  border-radius:var(--r);overflow:hidden;background:var(--blanc);box-shadow:0 4px 0 var(--foret)}
.suggestions:empty{display:none}
.suggestions li{padding:14px 17px;font-size:.95rem;font-weight:600;cursor:pointer;border-bottom:2px solid var(--creme-2)}
.suggestions li:last-child{border-bottom:none}
.suggestions li.actif{background:var(--lime)}
.suggestions li:active{background:var(--lime)}

/* ═══ barre ═══ */
.barre[hidden]{display:none}
.barre{position:sticky;bottom:0;z-index:50;margin-top:auto;background:var(--foret);
  border-radius:var(--r-l) var(--r-l) 0 0;padding:15px 20px calc(17px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 40px -22px rgba(18,49,42,.7)}
.barre-in{width:100%;max-width:540px;margin:0 auto}
.tete[hidden]{display:none}
.tete{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;font:inherit;
  color:var(--creme);padding:2px 0 6px;cursor:pointer;text-align:left}
.tete .sac{width:25px;height:25px;flex-shrink:0}
.tete b{font-size:.9rem;font-weight:800}
.tete .cnt{margin-left:auto;background:var(--lime);color:var(--foret);border-radius:999px;
  min-width:23px;height:23px;display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:900;padding:0 7px}
.tete .chev{color:var(--brume);font-size:.7rem;transition:transform .3s}
.tete[aria-expanded="true"] .chev{transform:rotate(180deg)}
.corps{max-height:0;overflow:hidden;transition:max-height .36s cubic-bezier(.2,.85,.3,1)}
.corps.ouvert{max-height:280px;overflow-y:auto}
.corps ul{list-style:none;margin:8px 0 2px;padding:0}
.corps li{display:flex;gap:10px;padding:7px 0;font-size:.86rem;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.1);animation:glisse .34s ease both}
.corps li:last-child{border-bottom:none}
@keyframes glisse{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.corps li i{font-style:normal;color:var(--lime);flex-shrink:0;font-weight:900}
.corps li em{font-style:normal;color:var(--brume)}
.corps li b{color:var(--creme)}

.barre-bas{display:flex;flex-direction:column}
.retour-bas[hidden]{display:none}
.retour-bas{align-self:flex-start;background:none;border:none;font:inherit;font-size:.88rem;
  font-weight:700;color:#A8B2AC;padding:8px 0 2px;cursor:pointer}
.retour-bas:active{opacity:.6}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font:inherit;
  font-size:1.1rem;font-weight:900;letter-spacing:-.02em;padding:18px;border:2.5px solid var(--foret);
  border-radius:999px;background:var(--lime);color:var(--foret);cursor:pointer;margin-top:12px;
  box-shadow:0 5px 0 var(--lime-ombre);transition:transform .12s,box-shadow .12s}
.cta:active{transform:translateY(5px);box-shadow:0 0 0 var(--lime-ombre)}
.cta:disabled{background:#2C4A42;border-color:#2C4A42;color:rgba(207,233,150,.8);box-shadow:none}
.cta:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.cta.sombre{background:transparent;color:var(--foret-doux);border-color:var(--foret);
  box-shadow:none;font-weight:700;font-size:.95rem;padding:14px;margin-top:10px}
.cta.sombre:active{transform:scale(.98)}
.cta.fantome{background:transparent;color:var(--creme);border-color:rgba(255,255,255,.28);
  box-shadow:none;font-weight:700;font-size:.93rem;padding:13px}
.cta.fantome:active{transform:scale(.98)}
.cta .pt{width:9px;height:9px;border-radius:50%;background:var(--foret);
  animation:bat 1.6s ease-in-out infinite}
@keyframes bat{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ═══ caméra ═══ */
.aide-btn{display:flex;align-items:center;gap:9px;width:100%;font:inherit;font-size:.93rem;
  font-weight:800;color:var(--foret);background:var(--creme-2);border:2.5px solid var(--foret);
  border-radius:var(--r);padding:13px 17px;margin-bottom:14px;cursor:pointer;text-align:left;
  box-shadow:0 3px 0 var(--foret)}
.aide-btn[hidden]{display:none}
.aide-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--foret)}
.aide-btn .chevron{margin-left:auto;font-size:.8rem;transition:transform .3s;color:var(--foret-doux)}
.aide-btn[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.aide-carte{background:var(--blanc);border:2.5px solid var(--foret);border-radius:var(--r);
  box-shadow:0 4px 0 var(--foret);padding:6px 17px 14px;margin-bottom:16px}
.aide-carte[hidden]{display:none}
.aide-carte ul{list-style:none;margin:0;padding:8px 0 0}
.aide-carte li{position:relative;padding:7px 0 7px 19px;font-size:.9rem;font-weight:600;
  line-height:1.5;color:var(--foret-doux);border-bottom:1px solid var(--creme-2)}
.aide-carte li:last-child{border-bottom:none}
.aide-carte li::before{content:'';position:absolute;left:4px;top:15px;width:7px;height:7px;
  border-radius:50%;background:var(--lime);border:1.5px solid var(--foret)}
.aide-note{background:var(--ciel-doux);border-radius:13px;padding:11px 14px;margin-top:12px;
  font-size:.87rem;font-weight:700;line-height:1.45;color:var(--foret)}
.cam{position:relative;border-radius:var(--r);overflow:hidden;background:#0A1C17;aspect-ratio:3/4;
  max-height:48vh;margin:0 auto;border:3px solid var(--foret);box-shadow:0 5px 0 var(--foret)}   /* v39 (C06) : 64vh → 48vh, le déclencheur reste visible */
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gabarit{position:absolute;inset:3%;border:3px dashed var(--lime);border-radius:16px;
  box-shadow:0 0 0 200vmax rgba(10,28,23,.52);pointer-events:none;animation:souffle 5s ease-in-out infinite}
@keyframes souffle{0%,100%{border-color:#CFE996;opacity:.85}50%{border-color:#E6F6C4;opacity:1}}

/* ═══ scènes animées du viseur ═══ */
.silhouette{position:absolute;inset:9% 8% 12%;display:flex;align-items:center;justify-content:center;
  z-index:1;pointer-events:none}
.silhouette svg{width:100%;height:100%;overflow:visible}
.sc-l{stroke:#CFE996;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sc-f{fill:#CFE996;opacity:.16}
.sc-b{fill:#FFFCF4;opacity:.1}
.sc-w{stroke:#FFFCF4;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.sc-p{fill:#CFE996}

/* crochets de cadrage : ils s'écartent (recul) ou se resserrent (gros plan) */
.crochets path{stroke:#FFFCF4;stroke-width:3.4;fill:none;stroke-linecap:round;opacity:.9}
.crochets.large{animation:cadreLarge 6s ease-in-out infinite}
.crochets.serre{animation:cadreSerre 6s ease-in-out infinite}
@keyframes cadreLarge{0%{transform:scale(.86);opacity:0}
  18%{opacity:.65}50%{transform:scale(1);opacity:.8}
  82%{opacity:.5}100%{transform:scale(.86);opacity:0}}
@keyframes cadreSerre{0%{transform:scale(1.1);opacity:0}
  18%{opacity:.65}50%{transform:scale(.9);opacity:.8}
  82%{opacity:.5}100%{transform:scale(1.1);opacity:0}}
.crochets{transform-origin:60px 76px;transform-box:view-box}

/* motions */
.a-goutte{animation:aGoutte 3.6s cubic-bezier(.45,0,.7,.9) infinite}
.a-goutte2{animation:aGoutte 3.6s cubic-bezier(.45,0,.7,.9) infinite 1.8s}
@keyframes aGoutte{0%,6%{transform:translateY(0);opacity:0}
  20%{opacity:.9}62%{opacity:.9}76%,100%{transform:translateY(34px);opacity:0}}
.a-onde{animation:aOnde 3.6s ease-out infinite 2.5s}
@keyframes aOnde{0%{transform:scale(.4);opacity:.55}70%,100%{transform:scale(1.35);opacity:0}}
.a-tourne{animation:aTourne 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes aTourne{0%,22%{transform:rotate(0)}48%,72%{transform:rotate(90deg)}98%,100%{transform:rotate(0)}}
.a-cle{animation:aCle 6.4s ease-in-out infinite;transform-box:fill-box;transform-origin:22px 50%}
@keyframes aCle{0%{transform:translateX(-24px);opacity:0}
  16%{transform:translateX(0);opacity:.95}34%{transform:translateX(0) rotate(0)}
  56%,80%{transform:translateX(0) rotate(34deg)}
  94%,100%{transform:translateX(-24px) rotate(0);opacity:0}}
.a-bascule{animation:aBascule 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center top}
@keyframes aBascule{0%,26%{transform:translateY(0)}46%,74%{transform:translateY(9px)}96%,100%{transform:translateY(0)}}
.a-etincelle{animation:aEt 4.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center top}
@keyframes aEt{0%,22%{opacity:0;transform:scale(.82)}
  42%{opacity:.95;transform:scale(1)}62%{opacity:.55;transform:scale(.97)}
  80%,100%{opacity:0;transform:scale(.82)}}
.a-chaleur{animation:aChaleur 4.6s ease-in-out infinite}
.a-chaleur2{animation:aChaleur 4.6s ease-in-out infinite 1.1s}
.a-chaleur3{animation:aChaleur 4.6s ease-in-out infinite 2.2s}
@keyframes aChaleur{0%{transform:translateY(6px);opacity:0}
  30%{opacity:.6}60%{opacity:.45}100%{transform:translateY(-24px);opacity:0}}
.a-balaye{animation:aBalaye 6.4s ease-in-out infinite;transform-box:fill-box}
@keyframes aBalaye{0%,100%{transform:translate(-13px,5px)}50%{transform:translate(15px,-5px)}}
.a-dessine{stroke-dasharray:420;stroke-dashoffset:420;animation:aDessine 7s ease-in-out infinite}
@keyframes aDessine{0%{stroke-dashoffset:420;opacity:0}
  10%{opacity:1}45%,82%{stroke-dashoffset:0;opacity:1}
  96%,100%{stroke-dashoffset:0;opacity:0}}
.a-respire{animation:aRespire 5s ease-in-out infinite}
@keyframes aRespire{0%,100%{opacity:.42}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.silhouette *{animation:none!important}}

.cam .consigne{position:absolute;left:12px;right:12px;top:13px;text-align:center;color:#fff;
  font-weight:800;font-size:.92rem;text-shadow:0 2px 14px rgba(0,0,0,.9);z-index:2}
.declencheur{display:block;margin:18px auto 0;width:74px;height:74px;border-radius:50%;
  background:var(--lime);border:3.5px solid var(--foret);cursor:pointer;box-shadow:0 6px 0 var(--foret)}
.declencheur:active{transform:translateY(6px);box-shadow:0 0 0 var(--foret)}
.cam-alt{display:block;margin:15px auto 0;background:none;border:none;font:inherit;font-size:.88rem;
  font-weight:700;color:var(--foret-doux);text-decoration:underline;cursor:pointer}
/* verrous : toute règle display doit être doublée, sinon [hidden] perd */
.cam-alt[hidden],.geoloc[hidden],.chat-demarreurs[hidden]{display:none!important}
.cam-alt.avant{background:var(--lime);border:2.5px solid var(--foret);border-radius:999px;
  padding:12px 20px;text-decoration:none;font-weight:900;box-shadow:0 3px 0 var(--foret)}
.apercu-zone{position:relative;display:block;cursor:crosshair;-webkit-user-select:none;user-select:none}
.apercu{width:100%;border-radius:var(--r);display:block;border:3px solid var(--foret);box-shadow:0 5px 0 var(--foret)}
.apercu-aide{position:absolute;left:12px;right:12px;bottom:16px;margin:0;text-align:center;color:#fff;
  font-size:.86rem;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.95);pointer-events:none;
  animation:aRespire 5s ease-in-out infinite}
.marque-pt{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;
  border-radius:50%;border:3px solid var(--lime);background:rgba(207,233,150,.22);
  box-shadow:0 0 0 3px rgba(18,49,42,.55);animation:ptPose .42s cubic-bezier(.2,1.5,.4,1) both}
.marque-pt::after{content:'';position:absolute;inset:16px;border-radius:50%;background:var(--lime)}
@keyframes ptPose{from{transform:scale(2.1);opacity:0}to{transform:scale(1);opacity:1}}
.pastille{border-radius:var(--r);padding:14px 17px;margin-bottom:15px;font-size:.96rem;line-height:1.45;
  font-weight:700;border:2.5px solid var(--foret);box-shadow:0 4px 0 var(--foret)}
.pastille.oui{background:var(--lime)}
.pastille.non{background:var(--abricot-doux)}
.pastille.non b{display:block;font-size:1.05rem;font-weight:900;margin-bottom:2px}
.pastille.non span{font-weight:600;color:var(--foret-doux)}
.vignettes{display:flex;gap:9px;margin:16px 0 0;flex-wrap:wrap}
.vignettes img{width:58px;height:58px;object-fit:cover;border-radius:14px;border:2.5px solid var(--foret);
  box-shadow:0 3px 0 var(--foret)}
.recap{background:var(--blanc);border:2.5px solid var(--foret);border-radius:var(--r);
  box-shadow:0 4px 0 var(--foret);overflow:hidden;margin-bottom:26px}
.recap-tete{background:var(--lime);padding:13px 17px;border-bottom:2.5px solid var(--foret);
  display:flex;align-items:center;gap:9px}
.recap-tete b{font-size:1rem;font-weight:900;letter-spacing:-.02em}
.recap-tete span{margin-left:auto;font-size:.76rem;font-weight:800;background:var(--foret);
  color:var(--lime);border-radius:999px;padding:4px 11px}
.recap ul{list-style:none;margin:0;padding:6px 17px 12px}
.recap li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--creme-2);font-size:.92rem}
.recap li:last-child{border-bottom:none}
.recap li em{font-style:normal;color:var(--foret-doux);font-weight:700;flex:0 0 40%;font-size:.85rem}
.recap li b{font-weight:700;flex:1}
.recap-photos{display:flex;gap:10px;padding:0 17px 16px;flex-wrap:wrap}
.recap-photos img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:2.5px solid var(--foret)}
/* v39 (C09) — chaque photo du récap porte son bouton « Reprendre » */
.recap-photo{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.recap-photo.douteuse img{border-color:#B4552D;box-shadow:0 0 0 2px #F3A57F}
.reprendre{font:inherit;font-size:.72rem;font-weight:800;background:var(--blanc);border:2px solid var(--foret);
  border-radius:999px;padding:4px 9px;box-shadow:0 2px 0 var(--foret);color:var(--foret);cursor:pointer;min-height:28px}
/* v39 (C06) — les photos déjà prises restent visibles sous la caméra */
.vignettes.mini{margin:10px 0 0;gap:6px}
.vignettes.mini img{width:44px;height:44px;border-radius:11px;box-shadow:0 2px 0 var(--foret)}
.vignettes.mini:empty{display:none}
.recap-vide{padding:16px 17px;font-size:.9rem;color:var(--foret-doux);font-weight:600}
.recap-ia{background:var(--ciel-doux);border-top:2.5px solid var(--foret);padding:14px 17px}
.recap-doute{display:block;margin-top:8px;font-size:.82rem;font-weight:700;color:var(--foret-doux)}
.recap-vigilance{background:var(--abricot-doux);border-top:2.5px solid var(--foret);padding:14px 17px}
.recap-vigilance b{font-size:.95rem}
.recap-vigilance ul{margin:8px 0;padding-left:20px}
.recap-vigilance li{font-size:.9rem;font-weight:700;line-height:1.4;margin-bottom:4px}
.recap-vigilance span{display:block;font-size:.82rem;font-weight:700;color:var(--foret-doux);line-height:1.4}
/* V54 — le bouton « Reprendre » vit DANS l'alerte, pas caché dans le repli du détail. Assez grand
   pour le pouce (44 px), comme les autres actions du tunnel. */
.reprendre-ici{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.reprendre-ici .reprendre{font-size:.86rem;padding:10px 14px;min-height:44px}
.recap-ia b{display:block;font-size:.86rem;font-weight:900;margin-bottom:7px}
.recap-ia ul{list-style:none;margin:0;padding:0}
.recap-ia li{position:relative;padding:3px 0 3px 16px;font-size:.87rem;font-weight:600;border:none}
.recap-ia li::before{content:'·';position:absolute;left:4px;font-weight:900;color:var(--lime-ombre)}
/* V46 (écran cible 3) — le dossier en une carte : vignettes, une ligne, l'adresse, le détail plié */
.recap-resume{display:flex;gap:12px;align-items:center;padding:14px 17px}
.recap-resume .miniatures{display:flex;flex-shrink:0}
.recap-resume .miniatures img{width:46px;height:46px;object-fit:cover;border-radius:12px;border:2.5px solid var(--foret);
  margin-left:-14px;background:var(--creme-2);box-shadow:0 2px 0 var(--foret)}
.recap-resume .miniatures img:first-child{margin-left:0}
.recap-resume .miniatures .sans{width:46px;height:46px;border-radius:12px;border:2.5px dashed var(--foret-doux);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--creme-2)}
.recap-resume .texte{flex:1;min-width:0}
.recap-resume .texte b{display:block;font-size:.98rem;font-weight:900;letter-spacing:-.02em;line-height:1.25}
.recap-resume .texte span{display:block;font-size:.84rem;color:var(--foret-doux);font-weight:600;margin-top:3px;line-height:1.35}
.lien-modif{font:inherit;font-size:.8rem;font-weight:800;background:none;border:none;color:var(--foret);
  text-decoration:underline;text-underline-offset:2px;padding:0 0 0 7px;cursor:pointer;min-height:0}
details.recap-plus{border-top:2.5px solid var(--foret)}
details.recap-plus summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:11px 17px;
  font-size:.84rem;font-weight:800;color:var(--foret-doux)}
details.recap-plus summary::-webkit-details-marker{display:none}
details.recap-plus summary::after{content:'▾';margin-left:auto;font-size:1rem;transition:transform .25s}
details.recap-plus[open] summary::after{transform:rotate(180deg)}
details.recap-plus summary:focus-visible{outline:3px solid var(--abricot);outline-offset:-3px}
/* les garanties, en quatre lignes */
.garanties{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.garanties li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;font-weight:700;line-height:1.4}
.garanties li::before{content:'✓';flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--lime);
  border:2px solid var(--foret);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;margin-top:1px}
.garanties li span{color:var(--foret-doux);font-weight:600}
.garanties li span b{color:var(--foret);font-weight:900}
/* V46 (écran cible 4) — l'écran final vivant : badge, titre, sous-titre, jauge jusqu'à l'échéance */
.vivant{background:var(--blanc);border:2.5px solid var(--foret);border-radius:var(--r);box-shadow:0 4px 0 var(--foret);
  padding:16px 17px;margin:18px 0 0;text-align:left}
.badge-vivant{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;letter-spacing:.06em;font-weight:900;
  text-transform:uppercase;background:var(--lime);border:2px solid var(--foret);border-radius:999px;padding:3px 10px}
.badge-vivant i{width:8px;height:8px;border-radius:50%;background:var(--foret);animation:bat 1.6s ease-in-out infinite}
.badge-vivant.orange{background:var(--abricot)} .badge-vivant.orange i{animation:none}
.badge-vivant.fait i{animation:none}
.badge-vivant.gris{background:var(--creme-2)} .badge-vivant.gris i{animation:none;background:var(--foret-doux)}
.vivant .titre{display:block;font-size:1.12rem;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-top:10px}
.vivant p{margin:6px 0 0;font-size:.88rem;color:var(--foret-doux);font-weight:600;line-height:1.45}
.vivant p b{color:var(--foret)}
.jauge{height:10px;border-radius:999px;background:var(--creme-2);border:2px solid var(--foret);overflow:hidden;margin-top:12px}
.jauge i{display:block;height:100%;background:var(--lime);border-right:2px solid var(--foret);width:0;transition:width 1s linear}
.pendant{margin-top:18px;text-align:left}
.pendant .qtitre{margin-top:6px}
.pendant .compte{font-size:.78rem;font-weight:700;color:var(--foret-doux);margin-top:8px}
.pendant details.pli{margin-top:14px}
.fin .cta{margin-top:18px}
.fin .cta.sombre{margin-top:14px}
.sous-titre{font-size:1.3rem;font-weight:900;letter-spacing:-.02em;margin:0 0 8px}

/* ═══ estimation chiffrée ═══ */
.fourchette{background:var(--lime);border:3px solid var(--foret);border-radius:var(--r);
  box-shadow:0 5px 0 var(--foret);padding:24px 20px;text-align:center;margin-bottom:20px}
.fourchette .montant{font-size:2.5rem;font-weight:900;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.fourchette .quoi{font-size:.9rem;font-weight:800;margin-top:8px}
.fourchette .note{font-size:.78rem;font-weight:700;color:var(--lime-ombre);
  background:var(--foret);border-radius:999px;padding:5px 13px;display:inline-block;margin-top:14px}
.bloc-est{background:var(--blanc);border:2.5px solid var(--foret);border-radius:var(--r);
  box-shadow:0 4px 0 var(--foret);margin-bottom:16px;overflow:hidden}
.bloc-est h3{font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  margin:0;padding:12px 16px;background:var(--creme-2);border-bottom:2.5px solid var(--foret)}
.bloc-est ul{list-style:none;margin:0;padding:10px 16px 14px}
.bloc-est li{position:relative;padding:6px 0 6px 18px;font-size:.91rem;font-weight:600;line-height:1.45}
.bloc-est li::before{content:'·';position:absolute;left:5px;font-weight:900;color:var(--lime-ombre)}
.bloc-est li b{font-weight:800}
.aide-ligne{display:flex;gap:12px;align-items:baseline;padding:9px 16px;border-bottom:1px solid var(--creme-2)}
.aide-ligne:last-child{border-bottom:none}
.aide-ligne em{font-style:normal;flex:1;font-size:.9rem;font-weight:700}
.aide-ligne b{font-weight:900;font-size:.95rem;white-space:nowrap}
.aide-non{color:var(--foret-doux);font-weight:700}
.sources{font-size:.76rem;color:var(--foret-doux);font-weight:600;line-height:1.6;padding:12px 16px}
.sources a{color:var(--foret);text-underline-offset:2px}
.avert{background:var(--ciel-doux);border:2.5px solid var(--foret);border-radius:var(--r);
  padding:15px 18px;font-size:.88rem;font-weight:700;line-height:1.5;margin-bottom:18px}

.heure{display:flex;align-items:center;gap:13px;border:2.5px solid var(--foret);border-radius:var(--r);
  padding:15px 18px;box-shadow:0 4px 0 var(--foret);margin-bottom:18px}
.heure.jour{background:var(--lime)}
.heure.soir{background:var(--abricot-doux)}
.heure.nuit{background:var(--lilas-doux)}
.heure .ic{font-size:1.7rem;flex-shrink:0}
.heure b{display:block;font-size:1.02rem;font-weight:900;line-height:1.25}
.heure span{display:block;font-size:.88rem;color:var(--foret-doux);font-weight:600;margin-top:3px;line-height:1.4}
.droit{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--creme-2)}
.droit:last-child{border-bottom:none}
.droit .co{flex-shrink:0;width:23px;height:23px;border-radius:50%;background:var(--lime);
  border:2px solid var(--foret);display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:900;margin-top:2px}
.droit b{display:block;font-size:.95rem;font-weight:800;line-height:1.3}
.droit span{display:block;font-size:.86rem;color:var(--foret-doux);font-weight:600;line-height:1.45;margin-top:2px}
.engagement-p{background:var(--foret);color:var(--creme);border-radius:var(--r);padding:19px 21px;margin-bottom:18px}
.engagement-p b{display:block;font-size:1.04rem;font-weight:900;margin-bottom:7px}
.engagement-p p{margin:0;font-size:.9rem;color:#B6C9C2;font-weight:600;line-height:1.5}

.rep-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--lime);
  border:2.5px solid var(--foret);display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:900;margin-top:1px}
.rep-secu{background:var(--abricot-doux);border:2.5px solid var(--foret);border-radius:var(--r);
  padding:14px 17px;margin:0 0 16px;box-shadow:0 4px 0 var(--foret)}
.rep-secu b{display:block;font-size:.82rem;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:7px}
.rep-secu p{margin:5px 0 0;font-size:.88rem;font-weight:700;line-height:1.45;color:var(--foret)}
.rep-liens{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 14px}
.rep-liens a{font-size:.84rem;font-weight:800;color:var(--foret);text-decoration:none;
  background:var(--creme-2);border:2px solid var(--foret);border-radius:999px;padding:9px 15px;
  box-shadow:0 3px 0 var(--foret)}
.rep-liens a:active{transform:translateY(3px);box-shadow:0 0 0 var(--foret)}
.chat{background:var(--blanc);border:2.5px solid var(--foret);border-radius:var(--r);
  box-shadow:0 4px 0 var(--foret);padding:15px 15px 12px;margin:0 0 16px}
.chat-titre{margin:0 0 10px;font-size:.95rem;font-weight:900;letter-spacing:-.02em}
.chat-fil{display:flex;flex-direction:column;gap:8px;max-height:min(460px,58vh);overflow-y:auto;
  scroll-behavior:smooth;margin-bottom:10px}   /* v40 (retour HB) : 280 px → plus de la moitié de l'écran */
.chat-fil:empty{display:none}
.bulle{max-width:86%;padding:10px 14px;border-radius:16px;font-size:.9rem;font-weight:600;line-height:1.45}
.bulle.moi{align-self:flex-end;background:var(--lime);border:2px solid var(--foret);border-bottom-right-radius:5px}
.bulle.ia{align-self:flex-start;background:var(--creme-2);border:2px solid var(--foret);
  border-bottom-left-radius:5px;color:var(--foret)}
.bulle.attente{color:var(--foret-doux);letter-spacing:.2em}
.chat-demarreurs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.chat-demarreurs button{font:inherit;font-size:.82rem;font-weight:800;background:var(--ciel-doux);
  border:2px solid var(--foret);border-radius:999px;padding:8px 13px;cursor:pointer;color:var(--foret)}
.chat-demarreurs button:active{transform:scale(.96)}
.chat-saisie{display:flex;gap:8px}
.chat-saisie input{flex:1;font:inherit;font-size:.93rem;font-weight:600;border:2.5px solid var(--foret);
  border-radius:999px;padding:12px 16px;background:var(--creme);color:var(--foret)}
.chat-saisie input:focus{outline:3px solid var(--lime);outline-offset:2px}
.chat-saisie button{width:46px;height:46px;flex-shrink:0;border-radius:50%;background:var(--foret);
  color:var(--lime);border:none;font-size:1.05rem;cursor:pointer}
.chat-saisie button:disabled{opacity:.4}
.chat-saisie button:active{transform:scale(.93)}
.chat-note{margin:9px 2px 0;font-size:.76rem;font-weight:700;color:var(--foret-doux);line-height:1.4}
.rep-ok{display:block;width:100%;font:inherit;font-size:.98rem;font-weight:900;margin-top:4px;
  background:var(--blanc);color:var(--foret);border:2.5px solid var(--foret);border-radius:999px;
  padding:15px;cursor:pointer;box-shadow:0 4px 0 var(--foret)}
.rep-ok:active{transform:translateY(4px);box-shadow:0 0 0 var(--foret)}
.zonebox{border:2.5px solid var(--foret);border-radius:var(--r);padding:16px 19px;box-shadow:0 4px 0 var(--foret)}
.zonebox.pilote{background:var(--lime)}
.zonebox.idf{background:var(--ciel-doux)}
.zonebox.hors{background:var(--lilas-doux)}
.zonebox b{display:block;font-weight:900;font-size:1.04rem;margin-bottom:3px}
.zonebox p{margin:0;font-size:.9rem;color:var(--foret-doux);font-weight:600;line-height:1.45}

.fin{text-align:center;padding:10px 0 4px}
.fin .ref{display:inline-block;font-size:.8rem;letter-spacing:.1em;font-weight:900;background:var(--lime);
  border:2.5px solid var(--foret);border-radius:999px;padding:8px 17px;margin-top:6px;box-shadow:0 4px 0 var(--foret)}
.fin .sous{margin:0 auto 4px}
.mini{font-size:.77rem;color:var(--foret-doux);line-height:1.55;margin-top:20px;font-weight:600}
.geoloc{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:var(--ciel-doux);
  border:2.5px solid var(--foret);border-radius:999px;padding:11px 18px;font:inherit;font-size:.9rem;
  font-weight:800;color:var(--foret);cursor:pointer;box-shadow:0 3px 0 var(--foret)}
.geoloc:active{transform:translateY(3px);box-shadow:0 0 0 var(--foret)}
.geoloc svg{width:18px;height:18px;flex-shrink:0}
.geoloc:disabled{opacity:.55}
.qtitre{font-size:1.02rem;font-weight:800;margin:22px 0 10px}
.qtitre:first-child{margin-top:4px}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{font:inherit;font-size:.94rem;font-weight:700;background:var(--blanc);color:var(--foret);
  border:2.5px solid var(--foret);border-radius:999px;padding:11px 17px;cursor:pointer;
  box-shadow:0 3px 0 var(--foret);transition:transform .12s,box-shadow .12s,background .16s}
.puce:active{transform:translateY(3px);box-shadow:0 0 0 var(--foret)}
.puce.prise{background:var(--lime);box-shadow:0 3px 0 var(--lime-ombre)}
.puce.forte{background:var(--lime);font-weight:900;padding-left:22px;padding-right:22px}   /* V47 : le « Oui » du métier deviné */
#questions .choix{margin-top:12px}
.puce:focus-visible{outline:3px solid var(--abricot);outline-offset:3px}
.gros-champ{font-size:1.6rem!important;font-weight:900!important;letter-spacing:.14em;text-align:center}
.carte-cadre{margin-top:18px;border:2.5px solid var(--foret);border-radius:var(--r);overflow:hidden;
  box-shadow:0 4px 0 var(--foret)}
#carte{height:230px;width:100%;background:var(--creme-2)}
.leaflet-container{font-family:inherit}
.carte-aide{font-size:.8rem;font-weight:700;color:var(--foret-doux);margin:9px 0 0;text-align:center}
.adr-confirm{display:flex;align-items:center;gap:12px;margin-top:14px;background:var(--blanc);
  border:2.5px solid var(--foret);border-radius:var(--r);padding:14px 16px;box-shadow:0 4px 0 var(--foret)}
.adr-txt{flex:1;min-width:0}
.adr-txt b{display:block;font-size:1rem;font-weight:800;line-height:1.25}
.adr-txt span{display:block;font-size:.84rem;color:var(--foret-doux);font-weight:600;margin-top:2px}
.adr-changer{flex-shrink:0;background:var(--creme-2);border:2px solid var(--foret);border-radius:999px;
  padding:8px 14px;font:inherit;font-size:.82rem;font-weight:800;color:var(--foret);cursor:pointer}
.adr-changer:active{transform:scale(.95)}
.pin-marto{background:none;border:none}
.etat{font-size:.85rem;font-weight:700;color:var(--foret-doux);margin:10px 0 0;
  background:var(--creme-2);border-radius:12px;padding:10px 14px;line-height:1.4}
/* V41 (C34) — l'erreur de contact se voit : abricot, picto, bord ; bouton verrouillé lisible */
#erreur-contact{background:var(--abricot-doux);border:2px solid var(--abricot);color:var(--foret);padding-left:38px;position:relative}
#erreur-contact::before{content:'⚠';position:absolute;left:12px;top:9px;font-size:1rem}
.cta[disabled]{background:var(--creme-2);color:var(--foret-doux);box-shadow:0 5px 0 rgba(18,49,42,.25);cursor:default}
.cta[disabled]:active{transform:none}

/* ═══════════ écran large : la même application, centrée ═══════════ */
@media (min-width:820px){
  body{background-attachment:fixed}
  .entete-in{max-width:600px;padding:16px 24px}
  .marque .mot{font-size:1.5rem}
  .retour{width:42px;height:42px}
  .entete .menu{font-size:.88rem;padding:9px 17px}

  main{max-width:600px;padding:30px 30px 22px}
  h1{font-size:2.9rem}
  .etape[data-e="1"] h1{font-size:2.6rem}
  .sous{font-size:1.1rem}
  .etape[data-e="1"] .sous{font-size:1.06rem}
  .opt{padding:17px 20px}
  .opt .vig{width:60px;height:60px}
  .opt .txt b{font-size:1.14rem}
  .scene{max-width:250px}
  .bande b{font-size:1.6rem}
  .bande span{font-size:.86rem}
  .puce{font-size:1rem;padding:13px 20px}
  .cam{max-height:60vh;max-width:430px}
  #carte{height:280px}

  /* la barre reste une feuille d'application, pas un bandeau pleine largeur */
  .barre{max-width:600px;margin:auto auto 0;border-radius:var(--r-l) var(--r-l) 0 0;padding:18px 30px 22px}
  .barre-in{max-width:100%}

  .panneau-corps{max-width:680px;padding:34px 30px 70px}
  .panneau-tete{padding:16px 30px}
  .panneau h2{font-size:2.1rem}
  .pas{padding:18px 22px}
}
@media (min-width:1100px){
  main{padding-top:46px}
  h1{font-size:3.1rem}
}

/* ═══ v31 — le bureau n'est plus un téléphone étiré ═══ */
@media (min-width:1000px){
  .entete-in{max-width:1100px}
  main{max-width:1100px;padding-left:48px;padding-right:48px}
  /* chaque écran du parcours reste une colonne de lecture confortable… */
  .etape.on{max-width:680px;margin:0 auto}
  /* …sauf l'accueil : une vraie page d'accueil, texte à gauche, scène à droite */
  .etape[data-e="1"].on{display:grid!important;max-width:none;margin:0;
    grid-template-columns:minmax(0,560px) minmax(0,1fr);column-gap:72px;
    align-items:center;justify-items:start}
  .etape[data-e="1"] > *{grid-column:1}
  .etape[data-e="1"] .scene{grid-column:2;grid-row:1/span 8;max-width:460px;width:100%;
    justify-self:center;align-self:center;margin:0;overflow:hidden}
  .etape[data-e="1"] h1{font-size:3.4rem}
  .etape[data-e="1"] .sous{font-size:1.15rem;max-width:44ch}
  .serment{max-width:52ch;font-size:.98rem}
  .etape[data-e="1"] .bande{width:100%;max-width:520px}
  .etape[data-e="1"] .choix{width:100%;max-width:520px}
  .etape[data-e="1"] .rassure{justify-content:flex-start;max-width:520px}
  #reprise{width:100%;max-width:520px}
  .barre{max-width:680px}
}

@media (max-width:400px){h1{font-size:2.2rem}.bande b{font-size:1.2rem}.bande span{font-size:.72rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}