/* ═══ VERRE ════════════════════════════════════════════════════════════════
   Cinq surfaces, pas une : carte principale, option à choisir, champ de saisie,
   panneau contextuel, bloc de récapitulatif. Elles partagent la matière, pas
   la hiérarchie — la carte principale est la seule à porter une ombre profonde. */

.verre{
  background:linear-gradient(145deg,var(--verre-haut),var(--verre-bas));
  -webkit-backdrop-filter:var(--flou); backdrop-filter:var(--flou);
  border:1px solid var(--verre-bord); border-radius:var(--r-carte);
  box-shadow:var(--ombre-verre), var(--verre-reflet);
}
/* sans flou d'arrière-plan, le verre devient une surface pleine : lisible partout */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .verre,.v-option,.v-panneau{background:rgba(var(--fond2-rgb),.94)}
}

/* ── carte principale : l'objet unique du parcours ─────────────────────── */
.v-carte{position:relative; padding:22px 20px 20px; overflow:hidden; transition:height var(--t-entree) var(--doux)}
.v-carte::before{ /* le reflet du bord supérieur */
  content:""; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--lueur),.34) 30%,rgba(var(--lueur),.34) 70%,transparent);
}
@media(min-width:640px){ .v-carte{padding:28px 30px 26px} }

/* ── option à choisir ──────────────────────────────────────────────────── */
.v-option{
  position:relative; display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 15px; border-radius:var(--r-option); cursor:pointer; color:var(--texte);
  font:inherit; background:linear-gradient(145deg,rgba(var(--lueur),.075),rgba(var(--lueur),.025));
  border:1px solid rgba(var(--lueur),.10); box-shadow:inset 0 1px 0 rgba(var(--reflet),.07);
  transition:transform var(--t-micro) var(--doux), border-color var(--t-micro) var(--doux),
             background var(--t-micro) var(--doux), box-shadow var(--t-micro) var(--doux), opacity .3s var(--doux);
}
@media(hover:hover){
  .v-option:hover{transform:translateY(-2px); border-color:var(--verre-bord-vif);
    background:linear-gradient(145deg,rgba(var(--lueur),.115),rgba(var(--lueur),.04));
    box-shadow:0 10px 28px rgba(var(--ombre-rgb),.24), inset 0 1px 0 rgba(var(--reflet),.14)}
}
.v-option:active{transform:scale(.985)}
.v-option:focus-visible,.bouton:focus-visible,.lien:focus-visible,.v-champ:focus-visible,.bascule:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px}
.v-option[aria-pressed="true"]{
  border-color:rgba(var(--accent-rgb),.62);
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.04));
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2), 0 10px 30px rgba(var(--ombre-rgb),.22), inset 0 1px 0 rgba(var(--reflet),.14)}
.v-option[disabled]{opacity:.4; cursor:not-allowed; transform:none}
.v-option.efface{opacity:.28}

.v-option .picto{flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(var(--lueur),.06); border:1px solid rgba(var(--lueur),.08); color:var(--texte-2);
  transition:color var(--t-micro), background var(--t-micro), border-color var(--t-micro)}
.v-option[aria-pressed="true"] .picto{color:var(--accent); background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.3)}
.v-option .txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.v-option .v{font-weight:500; font-size:15px; line-height:1.34; letter-spacing:-.01em}
.v-option .s{font-weight:300; font-size:12.4px; line-height:1.4; color:var(--texte-3)}
.v-option .coche{flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(var(--lueur),.22);
  display:grid; place-items:center; color:var(--nuit); transition:all var(--t-micro) var(--doux)}
.multi .v-option .coche{border-radius:6px}
.v-option .coche .ic{width:12px; height:12px; stroke-width:3; opacity:0; transform:scale(.4); transition:all .22s var(--ressort)}
.v-option[aria-pressed="true"] .coche{background:var(--accent); border-color:var(--accent)}
.v-option[aria-pressed="true"] .coche .ic{opacity:1; transform:none}

/* ── champ de saisie ───────────────────────────────────────────────────── */
.v-champ{
  width:100%; padding:15px 17px; border-radius:var(--r-champ); color:var(--texte);
  font:400 16px/1.5 "Sora",sans-serif; background:var(--champ);
  border:1px solid rgba(var(--lueur),.14); box-shadow:inset 0 2px 8px rgba(var(--ombre-rgb),.2);
  transition:border-color var(--t-micro) var(--doux), box-shadow var(--t-micro) var(--doux), background var(--t-micro)}
textarea.v-champ{min-height:132px; resize:vertical; line-height:1.6}
.v-champ::placeholder{color:var(--texte-3); font-weight:300}
.v-champ:focus{outline:none; border-color:rgba(var(--accent-rgb),.62); background:var(--champ-vif);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.13), inset 0 2px 8px rgba(var(--ombre-rgb),.2)}
.v-champ[aria-invalid="true"]{border-color:rgba(240,160,140,.7); box-shadow:0 0 0 3px rgba(240,160,140,.12)}

/* ── panneau contextuel (aide, cookies, parcours) ──────────────────────── */
.v-panneau{
  background:linear-gradient(160deg,var(--panneau-a),var(--panneau-b));
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  border:1px solid var(--verre-bord); box-shadow:0 -12px 60px rgba(var(--ombre-rgb),.4), var(--verre-reflet)}

/* ── bloc de récapitulatif ─────────────────────────────────────────────── */
.v-bloc{border-radius:18px; border:1px solid rgba(var(--lueur),.09); background:rgba(var(--lueur),.035); overflow:hidden}

/* ── boutons ───────────────────────────────────────────────────────────── */
.bouton{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:var(--r-pilule); border:1px solid transparent;
  font:600 15px/1 "Sora",sans-serif; letter-spacing:-.005em; color:var(--sur-accent);
  background:linear-gradient(135deg,var(--bouton-a),var(--accent)); box-shadow:0 8px 26px rgba(var(--accent-rgb),.2), inset 0 1px 0 rgba(var(--reflet),.5);
  transition:transform var(--t-micro) var(--doux), box-shadow var(--t-micro) var(--doux), opacity var(--t-micro), background var(--t-micro)}
@media(hover:hover){ .bouton:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(var(--accent-rgb),.3), inset 0 1px 0 rgba(var(--reflet),.5)} }
.bouton:active{transform:scale(.97)}
.bouton[disabled]{opacity:.45; cursor:progress; transform:none}
.bouton.verre-b{color:var(--texte); background:linear-gradient(145deg,rgba(var(--lueur),.11),rgba(var(--lueur),.04));
  border-color:var(--verre-bord); box-shadow:var(--verre-reflet)}
@media(hover:hover){ .bouton.verre-b:hover{border-color:var(--verre-bord-vif); box-shadow:0 10px 28px rgba(var(--ombre-rgb),.26), var(--verre-reflet)} }
.lien{appearance:none; background:none; border:none; cursor:pointer; color:var(--texte-2); padding:12px 8px;
  font:500 14px/1 "Sora",sans-serif; display:inline-flex; align-items:center; gap:7px; border-radius:10px; transition:color var(--t-micro)}
.lien:hover{color:var(--texte)}

.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}
.bouton .ic{width:17px; height:17px; stroke-width:2.2}
.lien .ic{width:16px; height:16px; stroke-width:2}

.bascule{flex:none; width:46px; height:27px; border-radius:99px; border:1px solid rgba(var(--lueur),.16); cursor:pointer; position:relative;
  background:rgba(var(--lueur),.08); transition:background .26s var(--doux), border-color .26s}
.bascule::after{content:""; position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:var(--craie);
  box-shadow:0 1px 4px rgba(var(--ombre-rgb),.4); transition:transform .3s var(--ressort)}
.bascule[aria-pressed="true"]{background:rgba(var(--accent-rgb),.5); border-color:rgba(var(--accent-rgb),.7)}
.bascule[aria-pressed="true"]::after{transform:translateX(19px)}
.bascule[disabled]{opacity:.55; cursor:not-allowed}