/* ==========================================================================
   COFEL — Button Theme propre
   Version consolidée noir / blanc / gris
   Remplace l'ancien empilement de correctifs dans /styles/cofel-button-theme.css

   Principe :
   - aucune teinte violette
   - boutons sobres glass noir / blanc / gris
   - rouge discret uniquement pour les actions dangereuses
   - règles spécifiques conservées : Totems, Supports SR, Lettres boîtiers, Lettres alu/alu-PVC
   ========================================================================== */


/* ==========================================================================
   1. Variables locales
   ========================================================================== */

:root{
  --cofel-ui-white:#ffffff;
  --cofel-ui-bg:#050506;
  --cofel-ui-bg-2:#111116;

  --cofel-ui-text:#ffffff;
  --cofel-ui-muted:rgba(255,255,255,.62);
  --cofel-ui-soft:rgba(255,255,255,.42);

  --cofel-ui-border:rgba(255,255,255,.16);
  --cofel-ui-border-strong:rgba(255,255,255,.30);

  --cofel-ui-surface:rgba(255,255,255,.055);
  --cofel-ui-surface-2:rgba(255,255,255,.085);
  --cofel-ui-surface-3:rgba(255,255,255,.12);

  --cofel-ui-shadow:0 12px 28px rgba(0,0,0,.30);
  --cofel-ui-shadow-strong:0 18px 42px rgba(0,0,0,.38);

  --cofel-ui-danger-bg:rgba(255,107,107,.11);
  --cofel-ui-danger-bg-hover:rgba(255,107,107,.18);
  --cofel-ui-danger-border:rgba(255,107,107,.40);
  --cofel-ui-danger-text:#ffe3e3;

  --cofel-ui-radius:18px;
  --cofel-ui-pill:999px;
}


/* ==========================================================================
   2. Boutons globaux — base commune
   ========================================================================== */

.cofel-btn,
.btn,
.btn-pill,
.btn-link,
.btn-view,
.btn-reopen,
.btn-row,
.btn-modal,
.btn-nav,
.cofel-fab,
.ral-btn,
.ral-close,
.ral-tab,
.ral-chip,
.massif-close,
.back,
.back-btn,
.btn-back,
.retour,
.retour-btn,
.btn-retour,
a.cofel-back,
.configurateur button,
.configurator button,
.page-configurateur button,
.wrap button,
.panel button,
.card button,
.actions button,
.action button,
.form-actions button,
.result-actions button,
.recap-actions button,
.recap button,
.summary button,
#recap button,
#result button,
#resultat button,
#resume button,
#panier button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  min-height:38px !important;
  padding:9px 14px !important;

  border-radius:var(--cofel-ui-pill) !important;
  border:1px solid var(--cofel-ui-border) !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.125), rgba(255,255,255,.055)) !important;

  color:var(--cofel-ui-text) !important;

  font-family:inherit !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;

  text-decoration:none !important;
  white-space:nowrap !important;
  cursor:pointer !important;

  box-shadow:
    var(--cofel-ui-shadow),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    opacity .16s ease !important;
}

.cofel-btn:hover,
.btn:hover,
.btn-pill:hover,
.btn-link:hover,
.btn-view:hover,
.btn-reopen:hover,
.btn-row:hover,
.btn-modal:hover,
.btn-nav:hover,
.cofel-fab:hover,
.ral-btn:hover,
.ral-close:hover,
.ral-tab:hover,
.ral-chip:hover,
.massif-close:hover,
.back:hover,
.back-btn:hover,
.btn-back:hover,
.retour:hover,
.retour-btn:hover,
.btn-retour:hover,
a.cofel-back:hover,
.configurateur button:hover,
.configurator button:hover,
.page-configurateur button:hover,
.wrap button:hover,
.panel button:hover,
.card button:hover,
.actions button:hover,
.action button:hover,
.form-actions button:hover,
.result-actions button:hover,
.recap-actions button:hover,
.recap button:hover,
.summary button:hover,
#recap button:hover,
#result button:hover,
#resultat button:hover,
#resume button:hover,
#panier button:hover{
  transform:translateY(-1px);
  border-color:var(--cofel-ui-border-strong) !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.24), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.075)) !important;

  box-shadow:
    var(--cofel-ui-shadow-strong),
    inset 0 1px 0 rgba(255,255,255,.12) !important;

  opacity:1 !important;
}

.cofel-btn:active,
.btn:active,
.btn-pill:active,
.btn-link:active,
.btn-view:active,
.btn-reopen:active,
.btn-row:active,
.btn-modal:active,
.btn-nav:active,
.cofel-fab:active,
.ral-btn:active,
.ral-close:active,
.ral-tab:active,
.ral-chip:active,
.massif-close:active,
.back:active,
.back-btn:active,
.btn-back:active,
.retour:active,
.retour-btn:active,
.btn-retour:active,
a.cofel-back:active{
  transform:translateY(1px);
  box-shadow:
    0 7px 18px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.cofel-btn:disabled,
.cofel-btn[disabled],
.btn:disabled,
.btn[disabled],
.btn-nav:disabled,
.btn-reopen:disabled,
.btn-reopen[disabled],
.cofel-fab:disabled,
.ral-btn:disabled,
button:disabled,
button[disabled]{
  opacity:.42 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
}


/* ==========================================================================
   3. Variantes de boutons
   ========================================================================== */

/* Secondaire / ghost */
.cofel-btn-secondary,
.btn-secondary,
.btn-ghost,
.ghost,
.secondary,
.btn-row-secondary,
.btn-cancel,
#btnReset{
  background:rgba(255,255,255,.055) !important;
  color:var(--cofel-ui-text) !important;
  border-color:rgba(255,255,255,.15) !important;
  box-shadow:none !important;
}

.cofel-btn-secondary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.ghost:hover,
.secondary:hover,
.btn-row-secondary:hover,
.btn-cancel:hover,
#btnReset:hover{
  background:rgba(255,255,255,.095) !important;
  border-color:rgba(255,255,255,.26) !important;
}

/* Principal : ajouter / calculer / valider, sans violet */
.cofel-fab,
#btnAddDevis,
#btnAjouterDevis,
#btnAjoutDevis,
#btnCalculer,
#btnValider,
#btnSubmit,
#addToDevisBtn,
button[id*="add"],
button[id*="ajout"],
button[id*="devis"],
button[id*="calcul"],
button[id*="valider"],
button[class*="add"],
button[class*="ajout"],
button[class*="devis"],
button[class*="calcul"],
button[class*="valider"],
.add-to-quote,
.ajouter-devis,
.btn-add,
.btn-ajout,
.btn-calculate,
.btn-calc,
.btn-submit,
.btn-primary{
  min-height:42px !important;
  padding:11px 16px !important;

  border:1px solid rgba(255,255,255,.26) !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.20), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.065)) !important;

  color:#ffffff !important;

  box-shadow:
    0 13px 30px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.cofel-fab:hover,
#btnAddDevis:hover,
#btnAjouterDevis:hover,
#btnAjoutDevis:hover,
#btnCalculer:hover,
#btnValider:hover,
#btnSubmit:hover,
#addToDevisBtn:hover,
button[id*="add"]:hover,
button[id*="ajout"]:hover,
button[id*="devis"]:hover,
button[id*="calcul"]:hover,
button[id*="valider"]:hover,
button[class*="add"]:hover,
button[class*="ajout"]:hover,
button[class*="devis"]:hover,
button[class*="calcul"]:hover,
button[class*="valider"]:hover,
.add-to-quote:hover,
.ajouter-devis:hover,
.btn-add:hover,
.btn-ajout:hover,
.btn-calculate:hover,
.btn-calc:hover,
.btn-submit:hover,
.btn-primary:hover{
  border-color:rgba(255,255,255,.40) !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.28), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.09)) !important;

  box-shadow:
    0 17px 36px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Danger : suppression / vider / reset destructif */
.cofel-btn-danger,
.btn-danger,
.btn-row-delete,
.btn-del,
.btn-delete,
.btn-remove,
.btn-suppr,
.btn-clear,
.btn-reset,
#resetBtn,
button[id*="delete"],
button[id*="remove"],
button[id*="suppr"],
button[id*="vider"],
button[class*="delete"],
button[class*="remove"],
button[class*="suppr"],
button[class*="vider"]{
  background:var(--cofel-ui-danger-bg) !important;
  color:var(--cofel-ui-danger-text) !important;
  border-color:var(--cofel-ui-danger-border) !important;
  box-shadow:none !important;
}

.cofel-btn-danger:hover,
.btn-danger:hover,
.btn-row-delete:hover,
.btn-del:hover,
.btn-delete:hover,
.btn-remove:hover,
.btn-suppr:hover,
.btn-clear:hover,
.btn-reset:hover,
#resetBtn:hover,
button[id*="delete"]:hover,
button[id*="remove"]:hover,
button[id*="suppr"]:hover,
button[id*="vider"]:hover,
button[class*="delete"]:hover,
button[class*="remove"]:hover,
button[class*="suppr"]:hover,
button[class*="vider"]:hover{
  background:var(--cofel-ui-danger-bg-hover) !important;
  border-color:rgba(255,107,107,.55) !important;
}

/* Petits boutons tableaux */
.cofel-btn-sm,
.btn-sm,
.btn-row,
.btn-view,
.btn-reopen,
.btn-qty,
.btn-edit,
.btn-del,
.btn-up,
.btn-down,
table button,
.table button,
tbody button,
tr button{
  min-height:30px !important;
  padding:6px 10px !important;
  font-size:12px !important;
  box-shadow:none !important;
}

.cofel-btn-icon,
.btn-up,
.btn-down{
  width:32px !important;
  min-width:32px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}


/* ==========================================================================
   4. Champs, menus, labels
   ========================================================================== */

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]),
select,
textarea{
  min-height:40px !important;
  padding:10px 12px !important;

  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.16) !important;

  background:rgba(255,255,255,.065) !important;
  color:#ffffff !important;

  font-family:inherit !important;
  font-size:14px !important;
  font-weight:650 !important;

  outline:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):hover,
select:hover,
textarea:hover{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.24) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):focus,
select:focus,
textarea:focus{
  background:rgba(255,255,255,.105) !important;
  border-color:rgba(255,255,255,.38) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.42) !important;
}

select option{
  background:#16161a !important;
  color:#ffffff !important;
}

input[type="checkbox"],
input[type="radio"]{
  accent-color:#ffffff !important;
}

label{
  color:rgba(255,255,255,.86);
  font-weight:750;
}

.hint,
small,
.muted,
.help,
footer{
  color:rgba(255,255,255,.62) !important;
}


/* ==========================================================================
   5. Panneaux, cartes, fieldsets, résultats
   ========================================================================== */

fieldset,
.panel,
.panel.glass,
.card,
.card.glass,
.mapping,
.result,
.resultat,
#result,
#resultat,
#recap,
.recap,
.summary,
.notice-glass{
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:var(--cofel-ui-radius) !important;

  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.045), transparent 38%),
    rgba(255,255,255,.035) !important;

  color:#ffffff !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

fieldset{
  border-radius:22px !important;
}

legend{
  padding:0 10px !important;
  color:#ffffff !important;
  font-weight:900 !important;
  letter-spacing:.2px;
}

.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3,
.card-title,
.mapping h3{
  color:#ffffff !important;
}


/* ==========================================================================
   6. Choix, options, radio-row
   ========================================================================== */

.choice,
.choices button,
.choice-btn,
.option,
.option-btn,
.option-card,
.card-option,
.card-choice,
.select-card,
.tile,
.tile-btn,
.pill,
.chip{
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.060) !important;
  color:#ffffff !important;
  box-shadow:none !important;
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

.choice:hover,
.choices button:hover,
.choice-btn:hover,
.option:hover,
.option-btn:hover,
.option-card:hover,
.card-option:hover,
.card-choice:hover,
.select-card:hover,
.tile:hover,
.tile-btn:hover,
.pill:hover,
.chip:hover{
  background:rgba(255,255,255,.105) !important;
  border-color:rgba(255,255,255,.26) !important;
  transform:translateY(-1px);
}

.choice.active,
.choice.selected,
.choice.is-active,
.choice-btn.active,
.choice-btn.selected,
.option.active,
.option.selected,
.option-btn.active,
.option-btn.selected,
.option-card.active,
.option-card.selected,
.card-option.active,
.card-option.selected,
.card-choice.active,
.card-choice.selected,
.select-card.active,
.select-card.selected,
.tile.active,
.tile.selected,
.pill.active,
.pill.selected,
.chip.active,
.chip.selected,
button.active,
button.selected,
button.is-active{
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.42) !important;
  color:#ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.radio-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.radio-row > label{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  min-height:38px !important;
  padding:9px 13px !important;

  border-radius:var(--cofel-ui-pill) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.06) !important;
  color:#ffffff !important;

  font-weight:750 !important;
  cursor:pointer !important;
  user-select:none !important;

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

.radio-row > label:hover{
  background:rgba(255,255,255,.105) !important;
  border-color:rgba(255,255,255,.28) !important;
  transform:translateY(-1px);
}

.radio-row > label:has(input:checked){
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.42) !important;
  color:#ffffff !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

label.radio-row{
  display:flex !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}


/* ==========================================================================
   7. RAL
   ========================================================================== */

.ral-btn{
  border:1px solid rgba(255,255,255,.26) !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.065)) !important;

  color:#ffffff !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.ral-btn:hover{
  border-color:rgba(255,255,255,.40) !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.25), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.21), rgba(255,255,255,.09)) !important;
}

.ral-close,
.ral-tab,
.ral-chip{
  min-height:34px !important;
  padding:8px 11px !important;
  border-radius:var(--cofel-ui-pill) !important;
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

.ral-tab.is-active{
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.42) !important;
  color:#ffffff !important;
}

.ral-chip{
  font-size:12px !important;
}


/* ==========================================================================
   8. Totems
   ========================================================================== */

body:has(#btnMassif) fieldset{
  padding:18px !important;
  margin-bottom:18px !important;

  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:22px !important;

  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.045), transparent 38%),
    rgba(255,255,255,.035) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body:has(#btnMassif) fieldset > label{
  display:block;
  margin-top:14px !important;
  margin-bottom:7px !important;
}

body:has(#btnMassif) fieldset > label:first-of-type{
  margin-top:8px !important;
}

body:has(#btnMassif) #optionsBox{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin-top:8px !important;
  margin-bottom:12px !important;
}

body:has(#btnMassif) #optionsBox .opt-row,
body:has(#btnMassif) label.opt-row{
  width:100% !important;

  padding:11px 14px !important;
  margin:0 0 10px 0 !important;

  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035)) !important;

  color:#ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body:has(#btnMassif) #optionsBox .opt-row{
  margin-bottom:0 !important;
}

body:has(#btnMassif) #optionsBox .opt-row:has(input:checked),
body:has(#btnMassif) label.opt-row:has(input:checked){
  border-color:rgba(255,255,255,.36) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.065)) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body:has(#btnMassif) #fixedOptions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;

  padding:12px !important;
  margin:12px 0 14px 0 !important;

  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:18px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body:has(#btnMassif) #fixedOptions > label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  min-height:36px !important;
  padding:8px 12px !important;
  margin:0 !important;

  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:var(--cofel-ui-pill) !important;

  background:rgba(255,255,255,.055) !important;
  color:#ffffff !important;

  box-shadow:none !important;
}

body:has(#btnMassif) #fixedOptions > label:has(input:checked){
  border-color:rgba(255,255,255,.34) !important;
  background:rgba(255,255,255,.105) !important;
}

body:has(#btnMassif) #fixedOptions > label:has(input:disabled){
  opacity:.62 !important;
}

body:has(#btnMassif) #fixedOptions .ral-btn,
body:has(#btnMassif) #btnMassif,
body:has(#btnMassif) #btnRal{
  min-height:36px !important;
  padding:8px 13px !important;
  margin:0 !important;

  border-radius:var(--cofel-ui-pill) !important;
  border:1px solid rgba(255,255,255,.18) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;

  color:#ffffff !important;

  box-shadow:
    0 8px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body:has(#btnMassif) #fixedOptions .ral-btn:hover,
body:has(#btnMassif) #btnMassif:hover,
body:has(#btnMassif) #btnRal:hover{
  border-color:rgba(255,255,255,.30) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.065)) !important;
}

body:has(#btnMassif) #btnRal{
  margin-left:auto !important;
}

body:has(#btnMassif) #quantite{
  margin-top:4px !important;
}

body:has(#btnMassif) fieldset + fieldset{
  margin-top:18px !important;
}

body:has(#btnMassif) label.opt-row span{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Popup massif béton */
.massif-card{
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:20px !important;

  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.06), transparent 38%),
    rgba(18,18,18,.92) !important;

  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.massif-head,
.massif-foot{
  border-color:rgba(255,255,255,.12) !important;
}

.massif-title{
  color:#ffffff !important;
  font-weight:900 !important;
}

.massif-sub,
.massif-note{
  color:rgba(255,255,255,.62) !important;
}

.massif-close{
  width:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
}

.massif-table{
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.035) !important;
}

.massif-table th{
  background:rgba(255,255,255,.08) !important;
  color:#ffffff !important;
  font-weight:900 !important;
}

.massif-table td{
  color:rgba(255,255,255,.86) !important;
}

.massif-table th,
.massif-table td{
  border-color:rgba(255,255,255,.08) !important;
}

.massif-highlight{
  outline:2px solid rgba(255,255,255,.38) !important;
  background:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
}


/* ==========================================================================
   9. Supports souples, rigides & adhésifs
   ========================================================================== */

body:has(#stepsNav) .steps-nav{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;

  margin:18px 0 22px 0 !important;
  padding:12px !important;

  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:20px !important;

  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.05), transparent 38%),
    rgba(255,255,255,.035) !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body:has(#stepsNav) .step-item{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:34px !important;
  padding:8px 12px !important;

  border-radius:var(--cofel-ui-pill) !important;
  border:1px solid rgba(255,255,255,.14) !important;

  background:rgba(255,255,255,.055) !important;
  color:rgba(255,255,255,.72) !important;

  font-size:12px !important;
  font-weight:850 !important;
  line-height:1 !important;

  box-shadow:none !important;
  user-select:none !important;
}

body:has(#stepsNav) .step-item.active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.075)) !important;

  border-color:rgba(255,255,255,.36) !important;
  color:#ffffff !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body:has(#stepsNav) .step-item.locked{
  opacity:.45 !important;
  color:rgba(255,255,255,.45) !important;
}

body:has(#stepsNav) .step-section{
  margin-bottom:18px !important;
}

body:has(#stepsNav) .step-section fieldset{
  padding:18px !important;
  margin-bottom:14px !important;
}

body:has(#stepsNav) .nav-buttons{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;

  margin-top:14px !important;
}

body:has(#stepsNav) .btn-nav{
  min-height:40px !important;
  padding:10px 15px !important;
}

body:has(#stepsNav) #addToDevisBtn{
  border-color:rgba(255,255,255,.28) !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.20), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body:has(#stepsNav) #resetBtn{
  background:var(--cofel-ui-danger-bg) !important;
  color:var(--cofel-ui-danger-text) !important;
  border-color:rgba(255,107,107,.34) !important;
  box-shadow:none !important;
}

body:has(#stepsNav) #recap{
  padding:14px !important;
  margin-top:10px !important;
}


/* ==========================================================================
   10. Lettres boîtiers + Lettres alu / alu-PVC
   ========================================================================== */

body:has(.cselect){
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(255,255,255,.075), transparent 62%),
    radial-gradient(900px 520px at 110% 10%, rgba(255,255,255,.055), transparent 62%),
    linear-gradient(135deg, #050506, #111116 48%, #060607) !important;

  color:#ffffff !important;
}

body:has(.cselect) .cofel-container,
body:has(.cselect) .wrap{
  max-width:1200px;
}

body:has(.cselect) .cofel-header,
body:has(.cselect) .cofel-header.glass{
  border-bottom:1px solid rgba(255,255,255,.12) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;

  backdrop-filter:blur(18px) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body:has(.cselect) h1,
body:has(.cselect) h2,
body:has(.cselect) h3,
body:has(.cselect) .cofel-title,
body:has(.cselect) .panel h2{
  color:#ffffff !important;
}

body:has(.cselect) .panel,
body:has(.cselect) .panel.glass{
  margin-bottom:18px !important;
  padding:18px !important;
}

body:has(.cselect) .card,
body:has(.cselect) .card.glass{
  margin-bottom:12px !important;
  padding:14px !important;
}

body:has(.cselect) label{
  color:rgba(255,255,255,.86) !important;
  font-weight:800 !important;
}

/* Select custom fermé */
body:has(.cselect) .cselect-toggle{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;

  width:100% !important;
  min-height:42px !important;
  padding:11px 13px !important;

  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.16) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045)) !important;

  color:#ffffff !important;

  font-weight:750 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body:has(.cselect) .cselect-toggle:hover{
  border-color:rgba(255,255,255,.28) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
}

body:has(.cselect) .cselect[aria-expanded="true"] .cselect-toggle{
  border-color:rgba(255,255,255,.38) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Menu select custom */
body:has(.cselect) .cselect-menu{
  padding:7px !important;

  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.16) !important;

  background:
    linear-gradient(180deg, rgba(28,28,30,.98), rgba(15,15,17,.98)) !important;

  color:#ffffff !important;

  box-shadow:
    0 22px 58px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  backdrop-filter:blur(14px) !important;
}

/* Options du select */
body:has(.cselect) .cselect-option{
  padding:10px 12px !important;
  margin:4px 0 !important;

  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.10) !important;

  background:rgba(255,255,255,.045) !important;
  color:#ffffff !important;

  font-weight:750 !important;
}

body:has(.cselect) .cselect-option:hover,
body:has(.cselect) .cselect-option[aria-selected="true"]{
  background:rgba(255,255,255,.115) !important;
  border-color:rgba(255,255,255,.28) !important;
}

/* Cases options anciennes pages */
body:has(.cselect) .option-item{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;

  min-height:40px !important;
  padding:10px 13px !important;
  margin-bottom:9px !important;

  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.14) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035)) !important;

  color:#ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body:has(.cselect) .option-item:hover{
  border-color:rgba(255,255,255,.26) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055)) !important;
}

body:has(.cselect) .option-item:has(input:checked){
  border-color:rgba(255,255,255,.36) !important;
  background:rgba(255,255,255,.105) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body:has(.cselect) .option-item input[type="checkbox"],
body:has(.cselect) .option-item input[type="radio"]{
  accent-color:#ffffff !important;
}

body:has(.cselect) .option-item input:checked{
  background:#ffffff !important;
  border-color:#ffffff !important;
}

body:has(.cselect) .option-item input:checked::after{
  border-color:#111111 !important;
}

body:has(.cselect) .result{
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:18px !important;

  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.055), transparent 38%),
    rgba(255,255,255,.045) !important;

  color:#ffffff !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body:has(.cselect) .result + div .btn,
body:has(.cselect) #btnAddDevis,
body:has(.cselect) #btnReset{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--cofel-ui-pill) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055)) !important;

  color:#ffffff !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body:has(.cselect) #btnReset{
  background:rgba(255,255,255,.055) !important;
  box-shadow:none !important;
}

body:has(.cselect) .cofel-back{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--cofel-ui-pill) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)) !important;

  color:#ffffff !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body:has(.cselect) .cofel-back:hover{
  border-color:rgba(255,255,255,.30) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
}


/* ==========================================================================
   11. Mobile
   ========================================================================== */

@media (max-width:640px){
  .cofel-btn,
  .btn,
  .btn-pill,
  .btn-link,
  .btn-view,
  .btn-reopen,
  .btn-row,
  .btn-nav,
  .cofel-fab,
  .configurateur button,
  .configurator button,
  .page-configurateur button,
  .wrap button,
  .panel button,
  .card button,
  .actions button,
  .form-actions button,
  .result-actions button,
  .recap-actions button{
    min-height:40px !important;
    padding:9px 12px !important;
    font-size:12px !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  select,
  textarea{
    width:100%;
    min-height:42px !important;
  }

  fieldset{
    border-radius:18px !important;
  }

  .radio-row{
    gap:8px;
  }

  .radio-row > label{
    width:100%;
    justify-content:flex-start !important;
  }

  .ral-btn{
    width:100%;
  }

  body:has(#btnMassif) #fixedOptions{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  body:has(#btnMassif) #fixedOptions > label,
  body:has(#btnMassif) #fixedOptions .ral-btn,
  body:has(#btnMassif) #btnMassif,
  body:has(#btnMassif) #btnRal{
    width:100% !important;
    justify-content:flex-start !important;
  }

  body:has(#btnMassif) #btnRal{
    margin-left:0 !important;
  }

  .massif-card{
    width:calc(100vw - 20px) !important;
  }

  body:has(#stepsNav) .steps-nav{
    gap:7px !important;
    padding:10px !important;
  }

  body:has(#stepsNav) .step-item{
    width:100% !important;
    justify-content:flex-start !important;
  }

  body:has(#stepsNav) .nav-buttons{
    flex-direction:column !important;
  }

  body:has(#stepsNav) .btn-nav,
  body:has(#stepsNav) #addToDevisBtn,
  body:has(#stepsNav) #resetBtn{
    width:100% !important;
  }

  body:has(.cselect) .result + div{
    flex-direction:column !important;
  }

  body:has(.cselect) .result + div .btn,
  body:has(.cselect) #btnAddDevis,
  body:has(.cselect) #btnReset{
    width:100% !important;
  }
}
/* ==========================================================================
   COFEL — Correctif Totems : checkboxes rondes comme les autres configurateurs
   ========================================================================== */

/* Totems : transformer les carrés checkbox en ronds type radio */
body:has(#btnMassif) #optionsBox input[type="checkbox"],
body:has(#btnMassif) #fixedOptions input[type="checkbox"],
body:has(#btnMassif) label.opt-row input[type="checkbox"]{
  appearance:none !important;
  -webkit-appearance:none !important;

  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;

  border-radius:999px !important;
  border:2px solid rgba(255,255,255,.68) !important;

  background:rgba(255,255,255,.06) !important;

  display:inline-block !important;
  vertical-align:middle !important;

  cursor:pointer !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(0,0,0,.18) !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    opacity .16s ease !important;
}

/* État survol */
body:has(#btnMassif) #optionsBox input[type="checkbox"]:hover,
body:has(#btnMassif) #fixedOptions input[type="checkbox"]:hover,
body:has(#btnMassif) label.opt-row input[type="checkbox"]:hover{
  border-color:rgba(255,255,255,.88) !important;
  background:rgba(255,255,255,.12) !important;
}

/* État coché : rond blanc avec point noir au centre */
body:has(#btnMassif) #optionsBox input[type="checkbox"]:checked,
body:has(#btnMassif) #fixedOptions input[type="checkbox"]:checked,
body:has(#btnMassif) label.opt-row input[type="checkbox"]:checked{
  border-color:#ffffff !important;

  background:
    radial-gradient(circle at center, #111111 0 39%, #ffffff 42% 100%) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 4px 12px rgba(0,0,0,.28) !important;
}

/* État désactivé, par exemple pré-laquage inclus */
body:has(#btnMassif) #optionsBox input[type="checkbox"]:disabled,
body:has(#btnMassif) #fixedOptions input[type="checkbox"]:disabled,
body:has(#btnMassif) label.opt-row input[type="checkbox"]:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
}