/*! AM - ENSEIGNE — © 2026 AM ENSEIGNE · RCS Nîmes 130 898 927 · tous droits réservés.
 *  Logiciel protégé par le droit d’auteur (CPI art. L112-2, 13°). Reproduction, adaptation
 *  ou diffusion du code, totale ou partielle, interdites sans autorisation écrite.
 *  contact@am-enseigne.com */
:root{
  --de-blue:#0071e3;
  --line:#e9eaee;
  --ink:#0b0d10;
  --muted:#8a8f98;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; height:100%;
  font-family:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:#f4f5f7;
}
body{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ---------- header : LE MÊME QUE PARTOUT AILLEURS SUR LE SITE ----------
 *
 * Marque · navigation · panier · compte · CTA — exactement le contenu de accueil.html
 * et de la boutique. Le configurateur n'a plus son en-tête à lui : un client qui arrive
 * ici depuis la boutique retrouve la même barre, aux mêmes emplacements.
 *
 * UNE différence de mise en page, assumée : sur l'accueil la pastille est `position:fixed`
 * et survole une page qui défile. Ici l'application occupe EXACTEMENT la hauteur de
 * l'écran (`body` en colonne flex, `overflow:hidden`) — une barre fixe recouvrirait le
 * canvas et la première carte du panneau. Elle reste donc dans le flux ; c'est
 * theme-glass.css qui lui donne sa forme de pastille.
 *
 * Les polices (Bebas Neue, Inter) sont déjà chargées par theme-glass.css.
 */
header{
  flex:none; height:64px; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:0 12px 0 22px; background:#fff; border-bottom:1px solid var(--line);
}
.brand{
  font-family:'Bebas Neue',sans-serif; font-size:21px; letter-spacing:.06em;
  display:flex; align-items:center; gap:8px; color:var(--ink); white-space:nowrap; text-decoration:none;
}
.brand .dot{ width:7px; height:7px; border-radius:50%; background:var(--de-blue); box-shadow:0 0 12px var(--de-blue); }
nav.main{ display:flex; align-items:center; gap:26px; }
nav.main a{ font:500 13.5px/1 'Inter',sans-serif; color:var(--muted); text-decoration:none; transition:color .2s; }
nav.main a:hover{ color:var(--ink); }
.hright{ display:flex; align-items:center; gap:10px; }
.hicon{
  position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid rgba(0,0,0,.06); color:var(--ink); text-decoration:none;
  transition:transform .2s, background .2s;
}
.hicon:hover{ transform:translateY(-2px); background:#f4f5f7; }
.hicon svg{ width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.7; }
.cartCount{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  display:grid; place-items:center; font:700 11px/1 'Inter',sans-serif;
  background:linear-gradient(135deg,#0a84ff,#0071e3); color:#fff;
  box-shadow:0 2px 8px rgba(10,120,255,.45);
  transform:scale(0); transition:transform .25s cubic-bezier(.5,1.6,.4,1);
}
.cartCount.on{ transform:scale(1); }
.hcta{
  display:inline-flex; align-items:center; padding:11px 18px; border-radius:100px; white-space:nowrap;
  font:600 13px/1 'Inter',sans-serif; letter-spacing:.02em; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#0a84ff,#0071e3);
  box-shadow:0 8px 22px rgba(10,120,255,.30), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s, box-shadow .2s;
}
.hcta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(10,120,255,.42); }
.burger{ display:none; background:none; border:0; color:var(--ink); font-size:22px; cursor:pointer; padding:0 10px; }

/* Écrans étroits : le menu se déplie SOUS la barre. La page ne défilant pas, le faire
 * défiler jusqu'au menu (le geste de l'accueil) n'aurait rien donné du tout. */
@media(max-width:980px){
  nav.main{
    display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:2px; padding:10px; border-radius:18px;
    background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px rgba(15,20,30,.16);
  }
  header.navopen nav.main{ display:flex; }
  nav.main a{ padding:12px 14px; border-radius:12px; font-size:15px; }
  nav.main a:hover{ background:#f4f5f7; }
  .burger{ display:block; }
}
@media(max-width:600px){ .hcta{ display:none } }
.btn{ border-radius:11px; padding:11px 16px; font-weight:700; font-size:13.5px; cursor:pointer; }
.btn.ghost{ background:#fff; border:1px solid #d7d9de; color:#2a2f37; }
.btn.cta{ background:var(--de-blue); border:1px solid var(--de-blue); color:#fff; }

/* ---------- layout : 3D à gauche, config à droite ---------- */
main{ flex:1; display:flex; min-height:0; }
.viewport{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:22px; min-width:0;
}
.stage{
  position:relative; width:100%; max-width:960px; aspect-ratio:16/9; max-height:78vh;
  border-radius:16px; overflow:hidden; background:#0e0e10;
  box-shadow:0 16px 44px rgba(0,0,0,.18);
}
#renderCanvas{ width:100%; height:100%; display:block; outline:none; touch-action:none; }

.view-bar{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:4px; padding:4px;
  background:rgba(18,20,24,.55); backdrop-filter:blur(6px);
  border-radius:12px; box-shadow:0 3px 14px rgba(0,0,0,.28);
}
.view-bar button{
  width:38px; height:34px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:#fff; font-size:22px; line-height:1; font-weight:400;
}
.view-bar button:hover{ background:rgba(255,255,255,.16); }
.view-bar button:disabled{ opacity:.3; cursor:default; background:transparent; }
.view-bar span{
  min-width:66px; text-align:center; color:#e9ecf1; font-size:12px; font-weight:700;
  letter-spacing:.03em; user-select:none;
}

/* Curseur de rotation de la vue (gauche ↔ droite), au centre de la barre de vues. */
.view-slider{
  -webkit-appearance:none; appearance:none;
  width:150px; height:4px; margin:0 6px; padding:0;
  background:rgba(255,255,255,.28); border-radius:3px; outline:none; cursor:grab;
}
.view-slider:active{ cursor:grabbing; }
.view-slider:disabled{ cursor:default; }
.view-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:50%;
  background:#fff; border:0; cursor:grab;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.view-slider::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%;
  background:#fff; border:0; cursor:grab;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}

/* Bascule 3D ↔ décor, POSÉE SUR le visuel (plus visible, plus de clics qu'un bouton du panneau). */
.view3d-btn{
  position:absolute; top:12px; right:12px; z-index:4;
  display:flex; align-items:center; gap:7px; padding:9px 14px; border:0; border-radius:11px; cursor:pointer;
  background:rgba(18,20,24,.62); backdrop-filter:blur(6px); color:#fff;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 3px 14px rgba(0,0,0,.30); transition:background .15s, transform .15s;
}
.view3d-btn:hover{ background:rgba(18,20,24,.85); transform:translateY(-1px); }
.view3d-btn.on{ background:var(--de-blue); }
.view3d-btn svg{ width:15px; height:15px; display:block; }
.view3d-btn.shot{ top:58px; }
.view3d-btn.night{ top:104px; }
/* « Cotes » : même emplacement que « Mode nuit » — l'un n'existe qu'en vue décor,
 * l'autre qu'en vue 3D studio, ils ne se croisent jamais. */
.view3d-btn.cotes{ top:104px; z-index:5; }   /* reste au-dessus du panneau : sert à le refermer */

/* Calque des cotes projetées SUR l'enseigne 3D (cotesOverlay.js) : couvre le viewport,
 * transparent aux clics — l'orbite et le zoom passent au travers. */
.cotes-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }

/* (Ancien panneau de cotes — conservé pour mémoire, plus utilisé : les cotes sont
 * désormais dessinées directement sur l'enseigne.) */
.cotes-panel{
  position:absolute; top:12px; left:12px; z-index:4; width:min(460px, 64%);
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-radius:14px;
  padding:12px 14px 12px; box-shadow:0 10px 30px rgba(0,0,0,.28); color:#1d1f24;
}
.cotes-panel[hidden]{ display:none; }
.cotes-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; }
.cotes-tiles div{ background:#f0f3f8; border-radius:10px; padding:7px 9px; }
.cotes-tiles span{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6a707a; }
.cotes-tiles b{ display:block; font-size:16px; margin-top:1px; font-variant-numeric:tabular-nums; }
.cotes-panel canvas{ width:100%; height:auto; display:block; border-radius:8px; background:#fff; }
.cotes-panel label{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; font-weight:600; color:#3a3f47; margin:8px 0 2px; }
.cotes-panel label b{ color:#0071e3; font-variant-numeric:tabular-nums; }
.cotes-panel input[type=range]{ width:100%; accent-color:#0071e3; margin:0; }
/* Mobile : la vue est trop petite pour cohabiter avec les boutons → le panneau couvre
 * toute la vue (défilable), le bouton « Cotes » reste accessible pour le refermer. */
@media (max-width:640px){
  .cotes-panel{ inset:0; width:auto; border-radius:16px; overflow:auto; padding-top:150px; }
}

.zoom{
  position:absolute; right:12px; bottom:12px; z-index:3;
  display:flex; align-items:center; gap:2px; padding:3px;
  background:rgba(18,20,24,.62); backdrop-filter:blur(6px);
  border-radius:11px; box-shadow:0 3px 14px rgba(0,0,0,.28);
}
.zoom button{
  width:32px; height:30px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:#fff; font-size:17px; font-weight:700; line-height:1;
}
.zoom button:hover{ background:rgba(255,255,255,.16); }
.zoom button:disabled{ opacity:.32; cursor:default; background:transparent; }
.zoom span{
  min-width:50px; text-align:center; color:#e9ecf1; font-size:11.5px; font-weight:700;
  font-variant-numeric:tabular-nums; user-select:none;
}
#status{
  position:absolute; left:14px; bottom:12px; z-index:2;
  color:#fff; font-size:12.5px; background:rgba(0,0,0,.5);
  padding:5px 12px; border-radius:20px; text-shadow:0 1px 4px #000;
}
#status:empty{ display:none; }
.hint{
  position:absolute; right:14px; bottom:12px; z-index:2; color:#fff; opacity:.8;
  font-size:11.5px; text-shadow:0 1px 6px #000;
}

/* ---------- panneau ---------- */
.panel{
  width:500px; flex:none; background:#fff; border-left:1px solid var(--line);
  overflow-y:auto; padding:22px 20px 40px;
}
.panel h1, .panel h2{ font-size:21px; margin:2px 0 4px; }
.panel .sub{ color:var(--muted); font-size:13px; margin:0 0 18px; }
.card{ border:1px solid var(--line); border-radius:16px; padding:15px 16px; margin-bottom:14px; }
.card h3{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:0 0 13px; font-weight:700;
}
.card h3 b{ color:var(--de-blue); margin-right:7px; }
.note{ font-size:11.5px; color:var(--muted); margin:8px 0 0; line-height:1.45; }

.field{ margin-bottom:11px; }
.field:last-child{ margin-bottom:0; }
.field>label{ display:block; font-size:12px; color:#3a3f47; font-weight:600; margin-bottom:6px; }
input[type=text], input[type=number], select{
  width:100%; border:1px solid #d7d9de; border-radius:10px;
  padding:10px 12px; font-size:14px; background:#fff;
}
/* Même UI que les onglets Face/Chant/Arrière (.mat-tabs) */
.segfull{ display:flex; background:#f0f1f3; border-radius:11px; padding:3px; }
.segfull button{
  flex:1; border:0; background:transparent; padding:8px 6px; border-radius:9px;
  font-size:12.5px; font-weight:600; color:#3a3f47; cursor:pointer;
}
.segfull button.on{ background:#fff; color:var(--de-blue); box-shadow:0 1px 4px rgba(0,0,0,.14); }

.decor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.decor{
  position:relative; border:0; padding:0; border-radius:11px; overflow:hidden;
  cursor:pointer; height:64px; background:#eee;
  outline:2px solid transparent; outline-offset:2px; transition:outline-color .15s;
}
.decor.on{ outline-color:var(--de-blue); }
/* « Ma façade » : tuile d'action (importer / prendre une photo) */
.decor.decor-add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1.5px dashed #9aa2af; background:#f6f8fb; color:#3a3f47;
}
.decor.decor-add svg{ width:22px; height:22px; }
.decor.decor-add span{ position:static; background:none; color:#3a3f47; font-size:11px; font-weight:600; padding:0; text-shadow:none; }
.facade-menu{ margin:0 0 10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.facade-menu[hidden]{ display:none; }
.facade-menu p{ font-size:12px; color:#3a3f47; margin:0 0 4px; line-height:1.45; }
.facade-menu button{
  width:100%; margin-top:6px; padding:9px; border-radius:9px; border:1px solid var(--de-blue);
  background:#fff; color:var(--de-blue); font-weight:600; font-size:12.5px; cursor:pointer;
}
.facade-menu button[data-act=import]{ background:var(--de-blue); color:#fff; }
/* Placement guidé sur la vue */
.place-bar{
  position:absolute; left:12px; right:12px; bottom:64px; z-index:5; display:flex; gap:10px;
  align-items:center; justify-content:space-between; padding:9px 12px; border-radius:12px;
  background:rgba(18,20,24,.80); color:#fff; font-size:12.5px; line-height:1.35; backdrop-filter:blur(6px);
}
.place-bar[hidden]{ display:none; }
.place-bar button{ flex:none; padding:8px 14px; border:0; border-radius:9px; background:var(--de-blue); color:#fff; font-weight:700; cursor:pointer; }
.view3d-btn.place{ top:104px; }
/* Prise de vue en direct (desktop) */
.cam-modal{ position:fixed; inset:0; z-index:1000; background:rgba(10,12,18,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.cam-modal video{ max-width:92vw; max-height:70vh; border-radius:12px; background:#000; }
.cam-modal p{ color:#fff; font-size:13px; margin:0; }
.cam-modal .cam-btns{ display:flex; gap:10px; }
.cam-modal button{ padding:11px 18px; border-radius:10px; border:0; font-weight:700; cursor:pointer; }
.cam-modal .ok{ background:var(--de-blue); color:#fff; }
.cam-modal .no{ background:#fff; color:#1d1f24; }
.decor img{ width:100%; height:100%; object-fit:cover; display:block; }
.decor span{
  position:absolute; left:0; right:0; bottom:0; font-size:10px; color:#fff;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75)); padding:12px 4px 4px; text-align:center;
}

/* ---------- éléments (texte + formes) ---------- */
.el-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.el-row input[type=text]{ flex:1; padding:8px 10px; font-size:13px; }
.el-tag{ font-size:12px; font-weight:700; color:#3a3f47; background:#f0f1f3; border-radius:8px; padding:7px 10px; white-space:nowrap; }
.el-spacer{ flex:1; }
.el-row input[type=color]{ width:32px; height:32px; padding:0; border:1px solid #d7d9de; border-radius:8px; background:#fff; cursor:pointer; flex:none; }
.el-del{ flex:none; border:1px solid #e2e4e7; background:#fff; border-radius:8px; width:32px; height:32px; cursor:pointer; color:#b3261e; font-size:13px; }
.el-del:hover{ background:#fbeceb; }
.add-el{ display:flex; align-items:center; gap:6px; margin-top:12px; flex-wrap:wrap; }
.add-el span{ font-size:12px; color:#6a707a; font-weight:600; }
.add-el button{ border:1px solid #d7d9de; background:#fff; border-radius:9px; padding:7px 11px; font-size:13px; font-weight:700; color:#2a2f37; cursor:pointer; }
.add-el button:hover{ background:#f2f4f6; border-color:var(--de-blue); }

/* ---------- logo joint au devis ---------- */
#logoBtn{ border-color:#cfe0fb; color:var(--de-blue); }
#logoBtn:hover{ background:#eef4fe; border-color:var(--de-blue); }
.logo-chip{
  display:flex; align-items:center; gap:11px; margin-top:11px; padding:9px 11px;
  border:1px solid var(--line); border-radius:12px; background:#fafbfc;
}
.logo-chip img{ width:40px; height:40px; border-radius:8px; object-fit:cover; background:#fff; border:1px solid var(--line); }
.logo-ext{
  width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:#eaf1fb; color:var(--de-blue); font-size:11px; font-weight:800; flex:none;
}
.logo-ext.big{ width:64px; height:64px; font-size:15px; border-radius:12px; }
.logo-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.logo-meta b{ font-size:13px; color:#16181d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:300px; }
.logo-meta span{ font-size:11.5px; color:var(--muted); }
.logo-x{
  margin-left:auto; flex:none; width:30px; height:30px; border-radius:8px; cursor:pointer;
  border:1px solid #e2e4e7; background:#fff; color:#b3261e; font-size:13px;
}
.logo-x:hover{ background:#fbeceb; }

/* ---------- popup (devis logo, etc.) ---------- */
.de-modal{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(12,14,18,.55); backdrop-filter:blur(3px);
}
.de-modal.open{ display:flex; animation:deFade .18s ease; }
@keyframes deFade{ from{ opacity:0 } to{ opacity:1 } }
.de-modal-card{
  position:relative; width:min(420px,100%); margin:auto; background:#fff; border-radius:20px;
  padding:26px 24px 22px; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.35);
  animation:dePop .2s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes dePop{ from{ transform:translateY(10px) scale(.97); opacity:0 } to{ transform:none; opacity:1 } }
.de-modal-x{
  position:absolute; top:12px; right:12px; z-index:3; width:32px; height:32px; border-radius:9px; cursor:pointer;
  border:0; background:#f2f4f6; color:#6a707a; font-size:14px;
}
.de-modal-x:hover{ background:#e7eaee; }
.de-modal-ic{
  width:46px; height:46px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff;
}
.de-modal-ic.ok{ background:#1faa5a; }
.de-modal-ic.warn{ background:#e2a400; }
.de-modal-card h3{ font-size:19px; margin:0 0 10px; color:#16181d; }
.de-modal-card p{ font-size:13.5px; color:#565b64; line-height:1.55; margin:0 0 18px; }
.de-modal-prev{
  display:flex; align-items:center; gap:12px; justify-content:center; text-align:left;
  margin:0 0 16px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fafbfc;
}
.de-modal-prev img{ width:64px; height:64px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:#fff; }
.de-modal-actions{ display:flex; gap:10px; }
.de-modal-actions .btn{ flex:1; justify-content:center; text-align:center; }

/* formulaire de devis dans la popup */
/* La bande du haut est réservée à la croix de fermeture : sans elle, le bouton
   retombait sur le coin de l'aperçu 3D — derrière l'image d'abord, par-dessus
   ensuite. Il a maintenant sa place, et ne recouvre plus rien. */
.de-modal-form{ text-align:left; width:min(880px,100%); padding:46px 26px 22px;
  max-height:calc(100vh - 36px); overflow:auto; }

/* DEUX COLONNES : à gauche ce qu'on remplit, à droite ce qu'on a dessiné. Sur une
   seule colonne la popup dépassait l'écran — il fallait faire défiler pour
   atteindre le bouton d'envoi, et le récapitulatif passait devant l'action.
   La barre de défilement du voile décalait en prime la carte vers la gauche :
   les marges n'étaient plus égales de part et d'autre. */
.devis-grille{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,296px);
  gap:26px; align-items:start; }
.devis-grille > div{ min-width:0; }
.devis-droite .devis-bloc:last-child{ margin-bottom:0; }
@media (max-width:760px){
  .devis-grille{ grid-template-columns:1fr; gap:14px; }
  .devis-droite{ order:-1; }          /* sur mobile, son enseigne d'abord */
  .de-modal{ overflow:auto; }
  .de-modal.open{ align-items:flex-start; }
  .de-modal-form{ max-height:none; overflow:visible; }
}
.de-modal-form h3{ text-align:left; }
/* La croix se cale sur la marge de la fenêtre — donc sur le bord droit de
   l'aperçu 3D, qui commence juste en dessous. À 12 px, elle dépassait de 14 px
   vers l'extérieur et rien ne s'alignait. */
.de-modal-form .de-modal-x{ right:26px; }
.devis-sub{ font-size:12.5px; color:var(--muted); margin:0 0 16px; line-height:1.5; }

/* ── Récapitulatif de la demande ──────────────────────────────────────────
   Ce que le visiteur relit avant d'envoyer. Il voyait douze lignes toutes
   pareilles, sans image : rien n'accrochait, et il ne reconnaissait pas son
   enseigne. On montre d'abord le rendu — exactement la vue de 3/4 qui partira
   par e-mail —, puis on sépare l'identité, les matières (une pastille par
   face, une teinte se lit plus vite qu'un code) et le reste du détail. */
.devis-carte{ border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#fff; margin:0 0 16px; }
.devis-vue{ position:relative; aspect-ratio:16/9; display:grid; place-items:center;
  background:linear-gradient(180deg,#eef1f5,#dde3ea); }
.devis-vue img{ width:100%; height:100%; object-fit:contain; display:block; }
.devis-vue img[hidden]{ display:none; }
.devis-vue .att{ font-size:12px; color:#8a93a5; letter-spacing:.02em; }
.devis-ident{ padding:11px 14px; border-top:1px solid var(--line); }
.devis-ident b{ display:block; font-size:14.5px; color:#16181d; }
.devis-ident .txt{ font-size:13px; color:#3d434d; margin-top:2px; }
.devis-ident .dim{ font-size:12px; color:var(--muted); margin-top:4px; }

/* Chaque bloc du récapitulatif est une carte, comme celle de l'aperçu : même
   largeur, même arrondi, même filet. Le thème posait un fond arrondi sur la
   seule liste du détail, et sans marge intérieure — les mots venaient buter
   dans les angles, le fond ne cadrait plus rien. */
.devis-bloc{ margin:0 0 12px; padding:12px 14px 13px; border:1px solid var(--line);
  border-radius:14px; background:#fff; }
.devis-bloc h4{ font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px; }
.devis-bloc .devis-recap{ background:none; border-radius:0; }
.devis-mats{ display:flex; flex-direction:column; gap:6px; }
.devis-mat{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.devis-mat i{ width:15px; height:15px; border-radius:4px; flex:none;
  border:1px solid rgba(0,0,0,.18); background:#f2f4f6; }
.devis-mat span{ color:var(--muted); flex:none; min-width:46px; }
.devis-mat b{ color:#16181d; font-weight:600; }
.devis-mattxt{ font-size:12.5px; color:#16181d; margin:0; line-height:1.55; }
.devis-recap{ list-style:none; margin:0; padding:0; }
.devis-recap li{ display:flex; justify-content:space-between; gap:14px; font-size:12.5px;
  padding:6px 0; border-top:1px solid var(--line); }
.devis-recap li:first-child{ border-top:0; padding-top:0; }
.devis-recap li span{ color:var(--muted); flex:none; }
.devis-recap li b{ color:#16181d; text-align:right; font-weight:600; }

/* Le raccourci téléphone : certains n'écriront jamais dans un formulaire. */
.devis-tel{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:10px;
  padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:13.5px; font-weight:600; color:#16181d; text-decoration:none; }
.devis-tel:hover{ background:#f4f6f8; border-color:#c9ced6; }
.devis-tel svg{ width:16px; height:16px; stroke:#0a84ff; fill:none; stroke-width:1.8; flex:none; }
.devis-tel small{ color:var(--muted); font-weight:400; }
.devis-form{ display:flex; flex-direction:column; gap:9px; }
.devis-form input, .devis-form textarea{
  width:100%; border:1px solid #d7d9de; border-radius:10px; padding:10px 12px; font-size:14px;
  background:#fff; font-family:inherit;
}
.devis-form textarea{ resize:vertical; }
.devis-form .btn.cta{ justify-content:center; text-align:center; margin-top:4px; }
.btn-devis{ background:#0b8a45; border-color:#0b8a45; }
.btn-devis:hover{ background:#0a7a3d; border-color:#0a7a3d; }

/* ---------- modèles (type d'enseigne) ---------- */
.model-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.model{
  border:0; padding:0; border-radius:12px; overflow:hidden; cursor:pointer;
  background:#f0f1f3; outline:2px solid transparent; outline-offset:2px;
  transition:outline-color .15s; text-align:center;
}
.model.on{ outline-color:var(--de-blue); }
.model .chip{ display:block; width:100%; height:62px; background-size:cover; background-position:center; }
.model span{ display:block; font-size:11.5px; color:#3a3f47; padding:7px 4px; font-weight:600; }

.dims{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* emplacement intérieur / extérieur — donnée de devis, pas de rendu */
.usage-seg{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.usage-seg button{
  border:0; padding:10px 8px; border-radius:12px; cursor:pointer;
  background:#f0f1f3; color:#3a3f47; font-size:12.5px; font-weight:600;
  outline:2px solid transparent; outline-offset:2px; transition:outline-color .15s;
}
.usage-seg button.on{ outline-color:var(--de-blue); background:#fff; }

/* ---------- sélecteur de police ---------- */
.font-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  border:1px solid #d7d9de; border-radius:10px; padding:10px 12px; background:#fff;
  font-size:15px; color:#2a2f37; cursor:pointer; text-align:left;
}
.font-btn.open{ border-color:var(--de-blue); }
.font-btn i{ font-style:normal; color:#9aa0a8; font-size:11px; margin-left:8px; }

.font-panel{
  margin-top:7px; border:1px solid var(--line); border-radius:12px; padding:9px;
  background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.09);
}
.font-panel input[type=search]{
  width:100%; border:1px solid #d7d9de; border-radius:9px; padding:8px 11px; font-size:13px;
}
.font-cats{ display:flex; gap:5px; margin:8px 0; flex-wrap:wrap; }
.font-cat{
  border:1px solid #e2e4e7; background:#f6f7f8; border-radius:20px; padding:4px 10px;
  font-size:11px; font-weight:600; color:#6a707a; cursor:pointer;
}
.font-cat.on{ background:var(--de-blue); border-color:var(--de-blue); color:#fff; }

.font-list{ max-height:258px; overflow-y:auto; }
.font-item{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:8px 10px; border-radius:8px; font-size:19px; color:#2a2f37; cursor:pointer;
  line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.font-item:hover{ background:#f2f4f6; }
.font-item.on{ background:#eaf1fb; color:var(--de-blue); }
.font-item.imported::after{
  content:'importée'; float:right; font-size:9px; font-family:system-ui; font-weight:700;
  color:#fff; background:#8a9099; border-radius:9px; padding:2px 6px; margin-top:5px;
}
.font-import{ width:100%; margin-top:8px; padding:9px 10px; font-size:12.5px; }

/* ---------- matériaux ---------- */
.mat-tabs{ display:flex; background:#f0f1f3; border-radius:11px; padding:3px; margin-bottom:12px; }
.mat-tabs button{
  flex:1; border:0; background:transparent; padding:8px 6px; border-radius:9px;
  font-size:12.5px; font-weight:600; color:#3a3f47; cursor:pointer;
}
.mat-tabs button.on{ background:#fff; color:var(--de-blue); box-shadow:0 1px 4px rgba(0,0,0,.14); }

/* ── Sélection COULISSANTE : la pastille blanche glisse d'un segment à l'autre ──
 * Concerne les deux segments : Face/Chant/Arrière (.mat-tabs, 3 boutons) et
 * Teinte uniforme/Lettre par lettre (.segfull, 2 boutons). La position se déduit
 * en pur CSS du bouton `.on` via :has() — pas de JS, l'état reste le même.
 * Navigateur sans :has() : on retombe sur le fond blanc instantané ci-dessus. */
@supports selector(:has(*)){
  .segfull, .mat-tabs{ position:relative; }
  .segfull::before, .mat-tabs::before{
    content:""; position:absolute; top:3px; bottom:3px; left:3px;
    width:calc((100% - 6px)/2);
    border-radius:9px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.14);
    transition:transform .28s cubic-bezier(.33,.9,.25,1);
    pointer-events:none;
  }
  /* Largeur de pastille = 1/N segments, déduite du NOMBRE réel de boutons (l'onglet
   * « Arrière » a été retiré le 20/08 : .mat-tabs n'a plus que 2 boutons par défaut). */
  .mat-tabs:has(> button:nth-child(3))::before{ width:calc((100% - 6px)/3); }
  /* translateX en % de la LARGEUR DE LA PASTILLE (= un segment) */
  .segfull:has(> button:nth-child(2).on)::before,
  .mat-tabs:has(> button:nth-child(2).on)::before{ transform:translateX(100%); }
  .mat-tabs:has(> button:nth-child(3).on)::before{ transform:translateX(200%); }
  .segfull button, .mat-tabs button{ position:relative; z-index:1; }
  .segfull button.on, .mat-tabs button.on{ background:transparent; box-shadow:none; }
}

.mat-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.mat{
  border:0; padding:0; border-radius:11px; overflow:hidden; cursor:pointer;
  /* cadre de sélection DANS la tuile (offset négatif) : les bords gauche/droit du cadre
   * restent alignés avec les segments au-dessus et en dessous, rien ne déborde. */
  background:#f0f1f3; outline:2px solid transparent; outline-offset:-2px;
  transition:outline-color .15s; text-align:center;
}
.mat.on{ outline-color:var(--de-blue); }
.mat .chip{ display:block; width:100%; height:46px; background-size:cover; background-position:center; }
.mat span{ display:block; font-size:10px; color:#3a3f47; padding:5px 3px; line-height:1.25; font-weight:600; }

/* Lot 223 : le nuancier prend le style de l'Étiquette 3D — carré arrondi, anneau bleu et
 * coche sur le choix retenu. Même geste que les nuanciers du tour de cou et du tapis
 * (lot 220), pour qu'un client qui passe d'un configurateur à l'autre s'y retrouve.
 *
 * La maille descend à 34 px là où l'Étiquette est à 44 : elle propose neuf couleurs,
 * l'enseigne en propose vingt-quatre. À 44 px le nuancier prendrait deux fois sa hauteur
 * actuelle. À 34 px il garde ses neuf pastilles par ligne — l'encombrement ne bouge pas.
 *
 * Les pistes en `1fr` gardent ce que faisait `space-between` : la première pastille
 * affleure le bord gauche, la dernière le bord droit, alignées sur les segments. */
.swatches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(34px,1fr)); gap:9px; }
.sw{
  width:auto; height:auto; aspect-ratio:1; border-radius:9px; cursor:pointer;
  border:1px solid rgba(0,0,0,.18); padding:0; position:relative; outline:none;
  transition:transform .16s, box-shadow .16s;
}
.sw:hover{ transform:translateY(-2px); }
.sw.on{ border-color:transparent; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--de-blue); }
/* La coche prend la couleur qui se voit SUR sa pastille - blanc ou encre, celle des deux
 * qui se détache le plus, calculée par `cocheSur()` dans ui.js et posée en variable sur
 * le bouton. Même règle que les nuanciers du tour de cou et du tapis (lot 220).
 * La valeur par défaut sert à la finition naturelle, seule pastille sans teinte unie :
 * son dégradé est clair, l'encre s'y lit. */
.sw.on::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  font:700 13px/1 Inter, sans-serif; color:var(--coche, #16181d);
}
.sw:focus-visible{ outline:2px solid var(--de-blue); outline-offset:3px; }
.sw.nat{ background:linear-gradient(135deg,#fff 0%,#dfe2e7 45%,#a9aeb6 55%,#eef0f3 100%); }

/* saisie d'un code couleur libre */
.custom-color{ display:flex; gap:7px; margin-top:10px; align-items:center; }
.custom-color input[type=color]{
  width:34px; height:34px; padding:0; border:1px solid #d7d9de; border-radius:9px;
  background:#fff; cursor:pointer; flex:none; overflow:hidden;
}
/* La pastille du sélecteur remplit TOUT le rectangle (06/08) : sans ceci, le
 * navigateur dessine sa propre marge interne autour de l'échantillon. */
.custom-color input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.custom-color input[type=color]::-webkit-color-swatch{ border:none; border-radius:8px; }
.custom-color input[type=color]::-moz-color-swatch{ border:none; border-radius:8px; }
.custom-color input[type=text]{ flex:1; padding:8px 10px; font-size:12.5px; }
.custom-color button{
  flex:none; border:1px solid #d7d9de; background:#fff; border-radius:9px;
  padding:8px 13px; font-size:12.5px; font-weight:700; color:#2a2f37; cursor:pointer;
}
.custom-color button:hover{ background:#f2f4f6; }
.note.err:empty{ display:none; }
.note.err{ color:#b3261e; }

/* ---------- éclairage LED ---------- */
.chk.led{
  display:flex; align-items:center; gap:9px; font-size:12.5px; color:#3a3f47;
  font-weight:600; margin:0 0 9px; cursor:pointer;
}
.chk.led:last-of-type{ margin-bottom:0; }
.chk.led b{ font-weight:700; color:#2a2f37; }

.letters{ display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.letter{
  min-width:28px; height:34px; padding:0 6px; border:1px solid #d7d9de; border-radius:8px;
  background:#fff; font-size:14px; font-weight:700; color:#2a2f37; cursor:pointer;
  border-bottom:3px solid #ccc; line-height:1;
}
.letter.on{ border-color:var(--de-blue); box-shadow:0 0 0 2px rgba(0,90,200,.18); }

.result{
  margin-top:6px; padding:12px 14px; border-radius:12px;
  background:#f5f7fa; border:1px solid var(--line);
  font-size:13px; font-weight:700; color:#2a2f37; font-variant-numeric:tabular-nums;
}

/* ---------- éditeur de zone (calque SVG sur le viewport) ---------- */
.zone-svg{
  position:absolute; inset:0; width:100%; height:100%; z-index:3;
  cursor:crosshair; touch-action:none;
}
.zone-poly{
  fill:rgba(0,113,227,.14);
  stroke:#0071e3; stroke-width:2; stroke-dasharray:6 4;
  vector-effect:non-scaling-stroke;
}
.zone-handle{
  fill:#fff; stroke:#0071e3; stroke-width:2.5; cursor:grab;
}
.zone-handle:active{ cursor:grabbing; }
/* Ellipse (calage rond / ovale) : la forme calée sur le panneau — le quad devient un cadre discret. */
.zone-ellipse{
  fill:rgba(0,113,227,.14);
  stroke:#0071e3; stroke-width:2;
  vector-effect:non-scaling-stroke;
}
/* Lasso : le tracé à main levée, avant conversion en zone. */
.zone-lasso{
  fill:rgba(0,113,227,.08);
  stroke:#0071e3; stroke-width:2; stroke-dasharray:3 4; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* ---------- panneau de réglage interne ---------- */
.tune{ margin-top:16px; border:1px dashed #d7d9de; border-radius:14px; padding:12px 14px; background:#fafbfc; }
.tune summary{ cursor:pointer; font-size:12px; font-weight:700; color:#6a707a; letter-spacing:.04em; }
.tune .chk{ display:flex; align-items:center; gap:8px; font-size:12px; color:#3a3f47; font-weight:600; margin:4px 0 10px; cursor:pointer; }
.tune .a{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.tune .a span{ width:42px; font-size:11.5px; color:#6a707a; font-weight:600; }
.tune .a input[type=range]{ flex:1; accent-color:var(--de-blue); }
.tune .a b{ width:44px; text-align:right; font-size:11.5px; font-variant-numeric:tabular-nums; color:#2a2f37; }
.tuneBtns{ display:flex; gap:8px; margin-top:8px; }
.tuneBtns .btn{ flex:1; padding:9px 10px; font-size:12.5px; }
.tuneOutBox{
  margin-top:10px; padding:9px 11px; border-radius:10px; background:#0d0f13; color:#8fe39a;
  font-size:11px; line-height:1.6; font-variant-numeric:tabular-nums;
}
.tune textarea{
  width:100%; height:70px; margin-top:8px; display:none; font-size:10.5px;
  border:1px solid var(--line); border-radius:8px; padding:6px; background:#0d0f13; color:#8fe39a;
}

@media (max-width:1100px){
  main{ flex-direction:column; }
  .panel{ width:100%; border-left:0; border-top:1px solid var(--line); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   IMPORT DE LOGO — le point d'entrée de la moitié des clients
   ══════════════════════════════════════════════════════════════════════════════
   Beaucoup arrivent avec un logo déjà dessiné et n'ont rien à taper. Le bouton porte
   donc la couleur principale du site et occupe toute la largeur : c'est une porte
   d'entrée, pas une option secondaire enfouie dans « Ajouter : ».
   ═════════════════════════════════════════════════════════════════════════════ */
.card-import{ position:relative; overflow:hidden; }

.btn-import{
  position:relative; overflow:hidden; width:100%; display:flex; align-items:center; gap:13px;
  padding:15px 18px; border:0; border-radius:14px; cursor:pointer; text-align:left;
  color:#fff; background:linear-gradient(135deg,#0a84ff 0%,#0071e3 55%,#0064cc 100%);
  box-shadow:0 10px 24px rgba(0,113,227,.34), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-import:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,113,227,.46), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-import:active{ transform:translateY(0) scale(.99); }

/* Le reflet qui balaie le bouton : c'est la signature « liquid glass » du site, et
   surtout un repère visuel — l'œil y revient sans que rien ne clignote. */
.btn-import::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg); animation:biSheen 4.6s ease-in-out infinite;
}
@keyframes biSheen{ 0%,62%{ left:-60%; } 88%,100%{ left:118%; } }
@media (prefers-reduced-motion: reduce){ .btn-import::after{ animation:none; opacity:0; } }

.btn-import.busy{ pointer-events:none; opacity:.75; }
.btn-import.busy::after{ animation-duration:1.1s; }

/* ⚠️ Le reflet est un ::after en position absolue : dans l'ordre de peinture il passe
 * APRÈS le contenu, donc PAR-DESSUS le texte. Un dégradé blanc à 42 % sur du texte
 * blanc, et le libellé devient illisible au passage du balayage. Le contenu doit donc
 * être remonté explicitement — c'est le prix d'un effet décoratif en pseudo-élément. */
.btn-import::after{ pointer-events:none; z-index:0; }
.bi-ic, .bi-tx{ position:relative; z-index:1; }

.bi-ic{ flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); }
.bi-ic svg{ width:21px; height:21px; }
.bi-tx{ display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.bi-tx b{ font-size:14.5px; font-weight:700; letter-spacing:.01em; color:#fff; }
.bi-tx small{ font-size:11.5px; font-weight:500; color:rgba(255,255,255,.92); }

/* formats acceptés — les trois vectoriels sont mis en avant, ce sont eux qu'on veut */
.formats{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 8px; }
.fmt{ font-size:10.5px; font-weight:700; letter-spacing:.07em; padding:4px 9px; border-radius:100px;
  background:#f1f2f5; color:#7b818b; border:1px solid #e6e8ec; }
.fmt.best{ background:rgba(0,113,227,.09); color:#0064cc; border-color:rgba(0,113,227,.22); }

/* vignette du logo importé */
.logo-chip .logo-swap{ border:1px solid #d7d9de; background:#fff; color:#2a2f37; border-radius:8px;
  padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; margin-left:auto; }
.logo-chip .logo-swap:hover{ border-color:#0071e3; color:#0071e3; }

/* diagnostic de fabricabilité */
.logo-diag{ margin-top:12px; }
.logo-badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:100px;
  font-size:12px; font-weight:700; }
.logo-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.logo-badge.ok  { background:rgba(18,161,80,.12);  color:#0f8a45; }
.logo-badge.warn{ background:rgba(199,119,0,.12);  color:#b06a00; }
.logo-badge.bad { background:rgba(208,52,44,.12);  color:#c0322b; }

.logo-cols{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:11.5px; color:#7b818b; }
.logo-cols i{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.14); display:inline-block; }
.logo-cols span{ margin-left:4px; }

.logo-notes{ margin:10px 0 0; padding-left:17px; font-size:11.5px; line-height:1.5; color:#7b818b; }
.logo-notes li{ margin:4px 0; }

/* Matière reconnue à l'import (aluminium brossé, inox poli…).
   Elle se distingue des notes de fabricabilité : ce n'est pas un avertissement mais
   une DÉCISION que le configurateur vient de prendre à la place du client — elle doit
   donc se lire du premier coup d'oeil, et dire comment la reprendre. */
.logo-matiere{ margin-top:10px; padding:9px 12px; border-radius:10px; font-size:11.5px;
  line-height:1.45; color:#4a5059; background:rgba(0,113,227,.07);
  border:1px solid rgba(0,113,227,.16); }
.logo-matiere b{ color:#1d2126; }
.logo-matiere span{ display:block; margin-top:2px; color:#7b818b; }

/* En mode logo, la police n'a plus d'objet : on retire aussi son rappel dans les cartes. */
.logo-mode .note-font{ display:none; }

/* Grille de contrôle du calage : c'est elle qui rend l'erreur d'angle VISIBLE.
   Traits fins pour les subdivisions, traits marqués aux bords de la zone. */
.zone-grid line{ fill:none; pointer-events:none; }
.zone-grid .g-thin  { stroke:rgba(0,113,227,.34); stroke-width:1; }
.zone-grid .g-strong{ stroke:rgba(0,113,227,.72); stroke-width:1.6; }

/* ══════════════════════════════════════════════════════════════════════════════
   BOUTON D'IMPORT — état de survol verrouillé
   ══════════════════════════════════════════════════════════════════════════════
   Au survol, le bouton virait au blanc et le libellé disparaissait. Plutôt que de
   traquer la règle fautive — une feuille tierce, un style de thème, ou demain une
   règle ajoutée par mégarde —, on FIXE l'état complet du bouton dans toutes ses
   situations : repos, survol, focus, clic, et pendant le traitement.

   Le fond, la couleur du texte et celle des deux enfants sont redéclarés explicitement.
   Un bouton d'appel à l'action ne doit jamais dépendre d'un héritage pour rester lisible :
   c'est la porte d'entrée de la moitié des clients.
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-import,
.btn-import:hover,
.btn-import:focus,
.btn-import:focus-visible,
.btn-import:active,
.btn-import.busy{
  background:linear-gradient(135deg,#0a84ff 0%,#0071e3 55%,#0064cc 100%) !important;
  border:0 !important;
  color:#fff !important;
}
.btn-import:hover .bi-tx b,
.btn-import:focus .bi-tx b,
.btn-import:active .bi-tx b,
.btn-import .bi-tx b{ color:#fff !important; }

.btn-import:hover .bi-tx small,
.btn-import:focus .bi-tx small,
.btn-import:active .bi-tx small,
.btn-import .bi-tx small{ color:rgba(255,255,255,.92) !important; }

.btn-import svg{ stroke:#fff !important; fill:none !important; }
.btn-import:hover .bi-ic{ background:rgba(255,255,255,.26); }

/* Accessibilité : un contour visible au clavier, sans toucher au fond. */
.btn-import:focus-visible{ outline:3px solid rgba(255,255,255,.85); outline-offset:2px; }

/* ── bouton « i » + pop-up d'information (carte d'import) ── */
.card-import, .card-led, #matCard{ position:relative; }
.info-btn{
  position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%;
  border:1px solid #d7d9de; background:#fff; color:#6b7280; cursor:pointer;
  font:600 12px/1 Georgia,serif; font-style:italic; display:grid; place-items:center;
  transition:color .15s, border-color .15s;
}
.info-btn:hover{ color:var(--de-blue); border-color:var(--de-blue); }
.info-pop{
  display:none; position:absolute; top:38px; right:10px; z-index:20; width:min(320px, 86%);
  padding:12px 14px; border-radius:12px; background:#fff; border:1px solid #e2e4e9;
  box-shadow:0 14px 38px rgba(20,28,45,.18); font-size:12.5px; line-height:1.55; color:#3a3f47;
}
.info-pop.open{ display:block; }


/* ── E3 : menu centré ─────────────────────────────────────────
   Le configurateur garde sa barre unique — la page tient exactement l'écran, il
   n'y a pas de place pour une barre d'annonces. Seul le menu se recentre, pour
   s'accorder à l'accueil et à la boutique. */
header{ display:grid; grid-template-columns:1fr auto 1fr; padding:0 12px 0 22px }
header nav.main{ justify-content:center }
header .hright{ justify-content:flex-end }
@media(max-width:860px){ header{ display:flex; justify-content:space-between } }


/* ── Mode vitrine (?vitrine=1) ────────────────────────────────────
   L'accueil embarque cette page dans son premier écran. On n'y garde que la scène
   et ses commandes — changer de vue, zoomer. Ni en-tête, ni panneau, ni boutons
   d'édition : le visiteur regarde, il ne configure pas encore. */
.vitrine .topbar,
.vitrine header,
.vitrine .panel,
.vitrine .stage > button:not(#vitrineLed) { display:none !important }
.vitrine main{ height:100% }
.vitrine .viewport{ padding:0 }
.vitrine .stage{
  max-width:none; max-height:none; width:100%; height:100%;
  aspect-ratio:auto; border-radius:0; box-shadow:none;
}
.vitrine #status{ display:none }

/* Les commandes passent en haut : le bas de l image revient au texte de l accueil,
   qui se pose par-dessus le cadre. Et la marge que WordPress réserve à sa barre
   d administration n a plus lieu d être, celle-ci étant masquée ici. */
.vitrine .view-bar, .vitrine .zoom{ top:18px; bottom:auto }
html:has(> body.vitrine){ margin-top:0 !important }

/* L interrupteur de la vitrine, posé sur la scène comme les autres commandes. La
   pastille s allume avec la LED : l état se lit sans lire le texte. */
#vitrineLed{
  position:absolute; right:18px; top:50%; transform:translateY(-50%); z-index:6;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:100px; cursor:pointer;
  font:600 13.5px Inter, system-ui, sans-serif;
  color:#eef2f7; background:rgba(18,22,28,.72); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background .2s, color .2s, border-color .2s;
}
#vitrineLed::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.30); transition:background .2s, box-shadow .2s;
}
#vitrineLed:hover{ background:rgba(28,34,42,.88) }
#vitrineLed.on{ color:#0b1116; background:rgba(255,246,212,.95); border-color:rgba(255,255,255,.55) }
#vitrineLed.on::before{ background:#ffd45e; box-shadow:0 0 10px 2px rgba(255,196,60,.85) }
#vitrineLed:focus-visible{ outline:2px solid #0a84ff; outline-offset:3px }


/* Barre d annonces — reprise telle quelle de l accueil, pour que les trois pages
   (accueil, boutique, configurateur) ouvrent sur exactement le meme en-tete. Elle
   coute 32 px de hauteur a la scene 3D, qui occupe le reste de l ecran. */
.topbar{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:12.5px; line-height:1.6; padding:6px 16px; font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:linear-gradient(135deg,#0a84ff,#0071e3); color:#eaf3ff; }
.topbar b{ color:#fff; font-weight:700 }
.topbar a{ color:#fff; font-weight:700; text-decoration:none }
.topbar .sep{ opacity:.45 }
.topbar .tb-ast{ color:inherit; text-decoration:none; font-size:.8em; vertical-align:super;
  margin-left:1px; opacity:.85 }
.topbar .tb-ast:hover{ opacity:1; text-decoration:underline }
/* Sur mobile, comme sur l accueil et la boutique : le devis sort de la barre, qui garde
   deux lignes malgre la mention de garantie, plus longue depuis le lot 267. */
@media(max-width:640px){ .topbar .tb-devis{ display:none } }
.freeship a{ color:inherit; text-decoration:none; font-size:.85em; vertical-align:super; opacity:.8 }


/* Meme respiration que sur les deux autres pages. */
header{ height:auto; padding:12px 28px }