/* ============================================================
   Configurateur de caissons — front v0.3
   Palette monochrome blanche / gris #a0a0a0, esthétique plan technique.
   Tout scopé sous .ccx-app pour cohabiter avec Divi.
   ============================================================ */

.ccx-app{
  /* --- Palette monochrome --- */
  --paper:#FFFFFF;           /* fond principal */
  --surface:#FAFAFA;         /* fond secondaire (viewer, header) */
  --ink:#1a1a1a;             /* texte principal */
  --ink-soft:#707070;        /* texte secondaire */
  --line:#E5E5E5;            /* bordures fines */
  --line-strong:#a0a0a0;     /* bordures marquées + traits techniques (couleur demandée) */
  --accent:#1a1a1a;          /* accent = noir doux (monochrome radical) */
  --accent-soft:#F0F0F0;     /* sélection : fond gris très clair */
  --accent-ink:#1a1a1a;
  --warn:#8a6a2e;            /* alerte "condition forcée" (ambre discret) */
  --warn-soft:#F5EFE1;
  --alert:#B4341C;           /* erreur hors-plage */
  --alert-soft:#FBEAE4;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  --r:6px;                   /* rayon plus discret pour un look plan technique */

  font-family:'Inter',system-ui,sans-serif; color:var(--ink);
  background:var(--paper); line-height:1.45; font-size:13.5px;

  max-width:1080px; margin:0 auto;
  border-radius:var(--r);
  /* overflow:clip découpe les coins arrondis SANS piéger le position:sticky
     du viewer (contrairement à overflow:hidden). hidden = repli navigateurs anciens. */
  overflow:hidden;
  overflow:clip;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.ccx-app *{box-sizing:border-box; margin:0; padding:0}
.ccx-app button{font:inherit; cursor:pointer; border:none; background:none; color:inherit; line-height:1}
.ccx-app input,.ccx-app select,.ccx-app output{font:inherit}
.ccx-app label{margin:0}
.ccx-app h1,.ccx-app h2,.ccx-app h3,.ccx-app .mono{font-family:'Space Grotesk',sans-serif; line-height:1.2}
.ccx-app .mono-num{font-family:'Space Mono',monospace}
.ccx-app em{font-style:normal; opacity:.55; font-size:.9em; margin-left:2px}

/* ---------- Header ---------- */
.ccx-app .ccx-header{
  padding:16px 22px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  background:var(--surface);
}
.ccx-app .ccx-header h1{font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.ccx-app .ccx-header .tag{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:100px;
  padding:2px 8px; font-weight:500;
}
.ccx-app .ccx-header .sub{font-size:12px; color:var(--ink-soft); margin-left:auto}

/* ---------- Layout ---------- */
.ccx-app .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:0; align-items:start}
.ccx-app .config{padding:18px 22px 40px; min-width:0}
/* --ccx-header-offset = hauteur de l'en-tête fixe du thème (Divi ≈ 54px scrollé),
   utilisé comme dégagement en haut pour le panneau collant. Ajustable par thème. */
.ccx-app{ --ccx-header-offset:70px; }
/* Barre d'administration WordPress (utilisateur connecté) : +32px fixes en haut. */
.admin-bar .ccx-app{ --ccx-header-offset:102px; }

/* .viewer = colonne pleine hauteur : porte le fond + le trait de séparation.
   align-self:stretch donne au panneau collant à l'intérieur la marge pour rester
   collé sur toute la longueur du scroll. */
.ccx-app .viewer{
  align-self:stretch; padding:18px 22px 40px;
  border-left:1px solid var(--line); background:var(--surface);
}
/* Toute la partie droite (aperçu + récap + débit) reste collée sous l'en-tête.
   Limitée à la hauteur visible : si le contenu dépasse, il défile à l'intérieur
   du panneau au lieu de sortir de l'écran. */
.ccx-app .viewer-sticky{
  position:sticky; top:var(--ccx-header-offset);
  max-height:calc(100vh - var(--ccx-header-offset) - 12px);
  overflow:auto;
  /* place pour la barre de défilement interne sans coller au texte */
  scrollbar-gutter:stable;
}
@media(max-width:920px){
  .ccx-app .wrap{grid-template-columns:1fr}
  .ccx-app .viewer{border-left:none; border-top:1px solid var(--line)}
  /* Colonne unique : le panneau repasse dans le flux normal. */
  .ccx-app .viewer-sticky{position:static; max-height:none; overflow:visible}
}

/* ---------- Sections (accordéons via <details>) ---------- */
.ccx-app .section{
  margin-bottom:8px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
}
.ccx-app .section > .head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none; /* retire le triangle par défaut */
  user-select:none;
  position:relative;
}
.ccx-app .section > .head::-webkit-details-marker{display:none}
.ccx-app .section > .head::after{
  content:''; position:absolute; right:14px; top:50%;
  width:8px; height:8px;
  border-right:1.5px solid var(--ink-soft);
  border-bottom:1.5px solid var(--ink-soft);
  transform:translateY(-70%) rotate(-45deg);
  transition:transform .18s ease;
}
.ccx-app .section[open] > .head::after{
  transform:translateY(-30%) rotate(45deg);
}
.ccx-app .section > .head:hover{background:var(--surface)}
.ccx-app .section[open] > .head{border-bottom:1px solid var(--line)}
.ccx-app .section .num{
  font-family:'Space Mono',monospace; font-size:11px; color:var(--ink-soft);
  border:1px solid var(--line); background:var(--paper);
  width:22px; height:22px; display:grid; place-items:center; border-radius:3px; flex:none;
}
.ccx-app .section h2{font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--ink)}
.ccx-app .section > *:not(.head){padding-left:14px; padding-right:14px}
.ccx-app .section > *:not(.head):first-of-type{padding-top:14px}
.ccx-app .section > *:not(.head):last-child{padding-bottom:14px}
.ccx-app .section .hint{font-size:11px; color:var(--ink-soft); margin:0 0 8px 0}

/* Case Plinthe (checkbox inline sous socle) */
.ccx-app .ccx-plinthe{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px; padding:6px 10px;
  border:1px solid var(--line); border-radius:4px; background:#fff;
  cursor:pointer; font-size:12px;
  transition:.12s;
}
.ccx-app .ccx-plinthe:hover{border-color:var(--line-strong)}
.ccx-app .ccx-plinthe input{accent-color:var(--ink); margin:0}
.ccx-app .ccx-plinthe:has(input:checked){border-color:var(--ink); background:var(--accent-soft); font-weight:500}
.ccx-app .ccx-plinthe.hidden{display:none}
.ccx-app .ccx-pieds-size.hidden{display:none}
.ccx-app .ccx-patins-size.hidden{display:none}

/* ---------- Controls ---------- */
.ccx-app .field{margin-bottom:12px}
.ccx-app .field > label{display:block; font-size:11.5px; font-weight:500; color:var(--ink-soft); margin-bottom:5px}
.ccx-app .dims{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.ccx-app .dims .unit{position:relative}
.ccx-app .dims .unit label{display:block; font-family:'Space Mono',monospace; font-size:10.5px; color:var(--ink-soft); margin-bottom:4px}
.ccx-app .dims .unit span{position:absolute; right:9px; top:calc(50% + 8px); transform:translateY(-50%); font-size:10.5px; color:var(--ink-soft); font-family:'Space Mono',monospace; pointer-events:none}
.ccx-app input[type=number]{
  width:100%; font-family:'Space Mono',monospace; font-size:13px;
  padding:7px 28px 7px 10px; border:1px solid var(--line); border-radius:4px;
  background:#fff; color:var(--ink); height:auto; line-height:normal;
  transition:border-color .12s;
}
.ccx-app input[type=number]:hover{border-color:var(--line-strong)}
.ccx-app input[type=number]:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.ccx-app input[type=number].out-of-range{border-color:var(--alert); background:var(--alert-soft)}

.ccx-app .dim-alert{
  display:none; margin-top:8px; padding:7px 10px; font-size:11.5px;
  color:var(--alert); background:var(--alert-soft); border:1px solid var(--alert);
  border-radius:4px;
}
.ccx-app .dim-alert.on{display:block}

/* segmented / pills — plan technique */
.ccx-app .seg{display:flex; flex-wrap:wrap; gap:5px}
.ccx-app .seg label{cursor:pointer; position:relative}
.ccx-app .seg input{position:absolute; opacity:0; pointer-events:none}
.ccx-app .seg span{
  display:block; text-align:center; padding:7px 12px; font-size:12px; font-weight:500;
  border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink);
  transition:.12s; white-space:nowrap;
}
.ccx-app .seg span:hover{border-color:var(--line-strong)}
.ccx-app .seg input:checked + span{border-color:var(--ink); background:var(--accent-soft); color:var(--ink); font-weight:600}
.ccx-app .seg input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.ccx-app .seg input:disabled + span{opacity:.35; cursor:not-allowed; background:var(--surface)}
.ccx-app .seg label.locked span{border-style:dashed}

.ccx-app .chips{display:flex; flex-wrap:wrap; gap:5px}
.ccx-app .chips label{cursor:pointer; position:relative}
.ccx-app .chips input{position:absolute; opacity:0; pointer-events:none}
.ccx-app .chips span{
  display:block; padding:5px 11px; font-size:11.5px; border-radius:100px;
  border:1px solid var(--line); background:#fff; color:var(--ink); transition:.12s;
}
.ccx-app .chips span:hover{border-color:var(--line-strong)}
.ccx-app .chips input:checked + span{border-color:var(--ink); background:var(--ink); color:#fff; font-weight:500}
.ccx-app .chips input:disabled + span{opacity:.3}

.ccx-app .stepper{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#fff}
.ccx-app .stepper button{width:30px; height:32px; font-size:16px; color:var(--ink)}
.ccx-app .stepper button:hover{background:var(--accent-soft)}
.ccx-app .stepper output{width:34px; text-align:center; font-family:'Space Mono',monospace; font-size:13px; color:var(--ink)}

.ccx-app .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ccx-app .subblock{margin-top:10px; padding:11px 12px; border:1px dashed var(--line-strong); border-radius:var(--r); background:var(--surface)}
.ccx-app .subblock.hidden{display:none}
.ccx-app .forced-note{font-size:10.5px; color:var(--warn); background:var(--warn-soft); padding:5px 8px; border-radius:4px; margin-top:7px; display:none}
.ccx-app .forced-note.on{display:block}

/* Sous-catégorie tiroir (nested) */
.ccx-app .ccx-sub-block{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-strong)}
.ccx-app .ccx-sub-block.hidden{display:none}
.ccx-app .ccx-sub-block > label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em}

/* ---------- Section 8 : Joues de finition ---------- */
.ccx-app .ccx-joues-list{display:flex; flex-direction:column; gap:10px}
.ccx-app .ccx-joues-empty{margin-top:6px}
.ccx-app .ccx-joue{padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.ccx-app .ccx-joue.is-active{border-color:var(--line-strong); background:var(--surface)}
.ccx-app .ccx-joue-toggle{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink)}
.ccx-app .ccx-joue-toggle input{accent-color:var(--ink); margin:0}
.ccx-app .ccx-joue-params{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-strong); display:flex; flex-direction:column; gap:10px}
.ccx-app .ccx-joue-params .field{margin-bottom:0}
.ccx-app .ccx-debords{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.ccx-app .ccx-deb{display:flex; flex-direction:column; gap:3px; align-items:center}
.ccx-app .ccx-deb > span{font-size:10px; color:var(--ink-soft); font-family:'Space Mono',monospace}
.ccx-app .ccx-deb input[type=number]{padding:6px 6px; text-align:center}
.ccx-app .ccx-joue-paused{border-style:dashed; background:var(--warn-soft); border-color:var(--warn)}
.ccx-app .ccx-joue-pause-msg{font-size:11px; color:var(--warn)}
.ccx-app .ccx-joue-muted{border-style:dashed; opacity:.6}
.ccx-app .ccx-joue-muted span{font-size:11px; color:var(--ink-soft)}

/* ---------- Vignettes couleur (échantillon matière) ---------- */
.ccx-app .swatches{display:flex; flex-wrap:wrap; gap:10px}
.ccx-app .swatches label{cursor:pointer; position:relative; width:52px}
.ccx-app .swatches input{position:absolute; opacity:0; pointer-events:none}
.ccx-app .swatches .sw{
  width:52px; height:52px;
  border-radius:3px;
  border:1px solid var(--line-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.04), inset 0 -6px 10px rgba(0,0,0,.04);
  transition:.14s; display:block; position:relative;
}
.ccx-app .swatches .sw::after{
  content:''; position:absolute; inset:2px;
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events:none;
}
.ccx-app .swatches input:checked + .sw{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--ink), 0 1px 2px rgba(0,0,0,.04), inset 0 -6px 10px rgba(0,0,0,.04);
}
.ccx-app .swatches input:focus-visible + .sw{outline:2px solid var(--ink); outline-offset:3px}
.ccx-app .swatches .name{
  display:block; font-size:10px; text-align:center; margin-top:5px;
  color:var(--ink-soft); line-height:1.2;
}

/* ---------- Viewer ---------- */
.ccx-app .viewer h2{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); margin-bottom:9px; font-weight:600}
.ccx-app .canvas{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:8px; margin-bottom:16px;
}
.ccx-app .canvas svg{display:block; width:100%; height:auto}

/* Halo noir sur pièce modifiée */
@keyframes ccx-pulse {
  0%   { opacity:0;   stroke-width:2; }
  30%  { opacity:.75; stroke-width:5; }
  100% { opacity:0;   stroke-width:2; }
}
.ccx-app .canvas .ccx-hl{
  fill:none; stroke:var(--ink); stroke-linejoin:round;
  animation:ccx-pulse 1.1s ease-out forwards;
  pointer-events:none;
}
/* Pulsation sur cellule modifiée (débit + récap) */
.ccx-app .debit td.ccx-hl-cell,
.ccx-app .recap dd.ccx-hl-cell{
  border-radius:3px;
  animation:ccx-cell-pulse 1.1s ease-out forwards;
}
@keyframes ccx-cell-pulse {
  0%   { background:transparent; box-shadow:0 0 0 0 var(--accent-soft); }
  25%  { background:var(--accent-soft); box-shadow:0 0 0 3px var(--accent-soft); }
  100% { background:transparent; box-shadow:0 0 0 0 var(--accent-soft); }
}

.ccx-app .recap{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-bottom:16px}
.ccx-app .recap dl{display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:12px}
.ccx-app .recap dt{color:var(--ink-soft)}
.ccx-app .recap dd{text-align:right; font-weight:500; color:var(--ink)}
.ccx-app .recap dd.hi{color:var(--ink); font-family:'Space Mono',monospace}

.ccx-app .debit{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.ccx-app .debit .cap{padding:10px 14px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline}
.ccx-app .debit .cap b{font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--ink); font-weight:600}
.ccx-app .debit .cap small{color:var(--ink-soft); font-size:10.5px; font-family:'Space Mono',monospace}
.ccx-app table{width:100%; border-collapse:collapse; font-size:11.5px; margin:0; background:transparent}
.ccx-app th,.ccx-app td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--line); color:var(--ink); background:transparent}
/* Tableau débit : colonnes auto, chiffres compacts, texte extensible sur Pièce et Chant */
.ccx-app .debit table{table-layout:auto}
.ccx-app .debit th,.ccx-app .debit td{overflow-wrap:break-word; padding:7px 6px; white-space:nowrap}
.ccx-app .debit th:nth-child(2),.ccx-app .debit td:nth-child(2),
.ccx-app .debit th:nth-child(7),.ccx-app .debit td:nth-child(7){white-space:normal; width:auto}
.ccx-app .debit td.n,.ccx-app .debit th.n{text-align:center}
.ccx-app th{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:600}
.ccx-app td.n,.ccx-app th.n{text-align:right; font-family:'Space Mono',monospace}
.ccx-app tbody tr:last-child td{border-bottom:none}
.ccx-app .chant-dot{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:middle; border:1px solid var(--line)}

.ccx-app .wip{font-size:11px; color:var(--warn); background:var(--warn-soft); border:1px dashed var(--warn); border-radius:var(--r); padding:7px 10px}
.ccx-app .foot{margin-top:12px; font-size:10.5px; color:var(--ink-soft)}

/* ---------- Prix + panier ---------- */
.ccx-app .price{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.ccx-app .price .price-lines div{display:flex; justify-content:space-between; gap:12px; font-size:11.5px; color:var(--ink-soft); padding:2px 0}
.ccx-app .price .price-lines b{font-family:'Space Mono',monospace; font-weight:500; color:var(--ink); white-space:nowrap}
.ccx-app .price .price-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px solid var(--line); margin-top:8px; padding-top:10px}
.ccx-app .price .price-lines:empty + .price-total{border-top:none; margin-top:0; padding-top:0}
.ccx-app .price .price-total span{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); font-weight:600}
.ccx-app .price .price-total b{font-family:'Space Mono',monospace; font-size:18px; color:var(--ink); white-space:nowrap}
.ccx-app .cart-row{display:flex; align-items:stretch; gap:8px; margin-top:12px}
.ccx-app .cart-row .qty{display:flex; align-items:center; gap:6px; flex:none}
.ccx-app .cart-row .qty span{font-size:10.5px; color:var(--ink-soft); font-family:'Space Mono',monospace}
.ccx-app .cart-row .qty input{width:64px; padding:7px 10px}
.ccx-app .add-cart{
  flex:1; background:var(--ink); color:#fff; border-radius:4px;
  padding:10px 14px; font-weight:600; font-size:12.5px; letter-spacing:.02em;
  transition:.12s;
}
.ccx-app .add-cart:hover{background:#000}
.ccx-app .add-cart:disabled{opacity:.55; cursor:wait}
.ccx-app .cart-msg{display:none; margin-top:10px; font-size:11.5px; padding:7px 10px; border-radius:4px}
.ccx-app .cart-msg.ok{display:block; border:1px solid var(--ink); background:var(--accent-soft); color:var(--ink)}
.ccx-app .cart-msg.err{display:block; border:1px solid var(--alert); background:var(--alert-soft); color:var(--alert)}
.ccx-app .cart-msg a{color:inherit; font-weight:600}