:root{
  --bg:#0f172a; --card:#111827; --muted:#9ca3af; --text:#e5e7eb; --border:#1f2937;
  --input-bg:#0b1220; --placeholder:#94a3b8; --btn:#22d3ee; --accent:#22d3ee;
  /* couleur du texte des boutons (pilotable en admin) */
  --btn-text:#05333a;

  /* ------- Variables de typographie pilotables ------- */
  --font-body-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --font-body-size: 16px; /* 8px–23px */

  --font-title-family: var(--font-body-family);
  --font-title-size: 18px; /* 8px–23px */

  --font-btn-family: var(--font-body-family);
  --font-btn-size: 14px; /* 8px–23px */
}

/* ===== Reset & base ===== */
*{box-sizing:border-box}
a,a:hover,a:active{color:#fff}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  line-height:1.4;
}
.wrap{max-width:1200px;margin:0 auto;padding:16px}

/* Focus */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;border-radius:10px;
}

/* ===== Header / brand ===== */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.header .brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
#brandLogo{height:56px;width:auto;object-fit:contain;flex:0 0 auto}
.siteTitle{
  font-family: var(--font-title-family);
  font-size: var(--font-title-size);
  line-height:1.2;margin:0;flex:1 1 auto;min-width:0;word-break:break-word
}
.adminLink{font-weight:600;text-decoration:underline;flex:0 0 auto}

/* Typo responsive H1 */
@media (max-width:1024px){ .siteTitle{font-size:calc(var(--font-title-size) * 1.0)} }
@media (max-width:768px){
  .header{flex-direction:column;align-items:flex-start;gap:8px}
  .siteTitle{font-size:calc(var(--font-title-size) * 1.1)}
  #brandLogo{height:44px}
}
@media (max-width:480px){
  .siteTitle{font-size:calc(var(--font-title-size) * 0.95)}
  #brandLogo{height:38px}
}

/* ===== Layout ===== */
.grid{display:grid;grid-template-columns:280px 1fr;gap:16px}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .side{order:2}
  .content{order:1}
}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.phead{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.phead h3{margin:0;font-size:1rem;font-family:var(--font-title-family)}
.pad{padding:14px}

.row{display:flex;flex-wrap:wrap;gap:12px}
.col-12{flex:0 0 100%}
.col-6{flex:0 0 calc(50% - 6px)}
.col-4{flex:0 0 calc(33.333% - 8px)}
@media (max-width:640px){ .col-6,.col-4{flex:0 0 100%} }

/* ===== Forms ===== */
label{
  display:block;margin:4px 0 6px;font-weight:600;
  font-family: var(--font-title-family);
}
input,select,textarea{
  width:100%;padding:10px 12px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:10px;color:var(--text);
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  min-width:0;max-width:100%;
}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
.note{color:white;font-size:.6rem}

/* Champs obligatoires / erreurs plus visibles (style “propre/clean”) */
.is-error{
  border-color:#ef4444 !important;
  outline-color:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.18);
}
.error{color:#ef9a9a;font-size:.85rem;margin-top:6px}

@media (max-width:768px){
  label{font-size:.95rem}
  input,select,textarea{font-size:.95rem}
}
@media (max-width:480px){
  label{font-size:.9rem}
  input,select,textarea{font-size:.9rem}
}

/* Select multiple (objets lourds) */
select[multiple]{min-height:160px;padding:8px;cursor:default}
select[multiple] option{padding:6px 8px}
select[multiple] option:checked{background:rgba(34,211,238,.25)}

/* ===== Steps nav ===== */
.steps{display:flex;flex-direction:column}
.stepBtn{
  display:block;width:100%;text-align:left;padding:10px 12px;border:none;
  background:transparent;color:var(--text);cursor:pointer;border-left:3px solid transparent
}
.stepBtn[aria-current="true"]{border-left-color:var(--accent);background:rgba(255,255,255,.03)}

.progress{height:8px;background:#0b1220;border-radius:6px;overflow:hidden;width:120px}
#progressBar{height:100%;width:0;background:var(--accent)}

/* ===== Footer / buttons ===== */
.footerBar{display:flex;gap:10px;justify-content:flex-end;padding:12px}
.btn{
  background:var(--btn);color:var(--btn-text);border:none;border-radius:10px;
  padding:10px 14px;font-weight:700;cursor:pointer;position:relative;
  font-family: var(--font-btn-family);font-size: var(--font-btn-size);
  min-width:0;white-space:nowrap;max-width:100%;
}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn:disabled{pointer-events:auto}

/* ===== Price & summary ===== */
.price{font-size:1.6rem;font-weight:800;font-family:var(--font-title-family)}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){ .summary{grid-template-columns:1fr} }
.summaryPrice{margin-top:12px;font-weight:700}

/* ======== MODAL (ADMIN) ======== */
/* overlay */
.modal{
  /* La modale force ses propres variables pour rester IMMUNE au thème du formulaire */
  --bg:#2e194c; --card:#2e194c; --muted:#9ca3af; --text:#e5e7eb; --border:#1f2937;
  --input-bg:#0b1220; --placeholder:#94a3b8; --btn:#22d3ee; --accent:#22d3ee;
  --btn-text:#05333a;
  --font-body-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --font-body-size: 16px;
  --font-title-family: var(--font-body-family);
  --font-title-size: 18px;
  --font-btn-family: var(--font-body-family);
  --font-btn-size: 14px;

  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;z-index:50;
  padding:2vw;
}
.modal.open{display:flex}
.modal--compact{padding:2vw}

/* carte colonne ; header sticky + content scroll + footer sticky */
.modal-card{
  display:flex;flex-direction:column;
  width:min(980px,96vw);
  max-height:92vh;
  background:var(--card);border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:0;overflow:hidden;
}

/* Header sticky (garde “Fermer” visible) */
#adminModal .modal-card > .between:first-child{
  position:sticky; top:0; z-index:6;
  background:var(--card); border-bottom:1px solid var(--border);
  padding:14px 16px; margin:0;
}

/* Contenu scrollable, pas d’overflow horizontal */
#adminModal #adminContent{
  flex:1 1 auto; min-height:0;
  overflow:auto; -ms-overflow-style:none; scrollbar-width:none;
  padding:14px 16px;
}
#adminModal #adminContent::-webkit-scrollbar{display:none}

/* Tous les éléments dans la modale doivent wrap et ne pas dépasser */
#adminModal .modal-card *{min-width:0;max-width:100%}
#adminModal input,#adminModal select,#adminModal textarea,
#adminModal .chip,#adminModal .btn{max-width:100%}

/* Barre d’actions (Confirmer) : STICKY bas */
#adminModal #adminConfirmBar{
  position:sticky; bottom:0; left:0; right:0; z-index:6;
  background:var(--card); border-top:1px solid var(--border);
  padding:12px 16px 14px; margin:0; box-shadow:0 -8px 20px rgba(0,0,0,.25);
}
#adminModal #adminConfirmBar .col-12{overflow:hidden}
#adminModal #adminConfirmBar .btn{white-space:nowrap}
@media (max-width:480px){
  #adminModal #adminConfirmBar .col-12{
    display:grid;grid-template-columns:1fr;gap:8px;justify-items:stretch;
  }
}

/* Contrôles internes thème fixe */
.modal-card .phead,.modal-card .sep{border-color:var(--border)}
.modal-card .note{color:var(--muted)}
.modal-card input,.modal-card select,.modal-card textarea{
  background:var(--input-bg);border:1px solid var(--border);color:var(--text) !important;
}
.modal-card input::placeholder,.modal-card textarea{color:var(--placeholder);}
.modal-card textarea{color:var(--placeholder) !important;}
.modal-card .chip{
  border:1px solid var(--border);background:transparent;border-radius:20px;
  padding:6px 10px;cursor:pointer;color:var(--text);flex-shrink:0;
}
.modal-card .btn{background:var(--btn);color:var(--btn-text);border:none;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.modal-card .btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}

/* ===== Small UI bits ===== */
.between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chip{border:1px solid var(--border);background:transparent;border-radius:20px;padding:6px 10px;cursor:pointer;color:var(--text);flex-shrink:0}
.chip--danger{border-color:#fecaca;color:#fecaca}
.chip--danger:hover{background:rgba(239,68,68,.12)}

/* Champs Premium verrouillés (WE/Urgent) — visuel doux + curseur interdit */
[data-premium-locked]{
  opacity:.6 !important;
  cursor:not-allowed !important;
}

/* ===== Toast ===== */
#toastMsg{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:rgba(0,0,0,.85);color:#fff;padding:10px 14px;border-radius:10px;
  z-index:9999;font-size:14px;opacity:0;transition:opacity .25s ease
}

/* ===== Color rows in admin ===== */
.colorRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.colorRow > div{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:8px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02)
}
.colorRow label{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){ .colorRow{grid-template-columns:1fr} }

/* ===== Brand preview ===== */
#brandLogoPreview{display:none}

/* ===== Tooltips ===== */
.help{
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-left:6px;border-radius:50%;border:1px solid var(--border);
  font-size:.75rem;line-height:1;background:rgba(255,255,255,.06);cursor:help;user-select:none
}
.helpTip{position:relative;display:inline-block;vertical-align:middle}
.helpBubble{
  position:absolute;right:0;top:125%;min-width:220px !important;max-width:min(320px, calc(90vw - 64px));
  background:#ffffff;border:1px solid var(--border);color:#000000;padding:10px;border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease;pointer-events:none;white-space:normal;z-index:60;
}
.helpBubble:before{content:"";position:absolute;right:12px;top:-7px;border:7px solid transparent;border-bottom-color:var(--border)}
.helpBubble:after{content:"";position:absolute;right:12px;top:-6px;border:6px solid transparent;border-bottom-color:#0b1220}
.helpTip.open .helpBubble,
.helpTip[data-open="true"] .helpBubble,
.helpTip[aria-expanded="true"] .helpBubble,
.helpTip:focus .helpBubble,
.helpTip:focus-within .helpBubble,
.helpTip:hover .helpBubble{opacity:1;transform:translateY(0);pointer-events:auto}

/* Tooltips via data-tip */
[data-tip]{position:relative;cursor:help}
[data-tip]:after{
  content:attr(data-tip);
  position:absolute;left:0;top:100%;margin-top:6px;
  background:#0b1220;border:1px solid var(--border);color:#000000;
  padding:8px 10px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-4px);transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;white-space:normal;min-width:220px;max-width:min(320px, calc(90vw - 64px));z-index:60
}
[data-tip]:hover:after,[data-tip]:focus:after{opacity:1;transform:translateY(0)}

/* ===== Tooltip Premium (noir sur jaune) — s'affiche UNIQUEMENT si data-tip-open="1" ===== */
[data-tip-premium]{position:relative}
[data-tip-premium]::after,
[data-tip-premium]::before{
  /* caché par défaut */
  content:""; position:absolute; display:none;
}
[data-tip-premium][data-tip-open="1"]::after{
  content:attr(data-tip-premium);
  left:50%; top:calc(100% + 8px); transform:translateX(-50%);
  background:#ffea00; color:#111; border:1px solid #111;
  padding:8px 10px; border-radius:8px; white-space:nowrap; z-index:70;
  box-shadow:0 8px 24px rgba(0,0,0,.35); display:block;
}
[data-tip-premium][data-tip-open="1"]::before{
  content:""; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:#ffea00; display:block;
}
@media (max-width:640px){
  [data-tip-premium][data-tip-open="1"]::after{
    position:static; transform:none; box-shadow:none; margin-top:6px
  }
  [data-tip-premium][data-tip-open="1"]::before{display:none}
}

/* ===== Tabs ===== */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tabs .chip[aria-selected="true"]{background:var(--btn);color:var(--btn-text);border-color:transparent}

/* ===== Required sections ===== */
.reqSection{margin:8px 0 6px}
.reqTitle{font-weight:700;margin:6px 0 8px}

/* ===== Tag options (remplacent les checkboxes) ===== */
.tagOptions{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  appearance:none;border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:#ffffff;
  padding:8px 12px;border-radius:9999px;cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  font-weight:600;line-height:1; user-select:none;
}
.tag:hover{background:rgba(255,255,255,.08)}
.tag:active{transform:scale(0.98)}

/* État actif accepté sous 3 formes : aria-pressed, selected, ou aria-selected */
.tag[aria-pressed="true"],
.tag.is-active,
.tag[selected],
.tag[aria-selected="true"]{
  background:var(--btn); color:var(--btn-text); border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}
.tag[disabled]{opacity:.6;cursor:not-allowed}

/* ===== Admin lists (objets lourds / formules) ===== */
.list{display:flex;flex-direction:column;gap:8px}
.rowItem{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px;
  border:1px dashed var(--border);border-radius:10px;padding:8px 10px;
}
.rowItem > *{min-width:0}
.rowItem .actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rowItem .chip,.rowItem .btn{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.rowItem > :last-child{justify-self:end}
@media (max-width:620px){
  .rowItem{grid-template-columns:1fr;gap:8px}
  .rowItem > :last-child{justify-self:stretch}
  .rowItem .actions{justify-content:stretch}
}

/* === Bouton SUPPRIMER — icône X compacte, texte masqué (mais bouton accessible) === */
.btn-delete,.delete,[data-action="delete"],button[title*="Supprimer"],
button[aria-label*="Supprimer"],.chip--danger[data-delete]{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;min-width:32px;
  padding:0;border-radius:8px;
  background:#7f1d1d;
  color:#fff;border:1px solid #ef4444;cursor:pointer;
  line-height:1;
  font-size:0; /* masque le texte interne si présent */
}
.btn-delete:hover,[data-action="delete"]:hover,button[title*="Supprimer"]:hover{background:#991b1b}
.btn-delete::before,.delete::before,[data-action="delete"]::before,
button[title*="Supprimer"]::before,button[aria-label*="Supprimer"]::before,
.chip--danger[data-delete]::before{
  content:"✕"; font-size:18px; font-weight:900; line-height:1;
}
/* Cache les <span> “Supprimer” si présents (on garde title/aria) */
[data-action="delete"] span{display:none}

/* Bouton rouge à croix blanche générique (utilisé pour le logo) */
.xbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;border:none;
  background:#ef4444;color:#fff;font-size:20px;line-height:1;cursor:pointer;
}
.xbtn:hover{background:#dc2626}
.xbtn:focus-visible{outline:2px solid #fca5a5;outline-offset:2px}

/* Étape 3 — Objets courants */
.itemsGrid{display:grid !important; gap:12px; grid-template-columns:1fr}
@media (min-width:640px){ .itemsGrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .itemsGrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.itemsGrid > *{min-width:0}
.itemCard{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--border);border-radius:10px;padding:10px;background:rgba(255,255,255,.02);
  width:100%;
}
.itemCard .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.itemCard .meta strong{font-size:.98rem;font-family:var(--font-title-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itemCard .meta small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itemCard .qtyWrap{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.itemCard input[type="number"]{width:84px}

/* Compat anciens noms */
.itemsGrid .itemRow,.itemsGrid .rowItem{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--border);border-radius:10px;padding:10px;background:rgba(255,255,255,.02);
  width:100%;
}

/* ===== Autocomplete adresses (France) ===== */
.ac-host{position:relative}
.ac-list{
  position:absolute;left:0;right:0;top:100%;margin-top:4px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  max-height:240px;overflow:auto;z-index:1000;display:none;
}
.ac-list .ac-item,.ac-list button{
  display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--text);
  padding:10px 12px;cursor:pointer;
}
.ac-list .ac-item:hover,.ac-list button:hover{background:rgba(255,255,255,.04)}
.ac-list .ac-item:focus-visible,.ac-list button:focus-visible{background:rgba(255,255,255,.06);outline:none}

/* ===== Divers ===== */
.hidden{display:none!important}