/* ═══════════════════════════════════════════════════════════════════════════ */
/* VITOR CONFIGURATEUR — CSS v9.0 — Reecriture complete et propre              */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SECTIONS :                                                                  */
/*  1. VARIABLES & RESET                                                       */
/*  2. LAYOUT PRINCIPAL (.vitor-cfg, .cw, .cv)                                 */
/*  3. MODE PHOTO (.cpv, .cmi, .cths, galerie)                                 */
/*  4. MODE CONFIGURATEUR (.crv, .cmr miroir fictif, effets LED)               */
/*  5. PANEL DROIT — Header produit (.vp-breadcrumb, .cbadge, .cttl, rating)   */
/*  6. TRUST BADGES (.vp-trust)                                                */
/*  7. PILLS (.cfg-pill tailles + LED)                                         */
/*  8. BLOC SUR-MESURE (.cfg-photo-custom-inline, .cfg-cfg-custom-inline)      */
/*  9. TACTILE (.vp-tactile)                                                   */
/* 10. OPTIONS CHECKLIST (mode configurateur — .cop, .cfg-opt-group)           */
/* 11. OPTIONS AVANCEES (.cfg-opt-group-advanced, cadre RAL)                   */
/* 12. PRIX & CTA (.vp-price-box, .ccta-primary, .vp-cta-sec)                  */
/* 13. DELAI & HELP CARD                                                       */
/* 14. SECTIONS FLEXIBLES BAS DE PAGE (.vcfg-*)                                */
/* 15. MOBILE (≤900px puis ≤480px)                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 1. VARIABLES & RESET                                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --b:#1D2CF3;--bh:#0D1A8B;--bl:#EEF0FF;--bxl:#F5F6FF;
  --n:#1a1a1a;--g9:#333;--g7:#555;--g5:#888;--g4:#aaa;--g3:#ccc;
  --g2:#e5e5e5;--g1:#f2f2f2;--g0:#f8f8f8;--w:#fff;
  --r:8px;--rs:5px;--sh:0 1px 3px rgba(0,0,0,.06);
}

.vitor-cfg,
.vitor-cfg *{margin:0;padding:0;box-sizing:border-box}
.vitor-cfg{
  font-family:'Alexandria',sans-serif;font-weight:300;
  font-size:16px;color:var(--g9);background:var(--w);
  -webkit-font-smoothing:antialiased;
  max-width:100%
  /* PAS de overflow:hidden ici : casserait position:sticky de .cv */
}
.vitor-cfg img,
.vitor-cfg picture,
.vitor-cfg video{max-width:100%;height:auto}

/* Reset minimal sur les <button> pour qu'ils héritent du look des composants (audit 6.2)
 * Évite les styles natifs (padding, border) sur les éléments transformés en boutons
 * pour l'a11y (swatches cadre, etc.). Ne touche pas aux boutons déjà stylés (.ccta, etc.) */
.vitor-cfg button.cfg-cadre-swatch{
  border:none;padding:0;font:inherit;cursor:pointer
}

/* Focus-visible global pour clavier (audit 6.3)
 * S'applique à tous les éléments interactifs sans écraser les styles natifs souris.
 * 2px outline bleu Vitor, offset pour ne pas chevaucher le contenu. */
.vitor-cfg button:focus-visible,
.vitor-cfg [role="switch"]:focus-visible,
.vitor-cfg [role="button"]:focus-visible,
.vitor-cfg .cfg-pill:focus-visible,
.vitor-cfg .csz:focus-visible,
.vitor-cfg .clo:focus-visible,
.vitor-cfg .cop:focus-visible,
.vitor-cfg .cth:focus-visible,
.vitor-cfg .cfg-cadre-swatch:focus-visible,
.vitor-cfg [tabindex="0"]:focus-visible,
.vitor-cfg input:focus-visible,
.vitor-cfg select:focus-visible{
  outline:2px solid var(--b);
  outline-offset:2px;
  border-radius:6px
}
.vitor-cfg :focus:not(:focus-visible){outline:none}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 2. LAYOUT PRINCIPAL                                                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

.cw{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--g2);
  max-width:100%
  /* Pas overflow ici : casserait sticky de .cv qui est enfant direct */
}

.cv{
  display:flex;
  flex-direction:column;
  background:var(--w);
  border-right:1px solid var(--g2);
  position:sticky;
  top:var(--cfg-header-h,0px);
  /* Force le carre 1:1, ne pas etirer dans la grid */
  align-self:start;
  aspect-ratio:1/1;
  width:100%;
  height:auto;
  max-height:calc(100vh - var(--cfg-header-h,0px));
  overflow:hidden
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 3. MODE PHOTO                                                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

.cpv{flex:1;display:flex;flex-direction:column;min-height:0}
.cpv.off{display:none}

.cmi{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:0;position:relative;overflow:hidden;
  background:var(--g0);min-height:0
}
.cmi img{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
  transition:opacity .4s
}
.cmi .cph{
  width:100%;height:100%;background:var(--g1);
  display:flex;align-items:center;justify-content:center;
  color:var(--g4);font-size:.85rem;text-align:center;padding:20px
}

/* Badges taille + LED sur la photo */
.cmi-badges{
  position:absolute;bottom:16px;left:16px;z-index:6;
  display:flex;gap:6px;flex-wrap:wrap;pointer-events:none
}
.cmi-badge{
  padding:5px 12px;border-radius:6px;
  font-size:11px;font-weight:500;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  color:var(--n);display:flex;align-items:center;gap:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  animation:cfgBadgeIn .3s ease-out
}
.cmi-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.cmi-badge.led-badge .led-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cmi-badge.led-badge .led-indicator.chaud{background:#FFB347}
.cmi-badge.led-badge .led-indicator.neutre{background:#FFD599}
.cmi-badge.led-badge .led-indicator.froid{background:#B4C8E8}

@keyframes cfgBadgeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Galerie thumbs */
.cths{
  display:flex;gap:6px;
  padding:12px 20px;
  border-top:1px solid var(--g2);
  background:var(--w);
  overflow-x:auto;flex-shrink:0;
  -webkit-overflow-scrolling:touch
}
.cth{
  width:62px;height:62px;object-fit:cover;
  border-radius:var(--rs);
  border:2px solid var(--g2);
  cursor:pointer;opacity:.5;
  transition:all .2s;flex-shrink:0
}
.cth:hover{opacity:.8}
.cth.on{opacity:1;border-color:var(--b)}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 4. MODE CONFIGURATEUR                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

.crv{flex:1;display:none;position:relative;overflow:hidden;min-height:0}
.crv.on{display:flex;align-items:center;justify-content:center}

/* Stack de 2 layers pour crossfade lors du switch petit/grand miroir (v9.9.11) */
.crv-bg-stack{position:absolute;inset:0;z-index:1}
.crv-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0;transition:opacity .6s ease
}
.crv-bg.is-active{opacity:1}
.crv-bg.no-img{background:linear-gradient(180deg,#e8e4df 0%,#ddd8d2 30%,#d5d0ca 60%,#ccc7c0 100%)}
.crv-bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.1);z-index:2;
  transition:background .7s ease
}

/* Ambiance LED sur background mode configurateur */
.crv-ambiance{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:soft-light;opacity:0;
  transition:all .8s ease
}
/* v10.0.0.59 : teintes calées sur la photo de référence produit.
   chaud = ambre doux (et non orange vif), froid = quasi blanc à peine cool
   (et non bleu marqué), neutre = blanc chaud doux. */
.crv-ambiance.chaud{opacity:.5;background:radial-gradient(ellipse at center, rgba(255,222,170,.42) 0%, rgba(255,208,150,.17) 40%, transparent 75%)}
.crv-ambiance.neutre{opacity:.45;background:radial-gradient(ellipse at center, rgba(255,243,222,.32) 0%, rgba(255,238,212,.13) 40%, transparent 75%)}
.crv-ambiance.froid{opacity:.4;background:radial-gradient(ellipse at center, rgba(234,241,252,.32) 0%, rgba(222,232,248,.13) 40%, transparent 75%)}

/* Toggle clair/sombre */
.crv-toggle{
  position:absolute;top:16px;right:16px;z-index:10;
  display:flex;gap:4px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  padding:4px;border-radius:999px;
  box-shadow:0 2px 12px rgba(0,0,0,.15)
}
.bg-btn{
  padding:6px 14px;
  font-family:'Alexandria',sans-serif;
  font-size:.72rem;font-weight:600;
  color:var(--g7);background:transparent;
  border:none;border-radius:999px;
  cursor:pointer;transition:all .2s;white-space:nowrap
}
.bg-btn:hover{color:var(--n)}
.bg-btn.on{background:var(--n);color:var(--w)}

.crv-mirror{position:relative;z-index:3}

/* Miroir fictif */
.cmr{position:relative;transition:width .5s ease,height .5s ease,border-radius .5s ease}
.cmr[data-shape=rond]{border-radius:50%}
.cmr[data-shape=rect]{border-radius:var(--r)}
.cmr[data-shape=arche]{border-radius:50% 50% var(--r) var(--r)}
.cmr[data-shape=ovale]{border-radius:50%}
.cmr[data-shape=organique]{border-radius:60% 40% 55% 45%/45% 55% 40% 60%}

.cgl{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:2;
  background:linear-gradient(155deg,#c8ccd5 0%,#b8bcc8 15%,#a8adb8 30%,#bfc4ce 45%,#d0d4dc 55%,#c0c5d0 70%,#b0b5c0 85%,#c5c9d2 100%);
  box-shadow:inset 0 0 60px rgba(255,255,255,.15),inset 0 -30px 60px rgba(0,0,0,.04);
  transition:background-image .5s ease
}
.cgl::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:3;
  background:
    linear-gradient(165deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.2) 20%,transparent 45%),
    linear-gradient(340deg,rgba(255,255,255,.08) 0%,transparent 30%),
    radial-gradient(ellipse at 25% 20%,rgba(255,255,255,.25) 0%,transparent 50%)
}
.cgl::after{
  content:'';position:absolute;width:40%;height:70%;top:8%;right:10%;z-index:4;
  transform:rotate(-8deg);
  background:linear-gradient(145deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 40%,transparent 70%);
  border-radius:40% 60% 50% 50%;filter:blur(3px)
}

/* Reflet image (salle de bain inversee).
   v9.9.2 : `background-size` posé en pixels fixes par JS (--reflet-size),
   calculé depuis le container .crv → l'image NE scale PAS quand le miroir
   change de dimensions. Le .cgl (qui scale avec le miroir) montre juste un
   crop plus ou moins large d'une image à taille stable. Effet "vraie fenêtre".
   Fallback `cover` avant que l'image soit chargée et la var posée. */
.cmr .cgl.has-reflet{
  background-image:var(--reflet-bg, none);
  background-color:#c8ccd5;
  background-size:var(--reflet-size, cover);
  background-position:center;
  background-repeat:no-repeat
}
.cmr .cgl.has-reflet::before{
  background:
    linear-gradient(165deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.04) 25%,transparent 50%),
    linear-gradient(340deg,rgba(200,210,230,.08) 0%,transparent 40%);
  mix-blend-mode:screen;opacity:.6
}
.cmr .cgl.has-reflet::after{opacity:.35}

/* Halo LED autour du miroir */
.cgw{
  position:absolute;inset:-25px;border-radius:inherit;z-index:1;
  transition:box-shadow .7s ease;pointer-events:none
}
.cst{
  position:absolute;inset:-2px;border-radius:inherit;z-index:5;pointer-events:none;
  transition:all .7s ease
}

.cmr[data-led=chaud] .cgw{box-shadow:0 0 30px 10px rgba(255,218,165,.25),0 0 60px 30px rgba(255,210,150,.1),0 0 120px 60px rgba(255,205,140,.05)}
.cmr[data-led=chaud] .cst{border:1.5px solid rgba(255,218,165,.7);box-shadow:0 0 8px 2px rgba(255,218,165,.4),0 0 20px 4px rgba(255,210,150,.15)}
.cmr[data-led=neutre] .cgw{box-shadow:0 0 30px 10px rgba(255,238,215,.3),0 0 60px 30px rgba(255,234,208,.12),0 0 120px 60px rgba(255,230,200,.05)}
.cmr[data-led=neutre] .cst{border:1.5px solid rgba(255,238,215,.8);box-shadow:0 0 8px 2px rgba(255,238,215,.45),0 0 20px 4px rgba(255,234,208,.2)}
.cmr[data-led=froid] .cgw{box-shadow:0 0 30px 10px rgba(234,241,252,.3),0 0 60px 30px rgba(226,235,250,.12),0 0 120px 60px rgba(220,232,248,.05)}
.cmr[data-led=froid] .cst{border:1.5px solid rgba(234,241,252,.8);box-shadow:0 0 8px 2px rgba(234,241,252,.45),0 0 20px 4px rgba(226,235,250,.2)}

/* Couleur seven-segment de l'horloge (cmr-horloge) + bande dépolie.
   --band-color : cœur de la bande (alpha .85 = bien présent).
   --band-glow  : halo lumineux qui rayonne de la bande (RGB plus saturé que
                  --band-color pour vraiment évoquer une LED qui diffuse,
                  alpha .7 pour que le glow soit visible).
   v9.9.0 : ajout du glow via filter:drop-shadow stack (cf. .cmr-depoli). */
.cmr                  { --band-color:rgba(255,255,255,.85); --band-glow:rgba(255,255,255,.55) }
.cmr[data-led=chaud]  { --seg-color:#ffd6a8; --seg-glow:rgba(255,214,168,.5); --band-color:rgba(255,234,214,.85); --band-glow:rgba(255,212,165,.6); --led-glow:rgba(255,214,162,.8); --led-glow2:rgba(255,205,140,.32) }
.cmr[data-led=neutre] { --seg-color:#ffeed0; --seg-glow:rgba(255,238,208,.55); --band-color:rgba(255,245,230,.85); --band-glow:rgba(255,230,200,.65); --led-glow:rgba(255,236,212,.8); --led-glow2:rgba(255,230,200,.32) }
.cmr[data-led=froid]  { --seg-color:#dde8fa; --seg-glow:rgba(221,232,250,.5); --band-color:rgba(236,242,250,.85); --band-glow:rgba(220,232,248,.6); --led-glow:rgba(230,239,255,.8); --led-glow2:rgba(218,232,250,.3) }

/* v10.0.0.72 : pour les miroirs CARRÉS / RECTANGLES (sans SVG silhouette), le
   halo LED « box-shadow » radial donnait des coins très arrondis et un rendu
   peu homogène. On le remplace par un rétroéclairage RECTANGULAIRE uniforme
   (rectangle de la couleur LED, flouté) qui épouse la forme du miroir. Les
   formes rondes/organiques gardent le halo radial (qui leur va). Les miroirs
   has-svg ont leur propre halo (drop-shadow sur la silhouette) et masquent .cgw. */
.cmr[data-shape=rect] .cgw,
.cmr[data-shape=carre] .cgw{ box-shadow:none !important; inset:0; }
.cmr[data-shape=rect] .cgw::before,
.cmr[data-shape=carre] .cgw::before{
  content:'';position:absolute;inset:-13px;border-radius:11px;
  background:var(--led-glow,rgba(255,236,212,.8));filter:blur(25px)
}
.cmr[data-shape=rect] .cgw::after,
.cmr[data-shape=carre] .cgw::after{
  content:'';position:absolute;inset:-28px;border-radius:15px;
  background:var(--led-glow2,rgba(255,230,200,.32));filter:blur(44px)
}

/* Verre 6mm + ombre mur */
.cmr::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:6;pointer-events:none;
  border:1px solid rgba(180,185,195,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)
}
.cmr::after{
  content:'';position:absolute;inset:4px;border-radius:inherit;z-index:0;pointer-events:none;
  box-shadow:0 8px 30px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.1);
  transform:translateY(3px)
}

@keyframes mirrorGlow{0%,100%{opacity:1}50%{opacity:.92}}
.cmr[data-led] .cgw{animation:mirrorGlow 4s ease-in-out infinite}

/* Dimensions sur miroir */
.cdt{
  position:absolute;z-index:10;
  font-size:.7rem;letter-spacing:.06em;font-weight:600;
  opacity:0;transition:opacity .3s
}
.cdt.show{opacity:1}
.cdt span{background:rgba(0,0,0,.6);color:#fff;padding:3px 10px;border-radius:3px;backdrop-filter:blur(4px);white-space:nowrap}
/* v10.0.0.16 : la cote largeur passe EN HAUT (était en bas). User : "jamais en bas". */
.cdw{top:-28px;left:50%;transform:translateX(-50%)}
/* writing-mode (au lieu de rotate) : la box adopte physiquement les dimensions
   du texte vertical, donc right:-28 donne le même gap visuel que .cdw indépendamment
   de la largeur du contenu. Ancien rotate avait right:-52 pour compenser le
   décalage induit par le contenu variable. */
.cdh{right:-28px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;text-orientation:mixed}
/* Miroirs ronds : .cdh est cachée par le JS, .cdw devient la cote diamètre.
   On la repositionne à droite (vertical) car "jamais en bas". */
.cmr[data-shape="rond"] .cdw{
  top:50%;left:auto;right:-28px;bottom:auto;
  transform:translateY(-50%);
  writing-mode:vertical-rl;text-orientation:mixed
}

/* Boutons visuels sur miroir */
.cmr-btn{animation:cfgBtnIn .3s ease-out}
@keyframes cfgBtnIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

/* Variante avec translateX(-50%) baked in pour les boutons centrés.
   Évite que l'inline-transform JS rentre en conflit avec scale (bug v9.7.0
   où le bouton semblait se décaler après le fade-in). */
@keyframes cfgBtnInCentered{
  from{opacity:0;transform:translateX(-50%) scale(.5)}
  to  {opacity:1;transform:translateX(-50%) scale(1)}
}

/* v10.0.0.11 : refonte layout boutons miroir en flexbox.
   `.cmr-buttons` devient le container flex qui centre ses enfants visibles
   (tactile + horloge ou un seul) et gère le gap. align-items: center aligne
   les centres verticaux nativement (plus de hack margin-bottom).
   Le parent gère bottom + position ; les enfants sont en flow naturel.
   Plus de classe `.paired` côté JS — le centrage du groupe est automatique. */
.cmr-buttons{
  position:absolute;
  left:0;right:0;
  bottom:var(--btn-bottom,22%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  z-index:8;
  pointer-events:none;
  /* SVG silhouettes : décale les boutons davantage vers l'intérieur (cascade
     via --btn-bottom). Bande dépolie : pas de décalage spécifique (préférence
     user v10.0.0-alpha.9). */
}
.cmr.has-svg{--btn-bottom:28%}

/* Boutons-icônes sur miroir (v10.0.0.63). SVG fournis par le client (tactile,
   réglage horloge, film chauffant), recadrés + currentColor. Couleur bleu LED
   Vitor + halo pulsant via drop-shadow (épouse la forme de l'icône). La forme
   ronde/carrée vient de la variante SVG choisie selon data-shape (cf. plus bas). */
.cmr-btn.tactile-btn,
.cmr-btn.reglage-btn,
.cmr-btn.film-btn{
  width:var(--cmr-ico-size,7px);
  height:var(--cmr-ico-size,7px);
  color:var(--b);
  line-height:0;
  filter:
    drop-shadow(0 0 1px var(--b))
    drop-shadow(0 0 2.5px var(--b));
  animation:
    cfgBtnIn .3s ease-out,
    cfgIcoBreath 3s ease-in-out infinite .3s
}
/* Conteneurs des deux variantes d'icône : on affiche la bonne selon data-shape. */
.cmr-btn .cmr-ico{display:none;width:100%;height:100%}
.cmr-btn .cmr-ico svg{width:100%;height:100%;display:block}
/* Défaut (miroir rond / forme libre / ovale / arche) → variante ronde. */
.cmr-btn .cmr-ico-round{display:block}
/* Miroir rectangle / carré → variante carrée. */
.cmr[data-shape="rect"] .cmr-btn .cmr-ico-round,
.cmr[data-shape="carre"] .cmr-btn .cmr-ico-round{display:none}
.cmr[data-shape="rect"] .cmr-btn .cmr-ico-square,
.cmr[data-shape="carre"] .cmr-btn .cmr-ico-square{display:block}
/* "Breath" : module l'intensité du halo bleu doucement. */
@keyframes cfgIcoBreath{
  0%,100%{filter:
    drop-shadow(0 0 1px var(--b))
    drop-shadow(0 0 2.5px var(--b))}
  50%{filter:
    drop-shadow(0 0 1.5px var(--b))
    drop-shadow(0 0 4px var(--b))}
}

/* Horloge — chiffres seven-segment flottent sur le miroir avec glow LED.
   En flexbox parent : centrée seule, ou groupée+centrée avec tactile.
   v10.0.0.11 : suppression du `.paired` (devenu inutile avec flex parent). */
.cmr-btn.horloge-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  animation:cfgBtnIn .3s ease-out
}
.cmr.has-svg{--btn-bottom:28%}

/* ─── BANDE DÉPOLIE PÉRIMÉTRIQUE (v9.8.0+, fix mask-composite) ────────────────
   Effet "verre dépoli" autour du miroir : voile blanc + flou réel via
   backdrop-filter, masqué pour ne couvrir QUE le périmètre.

   Implémentation : 4 bandes mask indépendantes (top, bottom, left, right) qui
   s'additionnent (mode mask par défaut = add). Évite mask-composite:exclude
   fragile cross-browser (qui faisait apparaître TOUT le miroir flouté quand
   le browser ne reconnaissait pas l'opération xor/exclude — bug v9.8.0).

   mask-size traite width/height indépendamment, donc plus de quirk
   padding-en-% qui se référait toujours à la WIDTH du parent.

   Les CSS vars --depoli-pad-x/y et --depoli-offset-x/y sont posées en JS
   depuis S.w/S.h (cm) et P.bandEpaisseur/P.bandDecalage (cm).

   Stack z-index :
     2  .cgl (reflet)
     6  .cmr-heating (chauffage orange)
     7  .cmr-depoli (cette couche)
     8  .cmr-btn (boutons, restent nets au-dessus du flou) */
.cmr-depoli{
  position:absolute;inset:0;border-radius:inherit;z-index:7;
  pointer-events:none;
  /* Cœur de la bande (alpha .85 v9.9.0) + halo lumineux drop-shadow stack
     qui simule une vraie LED diffusant à travers le verre dépoli. Les
     drop-shadows respectent le mask-shape, donc le glow épouse la bande
     périmétrique (et la silhouette SVG côté has-svg). */
  background:var(--band-color,rgba(255,255,255,.85));
  filter:
    drop-shadow(0 0 3px  var(--band-glow,rgba(255,255,255,.55)))
    drop-shadow(0 0 10px var(--band-glow,rgba(255,255,255,.55)))
    drop-shadow(0 0 22px var(--band-glow,rgba(255,255,255,.55)));
  transition:background-color .5s ease,filter .5s ease;
  /* Blur léger pour le côté "verre dépoli" — la luminosité porte l'effet. */
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
  /* Mask en gradient soft : opaque sur le bord externe, légèrement dégradé
     vers l'intérieur (.65 alpha au bord interne) → coins inner perçus comme
     arrondis sans trop diluer la bande. v9.8.2 : softness .55→.65. */
  -webkit-mask:
    linear-gradient(to bottom,#fff 0%,#fff 70%,rgba(255,255,255,.65) 100%) top    /100% var(--depoli-pad-y,8%) no-repeat,
    linear-gradient(to top,   #fff 0%,#fff 70%,rgba(255,255,255,.65) 100%) bottom /100% var(--depoli-pad-y,8%) no-repeat,
    linear-gradient(to right, #fff 0%,#fff 70%,rgba(255,255,255,.65) 100%) left   /var(--depoli-pad-x,8%) 100% no-repeat,
    linear-gradient(to left,  #fff 0%,#fff 70%,rgba(255,255,255,.65) 100%) right  /var(--depoli-pad-x,8%) 100% no-repeat;
          mask:
    linear-gradient(to bottom,#fff 0%,#fff 70%,rgba(255,255,255,.65) 100%) top    /100% var(--depoli-pad-y,8%) no-repeat,
    linear-gradient(to top,   #fff 0%,#fff 70%,rgba(255,255,255,.65) 100%) bottom /100% var(--depoli-pad-y,8%) no-repeat,
    linear-gradient(to right, #fff 0%,#fff 70%,rgba(255,255,255,.65) 100%) left   /var(--depoli-pad-x,8%) 100% no-repeat,
    linear-gradient(to left,  #fff 0%,#fff 70%,rgba(255,255,255,.65) 100%) right  /var(--depoli-pad-x,8%) 100% no-repeat
}
/* Variant "décalée" : la bande commence à --depoli-offset-* du bord. La box
   .cmr-depoli s'inset, ses 4 mask-bandes se déplacent avec elle. */
.cmr-depoli.decale{
  inset:var(--depoli-offset-y,3%) var(--depoli-offset-x,3%)
}

/* ─── TRAIT FIN DE CONTOUR (v9.8.3) ─────────────────────────────────────────
   Ligne fine inset blanche qui longe l'intérieur du miroir, suggère
   l'épaisseur du verre. Toujours présente, peu importe les options.

   z:7 placé APRÈS .cmr-depoli (z:7) en DOM → s'affiche au-dessus de la
   bande dépolie quand les deux co-existent. Reste sous les boutons (z:8).

   - rect/rond : box-shadow inset, suit border-radius natif
   - SVG silhouette : box-shadow ne suit pas la forme courbe, JS injecte un
     <svg> inline avec stroke fin clipPath-é (mêmes helpers que la bande). */
.cmr-edge{
  position:absolute;inset:0;border-radius:inherit;z-index:7;
  pointer-events:none;
  /* v9.9.6 : duo "polished glass edge" — trait crisp #25392f (vert très
     sombre, tint forêt) + glow blanc soft inward qui simule la lumière
     accrochant sur la tranche du verre poli.
     v9.9.7 : épaisseur trait 1px → 0.5px (sub-pixel, hairline sur HiDPI).
     Glow proportionnel : blur 4px → 2px. */
  box-shadow:
    inset 0 0 0 0.5px rgba(37,57,47,.7),
    inset 0 0 2px 0 rgba(255,255,255,.4)
}
.cmr.has-svg .cmr-edge{
  box-shadow:none
}
.cmr.has-svg .cmr-edge > svg{
  display:block;width:100%;height:100%;overflow:visible
}

/* SVG silhouettes : on n'utilise PAS le système 4-mask (incompatible avec un
   contour arbitraire). À la place, JS injecte un <svg> inline dans .cmr-depoli
   contenant un path tracé en stroke épais clipPath-é par la silhouette
   originale. Résultat : bande uniforme en cm tout le long du contour, avec
   coins naturellement arrondis (stroke-linejoin: round).
   v9.8.0 stage 3 : remplace l'approche radial-gradient (trop subtile). */
.cmr.has-svg .cmr-depoli{
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  -webkit-mask:none;
          mask:none;
  background:transparent
}
.cmr.has-svg .cmr-depoli > svg{
  display:block;width:100%;height:100%;overflow:visible
}
/* Fallback si le path SVG n'a pas pu être extrait (forme complexe non gérée) :
   classe posée par JS, retombe sur l'approche radial-gradient bumpée. */
.cmr.has-svg.depoli-fallback-radial .cmr-depoli{
  -webkit-mask:var(--cfg-shape-mask) center/contain no-repeat;
          mask:var(--cfg-shape-mask) center/contain no-repeat;
  /* Fallback radial : utilise --band-color avec une variante mid-transparency
     en superposant le voile sur lui-même via stack de gradients. */
  background:
    radial-gradient(
      ellipse at center,
      transparent 0%,
      transparent 55%,
      var(--band-color,rgba(255,255,255,.55)) 80%,
      var(--band-color,rgba(255,255,255,.55)) 100%
    );
  transition:background .5s ease
}

/* Transition douce du stroke SVG quand la teinte LED change (v9.8.4) */
.cmr.has-svg .cmr-depoli > svg path{
  transition:stroke .5s ease
}
/* Affichage seven-segment digital (v9.7.0+).
   Couleur + glow s'adaptent à la teinte LED active via les variables --seg-*. */
.cmr-horloge{
  font-family:'DSEG7 Classic','Share Tech Mono','Courier New',monospace;
  /* v10.0.0.12 : taille réduite (11px → 7.5px, ÷1.5) + couleur fixe blanc LED,
     plus de dépendance à --seg-color/--seg-glow (qui suivaient la teinte LED). */
  font-weight:700;font-size:7.5px;letter-spacing:0.5px;
  line-height:1;
  color:#ffffff;
  text-shadow:
    0 0 4px rgba(255,255,255,.65),
    0 0 8px rgba(255,255,255,.35)
}

/* ─── FILM CHAUFFANT (v9.7.0) ────────────────────────────────────────────────
   Gradient orange chaud + pulse subtil sur le verre.
   Alpha max 30 % (0.30 dans la couleur × 1.0 max d'opacité du pulse).
   Animation CSS pure (GPU-compositor sur opacity), 0 impact perf. */
.cmr-heating{
  position:absolute;inset:0;z-index:6;border-radius:inherit;
  background:radial-gradient(ellipse at center,
    rgba(255,130,60,.30) 0%,
    rgba(255,100,40,.12) 45%,
    transparent 80%);
  pointer-events:none;opacity:0;transition:opacity .6s ease
}
.cmr.has-heating .cmr-heating{
  opacity:1;animation:heatingPulse 4s ease-in-out infinite
}
@keyframes heatingPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* v10.0.0.21 : le bouton tactile reste TOUJOURS bleu LED, même quand le film
   chauffant est actif. La variante .has-heating (qui passait en orange) a été
   supprimée. Le gradient chauffant orange reste visible sur le verre du miroir
   via .cmr.has-heating .cmr-heating (au-dessus). */

/* Cadre aluminium autour */
.cmr-cadre{
  position:absolute;inset:-6px;border-radius:inherit;z-index:0;pointer-events:none;
  border:4px solid #8a8a8a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 1px rgba(0,0,0,.1);
  background:linear-gradient(135deg,#a0a0a0,#888,#a0a0a0,#7a7a7a,#909090);
  transition:opacity .4s ease
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 5. PANEL DROIT — Header produit                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */

.cpan{
  padding:28px 32px;
  display:flex;flex-direction:column;gap:0
}

/* Blocs display:contents pour switch mode photo/config */
.cpc{display:contents}
.cpc.off{display:none}
.ccc{display:none}
.ccc.on{display:contents}

/* Breadcrumb */
.vp-breadcrumb{
  font-size:11px;color:var(--g5);
  margin-bottom:12px;letter-spacing:.02em;line-height:1.5
}
.vp-breadcrumb a{color:var(--g5);text-decoration:none;transition:color .15s}
.vp-breadcrumb a:hover{color:var(--b)}
.vp-bc-sep{margin:0 6px;color:var(--g3)}

/* Badge collection */
.cbadge{
  display:inline-block;
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--b);background:var(--bxl);
  padding:4px 12px;border-radius:16px;
  width:fit-content;
  margin-bottom:10px
}

/* Titre */
.cttl{
  font-size:1.5rem;font-weight:700;line-height:1.25;
  color:var(--n);
  margin-bottom:8px
}

/* Meta rating + SKU */
.vp-meta{
  display:flex;align-items:center;gap:10px;
  margin:0 0 12px;flex-wrap:wrap
}
.vp-rating{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--g7);
  text-decoration:none;transition:color .15s
}
.vp-rating:hover{color:var(--n)}
.vp-rating:hover .vp-rating-count{text-decoration:underline}
.vp-rating strong{font-weight:600;color:var(--n)}
.vp-stars{display:inline-flex;gap:1px;font-size:13px;line-height:1}
.vp-star{color:#e5e5e5;line-height:1}
.vp-star.full{color:#FFB400}
.vp-star.half{
  background:linear-gradient(90deg,#FFB400 50%,#e5e5e5 50%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent
}
.vp-rating-count{color:var(--g5);font-weight:300}
.vp-sep{color:var(--g3);font-size:11px;font-weight:300}
.vp-sku{font-size:11px;color:var(--g5);font-weight:300}

/* Description courte avec ligne de separation */
.cdesc{
  font-size:.88rem;color:var(--g7);line-height:1.65;
  margin:0 0 16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--g1)
}

/* Sections configurateur (sans border-top) */
.csec{padding-top:16px}
.csl{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g7);margin-bottom:12px
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 6. TRUST BADGES                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */

.vp-trust{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px;margin:14px 0
}
.vp-trust-item{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 8px;
  background:var(--g0);border-radius:6px;
  align-items:center;text-align:center
}
.vp-trust-ic{
  color:var(--b);margin-bottom:2px;
  display:inline-flex;align-items:center;justify-content:center
}
.vp-trust-ic svg{display:block}
.vp-trust-label{
  font-size:10.5px;font-weight:500;color:var(--n);
  letter-spacing:.01em;line-height:1.3
}
.vp-trust-sub{
  font-size:9.5px;color:var(--g5);font-weight:300;line-height:1.3
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 7. PILLS (tailles + LED)                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Groupes de pills */
.cfg-group{
  padding:14px 0;
  border-bottom:1px solid var(--g1)
}
.cfg-group:last-child{border-bottom:none}

.cfg-group-label{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;font-weight:500;
  color:var(--n);
  letter-spacing:.02em;
  margin-bottom:10px
}
.cfg-group-hint{
  font-size:11px;color:var(--g5);font-weight:300
}

/* Container pills */
.cfg-pills{
  display:flex;gap:6px;flex-wrap:wrap;
  max-width:100%
}

.cfg-pill{
  padding:9px 14px;
  background:var(--w);
  border:1.5px solid var(--g2);
  border-radius:8px;
  cursor:pointer;
  font-size:12px;
  color:var(--n);
  transition:all .15s;
  display:inline-flex;align-items:center;gap:8px;
  position:relative;
  white-space:nowrap
}
.cfg-pill:hover{border-color:var(--g3);background:var(--g0)}
.cfg-pill.on{
  border-color:var(--b);
  background:var(--bxl);
  color:var(--b)
}
.cfg-pill .dim{font-weight:500}
.cfg-pill .pr{
  font-size:11px;color:var(--g5);font-weight:300;padding-left:2px
}
.cfg-pill.on .pr{color:var(--b);opacity:.75}
.cfg-pill .pop{
  position:absolute;top:-7px;right:8px;
  font-size:8.5px;font-weight:500;
  background:var(--b);color:var(--w);
  padding:1px 6px;border-radius:6px;
  letter-spacing:.04em
}

/* Pills LED — dot couleur */
.cfg-pill .led-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0
}
.cfg-pill .led-dot.chaud{background:#FFB347}
.cfg-pill .led-dot.neutre{background:#FFD599}
.cfg-pill .led-dot.froid{background:#B4C8E8}
.cfg-pill .led-name{font-weight:500}
.cfg-pill .kelvin{
  font-size:10px;color:var(--g5);font-weight:300;padding-left:2px
}
.cfg-pill.on .kelvin{color:var(--b);opacity:.7}

/* Mode configurateur - cartes tailles (.csz) - design identique aux .cfg-pill */
.csizes{
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.csz{
  padding:9px 14px;
  background:var(--w);
  border:1.5px solid var(--g2);
  border-radius:8px;
  cursor:pointer;
  font-size:12px;
  color:var(--n);
  transition:all .15s;
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
  white-space:nowrap
}
.csz:hover{border-color:var(--g3);background:var(--g0)}
.csz.on{border-color:var(--b);background:var(--bxl);color:var(--b)}
.csz .csz-lb{
  font-weight:500;
  font-size:12px;
  color:inherit;
  margin:0
}
.csz .csz-dm{
  font-weight:500;
  font-size:12px;
  color:inherit;
  margin:0;
  letter-spacing:0
}
.csz .csz-pr{
  font-size:11px;
  color:var(--g5);
  font-weight:300;
  padding-left:2px;
  margin:0
}
.csz.on .csz-pr{color:var(--b);opacity:.75}
.csz .csz-pop{
  position:absolute;
  top:-7px;
  right:8px;
  left:auto;
  transform:none;
  font-size:8.5px;
  font-weight:500;
  background:var(--b);
  color:var(--w);
  padding:1px 6px;
  border-radius:6px;
  letter-spacing:.04em;
  white-space:nowrap
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 8. BLOC SUR-MESURE                                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Mode photo et mode configurateur partagent le meme design */
.cfg-photo-custom-inline,
.cfg-cfg-custom-inline{
  margin-top:14px;
  padding:14px;
  background:var(--g0);
  border:1px solid var(--g1);
  border-radius:10px;
  transition:all .2s ease
}
.cfg-photo-custom-inline.active,
.cfg-cfg-custom-inline.active{
  background:var(--bxl);
  border-color:var(--b)
}

.cfg-photo-custom-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:10px
}
.cfg-photo-custom-title{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;
  color:var(--n);letter-spacing:.02em
}
.cfg-photo-custom-title svg{stroke:var(--b);flex-shrink:0}
.cfg-photo-custom-inline.active .cfg-photo-custom-title,
.cfg-cfg-custom-inline.active .cfg-photo-custom-title{color:var(--b)}
.cfg-cfg-custom-inline.active .cfg-photo-custom-title svg{stroke:var(--b)}

/* Toggle cm/mm */
.cfg-photo-unit-toggle{
  display:inline-flex;gap:2px;
  background:var(--w);border-radius:6px;padding:2px;
  border:1px solid var(--g2)
}
.cfg-photo-unit-btn{
  padding:3px 10px;
  font-family:inherit;font-size:10px;font-weight:500;
  color:var(--g5);background:transparent;
  border:none;border-radius:4px;
  cursor:pointer;transition:all .15s;
  letter-spacing:.02em
}
.cfg-photo-unit-btn:hover{color:var(--g9)}
.cfg-photo-unit-btn.on{color:var(--w);background:var(--b)}

/* Inputs dims */
.cfg-photo-dims{
  display:flex;align-items:flex-end;gap:8px;
  margin-bottom:6px;
  flex-wrap:nowrap;
  min-width:0
}
.cfg-photo-dim-field{
  flex:1 1 0;
  min-width:0
}
.cfg-photo-dim-field label{
  display:block;
  font-size:10.5px;font-weight:500;
  color:var(--g7);letter-spacing:.03em;
  margin-bottom:4px
}
.cfg-photo-dim-input{
  display:flex;align-items:baseline;gap:4px;
  background:var(--w);
  border:1.5px solid var(--g2);
  border-radius:6px;
  padding:7px 10px;
  transition:border-color .15s
}
.cfg-photo-dim-input:focus-within{border-color:var(--b)}
.cfg-photo-custom-inline.active .cfg-photo-dim-input,
.cfg-cfg-custom-inline.active .cfg-photo-dim-input{border-color:var(--b)}
.cfg-photo-dim-input input{
  flex:1;min-width:0;
  font-family:inherit;font-size:15px;font-weight:600;
  color:var(--n);
  border:none;outline:none;background:transparent;
  padding:0;line-height:1.2;
  -moz-appearance:textfield
}
.cfg-photo-dim-input input::-webkit-inner-spin-button,
.cfg-photo-dim-input input::-webkit-outer-spin-button{
  -webkit-appearance:none;margin:0
}
.cfg-photo-dim-unit{font-size:11px;color:var(--g5);font-weight:400;flex-shrink:0}
.cfg-photo-dim-sep{
  font-size:14px;color:var(--g4);font-weight:300;
  margin-bottom:8px;user-select:none
}
.cfg-photo-dim-hint{
  font-size:10.5px;color:var(--g7);line-height:1.5;font-weight:300
}
.cfg-photo-dim-hint a{
  color:var(--b);text-decoration:underline;
  text-underline-offset:2px;font-weight:500
}
.cfg-photo-dim-hint a:hover{color:var(--bh)}

/* ─── DIM MODE VARIANTS (v9.6.0) ─────────────────────────────────────────── */
/* Mode single-side / single-diam : un seul champ "Côté" ou "Diamètre" */
.cfg-photo-dims--single-side .cfg-photo-dim-field[data-dim="height"],
.cfg-photo-dims--single-diam .cfg-photo-dim-field[data-dim="height"],
.cfg-photo-dims--single-side .cfg-photo-dim-sep,
.cfg-photo-dims--single-diam .cfg-photo-dim-sep{
  display:none
}
.cfg-photo-dims--single-side,
.cfg-photo-dims--single-diam{
  justify-content:center
}
.cfg-photo-dims--single-side .cfg-photo-dim-field[data-dim="width"],
.cfg-photo-dims--single-diam .cfg-photo-dim-field[data-dim="width"]{
  flex:0 1 220px
}

/* Mode ratio-locked : hauteur en lecture seule + badge cadenas */
.cfg-photo-dims--ratio-locked .cfg-photo-dim-field[data-dim="height"] input[type="number"]{
  background:var(--g1);
  color:var(--g7);
  cursor:not-allowed;
  border-color:var(--g2)
}
.cfg-photo-dims--ratio-locked .cfg-photo-dim-field[data-dim="height"] input[type="range"]{
  pointer-events:none;
  opacity:.45
}
.cfg-photo-dims--ratio-locked .cfg-photo-dim-field[data-dim="height"] input[type="range"]::-webkit-slider-thumb{
  cursor:not-allowed
}
.cfg-dim-locked-badge{
  display:none;
  align-items:center;
  gap:3px;
  font-size:10px;
  font-weight:500;
  color:var(--g7);
  background:var(--g1);
  padding:2px 6px;
  border-radius:10px;
  margin-left:6px;
  vertical-align:middle
}
.cfg-photo-dims--ratio-locked .cfg-dim-locked-badge{
  display:inline-flex
}

/* Sliders range sous les inputs (mode configurateur) */
.cfg-cfg-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;
  background:var(--g2);border-radius:4px;
  outline:none;cursor:pointer;margin-top:8px
}
.cfg-cfg-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;
  background:var(--w);border:2.5px solid var(--b);
  border-radius:50%;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:box-shadow .15s, transform .15s
}
.cfg-cfg-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px rgba(29,44,243,.12)}
.cfg-cfg-slider::-webkit-slider-thumb:active{transform:scale(1.1)}
.cfg-cfg-slider::-moz-range-thumb{
  width:16px;height:16px;
  background:var(--w);border:2.5px solid var(--b);
  border-radius:50%;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.08)
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 9. TACTILE                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* v10.0.0.23 : marge entre options populaires consécutives dans .cfg-group. */
.cfg-group .vp-tactile + .vp-tactile{margin-top:8px}

/* Bouton "Découvrir plus d'options de personnalisation" — utilisé à 3 endroits
   en mode photo (options populaires, sous dimensions, au-dessus Commander).
   v10.0.0.27 : margin-top par défaut pour que le bouton respire où qu'il soit placé. */
.vp-options-more{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 14px;
  margin-top:12px;
  background:var(--b);color:var(--w);
  border:none;border-radius:8px;
  font-family:'Alexandria',sans-serif;
  font-size:13px;font-weight:500;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s,transform .15s
}
.vp-options-more:hover{background:var(--bh);transform:translateY(-1px)}
.vp-options-more svg{stroke:currentColor;flex-shrink:0}

/* v10.0.0.41 : variantes des 3 CTA vers le configurateur. Avant : 3 boutons
   bleus pleins identiques (+ "Commander" aussi bleu plein) = mur de boutons
   répétitif. On hiérarchise : "Commander" reste le seul bleu plein (primaire),
   les 3 CTA config deviennent secondaires et distincts. Montée d'emphase :
   lien (A) < teinté (B) < contour (C) < plein (Commander). */

/* A — lien texte discret (sous les dimensions), emphase minimale. */
.vp-options-more--link{
  background:none;color:var(--b);
  width:fit-content;margin:14px auto 0;padding:6px 4px;font-weight:500
}
.vp-options-more--link:hover{
  background:none;color:var(--bh);transform:none;text-decoration:underline
}

/* B — pilule teintée douce (options populaires), emphase moyenne. */
.vp-options-more--soft{background:var(--bl);color:var(--b)}
.vp-options-more--soft:hover{background:#e3e7ff;color:var(--bh)}

/* C — bouton contour (au-dessus de Commander), se marie au plein de Commander. */
.vp-options-more--outline{
  background:transparent;color:var(--b);border:1.5px solid var(--b)
}
.vp-options-more--outline:hover{background:var(--bl);color:var(--bh)}
/* v10.0.0.37 : espace entre le CTA "Découvrir plus d'options" et le bouton
   "Commander" qui le suit (sinon les deux boutons bleus se collent). */
.vp-options-more + .ccta-primary{margin-top:12px}

.vp-tactile{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  background:var(--g0);
  border:1px solid var(--g1);
  border-radius:8px;
  cursor:pointer;
  transition:all .15s;
  user-select:none;
  min-width:0
}
.vp-tactile:hover{background:var(--g1)}
.vp-tactile.on{background:var(--bxl);border-color:var(--b)}

.vp-tactile-left{
  display:flex;align-items:center;gap:10px;
  min-width:0;flex:1
}
.vp-tactile-ic{
  width:28px;height:28px;border-radius:6px;
  background:var(--w);border:1px solid var(--g2);
  display:flex;align-items:center;justify-content:center;
  color:var(--g5);transition:all .15s;flex-shrink:0
}
.vp-tactile.on .vp-tactile-ic{
  background:var(--b);border-color:var(--b);color:var(--w)
}
.vp-tactile-ic svg{display:block}

.vp-tactile-text{
  display:flex;flex-direction:column;gap:1px;
  min-width:0;overflow:hidden
}
.vp-tactile-name{
  font-size:12.5px;font-weight:500;color:var(--n);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.vp-tactile.on .vp-tactile-name{color:var(--b)}
.vp-tactile-desc{
  font-size:11px;color:var(--g5);font-weight:300;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

.vp-tactile-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.vp-tactile-price{
  font-size:12px;color:var(--g7);font-weight:500;
  font-variant-numeric:tabular-nums
}
.vp-tactile.on .vp-tactile-price{color:var(--b)}

.vp-switch{
  width:32px;height:18px;
  background:var(--g3);border-radius:10px;
  position:relative;transition:background .15s;
  flex-shrink:0
}
.vp-switch::after{
  content:'';position:absolute;
  width:12px;height:12px;
  background:var(--w);border-radius:50%;
  top:3px;left:3px;
  transition:all .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.12)
}
.vp-tactile.on .vp-switch{background:var(--b)}
.vp-tactile.on .vp-switch::after{left:17px}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 10. OPTIONS CHECKLIST (mode configurateur)                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

.copts{display:flex;flex-direction:column;gap:0}
#cfgOptsGrid{display:flex;flex-direction:column;gap:0}

.cfg-opt-group{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 0;
  border-bottom:1px solid var(--g1)
}
.cfg-opt-group:last-child{border-bottom:none}
.cfg-opt-group:first-child{padding-top:0}

.cfg-opt-group-title{
  display:flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--g9);
  margin:0 0 2px
}
.cfg-opt-group-title::before{
  content:'';display:inline-block;
  width:3px;height:10px;
  background:var(--b);border-radius:2px;
  flex-shrink:0
}

.cfg-opt-group-list{display:flex;flex-direction:column;gap:8px}

/* Options (checklist version B) */
.cop{
  display:flex;align-items:center;gap:12px;
  padding:13px 8px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--g1);
  cursor:pointer;
  transition:background .15s ease;
  margin:0 -8px
}
.cop:hover{background:var(--g0)}
.cop:last-child{border-bottom:none}

.cop .cop-check{
  flex-shrink:0;width:20px;height:20px;
  border-radius:6px;border:1.5px solid var(--g3);
  background:var(--w);
  position:relative;
  transition:all .15s ease
}
.cop.on .cop-check{background:var(--b);border-color:var(--b)}
.cop.on .cop-check::after{
  content:'';position:absolute;top:3px;left:6px;
  width:5px;height:10px;
  border:solid var(--w);border-width:0 2px 2px 0;
  transform:rotate(45deg)
}

.cop .cop-name{
  flex:1;min-width:0;
  font-size:.88rem;font-weight:400;
  color:var(--n);line-height:1.4;
  letter-spacing:-.005em
}
.cop.on .cop-name{font-weight:500;color:var(--b)}

.cop .cfg-info-btn{
  flex-shrink:0;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--g1);color:var(--g5);
  font-size:.65rem;font-weight:600;
  border:1px solid var(--g2);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:1;
  font-family:inherit;
  transition:all .15s ease
}
.cop .cfg-info-btn:hover,
.cop .cfg-info-btn:focus{
  background:var(--b);color:var(--w);border-color:var(--b);outline:none
}

.cop .cop-price{
  flex-shrink:0;
  font-size:.82rem;font-weight:500;
  color:var(--g7);
  font-variant-numeric:tabular-nums;
  min-width:78px;text-align:right;
  letter-spacing:-.005em
}
.cop.on .cop-price{color:var(--b)}

/* Panneau info depliant */
.cfg-info-panel{
  max-height:0;overflow:hidden;opacity:0;
  font-size:.78rem;
  color:var(--g7);line-height:1.55;
  padding:0 8px 0 40px;
  margin:0 -8px;
  background:var(--g0);
  border-bottom:1px solid var(--g1);
  transition:max-height .3s ease, opacity .2s ease, padding .2s ease
}
.cfg-info-panel.open{
  max-height:160px;
  opacity:1;
  padding:12px 16px 14px 40px
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 11. OPTIONS AVANCEES (installation repliable + cadre RAL)                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.cfg-opt-group-advanced{
  background:var(--g0);
  border-radius:8px;
  padding:0;
  margin-top:8px;
  border:1px solid var(--g1);
  transition:border-color .2s ease, background .2s ease
}
.cfg-opt-group-advanced:hover{
  background:#f4f4f4;
  border-color:var(--g2)
}
.cfg-opt-group-advanced.open{
  background:var(--bxl);
  border-color:var(--bl)
}

.cfg-opt-group-advanced .cfg-opt-group-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px;margin:0;
  cursor:pointer;user-select:none
}

.cfg-opt-group-advanced .cfg-opt-group-toggle .cfg-opt-group-label{
  display:flex;align-items:center;gap:8px;
  color:var(--g9);font-weight:600;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  transition:color .2s
}
.cfg-opt-group-advanced .cfg-opt-group-toggle .cfg-opt-group-label::before{
  /* Pas de barre bleue ici : c'est le label "Afficher/Masquer" du toggle */
  display:none
}
.cfg-opt-group-advanced.open .cfg-opt-group-toggle .cfg-opt-group-label{color:var(--b)}

.cfg-opt-group-action{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--b);
  font-size:.72rem;font-weight:500;
  letter-spacing:.02em
}
.cfg-opt-group-action-label{transition:color .2s}

.cfg-opt-group-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--b);color:var(--w);
  transition:background .25s ease, transform .3s ease
}
.cfg-opt-group-icon svg{display:block}

.cfg-icon-v{
  transform-origin:center;
  transition:transform .3s ease, opacity .25s ease;
  transform:scaleY(1);opacity:1
}
.cfg-opt-group-advanced.open .cfg-icon-v{transform:scaleY(0);opacity:0}

/* Panneau liste qui s'ouvre */
.cfg-opt-group-advanced .cfg-opt-group-list{
  max-height:0;overflow:hidden;opacity:0;
  padding:0 14px;
  transition:max-height .35s ease, opacity .25s ease, padding .25s ease
}
.cfg-opt-group-advanced.open .cfg-opt-group-list{
  max-height:400px;opacity:1;padding:0 14px 10px
}

.cfg-opt-group-advanced .cop{
  background:transparent;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:none;
  margin:0;padding:12px 0
}
.cfg-opt-group-advanced .cop:hover{background:rgba(255,255,255,.4)}
.cfg-opt-group-advanced.open .cop:first-of-type{border-top-color:rgba(29,44,243,.15)}

/* Cadre RAL picker */
.cfg-cadre-picker{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:12px 0 6px;
  animation:cfgBtnIn .3s ease-out
}
.cfg-cadre-swatch{
  width:28px;height:28px;border-radius:50%;
  cursor:pointer;position:relative;
  transition:transform .2s;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)
}
.cfg-cadre-swatch:hover{transform:scale(1.15)}
.cfg-cadre-swatch.on{transform:scale(1.1)}
.cfg-cadre-swatch.on::after{
  content:'';position:absolute;inset:-4px;
  border-radius:50%;
  border:2px solid var(--b)
}
.cfg-cadre-selected{
  display:flex;align-items:center;gap:6px;
  padding:4px 0;font-size:.78rem
}
.cfg-cadre-sel-label{color:var(--g5)}
.cfg-cadre-sel-name{color:var(--n);font-weight:500}

.cfg-sub-panel{padding:0 0 8px 0;animation:cfgBtnIn .3s ease-out}
.cfg-sub-panel .cfg-cadre-picker{display:flex}

/* Boutons "collée / décalée" du sub-panel bande dépolie (v9.8.0) */
.cfg-band-pos{
  padding:6px 12px;border-radius:999px;
  font-size:.78rem;font-weight:500;
  background:var(--g1);color:var(--g7);
  border:1px solid var(--g2);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s
}
.cfg-band-pos:hover{background:var(--g0);color:var(--n)}
.cfg-band-pos.on{background:var(--n);color:var(--w);border-color:var(--n)}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 12. PRIX & CTA                                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Bloc prix mode photo */
.vp-price-box{
  background:var(--g0);
  border-radius:10px;
  padding:16px 18px;
  margin-top:12px;
  margin-bottom:10px
}
.vp-price-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px
}
.vp-price-label{font-size:11px;color:var(--g5);letter-spacing:.02em}
.vp-price-main{display:flex;align-items:baseline;gap:6px}
.vp-price-amount{
  font-size:28px;font-weight:700;color:var(--n);
  letter-spacing:-.01em;line-height:1
}
.vp-price-tva{font-size:12px;color:var(--g5);font-weight:400}
.vp-price-ttc{
  font-size:12px;color:var(--g7);
  margin-top:4px;font-weight:300
}
.vp-price-ttc strong{font-weight:500;color:var(--n)}

/* Bloc prix mode configurateur */
.cpb{
  background:var(--g0);
  border:1px solid var(--g2);
  border-radius:var(--r);
  padding:18px;
  margin-top:auto
}
.cpbl{
  font-size:.7rem;color:var(--g5);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:4px
}
.cpr{display:flex;align-items:baseline;justify-content:space-between}
.cpbig{font-size:2rem;font-weight:700;color:var(--n);line-height:1}
.cpbig.bump{animation:bmp .3s ease}
@keyframes bmp{50%{transform:scale(1.04);color:var(--b)}}
.cptva{font-size:.7rem;color:var(--g4)}
.cpd{
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--g2);
  display:flex;flex-direction:column;gap:4px
}
.cpln{display:flex;justify-content:space-between;font-size:.76rem;color:var(--g5)}
.cplv{color:var(--g9);font-weight:500}

/* Bouton Commander */
.ccta-primary{
  width:100%;padding:14px;
  background:var(--b);color:var(--w);
  border:none;border-radius:8px;
  font-family:'Alexandria',sans-serif;
  font-size:13px;font-weight:500;
  cursor:pointer;
  transition:all .15s;
  letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:8px
}
.ccta-primary:hover{background:var(--bh)}
.ccta-primary:disabled{opacity:.6;cursor:wait}
.ccta-primary svg{stroke:currentColor;flex-shrink:0}
.ccta-primary.ok{background:#1a8a4e}
/* v10.0.0.41 : Commander = seule action primaire (seul bleu plein). On le pose
   en hero : poids accru + ombre portée bleutée pour le détacher des CTA config. */
.ccta-primary{font-weight:600;box-shadow:0 4px 14px rgba(29,44,243,.28)}
.ccta-primary:hover{box-shadow:0 6px 18px rgba(29,44,243,.34);transform:translateY(-1px)}

/* Bouton Commander mode configurateur (.ccta) */
.ccta{
  width:100%;padding:15px;
  background:var(--b);color:var(--w);
  border:none;border-radius:var(--rs);
  font-family:'Alexandria',sans-serif;
  font-size:.84rem;font-weight:600;
  cursor:pointer;transition:all .2s
}
.ccta:hover{background:var(--bh)}
.ccta:disabled{opacity:.6;cursor:wait}
.ccta.ok{background:#1a8a4e}

/* Bouton "Configurateur sur mesure" */
.vp-cta-sec{
  width:100%;
  padding:14px 16px;
  margin-top:10px;
  background:var(--w);
  border:1.5px solid var(--g2);
  border-radius:10px;
  color:var(--n);
  font-family:'Alexandria',sans-serif;
  cursor:pointer;
  display:flex;align-items:center;gap:12px;
  transition:all .2s ease;
  text-align:left
}
.vp-cta-sec:hover{
  border-color:var(--b);
  background:var(--bxl);
  transform:translateY(-1px)
}
.vp-cta-sec-ic{
  flex-shrink:0;width:38px;height:38px;
  background:var(--bxl);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--b);transition:all .2s
}
.vp-cta-sec:hover .vp-cta-sec-ic{background:var(--b);color:var(--w)}
.vp-cta-sec-ic svg{display:block}

.vp-cta-sec-text{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px
}
.vp-cta-sec-text strong{
  font-size:13.5px;font-weight:600;
  color:var(--n);letter-spacing:-.005em;line-height:1.3
}
.vp-cta-sec:hover .vp-cta-sec-text strong{color:var(--b)}
.vp-cta-sec-text small{
  font-size:11.5px;color:var(--g5);font-weight:300;line-height:1.35
}

.vp-cta-sec-arr{
  flex-shrink:0;color:var(--g4);
  transition:all .2s;
  display:flex;align-items:center;justify-content:center
}
.vp-cta-sec:hover .vp-cta-sec-arr{color:var(--b);transform:translateX(3px)}
.vp-cta-sec-arr svg{display:block}

/* Retour a la photo */
.cback{
  display:flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--g5);
  cursor:pointer;padding:4px 0;
  transition:color .2s;
  background:none;border:none;
  font-family:'Alexandria',sans-serif
}
.cback:hover{color:var(--b)}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 13. DELAI & HELP CARD                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

.cfg-delai{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:8px;
  font-size:.82rem;font-weight:500;color:#166534;
  margin-top:10px;margin-bottom:10px
}
.cfg-delai svg{flex-shrink:0;stroke:#166534}

.cfg-help-card{
  display:flex;align-items:flex-start;gap:10px;
  margin:16px 0 0;
  padding:12px 14px;
  background:var(--bxl);
  border-left:3px solid var(--b);
  border-radius:4px;
  font-size:.78rem;color:var(--g9);line-height:1.55
}
.cfg-help-ic{
  flex-shrink:0;color:var(--b);
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:1px
}
.cfg-help-body{display:flex;flex-direction:column;gap:2px}
.cfg-help-body strong{font-weight:600;color:var(--n);font-size:.82rem}
.cfg-help-body span{color:var(--g7);font-size:.78rem}
.cfg-help-link{
  color:var(--b);text-decoration:underline;
  text-underline-offset:2px;font-weight:500;
  transition:color .2s
}
.cfg-help-link:hover{color:var(--bh)}

/* Divider */
.cfg-divider{height:1px;background:var(--g2);margin:12px 0}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 14. SECTIONS FLEXIBLES BAS DE PAGE                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

.vcfg-sections{
  --s-bg:#ffffff;--s-text:#0f0f14;--s-text-muted:#666;
  --s-border:rgba(15,15,20,.08);
  --s-accent:#1D2CF3;--s-accent-soft:#EEF0FF;
  font-family:'Alexandria',sans-serif;color:var(--s-text);
  margin:0;padding:0
}
.vcfg-sec{
  background:var(--s-bg);color:var(--s-text);
  padding:140px 0;position:relative;
  transition:background .3s ease
}
.vcfg-sec-inner{
  max-width:1200px;margin:0 auto;padding:0 48px;
  position:relative;z-index:2
}

/* Scenes */
.vcfg-sec.scene-light{--s-bg:#ffffff;--s-text:#0f0f14;--s-text-muted:#6b6865;--s-border:rgba(15,15,20,.08);--s-accent:#1D2CF3;--s-accent-soft:#EEF0FF}
.vcfg-sec.scene-tone{--s-bg:#F5F3EF;--s-text:#0f0f14;--s-text-muted:#6b6865;--s-border:rgba(15,15,20,.1);--s-accent:#1D2CF3;--s-accent-soft:#EBEBE3}
.vcfg-sec.scene-dark{--s-bg:#0f0f14;--s-text:#ffffff;--s-text-muted:#8a8a92;--s-border:rgba(255,255,255,.1);--s-accent:#5B6BFF;--s-accent-soft:rgba(91,107,255,.15)}
.vcfg-sec.scene-bleu{--s-bg:#1D2CF3;--s-text:#ffffff;--s-text-muted:rgba(255,255,255,.7);--s-border:rgba(255,255,255,.2);--s-accent:#ffffff;--s-accent-soft:rgba(255,255,255,.12)}
.vcfg-sec *{color:inherit}

/* Typography */
.vcfg-sec h2{
  font-size:2.2rem;font-weight:400;color:var(--s-text);
  line-height:1.15;letter-spacing:-.02em;
  margin:0 0 28px 0;
  font-family:'Alexandria',sans-serif;max-width:760px
}
.vcfg-sec p{
  font-size:1rem;line-height:1.75;color:var(--s-text-muted);
  font-weight:300;max-width:560px;margin:0
}
.vcfg-sec .vcfg-eyebrow{
  display:inline-block;
  font-size:.7rem;font-weight:500;
  color:var(--s-accent);
  letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:20px;
  position:relative;padding-left:32px
}
.vcfg-sec .vcfg-eyebrow::before{
  content:'';position:absolute;left:0;top:50%;
  width:22px;height:1px;background:var(--s-accent)
}

/* IMAGE + TEXTE / TEXTE + IMAGE */
.vcfg-it .vcfg-sec-inner,
.vcfg-ti .vcfg-sec-inner{
  display:grid;grid-template-columns:1fr 1fr;
  gap:100px;align-items:center
}
.vcfg-it-img{
  aspect-ratio:1/1;overflow:hidden;
  background:var(--s-accent-soft);position:relative
}
.vcfg-it-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.5s cubic-bezier(.2,.8,.2,1)
}
.vcfg-it:hover .vcfg-it-img img,
.vcfg-ti:hover .vcfg-it-img img{transform:scale(1.04)}
.vcfg-it-body,.vcfg-ti .vcfg-it-body{max-width:480px}

/* FULL-WIDTH IMAGE */
.vcfg-fullwidth{
  padding:180px 0;min-height:560px;
  background-size:cover;background-position:center;
  display:flex;align-items:center;
  position:relative;overflow:hidden
}
.vcfg-fullwidth .vcfg-sec-inner{text-align:center;max-width:900px}
.vcfg-fullwidth h2{
  font-size:3rem;font-weight:300;
  margin:0 auto 28px;letter-spacing:-.025em;line-height:1.1
}
.vcfg-fullwidth p{max-width:640px;margin:0 auto;font-size:1.08rem}
.vcfg-fullwidth .vcfg-eyebrow{margin-bottom:32px}
.vcfg-fw-overlay{
  position:absolute;inset:0;background:#000;z-index:1;
  transition:opacity .3s
}
.vcfg-fullwidth.scene-dark .vcfg-fw-overlay{background:#0f0f14}
.vcfg-fullwidth.scene-bleu .vcfg-fw-overlay{background:#1D2CF3}
.vcfg-fullwidth.scene-tone .vcfg-fw-overlay{background:#F5F3EF}
.vcfg-fullwidth.scene-light .vcfg-fw-overlay{background:#ffffff}

/* CITATION */
.vcfg-quote{padding:140px 0}
.vcfg-quote.has-bg{
  background-size:cover;background-position:center;
  min-height:500px;display:flex;align-items:center
}
.vcfg-quote-overlay{position:absolute;inset:0;background:rgba(15,15,20,.75);z-index:1}
.vcfg-quote .vcfg-sec-inner{text-align:center;max-width:840px}
.vcfg-quote blockquote{
  font-size:2rem;line-height:1.35;font-weight:300;
  margin:0 0 40px;letter-spacing:-.015em;font-style:normal;
  color:var(--s-text);position:relative
}
.vcfg-quote blockquote::before{
  content:'"';display:block;
  font-size:3rem;line-height:.5;
  color:var(--s-accent);
  margin-bottom:32px;
  font-family:Georgia,serif
}
.vcfg-quote cite{
  font-style:normal;
  display:inline-flex;flex-direction:column;gap:6px;align-items:center
}
.vcfg-quote cite strong{font-weight:500;color:var(--s-text);font-size:.88rem;letter-spacing:.04em}
.vcfg-quote cite span{color:var(--s-text-muted);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}

/* CHIFFRES CLES */
.vcfg-stats .vcfg-sec-inner{text-align:left}
.vcfg-stats h2{margin-bottom:72px;text-align:left}
.vcfg-stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:1px solid var(--s-border)
}
.vcfg-stat{
  padding:56px 0 0 0;position:relative;
  border-right:1px solid var(--s-border);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);cursor:default
}
.vcfg-stat:last-child{border-right:none}
.vcfg-stat:hover{transform:translateY(-4px)}
.vcfg-stat:not(:first-child){padding-left:40px}
.vcfg-stat-num{
  font-size:.7rem;font-weight:500;color:var(--s-text-muted);
  letter-spacing:.15em;margin-bottom:24px
}
.vcfg-stat-val{
  font-size:3.2rem;font-weight:200;color:var(--s-text);
  line-height:1;margin-bottom:16px;letter-spacing:-.04em
}
.vcfg-stat-lb{
  font-size:.78rem;color:var(--s-text-muted);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;
  line-height:1.5;max-width:200px
}

/* GUIDE INSTALLATION */
.vcfg-install .vcfg-sec-inner{max-width:860px}
.vcfg-install h2{text-align:left;margin-bottom:56px}
.vcfg-steps{display:flex;flex-direction:column;border-top:1px solid var(--s-border)}
.vcfg-step{
  display:grid;grid-template-columns:100px 1fr;gap:32px;
  padding:40px 0;
  border-bottom:1px solid var(--s-border);
  transition:padding-left .5s cubic-bezier(.2,.8,.2,1)
}
.vcfg-step:hover{padding-left:16px}
.vcfg-step-num{
  font-size:2.2rem;font-weight:200;color:var(--s-accent);
  letter-spacing:-.03em;line-height:1
}
.vcfg-step-body h3{
  font-size:1.1rem;font-weight:500;color:var(--s-text);
  margin:0 0 10px;letter-spacing:-.005em
}
.vcfg-step-body p{
  font-size:.95rem;line-height:1.75;color:var(--s-text-muted);
  font-weight:300;margin:0;max-width:560px
}

/* AVIS CLIENTS */
.vcfg-reviews .vcfg-sec-inner{text-align:center}
.vcfg-rv-header{max-width:680px;margin:0 auto 64px}
.vcfg-rv-header h2{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:16px}
.vcfg-rv-subtitle{font-size:1.02rem;color:var(--s-text-muted);margin:0 auto 28px;max-width:none}
.vcfg-rv-global{
  display:inline-flex;align-items:center;gap:18px;
  padding:14px 28px;
  border:1px solid var(--s-border);border-radius:999px
}
.vcfg-rv-stars{display:flex;gap:3px}
.vcfg-rv-stars .s,.vcfg-rv-card-stars .s{
  color:var(--s-border);font-size:1.05rem;line-height:1;display:inline-block
}
.vcfg-rv-stars .s.full,.vcfg-rv-card-stars .s.full{color:#FFB400}
.vcfg-rv-stars .s.half{
  background:linear-gradient(90deg,#FFB400 50%,var(--s-border) 50%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent
}
.vcfg-rv-score{display:flex;align-items:baseline;gap:3px}
.vcfg-rv-score strong{font-size:1.15rem;font-weight:500;color:var(--s-text)}
.vcfg-rv-score span{font-size:.8rem;color:var(--s-text-muted)}
.vcfg-rv-count{
  font-size:.8rem;color:var(--s-text-muted);
  padding-left:18px;border-left:1px solid var(--s-border)
}
.vcfg-rv-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2px;max-width:1200px;margin:0 auto;text-align:left;
  background:var(--s-border)
}
.vcfg-rv-card{
  padding:40px 32px;background:var(--s-bg);
  position:relative;transition:background .3s ease
}
.vcfg-rv-card:hover{background:var(--s-accent-soft)}
.vcfg-rv-card-stars{display:flex;gap:2px;margin-bottom:20px}
.vcfg-rv-text{
  font-size:.96rem;line-height:1.75;color:var(--s-text);
  font-weight:300;margin:0 0 28px;max-width:none
}
.vcfg-rv-author{
  display:flex;align-items:center;gap:14px;
  padding-top:24px;border-top:1px solid var(--s-border)
}
.vcfg-rv-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--s-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:500;font-size:1rem;text-transform:uppercase
}
.vcfg-rv-meta{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.vcfg-rv-meta strong{font-weight:500;color:var(--s-text);font-size:.9rem}
.vcfg-rv-meta span{font-size:.76rem;color:var(--s-text-muted)}

/* FAQ */
.vcfg-faq .vcfg-sec-inner{max-width:820px}
.vcfg-faq-header{text-align:center;margin-bottom:56px}
.vcfg-faq-header h2{text-align:center;margin:0 auto 12px}
.vcfg-faq-subtitle{font-size:1rem;color:var(--s-text-muted);margin:0 auto;max-width:none}
.vcfg-faq-list{display:flex;flex-direction:column;border-top:1px solid var(--s-border)}
.vcfg-faq-item{
  border-bottom:1px solid var(--s-border);
  transition:padding .3s ease
}
.vcfg-faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:28px 0;cursor:pointer;list-style:none;
  font-family:'Alexandria',sans-serif
}
.vcfg-faq-q::-webkit-details-marker{display:none}
.vcfg-faq-q-text{
  font-size:1.05rem;font-weight:400;color:var(--s-text);
  line-height:1.4;flex:1;letter-spacing:-.005em;
  transition:color .3s
}
.vcfg-faq-item[open] .vcfg-faq-q-text{color:var(--s-accent)}
.vcfg-faq-icon{
  flex-shrink:0;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  color:var(--s-text);
  transition:transform .4s cubic-bezier(.2,.8,.2,1)
}
.vcfg-faq-icon svg{width:18px;height:18px}
.vcfg-faq-item[open] .vcfg-faq-icon{transform:rotate(180deg);color:var(--s-accent)}
.vcfg-faq-a{
  padding:0 0 32px 0;
  font-size:.96rem;line-height:1.75;
  color:var(--s-text-muted);font-weight:300;max-width:720px;
  animation:vcfgFaqOpen .4s ease-out
}
@keyframes vcfgFaqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* INSTALL VIDEO (v9.12.0) — vidéo démo lazy autoplay + bullets + CTA */
.vcfg-iv .vcfg-sec-inner{padding:0 48px}
.vcfg-iv-inner{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:100px;align-items:center
}
.vcfg-iv-media{
  aspect-ratio:4/3;overflow:hidden;
  background:var(--s-accent-soft);
  position:relative;border-radius:4px
}
.vcfg-iv-video{
  width:100%;height:100%;object-fit:cover;
  display:block;background:var(--s-accent-soft)
}
.vcfg-iv-body{max-width:480px}
.vcfg-iv-subtitle{
  font-size:1rem;color:var(--s-text-muted);
  font-weight:300;margin:0 0 32px;max-width:none
}
.vcfg-iv-bullets{
  list-style:none;padding:0;margin:32px 0 0;
  display:flex;flex-direction:column;gap:16px
}
.vcfg-iv-bullet{
  display:flex;align-items:center;gap:14px;
  font-size:.98rem;color:var(--s-text);
  line-height:1.4
}
.vcfg-iv-bullet-icon{
  flex-shrink:0;width:22px;height:22px;
  color:var(--s-accent);
  display:flex;align-items:center;justify-content:center
}
.vcfg-iv-bullet-icon svg{width:22px;height:22px;display:block}
.vcfg-iv-bullet-label{flex:1}
.vcfg-iv-cta{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--s-accent);text-decoration:none;
  font-weight:500;font-size:.95rem;
  padding:14px 0;margin-top:32px;
  border-bottom:1px solid var(--s-accent);
  transition:gap .3s cubic-bezier(.2,.8,.2,1)
}
.vcfg-iv-cta:hover{gap:14px}
.vcfg-iv-cta svg{
  width:16px;height:16px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)
}
.vcfg-iv-cta:hover svg{transform:translateX(4px)}
/* Reduced motion : désactive les transitions hover (le JS gère l'autoplay). */
@media (prefers-reduced-motion: reduce){
  .vcfg-iv-cta,.vcfg-iv-cta svg{transition:none}
  .vcfg-iv-cta:hover{gap:8px}
  .vcfg-iv-cta:hover svg{transform:none}
}

/* COMPARATIF (v9.11.0) — tableau Vitor vs grande surface */
.vcfg-cmp .vcfg-sec-inner{max-width:980px}
.vcfg-cmp-header{text-align:center;margin-bottom:56px}
.vcfg-cmp-header h2{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:12px}
.vcfg-cmp-subtitle{font-size:1rem;color:var(--s-text-muted);margin:0 auto;max-width:none}
.vcfg-cmp-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--s-bg);
  border:1px solid var(--s-border);
  font-size:.96rem
}
/* En-tête : critère + 2 colonnes valeurs. Vitor highlight via accent-soft. */
.vcfg-cmp-table thead th{
  font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  padding:20px 24px;text-align:left;color:var(--s-text);
  border-bottom:1px solid var(--s-border);
  background:transparent;vertical-align:middle
}
.vcfg-cmp-th-criterion{color:var(--s-text-muted) !important}
.vcfg-cmp-th-vitor{
  background:var(--s-accent-soft);
  color:var(--s-accent) !important;
  border-top:2px solid var(--s-accent)
}
.vcfg-cmp-th-concurrent{color:var(--s-text-muted) !important}
.vcfg-cmp-th-label{vertical-align:middle}
/* Icônes header : pastilles 18px alignées avec le label texte. */
.vcfg-cmp-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-right:10px;vertical-align:middle;
  flex-shrink:0
}
.vcfg-cmp-ic svg{width:18px;height:18px;display:block}
.vcfg-cmp-ic-pos{color:var(--s-accent)}
.vcfg-cmp-ic-neg{color:var(--s-text-muted);opacity:.55}

/* Lignes du tableau : critère en label + 2 valeurs. */
.vcfg-cmp-table tbody tr{transition:background .2s ease}
.vcfg-cmp-table tbody tr:hover{background:rgba(0,0,0,.015)}
.vcfg-cmp.scene-dark .vcfg-cmp-table tbody tr:hover,
.vcfg-cmp.scene-bleu .vcfg-cmp-table tbody tr:hover{background:rgba(255,255,255,.04)}
.vcfg-cmp-table tbody th,
.vcfg-cmp-table tbody td{
  padding:18px 24px;
  border-top:1px solid var(--s-border);
  vertical-align:middle;text-align:left
}
.vcfg-cmp-criterion{
  font-weight:500;font-size:.92rem;color:var(--s-text);
  letter-spacing:-.005em;width:34%
}
.vcfg-cmp-cell{
  font-weight:400;font-size:.95rem;color:var(--s-text);
  font-family:'Alexandria',sans-serif;width:33%
}
.vcfg-cmp-cell-vitor{
  background:var(--s-accent-soft);
  color:var(--s-text);font-weight:500
}
.vcfg-cmp-cell-concurrent{color:var(--s-text-muted)}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 15. MOBILE — Une seule media query principale + overrides petits ecrans     */
/* ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px){

  /* Cibles tactiles WCAG 2.5.5 — 44×44 min sur tous les éléments interactifs en mobile (audit 7.1) */
  .cfg-photo-unit-btn,
  .bg-btn,
  .cfg-cadre-swatch,
  .cth{min-height:44px;min-width:44px}
  .cfg-photo-unit-btn{padding:0 14px}
  .vp-tactile{min-height:60px}

  /* ─── LAYOUT PRINCIPAL ─── */
  .cw{grid-template-columns:1fr}

  /* .cv devient un bloc carre sticky
     - aspect-ratio 1/1 pour forcer carre
     - overflow:visible necessaire pour que sticky fonctionne
     - le contenu interne gere son propre overflow */
  .cv{
    position:sticky;
    top:var(--cfg-header-h,0px);
    z-index:50;
    aspect-ratio:1/1;
    height:auto;
    max-height:none;
    min-height:0;
    border-right:none;
    border-bottom:1px solid var(--g2);
    overflow:hidden
  }

  /* .cpv/.crv remplissent .cv */
  .cpv,.crv{
    min-height:0;
    width:100%
  }

  /* v10.0.0.37 : cotes (dimensions) responsive sur mobile. On GARDE le
     positionnement desktop : cote largeur au-dessus, cote hauteur décalée à
     DROITE hors du miroir (affichage voulu, identique au bureau). On réduit
     seulement la typo pour que le badge reste compact et tienne dans le
     conteneur — le miroir mobile scalé laisse la place à droite. Pas de
     repositionnement (le -28px hors miroir est conservé). */
  .cdt{font-size:.6rem;letter-spacing:.04em}
  .cdt span{padding:2px 7px}

  /* Galerie thumbs : mode bas */
  .cths{padding:8px 14px;gap:5px}
  .cth{width:48px;height:48px}

  /* ─── PANEL DROIT ─── */
  .cpan{padding:20px 18px 24px}

  /* Header */
  .vp-breadcrumb{font-size:10.5px;margin-bottom:10px}
  .cbadge{font-size:9.5px;padding:3px 10px;margin-bottom:8px}
  .cttl{font-size:20px;line-height:1.2;margin-bottom:6px}
  .vp-meta{margin:0 0 10px;gap:6px;font-size:11px}
  .vp-meta .vp-sep{display:none}
  .vp-meta .vp-sku{display:block;width:100%;font-size:10.5px}
  .vp-stars{font-size:12px}
  .vp-rating{font-size:11.5px}
  .vp-rating strong{font-size:12px}
  .cdesc{font-size:13px;line-height:1.55;margin:0 0 12px;padding-bottom:12px}

  /* Labels groupes */
  .cfg-group-label{font-size:11px;margin-bottom:8px}
  .cfg-group-hint{font-size:10px}
  .csl{font-size:10.5px;margin-bottom:8px}

  /* Pills */
  .cfg-pills{gap:5px}
  .cfg-pill{padding:8px 12px;font-size:11.5px;gap:6px;min-height:40px}
  .cfg-pill .pr{font-size:10.5px}
  .cfg-pill .kelvin{font-size:9.5px}
  .cfg-pill .pop{font-size:8px;padding:1px 5px;top:-6px}

  /* Bloc sur-mesure */
  .cfg-photo-custom-inline,
  .cfg-cfg-custom-inline{margin-top:10px;padding:12px}
  .cfg-photo-custom-header{margin-bottom:10px;gap:8px}
  .cfg-photo-custom-title{font-size:10.5px;gap:5px}
  .cfg-photo-custom-header .cfg-photo-unit-btn{padding:3px 9px;font-size:10px}
  .cfg-photo-dims{gap:6px}
  .cfg-photo-dim-field label{font-size:10px;margin-bottom:3px}
  .cfg-photo-dim-input{padding:7px 9px}
  .cfg-photo-dim-input input{font-size:16px;font-weight:600} /* 16px = pas de zoom iOS */
  .cfg-photo-dim-unit{font-size:10.5px}
  .cfg-photo-dim-sep{font-size:13px;margin-bottom:8px}
  .cfg-photo-dim-hint{font-size:10px;line-height:1.4}

  /* Tactile */
  .vp-tactile{padding:10px;gap:10px}
  .vp-tactile-left{gap:8px}
  .vp-tactile-ic{width:28px;height:28px}
  .vp-tactile-name{font-size:12px}
  .vp-tactile-desc{font-size:10.5px}
  .vp-tactile-right{gap:8px}
  .vp-tactile-price{font-size:11.5px}

  /* Prix */
  .vp-price-box{padding:14px 16px;margin-top:12px;margin-bottom:10px}
  .vp-price-label{font-size:10.5px}
  .vp-price-amount{font-size:22px}
  .vp-price-tva{font-size:11px}
  .vp-price-ttc{font-size:11px}

  /* Badge delai */
  .cfg-delai{font-size:11px;padding:9px 12px;gap:7px;margin-top:10px;margin-bottom:10px}

  /* Trust badges (3 en ligne sur mobile) */
  .vp-trust{grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 0}
  .vp-trust-item{padding:9px 6px}
  .vp-trust-ic svg{width:14px;height:14px}
  .vp-trust-label{font-size:10px;line-height:1.25}
  .vp-trust-sub{font-size:9px;line-height:1.25}

  /* CTAs */
  .ccta-primary{padding:13px;font-size:13px;min-height:48px}
  .vp-cta-sec{padding:12px;margin-top:10px;gap:10px}
  .vp-cta-sec-ic{width:32px;height:32px}
  .vp-cta-sec-ic svg{width:15px;height:15px}
  .vp-cta-sec-text strong{font-size:12.5px}
  .vp-cta-sec-text small{font-size:10.5px}

  /* Options checklist */
  .cfg-opt-group{padding:10px 0}
  .cfg-opt-group-title{font-size:10px;margin-bottom:4px}
  .cop{padding:12px 6px;gap:10px;min-height:48px}
  .cop .cop-name{font-size:13px;line-height:1.35}
  .cop .cop-check{width:22px;height:22px}
  .cop.on .cop-check::after{top:4px;left:7px}
  .cop .cop-price{font-size:11.5px;min-width:68px}
  .cop .cfg-info-btn{width:20px;height:20px;font-size:11px}

  /* Toggle options avancees */
  .cfg-opt-group-advanced .cfg-opt-group-toggle{padding:14px 12px}
  .cfg-opt-group-icon{width:26px;height:26px}
  .cfg-opt-group-action-label{font-size:11px}

  /* Bloc prix configurateur */
  .cpb{padding:14px}
  .cpbig{font-size:22px}
  .cpbl{font-size:10.5px}
  .cpln{font-size:11px}

  /* Help card */
  .cfg-help-card{padding:10px 12px;font-size:11px;gap:8px}
  .cfg-help-body strong{font-size:11.5px}

  /* Toggle clair/sombre sur mode preview */
  .crv-toggle{top:10px;right:10px;padding:3px}
  .bg-btn{padding:5px 10px;font-size:.65rem}

  /* Sections flexibles bas de page */
  .vcfg-sec{padding:60px 0}
  .vcfg-sec-inner{padding:0 20px}
  .vcfg-sec h2{font-size:1.5rem}
  .vcfg-sec p{font-size:.9rem}
  .vcfg-it .vcfg-sec-inner,
  .vcfg-ti .vcfg-sec-inner{grid-template-columns:1fr;gap:30px}
  .vcfg-ti .vcfg-sec-inner{display:flex;flex-direction:column}
  .vcfg-ti .vcfg-it-img{order:-1}
  .vcfg-fullwidth{padding:100px 0;min-height:400px}
  .vcfg-fullwidth h2{font-size:2rem}
  .vcfg-quote{padding:80px 0}
  .vcfg-quote blockquote{font-size:1.35rem}
  .vcfg-quote blockquote::before{font-size:2.2rem;margin-bottom:20px}
  .vcfg-stats-grid{grid-template-columns:repeat(2,1fr)}
  .vcfg-stat{padding:40px 0;border-right:none;border-bottom:1px solid var(--s-border)}
  .vcfg-stat:not(:first-child){padding-left:0}
  .vcfg-stat:nth-child(odd){border-right:1px solid var(--s-border);padding-right:20px}
  .vcfg-stat:nth-child(even){padding-left:20px}
  .vcfg-stat-val{font-size:2.4rem}
  .vcfg-step{grid-template-columns:60px 1fr;gap:20px;padding:28px 0}
  .vcfg-step:hover{padding-left:0}
  .vcfg-step-num{font-size:1.6rem}
  .vcfg-rv-global{flex-wrap:wrap;gap:10px;padding:12px 20px}
  .vcfg-rv-count{padding-left:0;border-left:none;width:100%;text-align:center}
  .vcfg-rv-grid{grid-template-columns:1fr;gap:1px}
  .vcfg-rv-card{padding:32px 24px}
  .vcfg-faq-q{padding:22px 0;gap:16px}
  .vcfg-faq-q-text{font-size:.98rem}
  .vcfg-faq-a{padding:0 0 24px 0;font-size:.92rem}

  /* INSTALL VIDEO — empilage vertical, vidéo dessus + texte dessous. */
  .vcfg-iv-inner{grid-template-columns:1fr;gap:32px}
  .vcfg-iv-media{aspect-ratio:4/3;max-width:100%}
  .vcfg-iv-body{max-width:none}
  .vcfg-iv-subtitle{font-size:.92rem;margin-bottom:24px}
  .vcfg-iv-bullets{gap:14px;margin-top:24px}
  .vcfg-iv-bullet{font-size:.92rem;gap:12px}
  .vcfg-iv-bullet-icon,.vcfg-iv-bullet-icon svg{width:20px;height:20px}
  .vcfg-iv-cta{margin-top:24px;font-size:.92rem}

  /* COMPARATIF — chaque ligne devient une mini-card empilée :
     critère en titre, 2 colonnes valeurs côte à côte en dessous. */
  .vcfg-cmp-header{margin-bottom:36px}
  .vcfg-cmp-table,
  .vcfg-cmp-table thead,
  .vcfg-cmp-table tbody,
  .vcfg-cmp-table tr,
  .vcfg-cmp-table th,
  .vcfg-cmp-table td{display:block;width:auto}
  .vcfg-cmp-table{border:none;background:transparent}
  /* En mobile : le thead "Critère | Vitor | Concurrent" devient invisible,
     remplacé par les labels intégrés à chaque card via data-col. */
  .vcfg-cmp-table thead{display:none}
  .vcfg-cmp-table tbody tr{
    background:var(--s-bg);
    border:1px solid var(--s-border);
    border-top:2px solid var(--s-accent);
    margin-bottom:14px;padding:18px 18px 6px
  }
  .vcfg-cmp-table tbody tr:hover{background:var(--s-bg)}
  .vcfg-cmp-criterion{
    width:auto;padding:0 0 14px;border:none;
    font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--s-text-muted)
  }
  .vcfg-cmp-cell{
    width:auto;padding:10px 0;border:none;
    display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;
    font-size:.95rem
  }
  .vcfg-cmp-cell::before{
    content:attr(data-col);
    font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
    color:var(--s-text-muted)
  }
  .vcfg-cmp-cell-vitor{background:transparent;color:var(--s-accent);font-weight:500}
  .vcfg-cmp-cell-vitor::before{color:var(--s-accent)}
  .vcfg-cmp-cell-concurrent{
    border-top:1px solid var(--s-border);margin-top:4px;padding-top:14px
  }
}

/* ─── PETIT MOBILE (≤480px) ─── */
@media (max-width: 480px){
  .cpan{padding:16px 14px 22px}
  .cttl{font-size:18px}
  .vp-price-amount{font-size:20px}
  .cfg-pills{gap:4px}
  .cfg-pill{padding:7px 10px;font-size:11px}

  /* Trust badges : 2 cols avec 3e full width */
  .vp-trust{grid-template-columns:1fr 1fr}
  .vp-trust-item:nth-child(3){grid-column:span 2}

  .cfg-photo-dims{gap:5px}
  .cfg-photo-dim-input{padding:6px 8px}
  .cfg-photo-dim-sep{font-size:12px;padding:0 2px}
  .vp-tactile-desc{font-size:10px;line-height:1.25}
  .cop .cop-price{min-width:60px;font-size:11px}
}

/* ─── TRES PETIT MOBILE (≤360px) ─── */
@media (max-width: 360px){
  .cpan{padding:14px 12px 20px}
  .vp-price-amount{font-size:19px}
  .cttl{font-size:17px}
  .vp-tactile-desc{display:none}
  .cfg-group-hint{display:none}
  .vp-trust{grid-template-columns:1fr}
  .vp-trust-item:nth-child(3){grid-column:auto}
  .vp-trust-item{
    flex-direction:row;justify-content:flex-start;text-align:left;
    gap:10px;padding:8px 10px
  }
  .vp-trust-ic{margin-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX v9.1 — Anti-overflow ciblé qui ne casse PAS le sticky                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Règle d'or position:sticky : aucun ancêtre ne doit avoir overflow non-visible */
/* On cible uniquement les containers de contenu interne, pas la racine          */

/* Le panel droit qui defile peut clipper son contenu */
.cpan{
  max-width:100%;
  min-width:0
}

/* Tous les enfants de .cpan ne doivent pas deborder */
.cpan > *{
  max-width:100%;
  min-width:0
}

/* Pills container : flex-wrap empeche deja le debordement */
.cfg-pills{
  max-width:100%
}

/* Bloc sur-mesure : container interne */
.cfg-photo-custom-inline,
.cfg-cfg-custom-inline{
  max-width:100%;
  overflow:hidden  /* OK ici : ce n'est PAS un ancetre de .cv */
}

/* Texte qui peut deborder (titre, description) */
.cttl,
.cdesc,
.vp-meta,
.vp-tactile-name,
.vp-tactile-desc{
  word-wrap:break-word;
  overflow-wrap:break-word
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SVG MIROIR (v9.3) — Forme dynamique via SVG inline                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Le SVG est positionne en couche derriere les autres effets */
/* Il sert de masque pour decouper toutes les couches selon la forme */

.cmr.has-svg{
  /* Le miroir avec SVG : on neutralise le border-radius CSS */
  border-radius:0 !important;
  /* Le halo suit la forme grace au drop-shadow sur le SVG */
}

/* Conteneur SVG : remplit tout le miroir */
.cmr-svg-shape{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* Le halo LED applique au SVG suivra son contour exactement */
  transition:filter .8s ease;
}

/* ─── DÉCOR SABLÉ RÉTRO-ÉCLAIRÉ (v10.0.0-alpha.10) ───────────────────────────
   Superposition d'un SVG sablage (motif décoratif) sur le miroir, rétro-éclairé
   à la couleur LED active. Activé via la classe .has-sablage posée par le
   template quand cfg_sablage_svg est rempli sur le produit.

   Empilement : z-index 7 (au-dessus de .cmr-heating et .cmr-depoli, sous les
   .cmr-buttons z-index 8). Ordre DOM après .cmr-edge → rendu au-dessus à
   z-index égal.

   Couleur : `color: var(--seg-color)` suit la teinte LED (chaud/neutre/froid).
   Le JS force `fill="currentColor"` sur tous les shapes au boot, donc les SVG
   exportés avec un fill hardcodé sont automatiquement re-teintés.

   Glow : double drop-shadow qui suit le contour exact du sablage (et non un
   simple bounding box). Variable `--seg-glow` pour la couleur du halo.
   Animation breath subtile pour évoquer le rétro-éclairage LED vivant. */
.cmr-sablage{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  color:var(--seg-color,#ffeed0);
  filter:
    drop-shadow(0 0 3px var(--seg-glow,rgba(255,238,208,.55)))
    drop-shadow(0 0 6px var(--seg-glow,rgba(255,238,208,.35)));
  transition:color .8s ease,filter .8s ease;
  animation:cfgSablageBreath 3s ease-in-out infinite;
  /* v10.0.0.42 : le motif sablé doit être légèrement EN RETRAIT du bord du
     miroir. Le crop PHP (vcfg_crop_svg_viewbox_to_content) recadre le SVG sur le
     bbox du contenu → il supprime la marge que le motif avait dans l'export.
     Combiné au preserveAspectRatio="none" (.39, étirement rectangle libre), le
     motif venait toucher les bords. On rétablit un retrait UNIFORME et CENTRÉ
     via un léger scale. L'ancien translateX(0.5%) (hack de centrage pour le mode
     meet) est retiré : en mode étiré il poussait le motif vers la droite
     (asymétrie). Ajuster le 0.96 si le retrait doit être plus/moins marqué. */
  transform:scale(0.96);
}
.cmr-sablage svg{
  width:100%;
  height:100%;
  display:block
}
/* Force le fill currentColor : capture le cas où le SVG arrive avec des fills
   inline (style="fill:#000") qui battent l'attribut. Le JS gère aussi
   l'attribut fill="..." pour exporter SVG en svg + currentColor. */
.cmr-sablage svg path,
.cmr-sablage svg circle,
.cmr-sablage svg ellipse,
.cmr-sablage svg rect,
.cmr-sablage svg polygon,
.cmr-sablage svg polyline{
  fill:currentColor
}
/* Breath subtil sur l'intensité du glow (pas sur la couleur). */
@keyframes cfgSablageBreath{
  0%,100%{filter:
    drop-shadow(0 0 3px var(--seg-glow,rgba(255,238,208,.55)))
    drop-shadow(0 0 6px var(--seg-glow,rgba(255,238,208,.35)))}
  50%{filter:
    drop-shadow(0 0 4px var(--seg-glow,rgba(255,238,208,.7)))
    drop-shadow(0 0 8px var(--seg-glow,rgba(255,238,208,.45)))}
}
.cmr-svg-shape svg{
  width:100%;
  height:100%;
  display:block;
}
.cmr-svg-shape svg path,
.cmr-svg-shape svg circle,
.cmr-svg-shape svg ellipse,
.cmr-svg-shape svg rect,
.cmr-svg-shape svg polygon{
  fill:#c8ccd5; /* Couleur de base verre, sera couverte par les couches */
}

/* Decoupe des couches existantes selon la forme du SVG */
/* On utilise mask via une CSS variable injectee par le JS */
.cmr.has-svg .cgl,
.cmr.has-svg .cgw,
.cmr.has-svg .cst{
  /* Override le border-radius : il ne sert plus a rien */
  border-radius:0;
}

.cmr.has-svg .cgl{
  /* Le degrade verre prend la forme via le SVG (ratio preserve) */
  -webkit-mask-image:var(--cfg-shape-mask);
  mask-image:var(--cfg-shape-mask);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}

/* Reflet image (has-reflet) : suit aussi la forme */
.cmr.has-svg .cgl.has-reflet{
  -webkit-mask-image:var(--cfg-shape-mask);
  mask-image:var(--cfg-shape-mask);
}

/* Effet chauffant (v9.7.0) : épouse aussi la silhouette SVG du miroir custom */
.cmr.has-svg .cmr-heating{
  border-radius:0;
  -webkit-mask-image:var(--cfg-shape-mask);
  mask-image:var(--cfg-shape-mask);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}

/* Halo LED : applique au SVG car drop-shadow suit le contour exactement */
.cmr.has-svg[data-led=chaud] .cmr-svg-shape{
  filter:
    drop-shadow(0 0 30px rgba(255, 185, 85, .55))
    drop-shadow(0 0 60px rgba(255, 170, 60, .3))
    drop-shadow(0 0 100px rgba(255, 160, 50, .12));
}
.cmr.has-svg[data-led=neutre] .cmr-svg-shape{
  filter:
    drop-shadow(0 0 30px rgba(255, 235, 210, .5))
    drop-shadow(0 0 60px rgba(255, 230, 200, .25))
    drop-shadow(0 0 100px rgba(255, 225, 195, .1));
}
.cmr.has-svg[data-led=froid] .cmr-svg-shape{
  filter:
    drop-shadow(0 0 30px rgba(200, 220, 255, .55))
    drop-shadow(0 0 60px rgba(190, 215, 255, .3))
    drop-shadow(0 0 100px rgba(180, 210, 255, .12));
}

/* Quand has-svg, on retire les anciens halos box-shadow */
.cmr.has-svg .cgw,
.cmr.has-svg .cst{
  display:none;
}

/* Pareil pour les cotes du verre (border ::before) */
.cmr.has-svg::before,
.cmr.has-svg::after{
  display:none;
}

/* Le cadre RAL doit aussi suivre la forme */
.cmr.has-svg .cmr-cadre{
  -webkit-mask-image:var(--cfg-shape-mask);
  mask-image:var(--cfg-shape-mask);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  border:none;
  background:linear-gradient(135deg,#a0a0a0,#888,#a0a0a0,#7a7a7a,#909090);
  inset:-6px;
}

/* Animation glow douce (pulse) */
@keyframes cfgSvgGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: .92; }
}
.cmr.has-svg[data-led] .cmr-svg-shape{
  animation: cfgSvgGlow 4s ease-in-out infinite;
}

/* SVG forme : ratio natif preserve, centre dans le .cmr */
.cmr.has-svg .cmr-svg-shape{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cmr.has-svg .cmr-svg-shape svg{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}

/* Transition fluide quand les dimensions changent */
.cmr.has-svg{
  transition:width .4s cubic-bezier(.2,.8,.2,1), height .4s cubic-bezier(.2,.8,.2,1);
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESTAURATION (v9.3.5) - Classes oubliees lors de la reecriture v9.0         */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Teintes LED (mode configurateur) ─── */
.cleds{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.clo{
  flex:1;
  min-width:80px;
  padding:12px 8px;
  background:var(--w);
  border:1.5px solid var(--g2);
  border-radius:var(--rs);
  cursor:pointer;
  text-align:center;
  transition:all .2s
}
.clo:hover{border-color:var(--g3);background:var(--g0)}
.clo.on{border-color:var(--b);background:var(--bxl)}
.cld{
  width:24px;
  height:24px;
  border-radius:50%;
  margin:0 auto 6px;
  flex-shrink:0
}
.cld.chaud{background:#FFB347;box-shadow:0 0 8px rgba(255,179,71,.4)}
.cld.neutre{background:#FFD599;box-shadow:0 0 8px rgba(255,213,153,.4)}
.cld.froid{background:#B4C8E8;box-shadow:0 0 8px rgba(180,200,232,.4)}
.cll{
  font-size:.78rem;
  font-weight:500;
  color:var(--g9);
  margin-bottom:2px
}
.clo.on .cll{color:var(--b)}
.clk{
  font-size:.68rem;
  color:var(--g5);
  font-weight:300
}
.clo.on .clk{color:var(--b);opacity:.75}

/* ─── Bouton « Voir les teintes » + popup (v10.0.0.52) ─── */
.csl-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cfg-led-help{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border:1px solid var(--g2);border-radius:999px;
  background:var(--w);color:var(--b);
  font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:none;
  cursor:pointer;transition:all .18s;line-height:1;white-space:nowrap
}
.cfg-led-help svg{width:14px;height:14px;flex-shrink:0}
.cfg-led-help:hover{border-color:var(--b);background:var(--bxl)}
.cfg-led-help--inline{padding:4px 9px;font-size:.7rem}

.cfg-led-modal{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .22s ease
}
/* hidden doit l'emporter sur display:flex (sinon la popup fermée capture les
   clics en plein écran à opacity 0). */
.cfg-led-modal[hidden]{display:none}
.cfg-led-modal.is-open{opacity:1;pointer-events:auto}
.cfg-led-modal__backdrop{
  position:absolute;inset:0;background:rgba(15,15,20,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer
}
.cfg-led-modal__box{
  position:relative;z-index:1;width:100%;max-width:440px;
  background:var(--w);border-radius:var(--r);box-shadow:0 24px 70px rgba(0,0,0,.3);
  padding:22px;transform:translateY(12px) scale(.98);transition:transform .22s ease
}
.cfg-led-modal.is-open .cfg-led-modal__box{transform:none}
.cfg-led-modal__x{
  position:absolute;top:12px;right:12px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:var(--g1);border-radius:50%;color:var(--g7);
  cursor:pointer;transition:all .18s
}
.cfg-led-modal__x svg{width:16px;height:16px}
.cfg-led-modal__x:hover{background:var(--g2);color:var(--n)}
.cfg-led-modal__head{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g7);margin-bottom:14px;padding-right:28px
}
.cfg-led-modal__media{
  aspect-ratio:1/1;width:100%;border-radius:var(--rs);overflow:hidden;
  background:var(--g1)
}
.cfg-led-modal__media img{width:100%;height:100%;object-fit:cover;display:block}
.cfg-led-modal__hint{
  text-align:center;font-size:.78rem;color:var(--g5);margin:14px 0 10px
}
.cfg-led-modal__pills{gap:8px}

@media(max-width:520px){
  .cfg-led-modal__box{padding:18px}
  .cfg-led-modal__pills{flex-wrap:nowrap}
  .cfg-led-modal__pills .clo{min-width:0;padding:10px 4px}
}

/* ─── Specifications produit ─── */
.cspr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--g1);
  font-size:.86rem
}
.cspr:last-child{border-bottom:none}
.cspl{
  color:var(--g7);
  font-weight:400;
  flex-shrink:0
}
.cspv{
  color:var(--n);
  font-weight:500;
  text-align:right
}

/* ─── Mobile ─── */
@media(max-width:900px){
  .cleds{gap:6px}
  .clo{padding:10px 6px;min-width:70px}
  .cld{width:20px;height:20px;margin-bottom:4px}
  .cll{font-size:.72rem}
  .clk{font-size:.62rem}
  .cspr{padding:8px 0;font-size:.82rem;gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MARGES BLOCS (v9.3.6) - Espacement entre options/help/prix                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Note v9.5.1 (audit 5.3) : le patch v9.3.5 antérieur ciblait                 */
/* `.cfg-opt-group-advanced + .cfg-help-card` (adjacence DOM), mais            */
/* `injectHelpCard()` ajoute `.cfg-help-card` comme enfant direct de           */
/* #cfgOptsSection (frère de #cfgOptsGrid, pas de .cfg-opt-group-advanced).    */
/* Les sélecteurs ne matchaient JAMAIS — bloc supprimé. Cibler la vraie        */
/* structure DOM ci-dessous.                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* La section Options (.csec) doit avoir de l'air avant le prix */
.ccc .csec{
  margin-bottom:16px
}

/* L'encart d'aide est INSIDE .copts, donc on lui met une marge bottom */
.cfg-help-card{
  margin-top:14px;
  margin-bottom:14px
}

/* Le bloc prix (frere de .csec) : marge top */
.ccc .cpb{
  margin-top:0;
  margin-bottom:12px
}

/* Le bouton Commander : marge top */
.ccc .ccta{
  margin-top:0
}

/* Toggle Options d'installation : marge top */
.cfg-opt-group-advanced{
  margin-top:12px
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MODE PHOTO - Galerie en overlay (v9.3.6)                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* v10.0.0.35 : galerie de vignettes EN DESSOUS de l'image (layout e-commerce
   classique) au lieu d'un overlay flottant dans l'image. .cpv reste une colonne
   flex : l'image occupe l'espace dispo (flex:1), la galerie suit en flux. */
.cpv{
  position:relative
}

/* .cmi : image principale en flux, au-dessus de la galerie.
   v10.0.0.40 : carré 1:1 fixe (flex:none) au lieu de flex:1. Avant, .cmi
   étirait pour remplir le carré .cv MOINS la galerie de vignettes (passée sous
   l'image en .35) → box paysage → object-fit:cover rognait le haut. Désormais
   l'image est un vrai carré et la galerie suit dessous (cf. règle .cv:has). */
.cpv .cmi{
  position:relative;
  flex:none;
  aspect-ratio:1/1;
  min-height:0
}

/* v10.0.0.40 : en mode photo (#cfgPhotoView visible, pas .off), .cv prend la
   hauteur de son contenu (image carrée + galerie) au lieu de forcer son propre
   carré 1:1 qui écrasait l'image. Le mode configurateur (#cfgPhotoView.off)
   garde le carré pour le stage du miroir. :has → aucun changement JS requis. */
.cv:has(#cfgPhotoView:not(.off)){
  aspect-ratio:auto;
  height:auto;
  max-height:none
}

/* .cths : galerie en flux sous l'image, scroll horizontal si débordement */
.cpv .cths{
  position:static;
  flex-shrink:0;
  display:flex;
  gap:8px;
  padding:12px 16px;
  background:var(--w);
  border-top:1px solid var(--g2);
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch
}
.cpv .cths .cth{
  flex-shrink:0;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s,border-color .2s
}
.cpv .cths .cth:hover{transform:scale(1.05)}
.cpv .cths .cth.on{
  outline:2px solid var(--b);
  outline-offset:1px
}

/* Mobile : ajuster le padding/gap de la galerie */
@media(max-width:900px){
  .cpv .cths{
    padding:8px 12px;
    gap:6px
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MODE PHOTO - Badges en haut a gauche (v9.3.8)                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Badges en HAUT a GAUCHE du carre (separation visuelle avec galerie en bas) */
.cpv .cmi-badges{
  position:absolute;
  top:14px;
  left:14px;
  bottom:auto;
  right:auto;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px
}

/* Chaque badge garde son style mais avec backdrop blur pour lisibilite */
.cpv .cmi-badge{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(0,0,0,.08)
}

/* Mobile : ajuster la taille */
@media(max-width:900px){
  .cpv .cmi-badges{
    top:10px;
    left:10px;
    gap:6px
  }
}

/* ─── SVG STRETCH MODE (v10.0.0.31) ─────────────────────────────────────────
   En mode svgType=free (rectangle libre), le miroir doit pouvoir se déformer
   en largeur indépendamment de la hauteur. Override mask-size:contain → 100% 100%
   pour que le mask CSS s'étire au lieu de garder le ratio. Le SVG silhouette
   visible reçoit preserveAspectRatio="none" via JS (cf. vcfgSetupSvgMask). */
.cmr.has-svg.svg-stretch .cgl,
.cmr.has-svg.svg-stretch .cgl.has-reflet,
.cmr.has-svg.svg-stretch .cmr-heating,
.cmr.has-svg.svg-stretch .cmr-cadre,
.cmr.has-svg.svg-stretch.depoli-fallback-radial .cmr-depoli{
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-position:0 0;
          mask-position:0 0
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CONFIGURATEUR AUTONOME "Créez mon miroir" — design v2 (v10.0.0.47)           */
/* Plein largeur, fond studio neutre, scène centrale + panneau flottant gauche. */
/* Habillage 100% nouveau ; on réutilise seulement le moteur (.crv/.cmr + IDs). */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Section pleine largeur (sort du conteneur de page, garde header/footer). */
.vitor-cfg--scratch{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-radius:0;background:none
}

/* Scène : grand canvas studio (override .crv produit). */
.vitor-cfg--scratch .crv.vs-stage{
  display:block;position:relative;width:100%;
  height:clamp(600px,86vh,900px);
  overflow:hidden;background:none
}
/* v10.0.0.73 : décor STUDIO réaliste (mur + console/sol éclairé + jonction
   adoucie + vignette). Donne de la profondeur et un rendu pro pour présenter le
   miroir. (Le mode « voir dans une vraie pièce » avec photos viendra plus tard.) */
.vitor-cfg--scratch .vs-backdrop{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(115% 70% at 50% 18%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg,#eceef3 0%,#e7e9ef 50%,#e0e3ea 66%)
}
/* Sol / console : plan horizontal éclairé en bas + ombre d'ambiance à la jonction. */
.vitor-cfg--scratch .vs-backdrop::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:30%;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.5) 0%, transparent 60%),
    linear-gradient(180deg,#d8dbe3 0%,#cfd3dc 40%,#c6cad4 100%);
  box-shadow:0 -42px 64px -22px rgba(45,52,70,.13)
}
/* Vignette douce sur les bords pour la profondeur. */
.vitor-cfg--scratch .vs-backdrop::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 34%, transparent 58%, rgba(40,48,66,.17) 100%)
}
/* Fonds image produit neutralisés (mode studio). */
.vitor-cfg--scratch .crv-bg-stack{display:none}
.vitor-cfg--scratch .crv-ambiance{z-index:1;opacity:.5}
.vitor-cfg--scratch .crv-mirror{z-index:3}

/* ── Panneau flottant compact (haut gauche) ── */
.vitor-cfg--scratch .vs-panel{
  position:absolute;top:24px;left:24px;z-index:10;
  width:340px;max-width:calc(100% - 48px);max-height:calc(100% - 48px);
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);
  border-radius:20px;
  box-shadow:0 20px 54px rgba(20,30,60,.18),0 2px 10px rgba(20,30,60,.07)
}
.vitor-cfg--scratch .vs-panel-head{padding:18px 20px 14px;border-bottom:1px solid rgba(20,30,60,.07)}
.vitor-cfg--scratch .vs-panel-title{font-size:18px;font-weight:600;color:var(--n);line-height:1.15}
.vitor-cfg--scratch .vs-panel-sub{font-size:12px;color:var(--g5);margin-top:2px}
.vitor-cfg--scratch .vs-panel-scroll{flex:1;overflow-y:auto;padding:4px 20px;scrollbar-width:thin}
.vitor-cfg--scratch .vs-panel-foot{padding:14px 20px;border-top:1px solid rgba(20,30,60,.07);background:rgba(255,255,255,.45)}

/* Blocs / étapes */
.vitor-cfg--scratch .vs-block{padding:15px 0;border-bottom:1px solid rgba(20,30,60,.06)}
.vitor-cfg--scratch .vs-block:last-child{border-bottom:none}
.vitor-cfg--scratch .vs-block-label{display:flex;align-items:center;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--g7);margin-bottom:11px}
.vitor-cfg--scratch .vs-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--b);color:#fff;font-size:11px;font-weight:600;margin-right:8px;flex-shrink:0}

/* Grille de formes */
.vitor-cfg--scratch .vs-shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.vitor-cfg--scratch .vs-shape{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 5px;border:1.5px solid var(--g2);border-radius:13px;background:#fff;cursor:pointer;font-family:inherit;transition:border-color .15s,transform .15s,background .15s}
.vitor-cfg--scratch .vs-shape:hover{border-color:var(--b);transform:translateY(-1px)}
.vitor-cfg--scratch .vs-shape.on{border-color:var(--b);background:var(--bl);box-shadow:0 0 0 1px var(--b) inset}
.vitor-cfg--scratch .vs-shape-ic{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--g7)}
.vitor-cfg--scratch .vs-shape.on .vs-shape-ic{color:var(--b)}
.vitor-cfg--scratch .vs-shape-ic img,.vitor-cfg--scratch .vs-shape-ic svg{max-width:100%;max-height:100%;width:auto;height:auto}
.vitor-cfg--scratch .vs-shape-nm{font-size:10.5px;color:var(--g7);text-align:center;line-height:1.15}
.vitor-cfg--scratch .vs-empty{font-size:12.5px;color:var(--g5);line-height:1.5}

/* Tailles (override .csz produit) */
.vitor-cfg--scratch .vs-sizes{display:flex;gap:7px;flex-wrap:wrap}
.vitor-cfg--scratch .csz{flex:1 1 84px;padding:9px 8px;border:1.5px solid var(--g2);border-radius:13px;background:#fff;cursor:pointer;text-align:center;transition:border-color .15s,background .15s;position:relative}
.vitor-cfg--scratch .csz:hover{border-color:var(--b)}
.vitor-cfg--scratch .csz.on{border-color:var(--b);background:var(--bl)}
.vitor-cfg--scratch .csz-icon{display:none}
.vitor-cfg--scratch .csz-lb{font-size:13px;font-weight:600;color:var(--n)}
.vitor-cfg--scratch .csz-dm{font-size:10.5px;color:var(--g5)}
.vitor-cfg--scratch .csz-pr{font-size:10.5px;color:var(--b);font-weight:500;margin-top:1px}
.vitor-cfg--scratch .csz-pop{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-size:8px;background:var(--b);color:#fff;padding:1px 6px;border-radius:6px;white-space:nowrap}

/* Sur-mesure (sliders) */
.vitor-cfg--scratch .vs-dims{margin-top:11px}
.vitor-cfg--scratch .vs-dims-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--g5);margin-bottom:8px}
.vitor-cfg--scratch .vs-unit{display:inline-flex;border:1px solid var(--g2);border-radius:8px;overflow:hidden}
.vitor-cfg--scratch .vs-unit-btn{border:none;background:#fff;padding:3px 9px;font-size:11px;cursor:pointer;color:var(--g5);font-family:inherit}
.vitor-cfg--scratch .vs-unit-btn.on{background:var(--b);color:#fff}
.vitor-cfg--scratch .vs-dim-fields{display:flex;gap:10px}
.vitor-cfg--scratch .vs-dim{flex:1;min-width:0}
.vitor-cfg--scratch .vs-dim label{display:block;font-size:11px;color:var(--g5);margin-bottom:4px}
.vitor-cfg--scratch .vs-dim-input{display:flex;align-items:center;border:1.5px solid var(--g2);border-radius:10px;padding:0 9px;background:#fff}
.vitor-cfg--scratch .vs-dim-input input{border:none;outline:none;width:100%;padding:8px 0;font-size:15px;font-weight:600;font-family:inherit;background:none;color:var(--n);-moz-appearance:textfield}
.vitor-cfg--scratch .vs-dim-input input::-webkit-outer-spin-button,
.vitor-cfg--scratch .vs-dim-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vitor-cfg--scratch .vs-dim-unit{font-size:11px;color:var(--g5)}
.vitor-cfg--scratch .vs-slider{width:100%;margin-top:9px;accent-color:var(--b)}
/* Mode 1 input (carré/rond) : masque la hauteur. Ratio : masque le slider hauteur. */
.vitor-cfg--scratch .cfg-photo-dims--single-side .vs-dim[data-dim="height"],
.vitor-cfg--scratch .cfg-photo-dims--single-diam .vs-dim[data-dim="height"]{display:none}
.vitor-cfg--scratch .cfg-photo-dims--ratio-locked .vs-dim[data-dim="height"] .vs-slider{display:none}
.vitor-cfg--scratch .cfg-photo-dims--single-diam .vs-dim[data-dim="width"] label::after{content:" (Ø)"}
.vitor-cfg--scratch .vs-hint{font-size:10.5px;color:var(--g5);margin-top:7px}

/* LED (override .clo produit) */
.vitor-cfg--scratch .vs-leds{display:flex;gap:7px}
.vitor-cfg--scratch .vs-leds .clo{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border:1.5px solid var(--g2);border-radius:13px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;margin:0}
.vitor-cfg--scratch .vs-leds .clo:hover{border-color:var(--b)}
.vitor-cfg--scratch .vs-leds .clo.on{border-color:var(--b);background:var(--bl)}
.vitor-cfg--scratch .vs-leds .cll{font-size:11px;font-weight:500;color:var(--n)}
.vitor-cfg--scratch .vs-leds .clk{font-size:10px;color:var(--g5)}

/* Options : laisse le composant existant, juste l'espacement. */
.vitor-cfg--scratch .vs-opts{display:flex;flex-direction:column;gap:8px}

/* Pied : prix + achat */
.vitor-cfg--scratch .vs-price{display:flex;align-items:baseline;justify-content:space-between}
.vitor-cfg--scratch .vs-price-lbl{font-size:11.5px;color:var(--g5);text-transform:uppercase;letter-spacing:.04em}
.vitor-cfg--scratch .vs-price-val{font-size:25px;font-weight:700;color:var(--n);line-height:1}
.vitor-cfg--scratch .vs-price-val small{font-size:12px;font-weight:500;color:var(--g5);margin-left:3px}
.vitor-cfg--scratch .vs-price-detail{margin:7px 0 0}
.vitor-cfg--scratch .vs-price-detail .cpln{display:flex;justify-content:space-between;font-size:11px;color:var(--g6,#666);padding:1px 0}
.vitor-cfg--scratch .vs-buy{width:100%;margin-top:13px;padding:14px;border:none;border-radius:13px;background:var(--b);color:#fff;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 6px 18px rgba(29,44,243,.3)}
.vitor-cfg--scratch .vs-buy:hover{background:var(--bh);transform:translateY(-1px);box-shadow:0 8px 22px rgba(29,44,243,.36)}
.vitor-cfg--scratch .vs-buy:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.vitor-cfg--scratch .vs-buy.ok{background:#1a8a4e}

/* ── Assistant pas à pas : tête (retour / progression / titre) ── */
.vitor-cfg--scratch .vs-panel-head{display:flex;flex-direction:column;gap:9px}
.vitor-cfg--scratch .vs-back{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;background:none;border:none;padding:0;font-family:inherit;font-size:12px;color:var(--g5);cursor:pointer}
.vitor-cfg--scratch .vs-back:hover{color:var(--b)}
.vitor-cfg--scratch .vs-dots{display:flex;gap:6px}
.vitor-cfg--scratch .vs-dot{width:24px;height:4px;border-radius:2px;background:var(--g2);transition:background .2s,opacity .2s}
.vitor-cfg--scratch .vs-dot.done{background:var(--b);opacity:.45}
.vitor-cfg--scratch .vs-dot.on{background:var(--b);opacity:1}
.vitor-cfg--scratch .vs-progress{font-size:10.5px;color:var(--g5);text-transform:uppercase;letter-spacing:.05em}
.vitor-cfg--scratch .vs-step-title{font-size:18px;font-weight:600;color:var(--n);margin:1px 0 0;line-height:1.2}
.vitor-cfg--scratch .vs-step[hidden]{display:none}
.vitor-cfg--scratch .vs-step{padding:2px 0}

/* Bouton Continuer (pied de l'assistant) */
.vitor-cfg--scratch .vs-next{width:100%;padding:13px;border:none;border-radius:13px;background:var(--b);color:#fff;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,transform .15s}
.vitor-cfg--scratch .vs-next:hover{background:var(--bh);transform:translateY(-1px)}
.vitor-cfg--scratch .vs-next:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ── Récapitulatif (droite) ── */
.vitor-cfg--scratch .vs-recap{
  position:absolute;top:24px;right:24px;z-index:10;
  width:300px;max-width:calc(100% - 48px);max-height:calc(100% - 48px);
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);border-radius:20px;
  box-shadow:0 20px 54px rgba(20,30,60,.18),0 2px 10px rgba(20,30,60,.07)
}
.vitor-cfg--scratch .vs-recap-head{padding:18px 20px 12px;font-size:15px;font-weight:600;color:var(--n);border-bottom:1px solid rgba(20,30,60,.07)}
.vitor-cfg--scratch .vs-recap-list{flex:1;overflow-y:auto;padding:8px 12px}
.vitor-cfg--scratch .vs-recap-row{display:grid;grid-template-columns:1fr auto;gap:1px 10px;width:100%;text-align:left;background:none;border:none;border-radius:10px;padding:9px 10px;font-family:inherit;cursor:pointer;transition:background .15s}
.vitor-cfg--scratch .vs-recap-row:hover{background:var(--bl)}
.vitor-cfg--scratch .vs-recap-row.pending{opacity:.4;cursor:default}
.vitor-cfg--scratch .vs-recap-row.pending:hover{background:none}
.vitor-cfg--scratch .vs-recap-k{grid-column:1;grid-row:1;font-size:10.5px;color:var(--g5);text-transform:uppercase;letter-spacing:.03em}
.vitor-cfg--scratch .vs-recap-v{grid-column:1;grid-row:2;font-size:13.5px;font-weight:500;color:var(--n)}
.vitor-cfg--scratch .vs-recap-edit{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:11px;color:var(--b);opacity:0;transition:opacity .15s}
.vitor-cfg--scratch .vs-recap-row:hover .vs-recap-edit{opacity:1}
.vitor-cfg--scratch .vs-recap-foot{padding:14px 20px;border-top:1px solid rgba(20,30,60,.07);background:rgba(255,255,255,.45)}

/* Mobile : tout en colonne sous la scène. */
@media(max-width:820px){
  .vitor-cfg--scratch .crv.vs-stage{height:46vh;min-height:340px;overflow:visible}
  .vitor-cfg--scratch .vs-backdrop{height:46vh;min-height:340px}
  .vitor-cfg--scratch .vs-panel,
  .vitor-cfg--scratch .vs-recap{
    position:static;top:auto;left:auto;right:auto;bottom:auto;
    width:100%;max-width:100%;max-height:none;
    border-radius:0;box-shadow:none;border:none;border-top:1px solid var(--g2);
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none
  }
  .vitor-cfg--scratch .vs-panel{margin-top:46vh}
  .vitor-cfg--scratch .vs-panel-scroll{overflow:visible}
  .vitor-cfg--scratch .vs-recap-list{overflow:visible}
}

/* Onglets de catégorie de formes (Classiques / Spéciales) */
.vitor-cfg--scratch .vs-cat-tabs{display:flex;gap:6px;margin-bottom:12px}
.vitor-cfg--scratch .vs-cat{flex:1;padding:7px 10px;border:1.5px solid var(--g2);border-radius:10px;background:#fff;font-family:inherit;font-size:12px;font-weight:500;color:var(--g6,#666);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.vitor-cfg--scratch .vs-cat:hover{border-color:var(--b)}
.vitor-cfg--scratch .vs-cat.on{border-color:var(--b);background:var(--b);color:#fff}
.vitor-cfg--scratch .vs-shape[hidden]{display:none}