/* ============================================================================
   LE CISELÉ — Configurateur visuel sur-mesure (thème SOMBRE maison).
   Organisation calquée sur /carte-cadeau/configurer/ : 2 colonnes, choix en
   fieldsets, APERÇU STICKY — mais aperçu placé À GAUCHE.
   100% SCOPÉ sous .lcfg (aucun sélecteur global). Le croquis (trait noir) est
   posé sur un cartouche papier pour rester lisible sur fond sombre.
   ============================================================================ */

.lcfg{
  --lcfg-gold:#c6a664;
  --lcfg-gold-soft:#dfc28a;
  --lcfg-ink:#2c2520;
  --lcfg-paper:#f3ecdb;
  --lcfg-text:#ece5d6;
  --lcfg-muted:rgba(255,255,255,.5);
  --lcfg-line:rgba(198,166,100,.22);
  --lcfg-ui:"Montserrat",system-ui,sans-serif;
  --lcfg-serif:"Cormorant Garamond",Georgia,serif;

  display:block;
  font-family:var(--lcfg-serif);
  margin:0 0 1.8rem;
}
.lcfg *{box-sizing:border-box;}

/* PLEINE LARGEUR : le configurateur SORT du conteneur étroit du formulaire pour
   occuper toute la fenêtre — le rail se loge dans la marge gauche restée vide.
   (negative-margin full-bleed, sans transform → sticky des colonnes préservé.) */
.lcfg-compose{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  /* gouttière gauche RÉDUITE → le rail + la planche utilisent vraiment tout l'espace
     (plus de grande bande noire morte à gauche). */
  padding-left:clamp(14px,1.6vw,30px);
  padding-right:clamp(16px,2.6vw,48px);
}
/* ── CARTOUCHE FLOTTANT (prix + Continuer) : HORS FLUX (position:fixed), bas-droite.
   Il ne prend AUCUNE hauteur à la planche → la planche occupe tout le cadre et reste
   entièrement visible. Pilule luxe sombre, liseré or. ── */
.lcfg-cta-dock{position:fixed;z-index:60;margin:0;right:clamp(16px,2.4vw,40px);bottom:clamp(14px,2.2vh,30px);
  display:flex;align-items:center;gap:1rem;padding:.55rem .6rem .55rem 1.2rem;
  background:rgba(18,15,12,.94);border:1px solid rgba(198,166,100,.42);border-radius:999px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
.lcfg-cta-dock.is-on{opacity:1;transform:none;pointer-events:auto;}
.lcfg-cta-dock .sm-estimate{position:static;margin:0;padding:0;background:none;border:0;box-shadow:none;
  display:flex;align-items:baseline;gap:.55rem;}
.lcfg-cta-dock .sm-estimate-recap,.lcfg-cta-dock .sm-estimate-note{display:none;}
.lcfg-cta-dock .sm-estimate-total{margin:0;padding:0;border:0;display:flex;align-items:baseline;gap:.5rem;}
.lcfg-cta-dock .sm-estimate-total-label{display:inline;font-family:var(--lcfg-ui);font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lcfg-muted);}
.lcfg-cta-dock .sm-estimate-total-val{font-family:var(--lcfg-serif);font-size:1.5rem;line-height:1;
  color:var(--lcfg-gold-soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
.lcfg-continue{appearance:none;cursor:pointer;white-space:nowrap;background:var(--lcfg-gold);
  color:#1a1410;border:0;border-radius:999px;padding:.62rem 1.45rem;font-family:var(--lcfg-ui);
  font-weight:600;font-size:.82rem;letter-spacing:.04em;transition:background .2s,transform .15s;}
.lcfg-continue:hover{background:var(--lcfg-gold-soft);transform:translateY(-1px);}

/* ── Sélecteur d'UNITÉ des cotes (intégré à la planche, coin haut-droit, cartouche
   d'échelle). Sombre-sur-crème pour rester lisible sur le papier. ── */
.lcfg-units{position:absolute;z-index:3;right:clamp(12px,1.6vw,22px);top:clamp(12px,1.6vw,22px);
  display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(60,48,33,.07);border:1px solid rgba(60,48,33,.22);}
.lcfg-unit{appearance:none;cursor:pointer;border:0;background:none;border-radius:999px;
  padding:.18rem .6rem;font-family:var(--lcfg-ui);font-size:.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(60,48,33,.55);transition:background .2s,color .2s;}
.lcfg-unit.is-on{background:var(--lcfg-ink);color:var(--lcfg-paper);}
.lcfg-unit:hover:not(.is-on){color:var(--lcfg-ink);}
/* ── CORPS : aperçu AGRANDI | options ── */
/* 3 colonnes : [rail vertical] [aperçu PRIORITAIRE ~2/3] [options]. Le rail occupe
   l'espace gauche autrefois noir ; l'aperçu garde la part du lion. */
.lcfg-body{display:grid;grid-template-columns:clamp(134px,10vw,186px) minmax(420px,1.82fr) minmax(280px,1fr);
  gap:clamp(18px,2vw,40px);align-items:start;}
.lcfg-col-left{position:sticky;top:calc(var(--header-h,68px) + 12px);align-self:start;
  display:flex;flex-direction:column;gap:1rem;}
.lcfg-col-right{display:flex;flex-direction:column;gap:2rem;min-width:0;padding-bottom:4.5rem;}
/* ════ MOBILE / TABLETTE (<1024px) ════ */
@media (max-width:1023px){
  .lcfg-compose{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 0 5.5rem;}
  .lcfg-body{display:block;}
  /* Mobile : l'aperçu N'EST PLUS sticky (la planche 2-régions serait trop haute en
     bandeau) — il défile en tête, puis les options suivent. Le cartouche prix/Continuer
     devient une BARRE BASSE pleine largeur (cf. .lcfg-cta-dock plus bas). */
  .lcfg-col-left{position:static;z-index:1;padding:.2rem clamp(12px,4vw,22px) 1rem;gap:.55rem;}
  /* la planche n'est PAS à hauteur fixe sur mobile (elle défile) — laissée auto. */
  .lcfg-plate{height:auto;max-height:none;}
  /* cartouche → barre basse pleine largeur, ancrée au bas de l'écran. */
  .lcfg-cta-dock{left:0;right:0;bottom:0;border-radius:0;justify-content:space-between;
    padding:.7rem clamp(14px,4vw,22px);border-left:0;border-right:0;border-bottom:0;
    box-shadow:0 -14px 34px -18px rgba(0,0,0,.8);}
  /* Planche allégée : maille resserrée, légende masquée. */
  .lcfg-plate{padding:12px;background-size:6px 6px,18px 18px,18px 18px,90px 90px,90px 90px;}
  .lcfg-plate-logo{height:clamp(36px,9vw,50px);margin-right:auto;}
  .lcfg-legend{display:none;}
  .lcfg-plate-mark{font-size:54px;}
  /* 2 régions conservées : accessoires petits (≈3 par rangée) en haut, couronne
     PLEINE LARGEUR en bas (toujours imposante). */
  .lcfg-board-top .lcfg-study{flex:0 0 clamp(96px,29%,140px);}
  .lcfg-board-base{grid-template-columns:1fr;}
  .lcfg-col-right{padding:1.3rem clamp(12px,4vw,22px) 0;gap:1.7rem;}
}
/* ════════════════════════════════════════════════════════════════════════
   PLANCHE TECHNIQUE D'ATELIER (couche présentation PURE)
   Papier quadrillé + trame lin, cartouche-titre, filigrane de Maison, timbre
   dateur, sections numérotées, légende des cotes. N'altère JAMAIS la géométrie
   de .lcfg-hat (aspect-ratio / inset / max-height) → moteur de cotes intact.
   ════════════════════════════════════════════════════════════════════════ */
.lcfg-plate{
  position:relative;color:var(--lcfg-ink);
  /* PAPIER RÉGLÉ (façon planche d'atelier de réf.) : crème chaud + fines LIGNES
     HORIZONTALES régulières (plus de quadrillage). */
  background-color:#f4efe1;
  background-image:repeating-linear-gradient(0deg,
    transparent 0 35px, rgba(60,48,33,.085) 35px 36px);
  border:1px solid var(--lcfg-line);border-radius:4px;
  padding:clamp(14px,2vw,26px);overflow:hidden;
  box-shadow:0 20px 50px -28px rgba(0,0,0,.7), inset 0 0 0 1px rgba(198,166,100,.12);
}
/* double filet d'ingénieur (cartouche) */
.lcfg-plate::before{content:"";position:absolute;inset:7px;border:1px solid rgba(198,166,100,.30);
  border-radius:3px;pointer-events:none;z-index:1;}
/* Filigrane discret de Maison, gravé sur le papier (SOUS le croquis). */
.lcfg-plate-mark{position:absolute;top:50%;left:50%;z-index:0;pointer-events:none;user-select:none;
  transform:translate(-50%,-50%) rotate(-18deg);white-space:nowrap;
  font-family:var(--lcfg-serif);font-weight:600;font-size:clamp(58px,13vw,138px);
  color:rgba(60,48,33,.05);letter-spacing:.02em;}
/* Timbre dateur : coin HAUT-DROIT de la planche (absolu). */
.lcfg-stamp{position:absolute;z-index:2;right:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);
  transform:rotate(-3deg);white-space:nowrap;font-family:var(--lcfg-ui);font-size:.56rem;
  letter-spacing:.18em;color:rgba(60,48,33,.5);border:1px solid rgba(60,48,33,.3);
  border-radius:3px;padding:.24rem .48rem;}
/* Logo de Maison dans le COIN HAUT-GAUCHE (1er enfant de la région haute), passé
   en NOIR gravé sur le papier. Les accessoires s'écoulent à sa droite/dessous. */
.lcfg-plate-logo{flex:0 0 auto;align-self:flex-start;height:clamp(40px,4.4vw,62px);width:auto;
  display:block;object-fit:contain;filter:brightness(0);opacity:.9;
  margin:.1rem clamp(14px,2vw,26px) 0 .1rem;}

/* ── PLANCHE = 2 RÉGIONS (gestion d'espace intelligente, anti-piège auto-fit) :
   • EN BAS : la pièce maîtresse (couronne + ses vues) = croquis IMPOSANTS qui
     remplissent la largeur (grille 1fr → 1 plein / 2 côte-à-côte / 3 en ligne).
   • EN HAUT : LOGO (coin gauche) + accessoires (ruban, garniture…) = études PETITES
     à taille fixe qui ne s'étirent jamais et REMPLISSENT l'espace à droite/sous le
     logo. La couronne domine donc toujours, ancrée en bas. ── */
.lcfg-board{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:clamp(14px,2vw,30px);}
/* Région HAUTE — logo (coin gauche) + accessoires : alignés à gauche, ils
   remplissent le bandeau (droite + dessous du logo) et passent à la ligne. Un
   filet sépare ce bandeau de la pièce maîtresse. */
.lcfg-board-top{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;
  gap:clamp(14px,1.8vw,28px);padding-bottom:clamp(12px,1.6vw,22px);
  margin-bottom:clamp(4px,.8vw,12px);border-bottom:1px solid rgba(60,48,33,.20);}
/* Accessoires : ils GRANDISSENT pour remplir l'espace (flex-grow) → imposants quand
   peu nombreux ; bornés [220 → 380px] pour ne pas devenir absurdes ni minuscules ;
   passent à la ligne et se resserrent SEULEMENT quand il y en a beaucoup. */
.lcfg-board-top .lcfg-study{flex:1 1 240px;min-width:200px;max-width:380px;}
/* Région BASE — pièce(s) maîtresse(s), ancrées en bas. PLAFONNÉE : un croquis seul
   ne prend pas toute la largeur (sinon géant) ; centré, imposant mais maîtrisé. */
.lcfg-board-base{display:grid;justify-content:center;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),480px));
  gap:clamp(16px,2vw,34px);}
/* Une étude = entête (N° · titre · filet) + canevas croquis (ratio constant). */
.lcfg-study{margin:0;min-width:0;display:flex;flex-direction:column;gap:.35rem;}
.lcfg-study-head{display:flex;align-items:center;gap:.5rem;}
/* numéro de section SANS cadre (juste le chiffre, façon plan d'atelier). */
.lcfg-study-no{flex:0 0 auto;font-family:var(--lcfg-ui);font-weight:700;font-size:.74rem;letter-spacing:.06em;
  color:rgba(60,48,33,.62);}
.lcfg-study-label{flex:0 1 auto;min-width:0;font-family:var(--lcfg-ui);font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:#a8843f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lcfg-study-rule{flex:1 0 12px;height:1px;background:rgba(60,48,33,.18);}
/* Canevas commun à toutes les études : la grille gère la taille, le ratio reste
   constant ; le croquis est INSET 10%/8% → marge pour tracer les cotes hors objet
   (le moteur de cotes — padX .08 / padY .10 — reste exactement calé). */
.lcfg-study-canvas{position:relative;width:100%;aspect-ratio:1100/600;}
/* compound .lcfg-study-art.sm-card-croquis--tint → bat la spécificité de
   .sm-card-croquis--tint (sinon position:relative + fond crème reprendraient le
   dessus). Fond TRANSPARENT → le quadrillage transparaît, comme le hero. */
/* inset RÉDUIT (4%) → le dessin REMPLIT sa cellule (avant 10%/8% = ~33% de marge morte
   sur CHAQUE croquis). Les cotes débordent dans le gap (overflow:visible). */
.lcfg-study-art.sm-card-croquis--tint{position:absolute;inset:4%;
  background-color:transparent;border-radius:0;}
.lcfg-study-dims{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3;}
/* Légende des symboles de cote. */
.lcfg-legend{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  margin-top:1rem;padding-top:.7rem;border-top:1px solid rgba(60,48,33,.22);
  font-family:var(--lcfg-ui);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(60,48,33,.6);}
.lcfg-legend-item{display:inline-flex;align-items:center;gap:.4rem;}
.lcfg-legend-item svg{width:28px;height:8px;color:rgba(60,48,33,.55);}
.lcfg-legend-end{margin-left:auto;color:#a8843f;}
/* Hero = une étude de la planche (utilise .lcfg-study-canvas pour ratio+taille).
   isolation = OBLIGATOIRE pour les mix-blend-mode de la colorisation. Plus de
   max-height : c'est la grille qui dimensionne, comme toutes les autres études. */
.lcfg-hat{isolation:isolate;}
/* Le croquis est INSET (marge 10%/8%) → il reste de la place tout autour pour
   tracer les cotes DANS LE BLANC (jamais sur l'objet). La couche cotes (.lcfg-dims)
   reste, elle, en inset:0 (pleine boîte) pour dessiner dans cette marge. */
.lcfg-hat .lcfg-lay{position:absolute;inset:4%;}
.lcfg-hat--empty .lcfg-lay{display:none;}   /* rien choisi → toile vierge */
.lcfg-hat .lcfg-fill{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .4s ease;
}
.lcfg-hat .lcfg-lineart{background-position:center;background-repeat:no-repeat;background-size:contain;pointer-events:none;}
/* ── Colorisation par luminance (croquis téléversés) : on garde TOUT le modelé
   crayon + le grain du papier, on n'injecte que la teinte (mix-blend-mode) →
   jamais « plat ». .is-cc bascule de la voie « masque » vers la voie « colorise ». */
.lcfg-hat .lcfg-cc-base,.lcfg-hat .lcfg-cc-tint,.lcfg-hat .lcfg-cc-shade{display:none;}
.lcfg-hat.is-cc .lcfg-fill,.lcfg-hat.is-cc .lcfg-lineart{display:none;}
.lcfg-hat.is-cc .lcfg-cc-base,.lcfg-hat.is-cc .lcfg-cc-tint,.lcfg-hat.is-cc .lcfg-cc-shade{display:block;}
/* Recette : crayon (P) en fond → MULTIPLY couleur (valeur juste : noir→noir,
   crème→clair) → SCREEN du crayon (sheen) pour garder forme/reflet même sur les
   teintes très sombres. Conserve 100% du grain. */
.lcfg-cc-base{background:var(--cc-art) center/contain no-repeat;}
.lcfg-cc-tint{background-color:var(--cc,#9a958c);mix-blend-mode:multiply;
  -webkit-mask:var(--cc-art) center/contain no-repeat;mask:var(--cc-art) center/contain no-repeat;
  -webkit-mask-mode:alpha;mask-mode:alpha;transition:background-color .35s ease;}
.lcfg-cc-shade{background:var(--cc-art) center/contain no-repeat;mix-blend-mode:screen;opacity:.22;}
/* PAGE BLANCHE : aucune couleur choisie → on masque les calques de teinte, il ne
   reste que le croquis crayon neutre (hero ET cartes palette). */
.lcfg-hat.lcfg-hat--neutral .lcfg-cc-tint,.lcfg-hat.lcfg-hat--neutral .lcfg-cc-shade{display:none;}
.sm-card-croquis--tint.is-neutral .cc-tint,.sm-card-croquis--tint.is-neutral .cc-shade{display:none;}

/* ── Cotes façon PLAN D'ATELIER : lignes rejetées dans la marge (jamais sur
   l'objet), lignes d'attache fines, flèches, chiffre net sur le papier. SVG en
   surimpression pleine boîte (overflow visible → déborde proprement dans le cadre). */
.lcfg-dims{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:3;}
/* COTES façon plan technique (réf. Lucas) : trait fin + flèches pleines + chiffre en NOIR
   FRANC, police GROTESQUE (Arial/Helvetica) EXACTEMENT comme la planche de référence. */
.lcfg-dim-line{stroke:#111;stroke-width:1.4;stroke-linecap:butt;}
.lcfg-dim-ext{stroke:#111;stroke-width:1;opacity:.85;}
.lcfg-dim-arrow{fill:#111;}
.lcfg-dim-text{fill:#111;font-family:"Arial","Helvetica Neue",Helvetica,sans-serif;
  font-size:16px;font-weight:600;letter-spacing:0;}

/* (Les vues du modèle ET les pièces choisies sont désormais des .lcfg-study
   injectées dans .lcfg-board — plus de systèmes .lcfg-views / .lcfg-extras séparés.) */

/* ── Colonne choix : fieldsets empilés ───────────────────────────────────── */
.lcfg-choices{display:flex;flex-direction:column;gap:1.4rem;border:0;margin:0;padding:0;}
.lcfg-fs{border:0;margin:0;padding:0;}
.lcfg-fs legend{
  display:block;width:100%;float:none;padding:0 0 .55rem;margin:0 0 .9rem;
  font-family:var(--lcfg-ui);font-weight:600;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lcfg-gold);
  border-bottom:1px solid var(--lcfg-line);
}

/* Grille de couronnes (tuiles) */
.lcfg-crowns{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:.6rem;}
.lcfg-crown{
  appearance:none;cursor:pointer;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:.5rem .4rem .35rem;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  transition:border-color .2s,background .2s,transform .2s;
}
.lcfg-crown-thumb{width:100%;height:52px;background:var(--lcfg-paper);border-radius:3px;
  background-size:contain;background-repeat:no-repeat;background-position:center;}
.lcfg-crown span{font-family:var(--lcfg-ui);font-size:.7rem;color:var(--lcfg-muted);letter-spacing:.02em;}
.lcfg-crown:hover{border-color:rgba(198,166,100,.5);transform:translateY(-2px);}
.lcfg-crown[aria-pressed="true"]{border-color:var(--lcfg-gold);background:rgba(198,166,100,.08);
  box-shadow:0 0 0 1px var(--lcfg-gold);}
.lcfg-crown[aria-pressed="true"] span{color:var(--lcfg-gold-soft);}

/* Pastilles couleur (ruban) */
.lcfg-palette{display:flex;flex-wrap:wrap;gap:.6rem;}
.lcfg-dot{cursor:pointer;width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.15);
  position:relative;transition:transform .15s;padding:0;}
.lcfg-dot:hover{transform:scale(1.1);}
.lcfg-dot[aria-pressed="true"]{border-color:var(--lcfg-gold);box-shadow:0 0 0 2px var(--lcfg-gold);transform:scale(1.08);}
.lcfg-dot[aria-pressed="true"]::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:.85rem;text-shadow:0 1px 2px rgba(0,0,0,.6);}

/* Grille couleurs du feutre (pastille + nom) */
.lcfg-felt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:.9rem .6rem;}
.lcfg-felt-item{appearance:none;cursor:pointer;background:none;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;}
.lcfg-felt-item .lcfg-dot{width:38px;height:38px;}
.lcfg-felt-item small{font-family:var(--lcfg-ui);font-size:.66rem;color:var(--lcfg-muted);line-height:1.25;}
.lcfg-felt-item[aria-pressed="true"] small{color:var(--lcfg-gold-soft);font-weight:600;}
.lcfg-felt-item[aria-pressed="true"] .lcfg-dot{border-color:var(--lcfg-gold);box-shadow:0 0 0 2px var(--lcfg-gold);}

/* ── Cotes réglables (curseurs) — étape « Dimensions » ────────────────────── */
.lcfg-measures-grid{display:flex;flex-direction:column;gap:1.35rem;}
.lcfg-measure{display:flex;flex-direction:column;gap:.4rem;}
.lcfg-measure-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;cursor:pointer;margin:0;}
.lcfg-measure-name{font-family:var(--lcfg-ui);font-size:.8rem;letter-spacing:.04em;color:var(--lcfg-text);}
.lcfg-measure-val{font-family:"Caveat",var(--lcfg-serif),cursive;font-size:1.45rem;color:var(--lcfg-gold-soft);line-height:1;}
.lcfg-measure-desc{font-family:var(--lcfg-ui);font-size:.72rem;color:var(--lcfg-muted);}
.lcfg-measure-scale{display:flex;justify-content:space-between;font-family:var(--lcfg-ui);
  font-size:.62rem;color:var(--lcfg-muted);letter-spacing:.04em;}
.lcfg-measure-range{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;
  background:rgba(255,255,255,.12);cursor:pointer;margin:.25rem 0;}
.lcfg-measure-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--lcfg-gold);border:2px solid #1a1714;box-shadow:0 0 0 1px var(--lcfg-gold);
  cursor:grab;transition:transform .12s;}
.lcfg-measure-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12);}
.lcfg-measure-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--lcfg-gold);
  border:2px solid #1a1714;cursor:grab;}
.lcfg-measure-range::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.12);}
.lcfg-measure-range:focus-visible{outline:2px solid var(--lcfg-gold);outline-offset:4px;}

/* Accessibilité clavier (les boutons portent déjà le focus natif) */
.lcfg button:focus-visible{outline:2px solid var(--lcfg-gold);outline-offset:2px;}

/* ════════════════════════════════════════════════════════════════════════
   WIZARD MAISON-MICHEL : rail d'étapes (gauche) + cartes-croquis (droite)
   ════════════════════════════════════════════════════════════════════════ */
/* Rail de progression — puces fines reliées par un filet (sans numéros). */
.sm-rail{display:flex;flex-direction:column;gap:.1rem;margin:0;padding:.2rem 0;}
.sm-rail-item{position:relative;display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:.6rem .2rem;font-family:var(--lcfg-ui);color:var(--lcfg-muted);transition:color .25s;}
.sm-rail-item::before{content:"";position:absolute;left:5px;top:-.1rem;bottom:-.1rem;width:1px;background:var(--lcfg-line);}
.sm-rail-item:first-child::before{top:50%;} .sm-rail-item:last-child::before{bottom:50%;}
.sm-rail-dot{position:relative;z-index:1;flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  background:#1a1714;border:1px solid var(--lcfg-muted);transition:.25s;}
.sm-rail-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.sm-rail-name{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sm-rail-val{font-family:var(--lcfg-serif);font-size:1.05rem;color:var(--lcfg-gold-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sm-rail-item.is-done{color:rgba(236,229,214,.8);}
.sm-rail-item.is-done .sm-rail-dot{background:var(--lcfg-gold);border-color:var(--lcfg-gold);}
.sm-rail-item.is-current{color:var(--lcfg-text);}
.sm-rail-item.is-current .sm-rail-dot{background:var(--lcfg-gold);border-color:var(--lcfg-gold);box-shadow:0 0 0 4px rgba(198,166,100,.18);}
.sm-rail-item:hover{color:var(--lcfg-text);}
/* RAIL VERTICAL (colonne gauche desktop) : collé, noms ENROULÉS (entièrement lus),
   relié par le filet. Occupe l'espace gauche jadis noir. */
@media (min-width:1024px){
  /* ════ RAIL VERTICAL — STEPPER LUXE (repris de zéro) ════
     Guide visuel PUR (pas de recap) : le client voit où il en est. Puces AÉRÉES reliées
     par un rail qui se REMPLIT d'or à mesure (à-faire = gris / fait = or + coche /
     en cours = or + halo). Détaché de la planche par sa gouttière. */
  .sm-rail--v{position:sticky;top:calc(var(--header-h,68px) + 24px);align-self:start;
    display:flex;flex-direction:column;gap:0;min-width:0;padding:.4rem .8rem .4rem .2rem;
    /* jamais plus haut que l'écran : si beaucoup d'étapes (libellés sur 2 lignes), le rail
       défile en interne au lieu d'être COUPÉ en bas. Barre de défilement masquée. */
    max-height:calc(100dvh - var(--header-h,68px) - 44px);overflow-y:auto;scrollbar-width:none;}
  .sm-rail--v::-webkit-scrollbar{display:none;}
  .sm-rail--v .sm-rail-item{position:relative;display:flex;align-items:flex-start;gap:.85rem;
    width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:0;min-height:3.5rem;}
  /* segment de rail reliant les puces (derrière les puces). */
  .sm-rail--v .sm-rail-item::before{content:"";position:absolute;left:8px;top:1rem;height:100%;
    width:2px;transform:translateX(-50%);background:var(--lcfg-line);z-index:0;transition:background .3s;}
  .sm-rail--v .sm-rail-item:last-child::before{display:none;}
  .sm-rail--v .sm-rail-item.is-done::before{background:var(--lcfg-gold);}
  /* puce */
  .sm-rail--v .sm-rail-dot{position:relative;z-index:1;flex:0 0 auto;width:18px;height:18px;border-radius:50%;
    background:#15110d;border:2px solid var(--lcfg-line);margin-top:.2rem;
    display:flex;align-items:center;justify-content:center;transition:.25s;}
  .sm-rail--v .sm-rail-item.is-done .sm-rail-dot{background:var(--lcfg-gold);border-color:var(--lcfg-gold);}
  .sm-rail--v .sm-rail-item.is-done .sm-rail-dot::after{content:"";display:block;width:4px;height:8px;
    margin-top:-1px;border:solid #1a1410;border-width:0 2px 2px 0;transform:rotate(45deg);}
  .sm-rail--v .sm-rail-item.is-current .sm-rail-dot{background:var(--lcfg-gold);border-color:var(--lcfg-gold);
    box-shadow:0 0 0 4px rgba(198,166,100,.2);}
  /* libellé : entier, lisible, sobre. */
  .sm-rail--v .sm-rail-txt{display:flex;flex-direction:column;min-width:0;padding-top:.2rem;}
  .sm-rail--v .sm-rail-val{display:none;}
  .sm-rail--v .sm-rail-name{white-space:normal;overflow:visible;text-overflow:clip;
    font-family:var(--lcfg-ui);font-size:.63rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    line-height:1.35;color:var(--lcfg-muted);transition:color .25s;}
  .sm-rail--v .sm-rail-item.is-done .sm-rail-name{color:rgba(236,229,214,.82);}
  .sm-rail--v .sm-rail-item.is-current .sm-rail-name{color:var(--lcfg-gold-soft);}
  .sm-rail--v .sm-rail-item:hover .sm-rail-name{color:var(--lcfg-text);}
}
@media (max-width:1023px){
  /* mobile : le rail (désormais en tête du corps) redevient un scroller HORIZONTAL,
     collé sous le header, avec sa propre chrome (il n'est plus dans .lcfg-topbar). */
  .sm-rail{align-items:center;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    gap:1.1rem;width:100%;margin:0;scrollbar-width:none;
    position:sticky;top:var(--header-h,58px);z-index:15;
    background:rgba(14,12,10,.96);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--lcfg-line);padding:.5rem clamp(12px,4vw,22px);}
  .sm-rail::-webkit-scrollbar{display:none;}
  .sm-rail-item{width:auto;flex:0 0 auto;padding:0;gap:.4rem;}
  .sm-rail-item::before{display:none;}
  .sm-rail-dot{width:8px;height:8px;}
  .sm-rail-txt{flex-direction:row;align-items:baseline;gap:.35rem;line-height:1;}
  .sm-rail-name{display:block;font-size:.6rem;letter-spacing:.1em;}
  .sm-rail-val{font-size:.82rem;}
  .sm-rail-item:not(.is-done):not(.is-current) .sm-rail-val{display:none;}
}
/* ════════════════════════════════════════════════════════════════════════
   DESKTOP — PLANCHE « JUSTIFIÉE » (remplir l'espace, zéro letterbox)
   Principe d'un vrai plan d'atelier : chaque dessin garde SON ratio (la cellule
   épouse le dessin → aucune bande vide) et chaque RANGÉE est justifiée (flex-grow
   ∝ ratio → largeurs ∝ ratio, hauteurs égales, la rangée remplit la largeur). La
   hauteur de la planche = celle de son contenu PACKÉ (aucun grand vide). Le
   principal (couronne + vues) = rangée du BAS à grande hauteur-cible ; les
   accessoires = rangées du haut, hauteur-cible moyenne.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  /* PLANCHE À HAUTEUR DE CONTENU : elle grandit avec les croquis (plus de hauteur FIXE
     qui étirait 2-3 éléments dans un grand vide). Bornée par max-height = le cadre
     visible (écran − header − marge) : le JS dimensionne les rangées pour remplir la
     largeur et, si le contenu dépasse, le réduit d'un facteur uniforme → la planche
     reste ENTIÈREMENT visible, sans jamais de bande morte. */
  .lcfg-plate{display:flex;flex-direction:column;height:auto;
    max-height:calc(100dvh - var(--header-h,68px) - 40px);}
  /* Le contenu est ancré en BAS (justify-content:flex-end) → l'espace du bas est
     réservé à la pièce maîtresse ; les accessoires s'incrémentent au-dessus. */
  .lcfg-board{display:flex;flex-direction:column;justify-content:flex-end;
    gap:clamp(10px,1.4vw,22px);
    padding:clamp(6px,0.8vw,12px) clamp(26px,2.6vw,46px) clamp(10px,1.2vw,18px);}
  /* DEUX REGISTRES : accessoires en HAUT, pièce(s) maîtresse(s) + vues en BAS. Chacun =
     rangées justifiées (largeurs posées par le JS) ; centrées → marges propres quand le
     facteur d'échelle réduit les croquis. L'inter-rangée vertical est porté par le
     séparateur .lcfg-rb (row-gap:0) → le JS connaît la hauteur exacte de chaque rangée. */
  .lcfg-board-top,.lcfg-board-base{display:flex;flex-wrap:wrap;justify-content:center;
    align-items:flex-start;overflow:visible;gap:0 clamp(14px,1.6vw,26px);}
  /* BASE = pièces maîtresses TOUJOURS côte à côte (flex-wrap:nowrap → jamais empilées, le
     JS les dimensionne pour tenir) ; gouttière GÉNÉREUSE → les cotes (tracées dans la marge
     de chaque croquis) ne se chevauchent JAMAIS d'une pièce à l'autre. */
  .lcfg-board-base{flex-wrap:nowrap;align-items:flex-end;gap:0 clamp(36px,4vw,84px);}
  .lcfg-board-top:empty{display:none;}                          /* pas d'accessoires → aucune gouttière fantôme */
  /* Verrou de rangée (posé par le JS) : ligne pleine largeur qui force le passage à la
     ligne ET porte l'espacement vertical entre rangées (= ROW_GAP dans le JS). */
  .lcfg-rb{flex:0 0 100%;width:100%;height:30px;margin:0;padding:0;border:0;pointer-events:none;}
  /* filet de sol entre accessoires et pièce maîtresse (seulement s'il y a des accessoires). */
  .lcfg-board-top:not(:empty){border-bottom:1px solid rgba(60,48,33,.18);
    padding-bottom:clamp(8px,1vw,16px);margin-bottom:clamp(4px,.6vw,10px);}
  /* largeur posée en inline par le JS (flex:0 0 Wpx) ; ce fallback évite tout collapse
     avant que le JS ne mesure (basis ∝ ratio). */
  .lcfg-board .lcfg-study{flex:0 0 calc(var(--ar,1.4) * 240px);
    min-width:0;display:flex;flex-direction:column;gap:.22rem;}
  /* cellule = ratio du dessin (var --ar posée par le JS) → AUCUN letterbox. */
  .lcfg-board .lcfg-study-canvas{width:100%;height:auto;min-height:0;aspect-ratio:var(--ar,1.4);}
  .lcfg-board .lcfg-study-head{min-width:0;align-items:baseline;}
  /* LIBELLÉ + NUMÉRO façon RÉFÉRENCE Lucas : police GROTESQUE (Arial/Helvetica), NOIR
     FRANC, droit (pas d'italique), titre de section technique. ⚠️ white-space:normal
     OBLIGATOIRE — sans lui il hérite de `nowrap` → line-clamp mort → texte coupé en
     pleine syllabe. Enroulé sur 2 lignes max + ellipsis au-delà. */
  .lcfg-board .lcfg-study-no{font-family:"Arial","Helvetica Neue",Helvetica,sans-serif;
    font-weight:700;font-size:.95rem;letter-spacing:0;color:#1a1a1a;}
  .lcfg-study-label{font-family:"Arial","Helvetica Neue",Helvetica,sans-serif;
    font-size:.95rem;line-height:1.2;letter-spacing:0;font-weight:600;
    text-transform:none;font-style:normal;color:#1a1a1a;
    white-space:normal;overflow-wrap:break-word;word-break:break-word;hyphens:auto;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .lcfg-board .lcfg-study-rule{display:none;}
}
/* Étapes : ancrage scroll sous le header (plus de numéro). Classe lcfg-step
   pour NE PAS entrer en collision avec le wizard du formulaire (.sm-step). */
.lcfg-step{scroll-margin-top:calc(var(--header-h,68px) + 22px);}
/* Visuels dans les cartes */
.sm-card-croquis{flex:0 0 auto;width:124px;height:84px;border-radius:5px;background-color:#f3ecdb;
  background-size:contain;background-repeat:no-repeat;background-position:center;border:1px solid var(--lcfg-line);}
.sm-card-swatch{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--lcfg-line);}

/* ── Palette par option : croquis COLORISÉ + pastilles sur la carte ──
   Même recette que le hero : crayon en fond → MULTIPLY couleur (valeur juste) →
   SCREEN du crayon (sheen). Noir→noir, crème→clair, grain conservé. */
.sm-card--palette{flex-wrap:wrap;}
.sm-card-croquis--tint{position:relative;isolation:isolate;overflow:hidden;
  background-color:#f3ecdb;background-image:var(--cc-art);
  background-size:contain;background-repeat:no-repeat;background-position:center;}
.sm-card-croquis--tint .cc-tint{position:absolute;inset:0;background-color:var(--cc,#9a958c);
  mix-blend-mode:multiply;
  -webkit-mask:var(--cc-art) center/contain no-repeat;mask:var(--cc-art) center/contain no-repeat;
  -webkit-mask-mode:alpha;mask-mode:alpha;transition:background-color .3s ease;}
.sm-card-croquis--tint .cc-shade{position:absolute;inset:0;
  background:var(--cc-art) center/contain no-repeat;mix-blend-mode:screen;opacity:.22;}
.sm-card-palette{position:relative;flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;padding-left:2px;}
.sm-pal-dot{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);cursor:pointer;padding:0;transition:transform .12s;}
.sm-pal-dot:hover{transform:scale(1.12);}
.sm-pal-dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--lcfg-gold),0 0 0 4px rgba(198,166,100,.25);}
/* Pastille / swatch = vraie matière (photo tissu) : chip texturée. */
.sm-pal-dot--fabric{width:24px;height:24px;background-size:cover;background-position:center;background-repeat:no-repeat;}
.sm-card-swatch--fabric{background-size:cover;background-position:center;background-repeat:no-repeat;border-color:rgba(198,166,100,.5);}

/* Cartouche flottant PARTAGÉ (un seul, posé sur <body> par le JS, position:fixed) :
   aperçu de la matière réelle au survol/focus. Ambiance maison : sombre, liseré or
   discret, serif. Plus grand pour être lisible, mais sobre — jamais grossier. */
.sm-fabric-pop{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,0);
  background:rgba(20,17,14,.98);border:1px solid rgba(198,166,100,.34);border-radius:10px;
  padding:10px 10px 11px;box-shadow:0 22px 60px -22px rgba(0,0,0,.92);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:0;visibility:hidden;transition:opacity .16s ease;
  font-family:"Cormorant Garamond",Georgia,serif;}
.sm-fabric-pop.is-on{opacity:1;visibility:visible;}
.sm-fabric-pop-img{width:200px;height:150px;border-radius:6px;background:#1a1714 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.sm-fabric-pop-name{font-size:1.18rem;letter-spacing:.01em;color:#ece5d6;line-height:1.1;}
.sm-fabric-pop-cap{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-family:"Montserrat",system-ui,sans-serif;color:rgba(198,166,100,.85);}
.sm-fabric-pop-cap:empty{display:none;}
.sm-fabric-pop::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);
  width:11px;height:11px;background:rgba(20,17,14,.98);
  border-right:1px solid rgba(198,166,100,.34);border-bottom:1px solid rgba(198,166,100,.34);}
.sm-fabric-pop.is-below::after{bottom:auto;top:-6px;
  border-right:none;border-bottom:none;border-left:1px solid rgba(198,166,100,.34);border-top:1px solid rgba(198,166,100,.34);}