/* Configurateur AFT — styles neutres, surchargeables par le thème via les variables. */
.aft-cfg{
  --aft-bois:#b0723d; --aft-encre:#241c14; --aft-encre2:#5f5145; --aft-encre3:#8b7c6d;
  --aft-creme:#fbf7f1; --aft-ligne:#e6dbcb; --aft-blanc:#fff; --aft-radius:14px;
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(320px,.58fr);
  gap:clamp(16px,2.2vw,32px);color:var(--aft-encre);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.aft-cfg *{box-sizing:border-box}
.aft-cfg__viewer{position:relative;background:#fbf6ee;border:1px solid var(--aft-ligne);
  border-radius:var(--aft-radius);overflow:hidden;aspect-ratio:1/.9;min-height:400px}
.aft-cfg__viewer canvas{display:block;width:100%;height:100%}
.aft-cfg__vtop{position:absolute;left:16px;top:14px;right:16px;display:flex;
  justify-content:space-between;gap:12px;pointer-events:none;font-size:12.5px;color:var(--aft-encre3)}
.aft-cfg__vtop b{color:var(--aft-encre)}
.aft-cfg__vbot{position:absolute;left:16px;bottom:14px;display:flex;gap:9px}
.aft-pill{background:rgba(255,255,255,.92);border:1px solid var(--aft-ligne);border-radius:999px;
  padding:8px 15px;font:inherit;font-size:12.5px;color:var(--aft-encre2);cursor:pointer}
.aft-pill:hover{border-color:var(--aft-bois);color:var(--aft-encre)}

.aft-cfg__panel{background:var(--aft-blanc);border:1px solid var(--aft-ligne);
  border-radius:var(--aft-radius);display:flex;flex-direction:column;align-self:start;margin:0}
.aft-cfg__scroll{padding:2px 22px 6px}
.aft-grp{padding:14px 0;border-bottom:1px solid var(--aft-ligne)}
.aft-grp:last-child{border-bottom:0}
.aft-grp--vedette{margin:10px -14px;padding:14px;border:1px solid var(--aft-accent,#a9703f);border-radius:10px;background:rgba(169,112,63,.05)}
.aft-grp--vedette>.aft-lbl{color:var(--aft-accent,#a9703f)}
.aft-lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--aft-encre3);margin-bottom:10px}
.aft-lbl span{letter-spacing:0;text-transform:none;font-size:13px;color:var(--aft-encre);
  font-variant-numeric:tabular-nums}
.aft-seg{display:flex;gap:6px}
.aft-seg button{flex:1;padding:9px 4px;background:var(--aft-creme);border:1px solid var(--aft-ligne);
  color:var(--aft-encre2);border-radius:8px;cursor:pointer;font:inherit;font-size:13.5px;transition:.12s}
.aft-seg button:hover{border-color:var(--aft-bois)}
.aft-seg button.on{background:var(--aft-encre);border-color:var(--aft-encre);color:var(--aft-creme);font-weight:600}
.aft-mod{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.aft-mod__n{width:58px;font-size:12px;color:var(--aft-encre3)}
.aft-mod .aft-seg{flex:1}
/* Hauteurs standardisées : 8 à 10 valeurs, donc une grille et non une rangée. */
.aft-seg--h{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:6px}
.aft-seg--h button{flex:none;font-variant-numeric:tabular-nums;font-size:13px;padding:9px 2px}
.aft-cfg input[type=range]{width:100%;accent-color:var(--aft-bois)}
.aft-sw{display:flex;gap:8px}
.aft-sw button{flex:1;display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--aft-creme);
  border:1px solid var(--aft-ligne);border-radius:8px;color:var(--aft-encre2);cursor:pointer;
  font:inherit;font-size:13.5px}
.aft-sw button.on{border-color:var(--aft-encre);color:var(--aft-encre);font-weight:600}
.aft-sw i{width:19px;height:19px;border-radius:5px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

.aft-cfg__foot{border-top:1px solid var(--aft-ligne);padding:16px 22px 20px;background:var(--aft-creme);
  border-radius:0 0 13px 13px}
.aft-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--aft-encre3);
  margin-bottom:4px;font-variant-numeric:tabular-nums}
.aft-row b{color:var(--aft-encre2);font-weight:500}
.aft-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;
  padding-top:11px;border-top:1px solid var(--aft-ligne)}
.aft-tot__l{font-size:12.5px;color:var(--aft-encre3)}
.aft-tot__v{font-size:29px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aft-add{width:100%;margin-top:13px;padding:14px;background:var(--aft-bois);border:0;border-radius:9px;
  color:#fff;font:inherit;font-weight:600;font-size:15.5px;cursor:pointer}
.aft-add:hover{background:#9c6231}
.aft-add[disabled]{opacity:.45;cursor:not-allowed}
.aft-note{margin:11px 0 0;font-size:12.5px;color:var(--aft-encre3)}
.aft-erreur{margin:9px 0 0;font-size:13px;color:#8a2020}

@media(max-width:1080px){
  .aft-cfg{grid-template-columns:1fr}
  .aft-cfg__viewer{aspect-ratio:4/3.2;min-height:0}
}
.aft-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--aft-encre3);
  margin-top:3px;font-variant-numeric:tabular-nums}

/* Mention explicite : l'aperçu est un schéma, jamais une photographie du meuble livré. */
.aft-schema{
  align-self:center;font-size:11.5px;line-height:1.35;color:var(--aft-encre3);
  background:rgba(255,255,255,.86);border-radius:8px;padding:5px 10px;
  max-width:260px;
}
@media(max-width:640px){ .aft-schema{display:none} }

/*
 * Écrans larges : le panneau de réglages garde une largeur fixe, le visuel prend le reste.
 * Le visuel est collant — la liste des hauteurs est longue, et on veut voir le meuble
 * changer pendant qu'on la parcourt, pas devoir remonter à chaque clic.
 */
@media(min-width:1100px){
  .aft-cfg{grid-template-columns:minmax(0,1fr) 420px;align-items:start}
  .aft-cfg__viewer{aspect-ratio:1/.82;min-height:0;position:sticky;top:18px}
}

/* Aide sous un groupe de réglages : le délai dépend de la finition choisie. */
.aft-aide{
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #8b7c6d;
}

/* Confirmation d'ajout au panier. */
.aft-ok{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 0 0 18px; padding: 15px 18px;
  background: #fff; border: 1px solid #e6dbcb; border-left: 3px solid #b0723d;
  border-radius: 10px; font-size: 15px; color: #241c14;
}
.aft-ok__voir{
  background: #b0723d; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600;
}
.aft-ok__voir:hover{ background: #9c6231; color: #fff; }
.aft-ok__ou{ font-size: 13.5px; color: #8b7c6d; }

/* Finition affichee mais momentanement non commandable. */
.aft-sw button.indispo{ opacity:.55; }
.aft-sw button.indispo::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top right, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%); opacity:.45; pointer-events:none; }
.aft-sw button{ position:relative; }

/* ---------- extensions ---------- */
.aft-ext{ border:1px solid rgba(58,44,33,.14); border-radius:10px; padding:12px 12px 10px; margin-bottom:10px; background:rgba(255,252,246,.7); }
.aft-ext__tete{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.aft-ext__tete b{ font-size:.94rem; }
.aft-ext__prix{ margin-left:auto; font-size:.82rem; color:#7b6a5a; white-space:nowrap; }
.aft-ext__x{ appearance:none; border:0; background:transparent; cursor:pointer; font-size:1.15rem; line-height:1; color:#9a8878; padding:0 2px; }
.aft-ext__x:hover{ color:#8a3b21; }
.aft-ext__x--mini{ font-size:1rem; align-self:center; }
.aft-ext__ligne{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.aft-ext__lbl{ font-size:.78rem; color:#7b6a5a; min-width:104px; }
.aft-ext__ligne .aft-seg{ flex:1 1 auto; }
.aft-ext__barre{ display:flex; gap:8px; flex-wrap:wrap; }
.aft-ext__ajout{ appearance:none; cursor:pointer; border:1px dashed rgba(58,44,33,.3); background:transparent; border-radius:8px; padding:8px 12px; font:inherit; font-size:.84rem; color:#5a4a3a; }
.aft-ext__ajout:hover:not(:disabled){ border-color:#b5742f; color:#8a5320; }
.aft-ext__ajout:disabled{ opacity:.45; cursor:not-allowed; }
.aft-ext .aft-ext__ajout{ margin-top:2px; }