/* BRAISIÈRE — configurateur (Phase 4). Enveloppe visuelle seulement : la logique et le contrat
   DOM (ids, .opt[data-groupe][data-opt], input, .on, .verrou, .canvas .fond .pile .slot .calque, .toast,
   #teintes, [data-vue], #total, #liste, #recap-liste, #recap-total, dialog#reveal, .barre-cta) sont inchangés. */
.configurateur{padding:calc(var(--entete) + var(--e8)) 0 var(--e9)}
.configurateur .page-tete{margin-bottom:var(--e6)}
.configurateur .page-tete h1{grid-column:1/8}
.configurateur .page-tete .chapo{grid-column:1/7;font-style:normal;font-family:var(--sans);font-size:var(--t-corps);color:var(--secondaire)}
.cfg-choix{grid-column:1/7;grid-row:1;min-width:0}
.cfg-scene{grid-column:7/13;grid-row:1;position:sticky;top:calc(var(--entete) + 16px);align-self:start;min-width:0}
.cfg-scene .scene{aspect-ratio:auto;max-height:none;overflow:visible}
.cfg-scene .canvas img{filter:none}
/* groupes d'options */
.groupe{padding:var(--e6) 0 var(--e5)}
.groupe:first-child{padding-top:0}
.groupe h2{font-size:var(--t-h3);line-height:1.1;max-width:none}
.groupe .aide{margin-top:var(--e3);color:var(--secondaire);font-size:var(--t-dense);max-width:52ch}
.opts,.cartes-modele{margin-top:var(--e4)}
.opt{position:relative;display:grid;grid-template-columns:24px 1fr auto;align-items:center;column-gap:var(--e3);padding:12px 0;min-height:44px;border-top:1px solid var(--trait);cursor:pointer;transition:color var(--duree-courte) var(--courbe)}
.opt:last-child{border-bottom:1px solid var(--trait)}
.opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.opt .coche{display:none}
.opt .pastille{width:24px;height:24px;border:1px solid var(--trait);box-shadow:inset 0 0 0 1px rgba(28,25,23,.35);background-size:cover;background-position:center;grid-column:1}
.opt .puce{width:24px;height:24px;grid-column:1;position:relative}
.opt .puce::before{content:"";position:absolute;inset:6px;border:1px solid var(--texte);border-radius:50%;transition:background var(--duree-courte) var(--courbe)}
.opt[data-multi] .puce::before{border-radius:0}
.opt.on .puce::before{background:var(--accent-ici);border-color:var(--accent-ici)}
.opt .nom{grid-column:2;font-size:var(--t-dense);line-height:1.35;padding-right:var(--e3)}
.opt .p{grid-column:3;font-size:var(--t-dense);font-variant-numeric:tabular-nums;white-space:normal;text-align:right;max-width:40%;color:var(--secondaire)}
.opt .p:not(.inc){white-space:nowrap}
.opt .p.inc{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ici)}
.opt.on{color:var(--texte)}
.opt.on .p{color:var(--secondaire)}
.opt.on .pastille{outline:2px solid var(--accent-ici);outline-offset:2px}
.opt.verrou{cursor:default;color:var(--texte)}
.opt .vu{font-size:9px;vertical-align:super;margin-left:6px;color:var(--secondaire)}
.opt .hors-vue{display:block;font-size:var(--t-cap);letter-spacing:.06em;text-transform:uppercase;color:var(--secondaire);margin-top:2px}
.opt:not(.verrou):hover .nom{color:var(--accent-ici)}
.opt:has(input:focus-visible){outline:2px solid var(--accent-ici);outline-offset:3px}
@supports not selector(:has(a)){.opt:focus-within{outline:2px solid var(--accent-ici);outline-offset:3px}}
/* modèles : mêmes lignes, prix à droite, description dessous */
.opt-modele{grid-template-columns:24px 132px 1fr auto;align-items:start}
.opt-modele .puce{align-self:center}
.vignette-modele{grid-column:2;display:block;aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:#0d1117}
.vignette-modele img{display:block;width:100%;height:100%;object-fit:cover;filter:none}
.opt-modele .bloc{grid-column:3;display:block;align-self:center}
.opt-modele .nom-modele{font-family:var(--serif);font-size:var(--t-chapo);line-height:1.15;display:block}
.opt-modele .desc{display:block;font-size:var(--t-dense);color:var(--secondaire);margin-top:4px}
.opt-modele .p{grid-column:4;align-self:start;margin-top:6px}
/* scène */
.cfg-scene .canvas{aspect-ratio:16/9}
.cfg-scene .canvas picture{position:absolute;inset:0;z-index:1}
.cfg-scene .canvas picture .fond{position:static;width:100%;height:100%}
.cfg-scene .zoom{font-size:var(--t-dense);border-bottom:1px solid currentColor;min-height:44px;padding:0}
.cfg-scene .vue .droite{display:flex;gap:var(--e4);align-items:center}
.teintes{display:flex;height:6px}
.teintes span{flex:1;background-size:cover;background-position:center}
.cfg-scene .vue{display:flex;justify-content:space-between;align-items:center;gap:var(--e4);padding:var(--e4) 0 var(--e3);border-bottom:1px solid var(--trait)}
.cfg-scene .interrupteur{display:flex;align-items:center;gap:var(--e3)}
.cfg-scene .interrupteur button{color:var(--secondaire);min-height:44px;padding:0 4px}
.cfg-scene .interrupteur button.on{color:var(--texte)}
.rocker-visuel{position:relative;width:64px;height:32px;border:1px solid var(--texte);display:block}
.rocker-visuel .curseur{position:absolute;top:3px;left:3px;width:24px;height:24px;background:var(--accent-ici);transition:transform var(--duree) var(--courbe)}
.interrupteur:has([data-vue="fermee"].on) .curseur{transform:translateX(32px)}
.cfg-scene .badge{color:var(--secondaire)}
.apercu-note{margin-top:var(--e3)}
/* estimation */
.bandeau{margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--texte)}
.bandeau-prix{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e4)}
.bandeau-prix .v{font-family:var(--sans);font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.01em}
.bandeau-btns{display:flex;gap:var(--e5);align-items:center;flex-wrap:wrap;margin-top:var(--e4)}
.bandeau-rassure{margin-top:var(--e4);color:var(--secondaire);max-width:none;font-size:var(--t-dense);line-height:1.5}
.bandeau-rassure a{border-bottom:1px solid var(--trait)}
.detail-recap{margin-top:var(--e4);font-size:var(--t-dense)}
.detail-recap summary{cursor:pointer;color:var(--secondaire);display:inline-block;padding:8px 0 3px;border-bottom:1px solid var(--trait);list-style:none}
.detail-recap summary::-webkit-details-marker{display:none}
.detail-recap ul{list-style:none;margin-top:var(--e3)}
.detail-recap li{display:flex;justify-content:space-between;gap:var(--e4);padding:6px 0;border-top:1px solid var(--trait)}
.detail-recap li.grp{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--secondaire);border-top:0;padding-top:var(--e4)}
.detail-recap .mention{margin-top:var(--e4)}
/* récapitulatif final (colonne de gauche) */
.recap-liste{list-style:none;margin-top:var(--e4)}
.recap-liste li{display:flex;justify-content:space-between;gap:var(--e4);padding:8px 0;border-top:1px solid var(--trait);font-size:var(--t-dense)}
.recap-liste li b{font-weight:400}
.recap-liste .rp{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--secondaire)}
.recap-total{display:flex;justify-content:space-between;align-items:baseline;padding:var(--e4) 0;border-top:1px solid var(--texte);margin-top:var(--e3)}
.recap-total strong{font-family:var(--sans);font-weight:400;font-size:var(--t-chapo);font-variant-numeric:tabular-nums}
.recap-final .bouton{margin-top:var(--e4)}
.recap-note{margin-top:var(--e3)}
/* formulaire de devis */
.devis .champ.plein{grid-column:1/-1}
.devis textarea[readonly]{color:var(--secondaire);font-size:var(--t-dense);min-height:180px}
/* image exportée */
dialog#reveal{border:0;padding:0;background:var(--papier);color:var(--encre);max-width:min(92vw,960px);width:100%}
dialog#reveal::backdrop{background:rgba(23,20,16,.86)}
.reveal-in{padding:var(--e5) var(--e5) var(--e6);position:relative}
.reveal-fermer{position:absolute;top:var(--e3);right:var(--e3);min-width:44px;min-height:44px}
.reveal-eyebrow{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--secondaire)}
#reveal-titre{font-size:var(--t-h3);margin-top:var(--e3)}
.reveal-note{margin-top:var(--e3)}
#reveal-img{margin-top:var(--e4);width:100%}
.reveal-btns{display:flex;gap:var(--e5);align-items:center;flex-wrap:wrap;margin-top:var(--e5)}
/* barre mobile */
.barre-cta{display:none}
@media (max-width:1080px){
  .cfg-choix{grid-column:1/13;grid-row:auto}
  .cfg-scene{grid-column:1/13;grid-row:auto;position:static;margin-bottom:var(--e6)}
}
@media (max-width:720px){
  .configurateur .page-tete h1,.configurateur .page-tete .chapo{grid-column:1/13}
  .opt{grid-template-columns:20px 1fr auto}
  .opt .p .long{display:none}
  .opt-modele{grid-template-columns:20px 96px 1fr}
  .opt-modele .bloc{grid-column:3}
  .opt-modele .p{grid-column:3;grid-row:2;justify-self:start;margin-top:4px;max-width:none}
  .vignette-modele{grid-row:1/3}
  .opt-modele .puce{align-self:start;margin-top:8px}
  html:has(.configurateur-page){scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .barre-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:24;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e3) var(--marge) calc(var(--e3) + env(safe-area-inset-bottom));background:var(--nuit);color:var(--ivoire);border-top:1px solid var(--filet-nuit)}
  .barre-cta .bouton{background:var(--ivoire);color:var(--nuit);border-color:var(--ivoire)}
  html:has(.bandeau-cookies) .barre-cta{display:none}
  body.configurateur-page{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .reveal-in{padding:var(--e4) var(--e4) var(--e5)}
}
@media (prefers-reduced-motion:reduce){.rocker-visuel .curseur,.opt{transition:none}}