/* ============================================================
   Winkdial — Panel Admin (desktop-first)
   Charte CDC §10 : Noir cassé #202429 · Jaune orangé #f7cd16 · Blanc grisé #f8f8f8
   Clash Display (titres) · General Sans (texte) · JetBrains Mono (identifiants)
   Utilisable jusqu'à ~768px (tablette) ; pensé pour ≥1024px.
   ============================================================ */

:root {
  --noir: #202429;
  --noir-80: rgba(32, 36, 41, .78);
  --jaune: #f7cd16;
  --jaune-fonce: #c9a50b;
  --blanc: #f8f8f8;
  --blanc-pur: #ffffff;
  --gris-fond: #f1f2f4;
  --gris-bord: #e4e6ea;
  --gris-txt: #878d96;
  --vert: #1a9e57;
  --vert-fond: #e8f6ee;
  --rouge: #d94436;
  --rouge-fond: #fdecea;
  --orange: #e58a17;
  --orange-fond: #fdf2e3;

  --font-display: 'Clash Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'General Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --ombre: 0 1px 2px rgba(32, 36, 41, .05), 0 4px 14px rgba(32, 36, 41, .05);
  --sidebar-w: 236px;
  --rayon: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--blanc);
  color: var(--noir);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -.01em; }
.mono { font-family: var(--font-mono); }
a { color: inherit; }

/* ---------------- Sidebar (rétractable) ---------------- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--noir); color: #fff; padding: 22px 14px;
  display: flex; flex-direction: column; z-index: 20;
  transition: width .18s ease, padding .18s ease;
  overflow-x: hidden;
}
.sidebar .marque {
  display: flex; align-items: center; gap: 9px;
  padding: 0 8px 22px;
}
.sidebar .marque .marque-logo { height: 22px; width: auto; }
.sidebar .marque .marque-symbole { display: none; height: 26px; width: auto; }
.btn-repli {
  margin-left: auto; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); border: none; color: rgba(255, 255, 255, .75); cursor: pointer;
}
.btn-repli:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-repli { transition: transform .18s ease, background .12s; }

/* État replié : icônes seules, largeur réduite. Le bouton reste toujours visible
   (repositionné, pas juste au survol) pour rester utilisable au tactile aussi. */
.sidebar.repliee { width: 64px; padding: 22px 10px; }
.sidebar.repliee .marque { flex-direction: column; gap: 12px; padding: 0 0 22px; }
.sidebar.repliee .marque .marque-logo { display: none; }
.sidebar.repliee .marque .marque-symbole { display: block; }
.sidebar.repliee .btn-repli { margin-left: 0; }
.sidebar.repliee .lien span, .sidebar.repliee .section-nav, .sidebar.repliee .util { display: none; }
.sidebar.repliee .lien { justify-content: center; }
.sidebar.repliee .lien.bientot em { display: none; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar .lien {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px; text-decoration: none;
  color: rgba(255, 255, 255, .68); font-size: 13.5px; font-weight: 500;
  transition: background .12s, color .12s;
}
.sidebar .lien:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .lien.actif { background: var(--jaune); color: var(--noir); font-weight: 600; }
.sidebar .lien.bientot { color: rgba(255, 255, 255, .3); cursor: default; }
.sidebar .lien.bientot:hover { background: none; color: rgba(255, 255, 255, .3); }
.sidebar .lien.bientot em {
  margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  background: rgba(255, 255, 255, .1); padding: 2px 6px; border-radius: 5px;
}
.sidebar .lien .ico-svg { flex-shrink: 0; }
.sidebar .section-nav {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255, 255, 255, .35); padding: 18px 10px 7px; font-weight: 600;
}
.sidebar .bas { margin-top: auto; }
.sidebar .util {
  border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 14px; margin-top: 14px;
  font-size: 12.5px; color: rgba(255, 255, 255, .55);
}
.sidebar .util .nom { color: #fff; font-weight: 600; font-size: 13.5px; }

/* ---------------- Zone principale ---------------- */
.main {
  margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column;
  transition: margin-left .18s ease;
}
.topbar {
  height: 64px; background: var(--blanc-pur); border-bottom: 1px solid var(--gris-bord);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; position: sticky; top: 0; z-index: 10;
}
.topbar .titre-page { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.topbar .sous { font-size: 12.5px; color: var(--gris-txt); margin-top: 1px; }
.topbar .actions { display: flex; align-items: center; gap: 10px; }
.contenu { padding: 26px 28px 60px; flex: 1; }
.contenu-large { max-width: 1800px; }

/* ---------------- Boutons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: filter .12s, background .12s; white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:not(:disabled):hover { filter: brightness(.96); }
.btn-primaire { background: var(--jaune); color: var(--noir); }
.btn-noir { background: var(--noir); color: #fff; }
.btn-clair { background: var(--blanc-pur); color: var(--noir); border-color: var(--gris-bord); }
.btn-danger { background: var(--rouge-fond); color: var(--rouge); border-color: #f5c9c4; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn-icone {
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  background: transparent; border: 1px solid var(--gris-bord); color: var(--noir-80);
}
.btn-icone:hover { background: var(--gris-fond); }
.btn-icone-danger:hover { background: var(--rouge-fond); color: var(--rouge); border-color: #f5c9c4; }

/* ---------------- Cartes & tableaux ---------------- */
.carte { background: var(--blanc-pur); border: 1px solid var(--gris-bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--gris-bord);
}
.carte-entete h2 { font-size: 15px; }
.carte-corps { padding: 18px; }

.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gris-txt); font-weight: 600; padding: 11px 18px;
  border-bottom: 1px solid var(--gris-bord); background: var(--gris-fond);
  white-space: nowrap;
}
.tableau td { padding: 13px 18px; border-bottom: 1px solid var(--gris-bord); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover { background: #fcfcfd; }
.tableau .num { text-align: right; }
.cellule-actions { display: flex; gap: 6px; justify-content: flex-end; }
.tableau-scroll { overflow-x: auto; }

.nom-cellule { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--jaune);
  color: var(--noir); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.avatar.inactif { background: var(--gris-bord); color: var(--gris-txt); }
.cellule-sous { font-size: 12px; color: var(--gris-txt); font-family: var(--font-mono); }

/* ---------------- Badges & jauges ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
}
.badge-actif { background: var(--vert-fond); color: var(--vert); }
.badge-inactif { background: var(--gris-fond); color: var(--gris-txt); }
.badge-alerte { background: var(--rouge-fond); color: var(--rouge); }
.badge-neutre { background: var(--gris-fond); color: var(--noir-80); }
.badge-attention { background: var(--orange-fond); color: var(--orange); }

/* Badge doublant comme <select> (ex. statut vendeur) : doit se distinguer visuellement
   d'un badge purement informatif — bordure + flèche + effet hover, sinon rien n'indique
   que c'est cliquable. */
.select-statut {
  border: 1.5px solid rgba(0, 0, 0, .18);
  padding: 3px 24px 3px 9px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202429' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select-statut:hover {
  border-color: rgba(0, 0, 0, .38);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}
.select-statut:focus-visible {
  outline: none;
  border-color: var(--jaune);
  box-shadow: 0 0 0 3px rgba(247, 205, 22, .3);
}

.jauge { display: flex; align-items: center; gap: 9px; min-width: 130px; }
.jauge-piste { flex: 1; height: 6px; border-radius: 4px; background: var(--gris-bord); overflow: hidden; }
.jauge-remplie { height: 100%; background: var(--vert); border-radius: 4px; }
.jauge-remplie.moyenne { background: var(--jaune-fonce); }
.jauge-remplie.pleine { background: var(--rouge); }
.jauge-txt { font-family: var(--font-mono); font-size: 12px; color: var(--noir-80); white-space: nowrap; }

/* ---------------- Formulaires ---------------- */
.champ { margin-bottom: 14px; }
.champ label { display: block; font-size: 12.5px; font-weight: 600; color: var(--noir-80); margin-bottom: 6px; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--gris-bord); border-radius: 9px;
  font: inherit; font-size: 14px; background: var(--blanc-pur); color: var(--noir);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(247, 205, 22, .2);
}
.champ .aide { font-size: 11.5px; color: var(--gris-txt); margin-top: 5px; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.admin-section-titre {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; color: var(--gris-txt); margin: 18px 0 10px;
}

/* ---------------- Modale ---------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(32, 36, 41, .45);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.overlay.actif { display: flex; }
.modale {
  background: var(--blanc-pur); border-radius: 16px; width: 100%; max-width: 480px;
  box-shadow: 0 18px 50px rgba(32, 36, 41, .22); max-height: 90vh; overflow-y: auto;
}
.modale-large { max-width: 640px; }
.modale-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--gris-bord);
}
.modale-entete h2 { font-size: 16.5px; }
.modale-corps { padding: 20px; }
.modale-pied { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--gris-bord); }

/* ---------------- Assistant multi-étapes (modale) ---------------- */
.assist-etapes { display: flex; align-items: center; margin-bottom: 22px; }
.assist-etape { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.assist-etape-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gris-fond); color: var(--gris-txt);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  border: 2px solid var(--gris-fond); transition: all .15s;
}
.assist-etape-label { font-size: 10.5px; color: var(--gris-txt); font-weight: 600; text-align: center; white-space: nowrap; }
.assist-etape::after {
  content: ''; position: absolute; top: 13px; left: calc(50% + 19px); width: calc(100% - 38px);
  height: 2px; background: var(--gris-fond);
}
.assist-etape:last-child::after { display: none; }
.assist-etape.actif .assist-etape-num { background: var(--jaune); border-color: var(--jaune); color: var(--noir); }
.assist-etape.actif .assist-etape-label { color: var(--noir); }
.assist-etape.complete .assist-etape-num { background: var(--noir); border-color: var(--noir); color: #fff; }
.assist-etape.complete::after { background: var(--noir); }
.assist-corps-etape { min-height: 40px; }
.assist-instructions { padding-left: 18px; margin: 0 0 14px; font-size: 13px; color: var(--noir-80); line-height: 1.75; }
.assist-instructions li + li { margin-top: 2px; }
.assist-instructions ul { margin: 4px 0 4px 0; padding-left: 18px; }

/* ---------------- Onglets ---------------- */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--gris-bord); margin-bottom: 18px; }
.onglet {
  padding: 9px 14px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--gris-txt);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglet.actif { color: var(--noir); border-bottom-color: var(--jaune); }

/* ---------------- États ---------------- */
.chargement { display: flex; justify-content: center; padding: 50px; }
.spinner {
  width: 26px; height: 26px; border: 3px solid var(--gris-bord);
  border-top-color: var(--jaune); border-radius: 50%; animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.vide { text-align: center; padding: 54px 20px; color: var(--gris-txt); }
.vide .ico-svg { color: var(--gris-bord); margin-bottom: 12px; }
.vide h3 { font-size: 15px; color: var(--noir); margin-bottom: 6px; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--noir); color: #fff; padding: 12px 18px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 30px rgba(32, 36, 41, .3);
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
  pointer-events: none; max-width: 380px;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.ok { background: var(--vert); }
.toast.err { background: var(--rouge); }

/* ---------------- Bloc code / lien copiable ---------------- */
.bloc-copie {
  display: flex; align-items: center; gap: 10px;
  background: var(--gris-fond); border: 1px solid var(--gris-bord); border-radius: 9px;
  padding: 10px 12px; font-family: var(--font-mono); font-size: 12.5px; word-break: break-all;
}
.bloc-copie span { flex: 1; }
.pin-affiche {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700; letter-spacing: .18em;
  text-align: center; padding: 16px; background: var(--gris-fond); border-radius: 10px;
  border: 1px dashed var(--gris-bord);
}
.encart {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 9px;
  background: var(--orange-fond); color: #8a5a10; font-size: 12.5px; line-height: 1.45;
}
.encart .ico-svg { flex-shrink: 0; color: var(--orange); }
.encart a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------------- Bandeau d'état du dispatch ---------------- */
.disp-etat { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 10px; font-size: 13.5px; }
.disp-etat .ico-svg { flex-shrink: 0; }
.disp-etat.ouverte { background: var(--vert-fond); color: #10633a; }
.disp-etat.ouverte .ico-svg { color: var(--vert); }
.disp-etat.fermee { background: var(--gris-fond); color: var(--noir-80); }
.disp-etat.fermee .ico-svg { color: var(--gris-txt); }

/* ---------------- Horloge en direct (page Dispatch) ---------------- */
.disp-horloge-carte {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 14px;
  background: var(--noir); color: #fff; border-radius: 10px;
}
.disp-horloge-carte .ico-svg { flex-shrink: 0; color: var(--jaune); }
.disp-horloge-lib { font-size: 11.5px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .03em; }
.disp-horloge-val { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.disp-horloge-aide { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.6); max-width: 260px; text-align: right; line-height: 1.4; }
@media (max-width: 640px) { .disp-horloge-aide { display: none; } }

/* ---------------- Tuiles de statistiques ---------------- */
.stats-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 900px) { .stats-grille { grid-template-columns: repeat(2, 1fr); } }
.stat-tuile { background: var(--blanc-pur); border: 1px solid var(--gris-bord); border-radius: var(--rayon); padding: 16px 18px; }
.stat-tuile .ic { color: var(--jaune-fonce); margin-bottom: 8px; }
.stat-tuile .valeur { font-family: var(--font-mono); font-size: 24px; font-weight: 700; }
.stat-tuile .lib { font-size: 12.5px; color: var(--gris-txt); margin-top: 2px; }
.barre-repartition { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.barre-repartition .lib { width: 130px; flex-shrink: 0; font-size: 13px; }
.barre-repartition .piste { flex: 1; height: 8px; border-radius: 5px; background: var(--gris-fond); overflow: hidden; }
.barre-repartition .rempli { height: 100%; background: var(--jaune); border-radius: 5px; }
.barre-repartition .n { width: 40px; text-align: right; font-family: var(--font-mono); font-size: 13px; flex-shrink: 0; }
.periodes-admin { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.chip-periode {
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--gris-bord);
  background: var(--blanc-pur); font-size: 13px; font-weight: 500; cursor: pointer;
}
.chip-periode.actif { background: var(--noir); color: #fff; border-color: var(--noir); }

/* ---------------- Login ---------------- */
.page-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--noir); padding: 20px;
}
.carte-login { background: var(--blanc-pur); border-radius: 18px; padding: 34px; width: 100%; max-width: 380px; }
.carte-login .marque { margin-bottom: 4px; }
.carte-login .marque .logo-image { height: 34px; width: auto; max-width: 100%; }
.carte-login .sous { color: var(--gris-txt); font-size: 13px; margin-bottom: 24px; }
.carte-login .btn { width: 100%; padding: 12px; margin-top: 6px; }
.erreur-login {
  background: var(--rouge-fond); color: var(--rouge); padding: 10px 12px;
  border-radius: 9px; font-size: 13px; margin-bottom: 14px; display: none;
}
.erreur-login.visible { display: block; }

/* ---------------- Bandeau d'abonnement (essai / expiration) ---------------- */
.banniere-abonnement {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 28px; font-size: 13.5px; font-weight: 500;
}
.banniere-abonnement.attention { background: var(--orange-fond); color: #8a5a10; }
.banniere-abonnement.alerte { background: var(--rouge-fond); color: var(--rouge); }
.banniere-abonnement.neutre { background: var(--gris-fond); color: var(--noir); }
.banniere-abonnement .btn { flex-shrink: 0; }
.banniere-abonnement .fermer {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  color: inherit; opacity: .55; padding: 2px 4px; flex-shrink: 0;
}
.banniere-abonnement .fermer:hover { opacity: 1; }
@media (max-width: 900px) {
  .banniere-abonnement { flex-direction: column; align-items: stretch; padding: 12px 18px; }
}

/* ---------------- Page d'inscription (plus large : formulaire + choix du plan) ---------------- */
.page-inscription {
  min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  background: var(--noir); padding: 32px 20px;
}
.carte-inscription {
  background: var(--blanc-pur); border-radius: 18px; padding: 34px; width: 100%; max-width: 620px;
}
.carte-inscription .marque { margin-bottom: 4px; }
.carte-inscription .marque .logo-image { height: 34px; width: auto; max-width: 100%; }
.carte-inscription .sous { color: var(--gris-txt); font-size: 13px; margin-bottom: 22px; }
.carte-inscription > .sous:last-child { margin-bottom: 0; }
.carte-inscription .btn-primaire { width: 100%; padding: 13px; }
.section-inscription {
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--gris-txt); margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gris-bord);
}
.section-inscription:first-of-type { margin-top: 0; }

/* Indicatif collé au champ : le pays le remplit, l'utilisateur ne saisit que son numéro local. */
.champ-telephone { display: flex; align-items: stretch; }
.champ-telephone .indicatif {
  display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 600;
  background: var(--gris-fond); border: 1px solid var(--gris-bord); border-right: none;
  border-radius: 9px 0 0 9px; color: var(--noir-80); white-space: nowrap;
}
.champ-telephone input { border-radius: 0 9px 9px 0; flex: 1; min-width: 0; }

/* Widget téléphone réutilisable (js/telephone.js) : sélecteur pays (drapeau +
   indicatif) collé au champ numéro local. */
.tel-input { display: flex; align-items: stretch; gap: 0; }
.tel-input .tel-pays {
  flex: 0 0 auto; max-width: 40%; padding: 9px 8px; border: 1px solid var(--gris-bord);
  border-right: none; border-radius: 9px 0 0 9px; font: inherit; font-size: 13.5px;
  background: var(--gris-fond); color: var(--noir); cursor: pointer;
}
.tel-input .tel-numero {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--gris-bord);
  border-radius: 0 9px 9px 0; font: inherit; font-size: 14px; background: var(--blanc-pur); color: var(--noir);
}
.tel-input .tel-pays:focus, .tel-input .tel-numero:focus {
  outline: none; border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(247, 205, 22, .2); position: relative; z-index: 1;
}

/* ---------------- Choix du plan (inscription) ---------------- */
.plans-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-carte {
  border: 2px solid var(--gris-bord); border-radius: 12px; padding: 14px 12px; cursor: pointer;
  background: var(--blanc-pur); transition: border-color .12s, background .12s;
}
.plan-carte:hover { border-color: var(--jaune); }
.plan-carte.actif { border-color: var(--jaune); background: #fffdf0; }
.plan-carte input { display: none; }
.plan-nom { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.plan-prix { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.plan-prix span { font-size: 11px; font-weight: 500; color: var(--gris-txt); }
.plan-limite { font-size: 12px; font-weight: 600; color: var(--noir-80); }
.plan-desc { font-size: 11px; color: var(--gris-txt); margin-top: 3px; line-height: 1.4; }
@media (max-width: 620px) {
  .plans-choix { grid-template-columns: 1fr; }
}

/* ---------------- Tablette ---------------- */
@media (max-width: 900px) {
  /* La largeur de la sidebar est pilotée en JS (repli auto sur petit écran, cf.
     layout.js) — ici seulement les ajustements qui ne dépendent pas de son état. */
  .contenu, .topbar { padding-left: 18px; padding-right: 18px; }
  .grille-2 { grid-template-columns: 1fr; }
}

/* ---------------- Facturation (portée depuis la PWA) ---------------- */
.logo-apercu { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.logo-apercu img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--gris-bord); border-radius: 12px; background: var(--blanc-pur); padding: 4px; }
.logo-apercu .vide-logo { width: 72px; height: 72px; border: 1px dashed var(--gris-bord); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gris-bord); }
.modeles-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modele-carte { border: 2px solid var(--gris-bord); border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; background: var(--blanc-pur); font-size: 13px; font-weight: 500; }
.modele-carte.actif { border-color: var(--jaune); background: #fffdf0; }
.modele-carte .apercu-mini { height: 46px; border-radius: 6px; margin-bottom: 8px; background: var(--gris-fond); position: relative; overflow: hidden; }
.apercu-classique { background: linear-gradient(180deg,#fff 0,#fff 22%,#1a1a1a 22%,#1a1a1a 25%,#fff 25%); border:1px solid var(--gris-bord); }
.apercu-moderne { background: linear-gradient(180deg,#1a1a1a 0,#1a1a1a 38%,#f8f8f8 38%); border:1px solid var(--gris-bord); }
.apercu-moderne::after { content:''; position:absolute; right:8px; bottom:8px; width:40%; height:20%; background:#1a1a1a; border-radius:3px; }
.apercu-minimal { background:#fff; border:1px solid var(--gris-bord); }
.apercu-minimal::before { content:''; position:absolute; left:8px; top:12px; right:8px; height:1px; background:#e5e5e5; box-shadow:0 12px 0 #e5e5e5, 0 20px 0 #e5e5e5; }

/* ---------------- Sélecteur de jours (dispatch) ---------------- */
.jour-toggle { transition: background .12s, border-color .12s, color .12s; }
.jour-toggle:hover { border-color: var(--jaune); }
.jour-toggle.actif { background: var(--noir); border-color: var(--noir); color: #fff; }

/* ---------------- Liste déroulante multi-sélection (ex. vendeurs d'une boutique) ---------------- */
.multiselect { position: relative; }
.multiselect-bouton {
  width: 100%; text-align: left; padding: 9px 14px; border: 1px solid var(--gris-bord);
  border-radius: 9px; background: var(--blanc-pur); font: inherit; font-size: 14px;
  color: var(--noir-80); cursor: pointer; display: flex; align-items: center; justify-content: space-between;
}
.multiselect-bouton::after { content: '▾'; color: var(--gris-txt); margin-left: 8px; }
.multiselect-bouton:hover { border-color: var(--jaune); }
.multiselect-panneau {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--blanc-pur); border: 1px solid var(--gris-bord); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; max-height: 200px; overflow-y: auto;
}
/* Spécificité (classe+élément) volontairement égale à « .champ label »/« .champ input » —
   la multisélection étant toujours nichée dans un .champ, ces règles génériques (pensées
   pour label+input classiques) s'appliquaient aussi à tort ici : label passé en display:block
   (au lieu du flex voulu) et checkbox étiré en width:100% façon champ texte, avec bordure et
   padding — d'où une case à cocher géante et mal alignée. Qualifiée par élément pour gagner
   sur la règle générique sans dépendre de l'ordre des règles dans le fichier. */
.multiselect-panneau label.multiselect-item {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 8px;
  border-radius: 6px; cursor: pointer;
}
.multiselect-item:hover { background: var(--gris-fond); }
.multiselect-item input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; padding: 0; border-radius: 4px;
  accent-color: var(--jaune);
}

/* ---------------- Aperçu de facture en direct (live, sans téléchargement) ---------------- */
.facture-apercu-live {
  background: #fff; border: 1px solid var(--gris-bord); border-radius: 10px;
  padding: 36px 34px; font-size: 12.5px; color: #1a1a1a; min-height: 420px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.fal-entete { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; }
.fal-identite { display: flex; align-items: flex-start; gap: 14px; }
.fal-monogramme {
  flex-shrink: 0; width: 40px; height: 40px; border: 1.3px solid #1a1a1a; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
}
.fal-nom { font-weight: 800; font-size: 14.5px; letter-spacing: 0.6px; text-transform: uppercase; }
.fal-lignes { color: #8a8a8a; font-size: 9.5px; margin-top: 5px; line-height: 1.6; }
.fal-titre { font-weight: 800; font-size: 17px; text-align: right; letter-spacing: 1px; }
.fal-meta { color: #8a8a8a; font-size: 9.5px; text-align: right; margin-top: 6px; line-height: 1.6; }
.fal-separateur { border: none; border-top: 1px solid #e4e4e4; margin: 18px 0; }
.fal-client-label { color: #8a8a8a; font-size: 8.5px; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }
.fal-client-nom { color: #1a1a1a; font-size: 11px; margin-bottom: 3px; }
.fal-client { color: #8a8a8a; line-height: 1.6; font-size: 10px; }
.fal-tableau { margin-top: 26px; }
.fal-tableau-entete {
  display: flex; padding: 0 0 8px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.8px;
  color: #8a8a8a; border-bottom: 1.3px solid #1a1a1a;
}
.fal-tableau-ligne { display: flex; padding: 14px 0; color: #1a1a1a; font-size: 11px; border-bottom: 1px solid #e4e4e4; }
.fal-tableau .col-designation { flex: 1; }
.fal-tableau .col-qte { width: 60px; text-align: right; }
.fal-tableau .col-total { width: 110px; text-align: right; }
.fal-total {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 24px; margin-top: 18px;
  padding-top: 12px; border-top: 1.3px solid #1a1a1a; font-size: 10px; color: #8a8a8a;
}
.fal-total span:last-child { font-weight: 800; font-size: 18px; color: #1a1a1a; }
.fal-mention { color: #8a8a8a; font-size: 9.5px; margin-top: 30px; line-height: 1.6; }

.facture-apercu-live.modele-moderne { padding-top: 0; overflow: hidden; }
.facture-apercu-live.modele-moderne .fal-entete { background: #1a1a1a; color: #fff; margin: 0 -34px 24px; padding: 34px 34px 24px; }
.facture-apercu-live.modele-moderne .fal-monogramme { background: #fff; color: #1a1a1a; border-color: #fff; }
.facture-apercu-live.modele-moderne .fal-nom { color: #fff; }
.facture-apercu-live.modele-moderne .fal-titre { color: #fff; }
.facture-apercu-live.modele-moderne .fal-lignes, .facture-apercu-live.modele-moderne .fal-meta { color: #a8a8a8; }
.facture-apercu-live.modele-moderne .fal-tableau-entete { border-bottom-color: #e4e4e4; }
.facture-apercu-live.modele-moderne .fal-total {
  background: #1a1a1a; color: #a8a8a8; border-radius: 8px; padding: 14px 18px; border-top: none;
}
.facture-apercu-live.modele-moderne .fal-total span:last-child { color: #fff; }

.facture-apercu-live.modele-minimal .fal-monogramme { display: none; }
.facture-apercu-live.modele-minimal .fal-nom { font-size: 12.5px; }
.facture-apercu-live.modele-minimal .fal-tableau-entete { display: none; }
.facture-apercu-live.modele-minimal .fal-tableau-ligne { border-bottom: none; padding: 6px 0; }