/* ══ Devis véhicule — comportement dans /assets/js/devis-vehicule.js ══ */
.dv{ max-width:1080px; margin:0 auto; }
.dv-prog{ list-style:none; margin:0 0 1.4rem; padding:0; display:flex; gap:.4rem; counter-reset:none; overflow-x:auto; scrollbar-width:none; }
.dv-prog::-webkit-scrollbar{ display:none; }
.dv-prog li{ flex:1 0 auto; display:flex; align-items:center; gap:.45rem; padding:.55rem .8rem; border-radius:999px; font-size:.8rem; font-weight:700;
  color:var(--text-muted,#5b6472); background:#fff; border:1.5px solid var(--border,#e3e0d8); white-space:nowrap; }
.dv-prog li span{ width:1.45rem; height:1.45rem; border-radius:50%; display:grid; place-items:center; font-size:.72rem; background:#eceae4; color:var(--navy,#0C1B2E); }
.dv-prog li.is-on{ border-color:var(--navy,#0C1B2E); color:var(--navy,#0C1B2E); }
.dv-prog li.is-on span{ background:var(--navy,#0C1B2E); color:#fff; }
.dv-prog li.is-done span{ background:var(--gold,#C9A84C); color:#0C1B2E; }
.dv-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.4rem; align-items:start; }
.dv-main{ background:#fff; border:1px solid var(--border,#e3e0d8); border-radius:22px; padding:1.8rem 1.8rem 1.5rem; box-shadow:0 14px 40px rgba(12,27,46,.08); min-width:0; }
.dv-h{ font-family:var(--font-head,inherit); font-size:1.45rem; color:var(--navy,#0C1B2E); margin:0 0 1.1rem; }
.dv-q{ border:0; margin:0 0 1.2rem; padding:0; min-width:0; }
.dv-q legend{ padding:0; margin-bottom:.55rem; font-weight:700; font-size:.92rem; color:var(--navy,#0C1B2E); }
.dv-q legend small, .dv-q small{ font-weight:500; color:var(--text-muted,#5b6472); }
.dv .dv-qs{ margin:-.2rem 0 .6rem; font-size:.84rem !important; color:var(--text-muted,#5b6472); }
.dv-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.dv-card{ appearance:none; font:inherit; text-align:left; cursor:pointer; position:relative; display:flex; flex-direction:column; gap:.3rem; padding:1rem 1.1rem;
  border-radius:16px; border:1.5px solid var(--border,#e3e0d8); background:#fff; color:var(--navy,#0C1B2E); transition:border-color .2s, box-shadow .2s; }
.dv-card strong{ font-size:1.02rem; } .dv-card span{ font-size:.84rem; color:var(--text-muted,#5b6472); }
.dv-card:hover{ border-color:var(--gold,#C9A84C); }
.dv-card.is-on{ border-color:var(--gold,#C9A84C); background:#fffaf0; box-shadow:0 0 0 3px rgba(201,168,76,.2); }
.dv-card.is-dis{ cursor:not-allowed; opacity:.55; background:#f6f5f1; border-style:dashed; }
.dv-card.is-dis:hover{ border-color:var(--border,#e3e0d8); }
.dv-badge{ position:absolute; top:-10px; right:12px; padding:.25rem .6rem; border-radius:999px; font-size:.7rem; font-weight:800; color:#0C1B2E;
  background:linear-gradient(180deg,#e6c56b 0%,#C9A84C 100%); }
.dv-seg{ display:inline-flex; flex-wrap:wrap; gap:.4rem; padding:4px; border-radius:999px; background:#f3f1ec; margin-bottom:1.1rem; }
.dv-q .dv-seg{ margin-bottom:0; }
.dv-seg button{ appearance:none; border:0; font:inherit; font-size:.86rem; font-weight:700; cursor:pointer; padding:.55rem 1rem; border-radius:999px; background:transparent; color:var(--navy,#0C1B2E); }
.dv-seg button.is-on{ background:var(--navy,#0C1B2E); color:#fff; }
.dv-in{ width:100%; box-sizing:border-box; font:inherit; font-size:1rem; padding:.75rem .9rem; border-radius:12px; border:1.5px solid var(--border,#e3e0d8); background:#fff; color:var(--navy,#0C1B2E); }
.dv-in:focus{ outline:none; border-color:var(--gold,#C9A84C); box-shadow:0 0 0 3px rgba(201,168,76,.18); }
textarea.dv-in{ resize:vertical; }
.dv-search{ margin-bottom:.7rem; }
.dv-brands{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:.5rem; max-height:330px; overflow-y:auto; padding:2px; }
.dv-brand{ appearance:none; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.7rem .4rem; border-radius:14px;
  border:1.5px solid var(--border,#e3e0d8); background:#fff; color:var(--navy,#0C1B2E); font-size:.74rem; font-weight:700; text-align:center; }
.dv-brand:hover{ border-color:var(--gold,#C9A84C); }
.dv-brand img{ width:44px; height:44px; object-fit:contain; }
.dv-brand i{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:800; background:#f3f1ec; }
.dv-link{ appearance:none; border:0; background:none; padding:0; margin-top:.55rem; font:inherit; font-size:.84rem; font-weight:700; color:var(--gold-dark,#a8873a); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.dv-chosen{ display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; padding:.7rem .9rem; border-radius:14px; background:#f7f5ef; margin-bottom:1rem; }
.dv-chosen img{ width:40px; height:40px; object-fit:contain; }
.dv-chosen strong{ font-size:1.05rem; color:var(--navy,#0C1B2E); }
.dv-chosen .dv-link{ margin:0 0 0 auto; }
.dv-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; }
.dv .dv-note{ margin:-.4rem 0 1rem; font-size:.84rem !important; color:var(--text-muted,#5b6472); }
.dv-gams{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:.6rem; }
.dv-gam{ appearance:none; font:inherit; text-align:left; cursor:pointer; position:relative; display:flex; flex-direction:column; gap:.2rem; padding:.85rem .9rem;
  border-radius:14px; border:1.5px solid var(--border,#e3e0d8); background:#fff; color:var(--navy,#0C1B2E); }
.dv-gam strong{ font-size:1rem; } .dv-gam span{ font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-dark,#a8873a); }
.dv-gam em{ font-style:normal; font-size:.78rem; color:var(--text-muted,#5b6472); }
.dv-gam.is-on{ border-color:var(--gold,#C9A84C); background:#fffaf0; box-shadow:0 0 0 3px rgba(201,168,76,.2); }
.dv-gam--aide{ border-style:dashed; } .dv-gam--aide span{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--text-muted,#5b6472); }
.dv-sws{ display:flex; flex-wrap:wrap; gap:.4rem; }
.dv .dv-vals{ margin:.6rem 0 0; font-size:.86rem !important; color:var(--text-muted,#5b6472); }
.dv-vals b{ color:var(--navy,#0C1B2E); } .dv-vals a{ color:var(--gold-dark,#a8873a); font-weight:700; }
.dv-checks{ display:grid; gap:.5rem; }
.dv-check{ display:flex; align-items:flex-start; gap:.7rem; padding:.75rem .9rem; border-radius:12px; border:1.5px solid var(--border,#e3e0d8); cursor:pointer; background:#fff; }
.dv-check:has(input:checked){ border-color:var(--gold,#C9A84C); background:#fffaf0; }
.dv-check input{ width:1.15rem; height:1.15rem; margin-top:.15rem; accent-color:#0C1B2E; flex:none; }
.dv-check span{ display:flex; flex-direction:column; gap:.1rem; font-size:.92rem; color:var(--navy,#0C1B2E); }
.dv-check small{ font-size:.78rem; color:var(--text-muted,#5b6472); }
.dv .dv-warn{ margin:-.3rem 0 1rem; padding:.7rem .9rem; border-radius:10px; background:#fff4e0; color:#7a5310; font-size:.84rem !important; }
.dv-drop{ display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:1rem; border-radius:14px; border:1.5px dashed var(--border,#cfcabd); cursor:pointer; text-align:center; background:#faf9f6; }
.dv-drop span{ font-weight:700; color:var(--navy,#0C1B2E); } .dv-drop small{ font-size:.76rem; color:var(--text-muted,#5b6472); }
.dv-drop:hover{ border-color:var(--gold,#C9A84C); }
.dv-thumbs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.dv-th{ position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden; }
.dv-th img{ width:100%; height:100%; object-fit:cover; }
.dv-th button{ position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(12,27,46,.8); color:#fff; cursor:pointer; line-height:1; }
/* Champ anti-robot : une règle générale du site met les champs à 100 % de large ;
   sans !important il faisait 390 px hors écran et la page débordait au téléphone (20/10). */
.dv-hp{ position:absolute !important; left:0 !important; top:0 !important; width:1px !important; min-width:0 !important; max-width:1px !important; height:1px !important; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); padding:0 !important; margin:0 !important; border:0 !important; opacity:0; pointer-events:none; }
.dv .dv-err{ margin:0 0 .8rem; padding:.7rem .9rem; border-radius:10px; background:#fdecea; color:#a1271d; font-size:.88rem !important; font-weight:600; }
.dv-send{ width:100%; justify-content:center; }
.dv .dv-rgpd{ margin:.8rem 0 0; font-size:.76rem !important; color:var(--text-muted,#5b6472); text-align:center; }
.dv-nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--border,#e3e0d8); }
.dv-nav .dv-next{ margin-left:auto; min-width:160px; justify-content:center; }
.dv-nav .dv-next:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.dv-back{ appearance:none; border:0; background:none; font:inherit; font-weight:700; color:var(--navy,#0C1B2E); cursor:pointer; padding:.5rem 0; }
.dv-recap{ position:sticky; top:calc(var(--header-h,72px) + 30px); background:#0C1B2E; color:#fff; border-radius:20px; padding:1.3rem 1.3rem 1.1rem; }
.dv .dv-rt{ margin:0 0 .8rem; font-size:.74rem !important; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold,#C9A84C); }
.dv-recap ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.dv-recap li{ display:grid; grid-template-columns:1fr auto; gap:.1rem .5rem; padding-bottom:.65rem; border-bottom:1px solid rgba(255,255,255,.1); }
.dv-rk{ grid-column:1 / -1; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.dv-recap b{ font-size:.9rem; font-weight:700; } .dv-recap em{ font-style:normal; font-weight:500; color:rgba(255,255,255,.45); }
.dv-recap button{ appearance:none; border:0; background:none; padding:0; font:inherit; font-size:.76rem; font-weight:700; color:var(--gold,#C9A84C); cursor:pointer; align-self:center; }
.dv .dv-rn{ margin:.9rem 0 0; font-size:.78rem !important; color:rgba(255,255,255,.7); }
.dv-ok{ text-align:center; max-width:620px; margin:0 auto; padding:2.4rem 1.6rem; background:#fff; border-radius:22px; border:1px solid var(--border,#e3e0d8); box-shadow:0 14px 40px rgba(12,27,46,.08); }
.dv-ok-ic{ display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; font-size:2rem; color:#0C1B2E; background:linear-gradient(180deg,#e6c56b 0%,#C9A84C 100%); margin-bottom:1rem; }
.dv-ok h2{ font-family:var(--font-head,inherit); color:var(--navy,#0C1B2E); margin:0 0 .6rem; }
.dv-ok p{ color:var(--text-muted,#5b6472); margin:0 0 1.4rem; }
@media (max-width:900px){
  .dv-wrap{ grid-template-columns:1fr; }
  /* Téléphone : le récap devient une ligne de pastilles (valeurs seules) */
  .dv-recap{ position:static; order:-1; padding:.75rem .9rem; border-radius:16px; }
  .dv .dv-rt{ margin-bottom:.45rem; font-size:.66rem !important; }
  .dv-recap ul{ display:flex; flex-wrap:wrap; gap:.35rem; }
  .dv-recap li{ display:block; padding:.3rem .65rem; border:0; border-radius:999px; background:rgba(255,255,255,.1); }
  .dv-recap li.is-empty, .dv-rk, .dv-recap button{ display:none; }
  .dv-recap b{ font-size:.78rem; }
  .dv .dv-rn{ display:none; }
  .dv-main{ padding:1.3rem 1.1rem 1.1rem; border-radius:18px; }
  .dv-cards, .dv-row{ grid-template-columns:1fr; }
  .dv-prog li{ font-size:0; padding:.4rem; flex:0 0 auto; }
  .dv-prog li span{ font-size:.72rem; }
  .dv-prog li.is-on{ font-size:.8rem; padding:.4rem .8rem .4rem .4rem; }
  .dv-nav--fix{ position:sticky; bottom:0; z-index:5; background:#fff; margin:1rem -1.1rem -1.1rem; padding:.8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); border-radius:0 0 18px 18px; box-shadow:0 -8px 20px rgba(12,27,46,.06); }
}
/* Sur la page du devis, la barre flottante (devis · appel · recherche) ferait doublon
   et masquerait « Continuer » sur téléphone. */
body:has([data-devis-vehicule]) .pt-mobile-devis,
body:has([data-devis-vehicule]) .pt-ai-bar{ display:none !important; }
@media (max-width:900px){ body:has([data-devis-vehicule]) .pt-mobile-tel{ display:none !important; } }

/* ══ Passe mobile (10/10) ══ */
.dv-progm{ display:none; }
.dv-brand--plus i{ font-size:1.4rem; color:var(--gold-dark,#a8873a); }
@media (max-width:900px){
  /* Progression : « Étape 2 sur 5 · Votre véhicule » + barre fine */
  .dv-prog{ display:none; }
  .dv-progm{ display:block; margin:0 0 .8rem; }
  .dv-progm span{ display:block; font-size:.8rem; color:var(--text-muted,#5b6472); margin-bottom:.4rem; }
  .dv-progm b{ color:var(--navy,#0C1B2E); }
  .dv-progm i{ display:block; height:4px; border-radius:2px; background:#e8e5dd; overflow:hidden; }
  .dv-progm em{ display:block; height:100%; background:linear-gradient(90deg,#C9A84C,#e6c56b); border-radius:2px; transition:width .3s ease; }
  .dv-recap.is-vide{ display:none; }
  .dv-recap{ margin-bottom:.2rem; }
  .dv-main{ padding:1.1rem 1rem 1rem; }
  .dv-h{ font-size:1.25rem; margin-bottom:.8rem; }
  .dv-q{ margin-bottom:1rem; }
  /* Marques : 3 colonnes compactes, pas de boîte qui défile dans la page */
  .dv-brands{ max-height:none; overflow:visible; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; }
  .dv-brand{ padding:.55rem .3rem; border-radius:12px; font-size:.7rem; }
  .dv-brand img, .dv-brand i{ width:34px; height:34px; }
  /* Gammes : 2 colonnes, « Je ne sais pas » sur toute la largeur */
  .dv-gams{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }
  .dv-gam{ padding:.7rem .7rem .65rem; }
  .dv-gam strong{ font-size:.95rem; } .dv-gam span{ font-size:.62rem; } .dv-gam em{ font-size:.72rem; }
  .dv-gam .dv-badge{ top:-9px; right:8px; font-size:.6rem; padding:.18rem .45rem; }
  .dv-gam--aide{ grid-column:1 / -1; }
  /* Vitres : pastilles à cocher au lieu de grandes cases */
  .dv-checks{ display:flex; flex-wrap:wrap; gap:.4rem; }
  .dv-check{ padding:.55rem .75rem; border-radius:999px; align-items:center; gap:.45rem; }
  .dv-check input{ margin:0; width:1rem; height:1rem; }
  .dv-check span{ font-size:.86rem; }
  .dv-check small{ display:none; }
  /* Bouton « Continuer » : le texte dit ce qui manque, lisible même inactif */
  .dv-nav .dv-next{ min-width:0; flex:1; }
  .dv-nav .dv-next:disabled{ opacity:1; background:#efece4; color:#6b6355; box-shadow:none; font-weight:700; }
  .dv-seg button{ padding:.5rem .85rem; font-size:.82rem; }
}

/* ══ Étape teinte en image (19/10/2026) ══ */
.dv-car{ position:relative; aspect-ratio:1105 / 375; margin:.2rem 0 1rem; }
.dv-car-l{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .45s ease; }
.dv-car-l.on{ opacity:1; }
.dv-car-pct{ position:absolute; left:2%; top:0; font-family:Manrope, Inter, sans-serif; font-weight:800; font-style:italic; letter-spacing:-.03em;
  font-size:clamp(2rem, 7vw, 4.2rem); line-height:1; color:#c4c6ca; pointer-events:none; font-variant-numeric:tabular-nums; }
.dv-gams--img{ grid-template-columns:repeat(auto-fill, minmax(165px,1fr)); }
.dv-gam--img{ padding:0 0 .75rem; overflow:hidden; }
.dv-gam--img > strong, .dv-gam--img > span, .dv-gam--img > em{ padding:0 .85rem; }
.dv-gam-ph{ display:block; height:78px; background-size:cover; background-position:center 55%; margin-bottom:.55rem; border-bottom:1px solid rgba(12,27,46,.08); }
.dv-gam--img .dv-badge{ z-index:1; top:6px; right:6px; }  /* la carte coupe ce qui dépasse */
.dv-gam--img em b{ color:var(--navy,#0C1B2E); }
.dv-gam-bar{ display:block; height:5px; margin:.35rem .85rem 0; border-radius:5px; background:rgba(12,27,46,.08); overflow:hidden; }
.dv-gam-bar u{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#e6c56b,var(--gold,#C9A84C)); transition:width .4s ease; }
.dv-gam--aide{ justify-content:center; min-height:120px; }
.dv-jauges{ margin:-.2rem 0 1.2rem; padding:.9rem 1rem; border-radius:14px; background:#f7f5ef; }
.dv .dv-jt{ margin:0 0 .55rem; font-size:.88rem !important; color:var(--text-muted,#5b6472); }
.dv-jt b{ color:var(--navy,#0C1B2E); } .dv-jt a{ color:var(--gold-dark,#a8873a); font-weight:700; }
.dv-jauges ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.dv-jauges li > div{ display:flex; justify-content:space-between; font-size:.82rem; color:#3b4656; }
.dv-jauges li b{ color:var(--navy,#0C1B2E); font-variant-numeric:tabular-nums; }
.dv-jauges li i{ display:block; height:6px; border-radius:6px; background:rgba(12,27,46,.08); margin-top:.25rem; overflow:hidden; }
.dv-jauges li em{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#e6c56b,var(--gold,#C9A84C)); transition:width .4s ease; }
.dv-warn[hidden]{ display:none; }
@media (max-width:600px){
  .dv-car{ margin-left:-10px; margin-right:-10px; }
  .dv-gams--img{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dv-gam--img > strong, .dv-gam--img > span, .dv-gam--img > em{ padding:0 .6rem; }
  .dv-gam-bar{ margin:.3rem .6rem 0; }
  .dv-gam-ph{ height:64px; }
}
@media (prefers-reduced-motion:reduce){ .dv-car-l, .dv-gam-bar u, .dv-jauges li em{ transition:none; } }
/* En majuscules, le « µ » de « 120 µm » devenait un « M » : on garde l'unité en minuscules. */
.dv-gam .dv-mu{ text-transform:none; letter-spacing:0; }

/* ── Étape « Les vitres » : emplacements touchés sur la voiture (19/10/2026) ── */
.dv-zs{ position:relative; margin:.4rem 0 .8rem; border-radius:16px; overflow:hidden; background:#ecedef; aspect-ratio:1200/538; -webkit-tap-highlight-color:transparent; }
.dv-zs img{ position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
.dv-zs-base{ position:relative !important; }
.dv-zs-c{ opacity:0; transition:opacity .25s ease; pointer-events:none; }
.dv-zs-c.hov{ opacity:.45; }
.dv-zs-c.on{ opacity:1; }
.dv-zs.is-hov{ cursor:pointer; }
.dv-zs-film{ position:absolute; right:.8rem; bottom:.7rem; padding:.3rem .7rem; border-radius:999px; background:rgba(12,27,46,.86); color:#fff; font-size:.76rem; font-weight:700; }
.dv-zs-ar{ position:absolute; left:.7rem; top:.6rem; width:clamp(66px,16%,124px); padding:.35rem .35rem .3rem; border-radius:12px; border:1.5px solid rgba(12,27,46,.14);
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.1rem; font:inherit; }
.dv-zs-ar svg{ width:100%; height:auto; display:block; }
.dv-zs-ar .c{ fill:#1d2b45; } .dv-zs-ar .v{ fill:#30353d; transition:fill .25s; } .dv-zs-ar .f{ fill:#b23a3a; } .dv-zs-ar .p{ fill:#e8e8e8; } .dv-zs-ar .r{ fill:#15181d; }
.dv-zs-ar span{ font-size:.66rem; font-weight:700; color:var(--navy,#0C1B2E); white-space:nowrap; }
.dv-zs-ar small{ font-size:inherit; font-weight:600; }
.dv-zs-ar:hover{ border-color:var(--gold,#C9A84C); }
.dv-zs-ar.on{ border-color:var(--gold,#C9A84C); box-shadow:0 0 0 3px rgba(201,168,76,.25); }
.dv-zs-ar.on .v{ fill:#d1ad5b; }
.dv-zs-pre{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 .8rem; }
.dv-zs-pre button{ font:inherit; font-size:.82rem; font-weight:600; padding:.42rem .85rem; border-radius:999px; border:1.5px solid rgba(12,27,46,.18); background:#fff; color:var(--navy,#0C1B2E); cursor:pointer; }
.dv-zs-pre button small{ font-weight:500; color:var(--gold-dark,#a8862f); margin-left:.2rem; }
.dv-zs-pre button:hover{ border-color:var(--gold,#C9A84C); }
.dv-zl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin:0 0 1rem; }
.dv-zl-b{ display:flex; align-items:flex-start; gap:.65rem; padding:.7rem .85rem; border-radius:12px; border:1.5px solid var(--border,#e3e0d8); background:#fff; text-align:left; font:inherit; cursor:pointer; color:var(--navy,#0C1B2E); }
.dv-zl-b i{ flex:none; width:1.15rem; height:1.15rem; margin-top:.1rem; border-radius:6px; border:1.5px solid rgba(12,27,46,.3); display:grid; place-items:center; }
.dv-zl-b.is-on{ border-color:var(--gold,#C9A84C); background:#fffaf0; }
.dv-zl-b.is-on i{ background:var(--gold,#C9A84C); border-color:var(--gold,#C9A84C); }
.dv-zl-b.is-on i::after{ content:""; width:.32rem; height:.6rem; border:solid #0C1B2E; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }
.dv-zl-b span{ display:flex; flex-direction:column; gap:.12rem; }
.dv-zl-b b{ font-size:.9rem; }
.dv-zl-b small{ font-size:.76rem; color:var(--text-muted,#5b6472); line-height:1.35; }
.dv-zl-b:hover{ border-color:var(--gold,#C9A84C); }
.dv-zl-b:focus-visible, .dv-zs-ar:focus-visible{ outline:2px solid var(--navy,#0C1B2E); outline-offset:2px; }
@media (max-width:600px){
  .dv-zl{ grid-template-columns:1fr; }
  .dv-zs{ border-radius:12px; margin-inline:-.2rem; }
  .dv-zs-film{ font-size:.66rem; right:.45rem; bottom:.4rem; padding:.2rem .55rem; }
  .dv-zs-ar{ left:.4rem; top:.4rem; padding:.2rem; border-radius:9px; width:58px; }
  .dv-zs-ar span{ font-size:.6rem; }
  .dv-zs-ar small{ display:none; }
  .dv-zs-pre button{ font-size:.78rem; padding:.38rem .7rem; }
}
@media (prefers-reduced-motion:reduce){ .dv-zs-c, .dv-zs-ar .v{ transition:none; } }