:root {
  /* Le rapport des photos de plats du restaurant servi : l'aperçu montre ce
     que le client verra, sans rien rogner. Voir src/menu/formats-photo.ts. */
  --ratio-photo:16 / 9;
  /* La couleur du restaurant servi, pour la seule pastille de marque. Le
     reste de l'écran cuisine garde ses couleurs de métier — vert, orange et
     rouge y veulent dire prêt, en cours et problème, et les repeindre aux
     couleurs d'une enseigne ferait perdre du temps en plein service. */
  --marque:#ea171c;
  --fond:#f5f7f9; --surface:#ffffff; --surface-2:#eef0f3;
  --trait:#dcdee1; --trait-fort:#c1c4c9;
  --encre:#181b1f; --encre-2:#494d54; --encre-3:#656970;
  --or:#ecae30; --or-fort:#e09c1a; --or-texte:#8a5600; --or-doux:#fdefcf; --sur-or:#261a0d;
  --vert:#1d7d3e; --vert-doux:#e0f7e4; --vert-texte:#0b5d2a;
  --rouge:#c52c2a; --rouge-doux:#ffece9; --rouge-texte:#a51f1e;
  --orange-doux:#ffecd8; --orange-texte:#9b4805;
  --bleu-doux:#e8f3ff; --bleu-texte:#265b8d;
  --canal-whatsapp:#0f7a3d; --canal-gloriafood:#1668c6; --canal-borne:#b3187d; --canal-site:#a14a00;
  --canal-caisse:#4b5563;
  --ombre:0 1px 2px rgba(20,24,31,.06), 0 4px 14px rgba(20,24,31,.05);
  --ombre-haute:0 12px 32px rgba(20,24,31,.18);
  --rayon:14px; --rayon-m:10px; --rayon-s:7px;
  --t-xs:.8125rem; --t-s:.875rem; --t-m:1rem; --t-l:1.125rem; --t-xl:1.25rem;
  --police:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-chiffres:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --marge:clamp(.75rem, 2vw, 1.5rem);
  --barre:64px;
  --z-collant:10; --z-barre:20; --z-bandeau:30; --z-avis:40;
  --sortie:cubic-bezier(.25, 1, .5, 1);
  color-scheme:light;
}
[data-theme="sombre"] {
  --fond:#0e0f12; --surface:#181a1d; --surface-2:#1f2226;
  --trait:#2e3034; --trait-fort:#45484d;
  --encre:#f0f2f4; --encre-2:#bbbec2; --encre-3:#9b9fa3;
  --or:#edb333; --or-fort:#f8c655; --or-texte:#f5c25f; --or-doux:#3a270b; --sur-or:#1c140c;
  --vert-doux:#15301b; --vert-texte:#89da9b;
  --rouge-doux:#481b17; --rouge-texte:#ffa89d;
  --orange-doux:#44250c; --orange-texte:#ffb980;
  --bleu-doux:#192a3c; --bleu-texte:#a2c8f0;
  --ombre:0 1px 2px rgba(0,0,0,.5);
  --ombre-haute:0 14px 36px rgba(0,0,0,.6);
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--fond); color:var(--encre); font-family:var(--police);
  font-size:var(--t-m); line-height:1.45; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--or); outline-offset:2px; }
.invisible, .evitement:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
.evitement:focus { position:fixed; top:.5rem; left:.5rem; z-index:var(--z-avis); padding:.6rem 1rem;
  background:var(--surface); border-radius:var(--rayon-m); box-shadow:var(--ombre-haute); }
.icone { width:1.125em; height:1.125em; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }

/* --- Barre du haut --- */
.barre { position:sticky; top:0; z-index:var(--z-barre); display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem 1.25rem; padding:.7rem var(--marge); background:var(--surface); border-bottom:1px solid var(--trait); }
.marque { display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.marque-signe { display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--marque); color:#fff; font-size:.8125rem; font-weight:800; letter-spacing:-.02em; }
.marque-texte { display:flex; flex-direction:column; line-height:1.15; }
.marque-texte strong { font-size:var(--t-m); font-weight:700; }
.marque-texte span { color:var(--encre-3); font-size:var(--t-xs); }
.vues { display:flex; gap:.25rem; padding:.25rem; border-radius:12px; background:var(--surface-2); }
.vue { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:40px; padding:0 .95rem;
  border:0; border-radius:9px; background:transparent; color:var(--encre-2); font-size:var(--t-s); font-weight:600;
  transition:background-color .18s var(--sortie), color .18s var(--sortie), box-shadow .18s var(--sortie); }
.vue:hover { color:var(--encre); }
.vue[aria-selected="true"] { background:var(--surface); color:var(--encre); box-shadow:var(--ombre); }
.compteur { min-width:1.5rem; padding:0 .4rem; border-radius:999px; background:var(--surface-2); color:var(--encre-2);
  font-size:var(--t-xs); font-weight:700; line-height:1.5rem; text-align:center; font-variant-numeric:tabular-nums; }
.compteur.presse { background:var(--or); color:var(--sur-or); }
/* Un client qui attend au bout du fil : rouge tant qu'il attend, battant tant
   que personne n'a ouvert l'onglet. */
.relais-vue { margin-right:.35rem; }
.vue.urgent .compteur { background:var(--rouge); color:#fff; }
.vue.jamais-vu { background:var(--rouge-doux); color:var(--rouge-texte); }
.vue.jamais-vu[aria-selected="true"] { background:var(--surface); }
.vue.jamais-vu .compteur { animation:signal 1.6s ease-in-out infinite; }
.outils { display:flex; align-items:center; gap:.4rem; }
.etat { display:inline-flex; align-items:center; gap:.45rem; margin-right:.35rem; color:var(--encre-3);
  font-size:var(--t-xs); font-variant-numeric:tabular-nums; white-space:nowrap; }
.etat::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--vert); }
.etat.hors-ligne { color:var(--rouge-texte); font-weight:600; }
.etat.hors-ligne::before { background:var(--rouge); }
.outil { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-width:40px; min-height:40px;
  padding:0 .75rem; border:1px solid var(--trait); border-radius:var(--rayon-m); background:var(--surface);
  color:var(--encre-2); font-size:var(--t-s); font-weight:600;
  transition:background-color .18s var(--sortie), border-color .18s var(--sortie), color .18s var(--sortie); }
.outil:hover { background:var(--surface-2); color:var(--encre); }
.outil[aria-pressed="true"] { border-color:var(--or); background:var(--or-doux); color:var(--or-texte); }
.deconnexion { display:contents; }

/* --- Contenu --- */
.contenu { max-width:1680px; margin:0 auto; padding:1rem var(--marge) 3rem; }
.contenu:focus { outline:none; }
body.avec-bandeau .contenu { padding-bottom:7rem; }

/* --- La liste : une ligne par commande ----------------------------------
   Le kanban montrait trois grandes cartes de front ; en service, l'écran se
   remplissait et il fallait faire défiler chaque colonne. Une ligne tient
   l'essentiel sur une hauteur de doigt, et le détail se déplie dessous. */
.liste { display:grid; gap:1.4rem; max-width:1100px; margin:0 auto; }
/* Ce qui arrive à gauche, ce qui cuit à droite : d'un regard, on sait s'il
   faut accepter avant de retourner au wok. */
@media (min-width:1000px) {
  .liste.deux-colonnes { grid-template-columns:1fr 1fr; align-items:start; max-width:1500px; }
  .liste.deux-colonnes .resume { grid-column:1 / -1; }
  /* Une colonne fait la moitié de l'écran : le geste prend toute la largeur
     sous les informations, plutôt que de les écraser contre le bord. */
  .liste.deux-colonnes .ligne-ouvrir { flex-wrap:wrap; gap:.3rem .7rem; }
  /* Sans base courte, le nom et ses repères réclament toute la largeur et
     chassent le minuteur sur sa propre ligne. */
  .liste.deux-colonnes .ligne-principal { flex:1 1 9rem; }
  .liste.deux-colonnes .ligne-montant { justify-items:start; }
  .liste.deux-colonnes .chevron { margin-left:auto; }
  .liste.deux-colonnes .ligne-tete .zone-actions { flex:1 1 100%; max-width:none; }
}
.liste.chargement { gap:.5rem; }
.groupe { display:grid; gap:.5rem; }
.groupe[hidden] { display:none; }
.groupe-tete { display:flex; align-items:center; gap:.6rem; padding:0 .15rem; }
.groupe-tete h2 { margin:0; color:var(--encre-2); font-size:var(--t-s); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; }
.nombre { min-width:1.6rem; padding:0 .45rem; border-radius:999px; background:var(--surface-2); color:var(--encre-2);
  font-size:var(--t-xs); font-weight:700; line-height:1.6rem; text-align:center; font-variant-numeric:tabular-nums; }
.groupe.urgent .nombre { background:var(--or); color:var(--sur-or); }
.groupe.urgent .groupe-tete h2 { color:var(--or-texte); }
.groupe-corps { display:grid; gap:.45rem; }
.groupe-vide { margin:0; padding:1rem; border:1px dashed var(--trait-fort); border-radius:var(--rayon);
  color:var(--encre-3); font-size:var(--t-s); line-height:1.5; }
.resume { margin:0; color:var(--encre-2); font-size:var(--t-s); font-variant-numeric:tabular-nums; }

.ligne { border:1px solid var(--trait); border-left:9px solid var(--canal, var(--trait-fort));
  border-radius:var(--rayon); background:var(--surface);
  box-shadow:var(--ombre); transition:border-color .2s var(--sortie), box-shadow .2s var(--sortie); }
/* D'où vient la commande, avant même d'avoir lu : le liseré le dit sur toute
   la hauteur de la ligne, la pastille le nomme. */
.ligne[data-canal="whatsapp"] { --canal:var(--canal-whatsapp); }
.ligne[data-canal="gloriafood"] { --canal:var(--canal-gloriafood); }
.ligne[data-canal="qr"] { --canal:var(--canal-borne); }
.ligne[data-canal="site"] { --canal:var(--canal-site); }
.ligne[data-canal="caisse"] { --canal:var(--canal-caisse); }
/* Pleine et franche : trois fonds pâles se ressemblaient tous de loin, et
   c'est de loin qu'on lit un écran de cuisine. */
.canal { padding:.15rem .55rem; border-radius:999px; background:var(--canal, var(--encre-3));
  color:#fff; font-weight:700; letter-spacing:.01em; }
/* La livraison est l'exception : un livreur à trouver, une adresse à lire.
   Elle est la seule à porter une pastille pleine. */
.mode { padding:.1rem .45rem; border-radius:999px; background:var(--surface-2); color:var(--encre); font-weight:700; }
.mode.livraison { background:var(--encre); color:var(--surface); }
.ligne.arrivee { animation:apparition .24s var(--sortie) both; }
/* Nouvelle : le doré l'entoure, mais le liseré garde la couleur de son canal
   (Hedi, 2026-11-04 : la borne en attente passait pour une autre en jaune). */
.ligne.nouvelle { border-color:var(--or); border-left-color:var(--canal, var(--trait-fort));
  box-shadow:0 0 0 3px var(--or-doux), var(--ombre); }
/* Les gestes s'alignent en haut : quand le menu « Autres actions » se
   déroule, il pousse vers le bas sans décaler la commande qu'on lit. */
.ligne-tete { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem .75rem; padding:.55rem .75rem; }
.ligne-ouvrir { display:flex; flex:1 1 17rem; align-items:center; gap:.7rem; min-width:min(100%, 17rem); min-height:52px;
  padding:.3rem .4rem; border:0; border-radius:var(--rayon-m); background:transparent; text-align:left; }
.ligne-ouvrir:hover { background:var(--surface-2); }
/* Le nom du client garde une largeur plancher : plutôt voir les gestes passer
   à la ligne que lire « Nadia » et « Belkacem » l'un sous l'autre. */
.ligne-principal { display:grid; flex:1 1 auto; gap:.1rem; min-width:10rem; overflow:hidden; }
.ligne-client { font-size:var(--t-l); font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.ligne-sous { display:flex; flex-wrap:wrap; gap:.15rem .6rem; min-width:0; color:var(--encre-2); font-size:var(--t-s); }
.ligne-sous > span { display:inline-flex; flex:none; align-items:center; gap:.3rem; min-width:0; }
.marque-note { flex:none; color:var(--or-texte); font-weight:700; }
/* La consigne prend sa propre ligne sous les pastilles et passe à la ligne
   autant qu'il faut : coupée, une allergie finirait à la casserole. */
.ligne-sous > .marque-note { flex:1 1 100%; align-items:flex-start; overflow-wrap:anywhere; }
.ligne-sous > .marque-note .icone { flex:none; margin-top:.15em; }
.marque-motif { flex:none; color:var(--rouge-texte); font-weight:700; }
.ligne-date { flex:none; color:var(--encre-2); font-size:var(--t-s); font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ligne-montant { display:grid; flex:none; justify-items:end; gap:.1rem; }
.ligne-montant strong { font-size:var(--t-l); font-variant-numeric:tabular-nums; }
.chevron { flex:none; color:var(--encre-3); transition:transform .2s var(--sortie); }
.ligne.ouverte .chevron { transform:rotate(180deg); }
.ligne-detail { display:grid; gap:.7rem; padding:.8rem 1rem 1rem; border-top:1px solid var(--trait); }
.ligne-detail[hidden] { display:none; }
.ligne-detail .articles { padding-top:0; border-top:0; }
.ligne-detail .reference { margin:0; }
.ligne-detail .remise { margin:0; font-weight:600; }
.ligne-tete .zone-actions { flex:1 1 11rem; max-width:22rem; }
.reference { color:var(--encre-3); font-family:var(--police-chiffres); font-size:var(--t-xs); }
.contact { display:grid; gap:.2rem; color:var(--encre-2); font-size:var(--t-s); }
.contact a { display:inline-flex; align-items:center; gap:.4rem; width:max-content; min-height:34px;
  color:var(--encre); font-weight:600; text-decoration:none; font-variant-numeric:tabular-nums; }
.contact a:hover { text-decoration:underline; }
.adresse { display:flex; align-items:flex-start; gap:.4rem; }
.adresse .icone { margin-top:.15em; }

.signal { display:inline-block; width:9px; height:9px; margin:0 .45rem .12em 0; border-radius:50%;
  background:var(--or); vertical-align:middle; animation:signal 1.6s ease-in-out infinite; }
.minuteur { display:inline-flex; flex:none; align-items:center; gap:.35rem; min-height:30px; padding:0 .6rem;
  border-radius:999px; background:var(--surface-2); color:var(--encre-2); font-size:var(--t-s); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.minuteur.attention { background:var(--orange-doux); color:var(--orange-texte); }
.minuteur.retard { background:var(--rouge-doux); color:var(--rouge-texte); }
.minuteur.prevue { background:var(--bleu-doux); color:var(--bleu-texte); }
.pastille { display:inline-flex; flex:none; align-items:center; min-height:26px; padding:0 .55rem; border-radius:999px;
  background:var(--surface-2); color:var(--encre-2); font-size:var(--t-xs); font-weight:700; white-space:nowrap; }
.pastille.attente { background:var(--or-doux); color:var(--or-texte); }
.pastille.en-cours { background:var(--bleu-doux); color:var(--bleu-texte); }
.pastille.completed { background:var(--vert-doux); color:var(--vert-texte); }
.pastille.not_honoured { background:var(--rouge-doux); color:var(--rouge-texte); }
.paiement { display:inline-flex; align-items:center; min-height:24px; padding:0 .5rem; border-radius:999px;
  background:var(--surface-2); color:var(--encre-2); font-size:var(--t-xs); font-weight:700; white-space:nowrap; }
.paiement.payee { background:var(--vert-doux); color:var(--vert-texte); }
.note { display:flex; align-items:flex-start; gap:.5rem; margin:0; padding:.55rem .7rem; border-radius:var(--rayon-m);
  background:var(--or-doux); color:var(--encre); font-size:var(--t-s); font-weight:600; line-height:1.4; }
.note .icone { margin-top:.12em; color:var(--or-texte); }
.suivi { display:flex; align-items:center; gap:.45rem; margin:0; color:var(--bleu-texte); font-size:var(--t-s); font-weight:600; }

.articles { display:grid; gap:.55rem; margin:0; padding:.7rem 0 0; border-top:1px solid var(--trait); list-style:none; }
.article { display:grid; grid-template-columns:2.4rem minmax(0, 1fr); align-items:start; gap:.6rem; }
.qte { display:grid; place-items:center; min-height:1.9rem; border-radius:var(--rayon-s); background:var(--surface-2);
  font-weight:800; font-variant-numeric:tabular-nums; }
.article-nom { padding-top:.2rem; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.article-options { margin-top:.1rem; color:var(--encre-2); font-size:var(--t-s); }
.article-note { display:inline-flex; align-items:center; gap:.35rem; margin-top:.3rem; padding:.1rem .45rem;
  border-radius:var(--rayon-s); background:var(--or-doux); color:var(--or-texte); font-size:var(--t-s); font-weight:700; }
.zone-actions { display:grid; gap:.5rem; }

/* --- Boutons --- */
.actions { display:flex; gap:.5rem; }
/* Sans geste à faire ici : la ligne dit où il se fait. */
.actions-consigne { align-self:center; font-weight:600; color:var(--encre-2); }
.bouton { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:48px; padding:0 1rem;
  border:1px solid transparent; border-radius:var(--rayon-m); font-size:var(--t-m); font-weight:700; line-height:1.2;
  text-align:center; transition:background-color .16s var(--sortie), border-color .16s var(--sortie), transform .12s var(--sortie); }
.bouton:active { transform:scale(.98); }
.bouton:disabled { cursor:progress; opacity:.6; }
.bouton.principal { flex:1; background:var(--or); color:var(--sur-or); }
.bouton.principal:hover { background:var(--or-fort); }
.bouton.neutre { flex:1; border-color:var(--trait); background:var(--surface-2); color:var(--encre); }
.bouton.neutre:hover { border-color:var(--trait-fort); }
.bouton.plus { flex:none; width:48px; padding:0; border-color:var(--trait); background:var(--surface); color:var(--encre-2); }
.bouton.plus[aria-expanded="true"] { background:var(--surface-2); color:var(--encre); }
.bouton.option { justify-content:flex-start; border-color:var(--trait); background:var(--surface); color:var(--encre); }
.bouton.option.risque { color:var(--rouge-texte); }
.bouton.danger { flex:1; background:var(--rouge); color:#fff; }
.bouton.retour { flex:1; border-color:var(--trait); background:var(--surface); color:var(--encre); }
.plus-options, .confirmation { display:grid; gap:.5rem; padding:.7rem; border-radius:var(--rayon-m);
  background:var(--surface-2); animation:deploiement .18s var(--sortie) both; }
.confirmation p { margin:0; font-size:var(--t-s); font-weight:600; }
.motifs { display:flex; flex-wrap:wrap; gap:.4rem; }
.motif { min-height:40px; padding:0 .8rem; border:1px solid var(--trait); border-radius:999px; background:var(--surface);
  color:var(--encre); font-size:var(--t-s); font-weight:600; }
.motif[aria-pressed="true"] { border-color:var(--rouge); background:var(--rouge-doux); color:var(--rouge-texte); }
.champ { width:100%; min-height:44px; padding:0 .8rem; border:1px solid var(--trait-fort); border-radius:var(--rayon-s);
  background:var(--surface); color:var(--encre); }
.champ::placeholder { color:var(--encre-3); }
.confirmation-actions { display:flex; gap:.5rem; }
/* Page Ruptures : un plat épuisé reste à sa place, grisé. */
.ruptures { display:grid; gap:1rem; max-width:48rem; margin:0 auto; padding:1.25rem var(--marge) 5rem; }
.ruptures h1 { margin:0; font-size:var(--t-xl); }
.ruptures-aide { margin:0; color:var(--encre-2); }
/* Le retour d'un geste reste à l'écran, en bas : il se voit même après un geste en fin de liste. */
.ruptures-message { position:fixed; z-index:5; right:var(--marge); bottom:1rem; left:var(--marge); max-width:40rem;
  margin:0 auto; padding:.7rem 1rem; border-radius:var(--rayon-m); background:var(--encre); color:var(--surface);
  font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.ruptures-message:empty { display:none; }

/* Page Carte : plats, prix, options. */
.carte { display:grid; gap:1rem; max-width:52rem; margin:0 auto; padding:1.25rem var(--marge) 6rem; }
.carte h1 { margin:0; font-size:var(--t-xl); }
.carte-aide { margin:0; color:var(--encre-2); font-size:var(--t-s); }
.carte-avertissement { display:grid; gap:.3rem; padding:.7rem .9rem; border-radius:var(--rayon-m); background:var(--or-doux);
  color:var(--or-texte); font-size:var(--t-s); font-weight:600; }
.carte-avertissement[hidden] { display:none; }
.carte-avertissement p { margin:0; }
.carte-case input:disabled + span { color:var(--encre-2); }
.carte-onglets { display:flex; gap:.4rem; }
.carte-onglet { min-height:44px; padding:0 1.1rem; border:1px solid var(--trait); border-radius:999px; background:var(--surface);
  color:var(--encre); font-weight:700; }
.carte-onglet[aria-selected="true"] { border-color:var(--encre); background:var(--encre); color:var(--surface); }
.carte-contenu { display:grid; gap:1.25rem; }
.carte-rubrique { display:grid; gap:.5rem; }
.carte-rubrique.masquee .carte-plats { opacity:.55; }
.carte-tete { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
.carte-tete h2 { margin:0; color:var(--encre-2); font-size:var(--t-s); letter-spacing:.04em; text-transform:uppercase; }
.carte-badge { padding:.1rem .5rem; border-radius:999px; background:var(--surface-2); color:var(--encre-2); font-size:var(--t-xs); font-weight:700; }
.carte-plats { display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.carte-plat { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem;
  padding:.6rem .75rem; border:1px solid var(--trait); border-radius:var(--rayon-m); background:var(--surface); }
.carte-plat.masque { background:var(--surface-2); }
.carte-plat.masque .carte-nom { color:var(--encre-2); }
.carte-texte { display:grid; flex:1 1 14rem; gap:.1rem; min-width:0; }
.carte-nom { font-weight:700; overflow-wrap:anywhere; }
.carte-details, .carte-description { color:var(--encre-2); font-size:var(--t-s); }
.carte-gestes { display:flex; flex-wrap:wrap; gap:.4rem; }
.carte-gestes .bouton, .carte-tete .bouton, .carte-rubrique > .bouton { flex:none; }
.bouton.petit { min-height:40px; padding:0 .8rem; font-size:var(--t-s); }
.carte-rubrique > .bouton, .carte-contenu > .bouton { justify-self:start; }
.carte-formulaire { display:grid; flex:1 1 100%; gap:.75rem; padding:.9rem; border-radius:var(--rayon-m); background:var(--surface-2); }
.carte-grille { display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:.75rem; }
.carte-formulaire textarea.champ { min-height:4rem; padding:.6rem .8rem; resize:vertical; }
.carte-case { display:flex; align-items:center; gap:.5rem; font-size:var(--t-s); font-weight:600; }
.carte-case input { width:1.2rem; height:1.2rem; }
.carte-groupes { display:grid; gap:.4rem; margin:0; padding:.6rem .8rem; border:1px solid var(--trait); border-radius:var(--rayon-s); }
.carte-groupes legend { padding:0 .3rem; color:var(--encre-2); font-size:var(--t-s); font-weight:700; }
.carte-allergenes-grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(7rem, 1fr)); gap:.35rem .75rem; }
.carte-photo-apercu { display:block; width:100%; max-width:22rem; height:auto; aspect-ratio:var(--ratio-photo); object-fit:cover;
  border-radius:var(--rayon-s); background:var(--surface); }
/* Le champ fichier couvre son bouton : un toucher ouvre l'appareil photo ou la galerie. */
.carte-photo-choix { position:relative; overflow:hidden; cursor:pointer; }
.carte-photo-choix:focus-within { outline:2px solid var(--encre); outline-offset:2px; }
.carte-photo-fichier { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.carte-photo [hidden] { display:none; }
.carte-pied { display:flex; flex-wrap:wrap; gap:.5rem; }
.carte-pied .bouton { flex:none; min-width:8rem; }
.carte-message { position:fixed; z-index:5; right:var(--marge); bottom:1rem; left:var(--marge); max-width:40rem;
  margin:0 auto; padding:.7rem 1rem; border-radius:var(--rayon-m); background:var(--encre); color:var(--surface);
  font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.carte-message:empty { display:none; }
.ruptures-liste { display:grid; gap:1.25rem; }
.ruptures-pour { margin:-.3rem 0 .5rem; color:var(--encre-2); font-size:var(--t-s); }
.ruptures-section h2 { margin:0 0 .5rem; color:var(--encre-2); font-size:var(--t-s); letter-spacing:.04em; text-transform:uppercase; }
.ruptures-plats { display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.rupture-plat { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem;
  padding:.6rem .75rem; border:1px solid var(--trait); border-radius:var(--rayon-m); background:var(--surface); }
.rupture-plat.epuise { background:var(--surface-2); }
.rupture-texte { display:grid; flex:1 1 12rem; gap:.1rem; min-width:0; }
.rupture-nom { font-weight:700; overflow-wrap:anywhere; }
.rupture-plat.epuise .rupture-nom { color:var(--encre-2); text-decoration:line-through; }
.rupture-etat { color:var(--encre-2); font-size:var(--t-s); }
.rupture-plat.epuise .rupture-etat { color:var(--rouge-texte); font-weight:700; }
.rupture-gestes { display:flex; flex-wrap:wrap; gap:.4rem; }
.rupture-gestes .bouton { flex:none; }
.ruptures-vide { margin:0; color:var(--encre-2); }

/* Accepter une commande WhatsApp : un délai, un toucher. */
.actions.avec-delais { align-items:flex-end; }
.acceptation { flex:1; display:grid; gap:.3rem; min-width:0; }
.acceptation-titre { color:var(--encre-2); font-size:var(--t-s); font-weight:700; }
.delais { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.4rem; }
.bouton.delai { padding:0 .3rem; white-space:nowrap; }

/* --- Chargement, calme, bandeau, avis --- */
.squelette { height:4.75rem; border:1px solid var(--trait); border-radius:var(--rayon);
  background:linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%;
  animation:reflet 1.4s ease-in-out infinite; }
.calme { display:grid; justify-items:center; gap:.75rem; max-width:34rem; margin:10vh auto 0; padding:2rem 1.5rem; text-align:center; }
.calme .icone { width:2.5rem; height:2.5rem; color:var(--or-texte); stroke-width:1.5; }
.calme h2 { margin:0; font-size:var(--t-xl); }
.calme p { margin:0; color:var(--encre-2); line-height:1.55; text-wrap:pretty; }
.calme .bouton { flex:none; }
.bandeau { position:fixed; right:0; bottom:0; left:0; z-index:var(--z-bandeau); display:flex; flex-wrap:wrap;
  align-items:center; gap:.5rem .75rem; padding:.8rem var(--marge) calc(.8rem + env(safe-area-inset-bottom));
  font-size:var(--t-s); font-weight:600; box-shadow:0 -1px 0 var(--trait), var(--ombre-haute); }
.bandeau.erreur { background:var(--rouge-doux); color:var(--rouge-texte); }
.bandeau.info { background:var(--or-doux); color:var(--or-texte); }
.bandeau button { margin-left:auto; min-height:38px; padding:0 .85rem; border:1px solid currentColor;
  border-radius:var(--rayon-s); background:transparent; color:inherit; font-weight:700; }
.avis-zone { position:fixed; bottom:calc(1rem + env(safe-area-inset-bottom)); left:50%; z-index:var(--z-avis);
  display:grid; gap:.5rem; width:min(34rem, calc(100vw - 2rem)); transform:translateX(-50%); pointer-events:none; }
body.avec-bandeau .avis-zone { bottom:calc(5rem + env(safe-area-inset-bottom)); }

/* Son bloqué par le navigateur : tout l'écran le dit, un bandeau s'oubliait. */
.voile-son { position:fixed; inset:0; z-index:calc(var(--z-avis) + 10); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; padding:2rem; border:0; background:var(--or);
  color:var(--sur-or); font:inherit; text-align:center; cursor:pointer; }
.voile-son-titre { font-size:clamp(1.75rem, 5vw, 3rem); font-weight:800; line-height:1.15; text-wrap:balance; }
.voile-son-detail { max-width:32rem; font-size:var(--t-l); font-weight:600; }
.avis { display:flex; align-items:flex-start; gap:.6rem; padding:.8rem 1rem; border-radius:var(--rayon-m);
  box-shadow:var(--ombre-haute); font-weight:600; line-height:1.4; pointer-events:auto;
  animation:apparition .22s var(--sortie) both; }
.avis .icone { margin-top:.12em; }
.avis.ok { background:var(--encre); color:var(--surface); }
.avis.alerte { background:var(--rouge); color:#fff; }
.avis a { color:inherit; }
.avis button { flex:none; margin-left:auto; min-height:34px; padding:0 .7rem; border:1px solid currentColor;
  border-radius:var(--rayon-s); background:transparent; color:inherit; font-weight:700; }

/* --- Page de connexion --- */
body.connexion { display:grid; place-items:center; min-height:100vh; min-height:100dvh; padding:1.5rem; }
.connexion-panneau { display:grid; gap:1.1rem; width:min(24rem, 100%); padding:2rem 1.75rem; border:1px solid var(--trait);
  border-radius:18px; background:var(--surface); box-shadow:var(--ombre-haute); }
.connexion-panneau .marque { margin:0; }
.connexion-panneau h1 { margin:0; font-size:var(--t-xl); line-height:1.25; }
.connexion-panneau > p { margin:0; color:var(--encre-2); font-size:var(--t-s); }
.connexion-panneau label { display:grid; gap:.4rem; font-size:var(--t-s); font-weight:600; }
.connexion-panneau .bouton { width:100%; }
.connexion-panneau .erreur { margin:0; padding:.6rem .75rem; border-radius:var(--rayon-s); background:var(--rouge-doux);
  color:var(--rouge-texte); font-size:var(--t-s); font-weight:600; }

/* --- Petits écrans : l'essentiel, sans rien perdre --- */
/* Cinq onglets tiennent la largeur : les outils se réduisent à leur icône
   plus tôt qu'avant, pour que la barre reste sur une seule ligne. */
@media (max-width:1399px) {
  .outil { width:40px; padding:0; }
  .outil-texte { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (max-width:1099px) {
  .barre { gap:.6rem; }
  .vues { order:3; width:100%; overflow-x:auto; scrollbar-width:none; }
  .vue { flex:1 0 auto; padding:0 .7rem; }
}
@media (max-width:640px) {
  .etat { display:none; }
  .ligne-ouvrir { flex-wrap:wrap; gap:.4rem .6rem; }
  .ligne-montant { justify-items:start; }
  .ligne-tete .zone-actions { max-width:none; }
}

@keyframes apparition { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes deploiement { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes signal { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.75); } }
@keyframes reflet { from { background-position:100% 0; } to { background-position:0 0; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
}
/* --- Clients qui attendent quelqu'un -------------------------------------
   Une bande orange en haut de l'écran, qui n'existe que s'il y a un cas.
   Elle passe devant les commandes : un client bloqué se traite avant de
   ranger une carte de plus. */
.relais{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:stretch;
  max-width:1100px; margin:0 auto;
}
.relais-titre{
  flex:1 0 100%; margin:0; font-size:var(--t-l); color:var(--rouge-texte);
}
.relais-carte{
  flex:1 1 300px; display:flex; flex-direction:column; gap:.5rem;
  padding:1rem; background:var(--surface); border:2px solid var(--rouge);
  border-radius:var(--rayon); box-shadow:var(--ombre);
}
.relais-tete{display:flex; flex-direction:column; gap:.15rem}
.relais-nom{font-size:var(--t-l)}
.relais-motif{font-size:var(--t-s); color:var(--rouge-texte); font-weight:600}
.relais-detail{margin:0; font-size:var(--t-s); color:var(--encre-2)}
.relais-numero{
  margin:0; font-family:var(--police-chiffres); font-size:var(--t-l);
  color:var(--encre);
}
/* Les gestes tiennent la largeur : on les touche debout, sans viser. */
.relais-gestes{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:auto}
.relais-gestes .bouton{width:100%; min-height:52px}
.relais-ecarter{
  align-self:flex-end; padding:.35rem .6rem; font:inherit; font-size:var(--t-xs);
  color:var(--encre-3); background:none; border:0; cursor:pointer;
  text-decoration:underline;
}
@media (max-width:600px){
  .relais-gestes{grid-template-columns:1fr}
}

/* --- Pause et mode rush (équipe) --- */
/* Le bandeau reste sous la barre tant qu'une pause ou un rush court : la
   cuisine doit voir d'un coup d'œil que les clients ne peuvent plus commander. */
.service-bandeau { position:sticky; top:var(--barre); z-index:var(--z-collant); display:grid; gap:.4rem;
  padding:.6rem var(--marge); border-bottom:1px solid var(--trait); background:var(--orange-doux);
  color:var(--orange-texte); font-weight:600; }
.service-bandeau[hidden], .service-panneau[hidden] { display:none; }
.service-ligne { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; width:100%; max-width:1680px; margin:0 auto; }
.service-ligne .bouton { flex:none; min-height:40px; margin-left:auto; }
.service-panneau { position:fixed; top:calc(var(--barre) + .5rem); right:var(--marge); z-index:var(--z-bandeau);
  display:grid; gap:.6rem; width:min(24rem, calc(100% - 2 * var(--marge))); padding:1rem 1.1rem;
  border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface); box-shadow:var(--ombre-haute); }
.service-panneau h2 { margin:.25rem 0 0; font-size:var(--t-m); }
.service-aide { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.service-choix { display:flex; flex-wrap:wrap; gap:.5rem; }
.service-choix .bouton { flex:1 1 auto; min-height:48px; }
.service-choix .bouton[aria-pressed="true"] { border-color:var(--or); background:var(--or-doux); color:var(--or-texte); }

/* --- Administration : l'accueil et ses rubriques --- */
.admin { display:grid; gap:1rem; max-width:44rem; margin:0 auto; padding:1.5rem var(--marge) 4rem; }
.admin h1 { margin:0; font-size:var(--t-xl); }
.admin-aide { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.admin-rubriques { display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }
.admin-rubrique { display:grid; gap:.25rem; padding:1.1rem 1.25rem; border:1px solid var(--trait);
  border-radius:var(--rayon); background:var(--surface); color:inherit; text-decoration:none; }
.admin-rubrique:hover { border-color:var(--trait-fort); }
.admin-rubrique strong { font-size:var(--t-l); }
.admin-rubrique span { color:var(--encre-2); font-size:var(--t-s); }

/* --- Clients et produits (administration) --- */
.page-clients ::selection { background:var(--or-doux); color:var(--encre); }
.clients { display:grid; gap:1.25rem; max-width:68rem; margin:0 auto; padding:1.25rem var(--marge) 6rem; }
.clients:focus, .clients h1:focus { outline:none; }
.clients h1 { margin:0; font-size:var(--t-xl); }
.clients h2 { margin:0; font-size:var(--t-l); }
.clients-entete { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem; }
.clients-filtres { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1rem; }
.clients-filtre { display:grid; gap:.35rem; color:var(--encre-3); font-size:var(--t-xs); font-weight:600; }
.clients-filtre .champ { min-width:11rem; min-height:44px; }
.clients .vue[aria-pressed="true"] { background:var(--surface); color:var(--encre); box-shadow:var(--ombre); }
/* L'écran cuisine envoie ses onglets en bas sur tablette (order:3) : ici, ils restent sous le titre. */
.clients .vues { order:0; }
.clients-onglets { justify-self:start; }
.clients-onglets .vue { min-height:44px; padding:0 1.2rem; font-size:var(--t-m); }
.clients-panneau { display:grid; gap:1.75rem; transition:opacity .15s var(--sortie); }
.clients-panneau[hidden] { display:none; }
.clients-attente .clients-panneau { opacity:.5; }
.clients-section { display:grid; gap:.75rem; }
.clients-section > .carte-aide { margin-top:-.4rem; }
/* Les chiffres d'un onglet : une seule barre, des filets d'un pixel entre les cases. */
.clients-resume { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0; overflow:hidden;
  border:1px solid var(--trait); border-radius:var(--rayon); background:var(--trait); }
.clients-resume div { display:grid; gap:.2rem; align-content:start; padding:.85rem 1rem; background:var(--surface); }
.clients-resume div:last-child:nth-child(odd) { grid-column:1 / -1; }
.clients-resume dt { color:var(--encre-3); font-size:var(--t-xs); font-weight:600; }
.clients-resume dd { margin:0; font-size:var(--t-xl); font-weight:700; font-variant-numeric:tabular-nums; }
.clients-chiffre { text-align:right; font-variant-numeric:tabular-nums; }
.clients-defile { overflow-x:auto; border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface); }
.clients-tableau { width:100%; border-collapse:collapse; font-size:var(--t-s); }
.clients-tableau th, .clients-tableau td { padding:.65rem .9rem; border-bottom:1px solid var(--trait); text-align:left;
  white-space:nowrap; }
.clients-tableau th { background:var(--surface-2); color:var(--encre-3); font-size:var(--t-xs); font-weight:600; }
.clients-tableau th.clients-chiffre, .clients-tableau td.clients-chiffre { text-align:right; }
.clients-tableau .clients-texte { width:100%; min-width:9rem; white-space:normal; }
.clients-tableau tbody tr:last-child td { border-bottom:0; }
/* Les classes de la page posent leur propre display : [hidden] doit l'emporter. */
.clients [hidden] { display:none; }
.clients-vue-fiche { display:grid; gap:1.25rem; }
.clients-retour { justify-self:start; gap:.3rem; padding-left:.6rem; }
.clients-retour .clients-chevron { width:1.1rem; height:1.1rem; stroke:currentColor; }
.clients-fiche-titre { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
.clients-fiche-titre h1 { overflow-wrap:anywhere; }
.clients-fiche-sous { margin:-.75rem 0 0; color:var(--encre-2); font-size:var(--t-s); }
.clients-fiche-tete { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; }
.clients-preferes { display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.clients-preferes li { padding:.35rem .8rem; border:1px solid var(--trait); border-radius:999px; background:var(--surface);
  font-size:var(--t-s); font-weight:600; }
.clients-inscrits strong { overflow-wrap:anywhere; }
.clients-export { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.clients-export span { color:var(--encre-3); font-size:var(--t-s); }
.clients-outils { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1rem; }
.clients-outils .clients-recherche { flex:1 1 16rem; width:auto; }
.clients-resultats { margin:0; color:var(--encre-3); font-size:var(--t-s); }
/* La liste des clients : une ligne qui s'ouvre sur la fiche, en place. */
.clients-liste { display:grid; margin:0; padding:0; overflow:hidden; list-style:none; border:1px solid var(--trait);
  border-radius:var(--rayon); background:var(--surface); }
.clients-element + .clients-element { border-top:1px solid var(--trait); }
.clients-aucun { padding:1rem; color:var(--encre-2); }
.clients-ligne { display:grid; grid-template-columns:minmax(0, 1fr) 1.25rem; align-items:center; gap:.3rem .75rem; width:100%;
  min-height:60px; padding:.8rem 1rem; border:0; background:transparent; color:inherit; font:inherit; text-align:left;
  cursor:pointer; transition:background-color .15s var(--sortie); }
.clients-ligne:hover, .clients-ligne[aria-expanded="true"] { background:var(--surface-2); }
.clients-ligne:focus-visible { outline-offset:-3px; }
.clients-nom { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .5rem; grid-column:1; min-width:0; }
.clients-nom strong { overflow-wrap:anywhere; }
.clients-badge { padding:.1rem .5rem; border-radius:999px; background:var(--or-doux); color:var(--or-texte); font-size:var(--t-xs);
  font-weight:700; }
.clients-infos { display:flex; flex-wrap:wrap; gap:.15rem .5rem; grid-column:1; color:var(--encre-2); font-size:var(--t-s); }
.clients-infos > span { text-align:left; }
.clients-infos > span + span::before { content:"·"; margin-right:.5rem; color:var(--encre-3); }
.clients-chevron { grid-column:2; grid-row:1 / span 2; width:1.25rem; height:1.25rem; fill:none; stroke:var(--encre-3);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--sortie); }
.clients-ligne[aria-expanded="true"] .clients-chevron { transform:rotate(180deg); }
.clients-fiche { display:grid; gap:1rem; padding:.25rem 1rem 1.25rem; background:var(--surface-2); }
.clients-fiche[hidden] { display:none; }
.clients-coordonnees { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; color:var(--encre-2); font-size:var(--t-s); }
.clients-coordonnees a { color:var(--encre); font-weight:600; overflow-wrap:anywhere; text-underline-offset:.2em; }
.clients-canaux { display:flex; flex-wrap:wrap; gap:.35rem; }
.clients-canal { display:inline-flex; align-items:center; gap:.35rem; padding:.1rem .55rem; border:1px solid var(--trait);
  border-radius:999px; background:var(--surface); color:var(--encre-2); font-size:var(--t-xs); font-weight:600; }
.clients-canal::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--canal, var(--encre-3)); }
.clients-canal[data-canal="site"] { --canal:var(--canal-site); }
.clients-canal[data-canal="whatsapp"] { --canal:var(--canal-whatsapp); }
.clients-canal[data-canal="gloriafood"] { --canal:var(--canal-gloriafood); }
.clients-canal[data-canal="qr"] { --canal:var(--canal-borne); }
.clients-canal[data-canal="caisse"] { --canal:var(--canal-caisse); }
.clients-chargement { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.clients-reessayer { justify-self:start; }
/* Chaque commande se relit comme le ticket de caisse : pointillés, prix alignés, total en gras. */
.clients-tickets { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap:.75rem; margin:0;
  padding:0; list-style:none; }
.clients-ticket { display:grid; gap:.6rem; align-content:start; padding:1rem; border:1px solid var(--trait);
  border-radius:var(--rayon-m); background:var(--surface); box-shadow:var(--ombre); }
.clients-ticket-tete { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem; }
.clients-statut { padding:.1rem .55rem; border-radius:999px; background:var(--vert-doux); color:var(--vert-texte);
  font-size:var(--t-xs); font-weight:700; }
.clients-ticket-sous { margin:0; color:var(--encre-2); font-size:var(--t-s); overflow-wrap:anywhere; }
.clients-ticket-lignes { display:grid; gap:.45rem; margin:0; padding:.65rem 0 0; border-top:1px dashed var(--trait-fort);
  list-style:none; font-size:var(--t-s); }
.clients-ticket-lignes li { display:grid; grid-template-columns:2rem minmax(0, 1fr) auto; align-items:baseline; gap:.5rem; }
.clients-ticket-qte { color:var(--encre-3); font-weight:700; font-variant-numeric:tabular-nums; }
.clients-ticket-plat { display:grid; gap:.1rem; overflow-wrap:anywhere; }
.clients-ticket-plat small { color:var(--encre-3); font-size:var(--t-xs); }
.clients-ticket-lignes .clients-ticket-vide { display:block; color:var(--encre-3); }
.clients-ticket-totaux { display:grid; gap:.3rem; margin:0; padding-top:.65rem; border-top:1px dashed var(--trait-fort);
  font-size:var(--t-s); }
.clients-ticket-totaux div { display:flex; justify-content:space-between; gap:1rem; }
.clients-ticket-totaux dt { color:var(--encre-2); }
.clients-ticket-totaux dd { margin:0; }
.clients-ticket-total { font-size:var(--t-m); font-weight:700; }
.clients-ticket-total dt { color:var(--encre); }
.clients-ticket-ref { margin:0; color:var(--encre-3); font-size:var(--t-xs); }
.clients-inscrits { display:grid; margin:0; padding:0; list-style:none; border:1px solid var(--trait); border-radius:var(--rayon);
  background:var(--surface); }
.clients-inscrits li { display:grid; gap:.15rem; padding:.75rem 1rem; }
.clients-inscrits li + li { border-top:1px solid var(--trait); }
.clients-inscrits span { color:var(--encre-2); font-size:var(--t-s); overflow-wrap:anywhere; }
.clients-vide { display:grid; justify-items:start; gap:.75rem; padding:1.25rem; border:1px dashed var(--trait-fort);
  border-radius:var(--rayon); color:var(--encre-2); }
.clients-vide p { margin:0; }
.clients-squelette { display:grid; gap:.75rem; }
.clients-squelette span { height:3.5rem; border-radius:var(--rayon-m); background:var(--surface-2);
  animation:clients-attente 1.1s ease-in-out infinite alternate; }
@keyframes clients-attente { to { opacity:.45; } }
@media (min-width:641px) {
  .clients-resume { grid-template-columns:repeat(var(--colonnes, 4), minmax(0, 1fr)); }
  .clients-resume div:last-child:nth-child(odd) { grid-column:auto; }
}
@media (min-width:800px) {
  .clients-ligne { grid-template-columns:minmax(0, 2fr) minmax(0, 1.3fr) 7.5rem 6.5rem 6.5rem 1.25rem; }
  .clients-nom { grid-column:auto; }
  .clients-infos { display:contents; }
  .clients-infos > span + span::before { content:none; }
  .clients-infos > span { color:var(--encre-2); font-size:var(--t-s); }
  .clients-infos > .clients-chiffre { text-align:right; }
  .clients-chevron { grid-column:auto; grid-row:auto; }
}
@media (max-width:640px) {
  .clients-filtres, .clients-filtre, .clients-filtres .vues { width:100%; }
  .clients-filtres .vue, .clients-onglets .vue, .clients-outils .vue { flex:1; }
  .clients-filtre .champ { width:100%; min-width:0; }
  .clients-onglets { justify-self:stretch; }
  .clients-outils .vues { width:100%; }
  /* Sur téléphone, chaque ligne d'un tableau devient une fiche : le nom en tête, les chiffres titrés dessous. */
  .clients-tableau thead { display:none; }
  .clients-tableau tr { display:grid; grid-template-columns:repeat(auto-fit, minmax(4.5rem, 1fr)); gap:.35rem .75rem;
    padding:.75rem .9rem; border-bottom:1px solid var(--trait); }
  .clients-tableau tbody tr:last-child { border-bottom:0; }
  .clients-tableau td, .clients-tableau td.clients-chiffre { display:grid; align-content:end; gap:.1rem; padding:0; border:0;
    text-align:left; white-space:normal; }
  .clients-tableau td.clients-texte { grid-column:1 / -1; min-width:0; font-weight:600; }
  .clients-tableau td.clients-chiffre::before { content:attr(data-titre); color:var(--encre-3); font-size:var(--t-xs);
    font-weight:600; }
  /* Le classement se lit déjà dans l'ordre des fiches. */
  .clients-tableau td.clients-rang { display:none; }
}
/* Relation client : les segments en cartes, le segment ouvert marqué. */
.relation-resume { --colonnes:3; }
.relation-segments { display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.75rem; margin:0; padding:0;
  list-style:none; }
.relation-segments li { display:flex; }
.relation-segment { display:grid; align-content:start; gap:.3rem; width:100%; padding:.9rem 1rem; border:1px solid var(--trait);
  border-radius:var(--rayon); background:var(--surface); color:var(--encre); font:inherit; text-align:left; cursor:pointer; }
.relation-segment:hover { border-color:var(--encre-3); }
.relation-segment[aria-pressed="true"] { border-color:var(--encre); box-shadow:inset 0 0 0 1px var(--encre); }
.relation-segment-description { color:var(--encre-2); font-size:var(--t-s); }
.relation-segment-compte { color:var(--encre-3); font-size:var(--t-xs); font-weight:600; font-variant-numeric:tabular-nums; }
.relation-formulaire { display:grid; justify-items:start; gap:1rem; }
.relation-champs { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1rem; }
.relation-joindre { display:block; color:var(--encre-3); font-size:var(--t-xs); font-weight:400; overflow-wrap:anywhere; }
/* Écrire au segment : l'objet et le texte en pleine largeur, l'aperçu tel qu'il partira. */
.relation-ecriture { justify-items:start; }
.relation-ecriture .relation-large { width:100%; max-width:42rem; }
.relation-ecriture .relation-large .champ { width:100%; }
.relation-texte { min-height:6rem; resize:vertical; font:inherit; font-weight:400; line-height:1.5; }
.relation-apercu { margin:.35rem 0 0; padding:1rem; border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface);
  font:inherit; font-size:var(--t-s); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.relation-boutons { display:flex; flex-wrap:wrap; gap:.6rem; }
.relation-avis:empty { display:none; }
/* Les clients d'un segment, repliés : on les ouvre pour les consulter. */
.relation-liste { display:grid; gap:.9rem; padding:.75rem 1rem; border:1px solid var(--trait); border-radius:var(--rayon);
  background:var(--surface); }
.relation-liste summary { min-height:44px; display:flex; align-items:center; font-weight:600; cursor:pointer; }
.relation-liste summary::before { content:"▸"; margin-right:.5rem; color:var(--encre-3); }
.relation-liste[open] summary::before { content:"▾"; }
.relation-liste[open] summary { border-bottom:1px solid var(--trait); }
.relation-liste .relation-large { width:100%; max-width:28rem; }
.relation-liste .relation-large .champ { width:100%; }
.relation-liste-corps { display:grid; justify-items:start; gap:.75rem; }
.relation-liste-corps .clients-defile { width:100%; }
/* Les envois automatiques : une carte chacun. */
.relation-automatiques { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap:1rem; }
.relation-automatique { display:grid; justify-items:start; gap:.75rem; padding:1rem 1.1rem; border:1px solid var(--trait);
  border-radius:var(--rayon); background:var(--surface); }
.relation-automatique .relation-large { width:100%; }
.relation-automatique .relation-large .champ { width:100%; }
.relation-automatique .clients-filtre[hidden] { display:none; }
.relation-automatique-tete { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; }
.relation-automatique-tete h3 { margin:0; font-size:var(--t-m); }
.relation-allume { display:flex; align-items:center; gap:.5rem; width:100%; font-weight:500; }
/* Les newsletters : l'éditeur par blocs à gauche, l'aperçu aux couleurs de l'e-mail à droite. */
.nl-liste { display:grid; gap:.6rem; margin:0; padding:0; list-style:none; }
.nl-ligne { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; padding:.8rem 1rem;
  border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface); }
.nl-colonnes { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.5rem; align-items:start; }
.nl-gauche { display:grid; justify-items:start; gap:.9rem; }
.nl-gauche .relation-large, .nl-gauche .relation-large .champ { width:100%; }
.nl-droite { position:sticky; top:1rem; display:grid; gap:.35rem; }
.nl-blocs { display:grid; gap:.75rem; width:100%; }
.nl-bloc { display:grid; gap:.6rem; padding:.8rem .9rem; border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface); }
.nl-bloc .relation-large, .nl-bloc .relation-large .champ { width:100%; }
.nl-bloc-tete { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; }
.nl-apercu { display:grid; gap:.5rem; padding:1rem; border-radius:var(--rayon); background:#FFF4D6; }
.nl-objet { margin:0; color:#4A1942; font-size:var(--t-s); font-weight:600; overflow-wrap:anywhere; }
.nl-feuille { display:grid; gap:.8rem; padding:0 0 1rem; border-radius:6px; background:#ffffff; color:#1f2a2a; overflow:hidden; }
.nl-feuille > :not(.nl-entete):not(.nl-image) { margin:0 1.25rem; }
.nl-entete { padding:.9rem 1.25rem; background:#00504F; color:#FFF4D6; font-size:1.15rem; font-weight:700; }
.nl-titre { color:#00504F; font-size:1.3rem; line-height:1.25; overflow-wrap:anywhere; }
.nl-texte { line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.nl-bouton { justify-self:start; padding:.6rem 1.2rem; border-radius:6px; background:#4A1942; color:#ffffff; font-weight:600; }
.nl-image { display:block; width:100%; height:auto; }
.nl-trait { border:0; border-top:1px solid #e3dccb; }
.nl-sans-image { padding:1.5rem; border:1px dashed #c9bfa8; color:#7a7466; text-align:center; }
.nl-pied { color:#7a7466; font-size:var(--t-xs); text-align:center; }
@media (max-width:900px) {
  .nl-colonnes { grid-template-columns:minmax(0, 1fr); }
  .nl-droite { position:static; }
}
/* Ce qu'on tape ne prend pas le gras de l'étiquette qui l'entoure. */
.relation .clients-filtre .champ { font-weight:400; }
/* L'e-mail tient sur sa ligne, sauf s'il est vraiment long. */
.relation .clients-tableau .clients-texte { min-width:15rem; }
@media (max-width:640px) {
  .relation-champs, .relation-champs .clients-filtre, .relation-formulaire > button { width:100%; }
  .relation .clients-tableau td:not(.clients-texte):not(.clients-chiffre)::before { content:attr(data-titre); color:var(--encre-3);
    font-size:var(--t-xs); font-weight:600; }
}
@media (prefers-reduced-motion:reduce) {
  .clients-squelette span { animation:none; }
  .clients-panneau, .clients-ligne, .clients-chevron { transition:none; }
}
/* Lu par les lecteurs d'écran, caché à l'œil : la légende d'un tableau déjà titré. */
.visuellement-cache { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --- Promotions (administration) --- */
.promos { display:grid; gap:1rem; max-width:52rem; margin:0 auto; padding:1.25rem var(--marge) 6rem; }
.promos:focus { outline:none; }
.promos h1 { margin:0; font-size:var(--t-xl); }
/* Le titre reçoit la main après chaque dessin (lecteurs d'écran) : ce n'est pas un bouton, pas de cadre. */
.promos h1:focus { outline:none; }
.promos h3 { margin:.25rem 0 0; font-size:var(--t-s); color:var(--encre-2); }
.promos > .bouton { justify-self:start; }
/* Sans message, la zone ne creuse pas d'écart sous le bouton. */
.promos > .reglages-etat:empty { display:none; }
.promos-liste { display:grid; gap:.6rem; margin:0; padding:0; list-style:none; }
.promo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem;
  padding:.8rem .9rem; border:1px solid var(--trait); border-radius:var(--rayon-m); background:var(--surface); }
.promo.eteinte { background:var(--surface-2); }
.promo-texte { display:grid; flex:1 1 16rem; gap:.3rem; min-width:0; }
.promo-tete { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; }
.promo-nom { font-weight:700; overflow-wrap:anywhere; }
.promo-resume { color:var(--encre-2); font-size:var(--t-s); }
.promo-gestes { display:flex; flex-wrap:wrap; gap:.4rem; }
.promo-gestes .bouton { flex:none; }
.promo-choix { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.promo-choix .carte-case { min-height:36px; }
.pastille.vigueur { background:var(--vert-doux); color:var(--vert-texte); }
.pastille.prevue { background:var(--bleu-doux); color:var(--bleu-texte); }
.pastille.code { background:var(--encre); color:var(--surface); letter-spacing:.04em; }

/* --- Page Réglages (administrateur) --- */
/* Un formulaire à lire de haut en bas, sur ordinateur comme sur téléphone :
   une colonne, des sections nettes, le bouton Enregistrer toujours visible. */
/* Seul outil de sa barre : son texte reste lisible à toute largeur. */
a.outil { text-decoration:none; }
.outil.outil-libelle { width:auto; padding:0 .85rem; }
.outil-libelle .outil-texte { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
.reglages { max-width:56rem; margin:0 auto; padding:1.25rem var(--marge) 7rem; }
.reglages:focus { outline:none; }
.reglages-chargement { color:var(--encre-3); }
.reglages-code { display:grid; gap:1rem; width:min(24rem, 100%); margin:3rem auto; padding:2rem 1.75rem;
  border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface); box-shadow:var(--ombre); }
.reglages-code h1 { margin:0; font-size:var(--t-xl); }
.reglages-code > p { margin:0; color:var(--encre-2); font-size:var(--t-s); }
.reglages-code .bouton { width:100%; }
.reglages-formulaire { display:grid; gap:1.25rem; }
.reglages-section { display:grid; gap:.9rem; padding:1.25rem; border:1px solid var(--trait);
  border-radius:var(--rayon); background:var(--surface); }
.reglages-section h2 { margin:0; font-size:var(--t-l); }
.reglages-aide { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.reglages-etiquette { display:grid; gap:.35rem; font-size:var(--t-s); font-weight:600; color:var(--encre-2); }
.reglages-ligne { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:.75rem; }
.reglages-defilement { overflow-x:auto; }
.reglages-villes { width:100%; border-collapse:collapse; min-width:34rem; }
.reglages-villes th { padding:.35rem .4rem; text-align:left; font-size:var(--t-xs); color:var(--encre-3); font-weight:600; }
.reglages-villes td { padding:.3rem .4rem; vertical-align:middle; }
.reglages-villes td:nth-child(2) { width:7rem; }
.reglages-villes td:nth-child(3), .reglages-villes td:nth-child(4) { width:8rem; }
.reglages-section > .bouton, .reglages-jour > .bouton { justify-self:start; flex:none; }
.reglages-villes .bouton { min-height:44px; flex:none; }
.reglages-jour { display:grid; gap:.5rem; margin:0; padding:.9rem 1rem; border:1px solid var(--trait);
  border-radius:var(--rayon-m); }
.reglages-jour legend { padding:0 .35rem; font-weight:700; }
.reglages-creneaux { display:grid; gap:.5rem; }
.reglages-creneau { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.reglages-creneau .champ[type="time"] { width:8.5rem; }
.reglages-creneau .bouton { min-height:44px; flex:none; }
.reglages-a { color:var(--encre-3); }
.reglages-livraison { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; font-size:var(--t-s); }
.reglages-case { width:20px; height:20px; min-height:0; accent-color:var(--or-fort); }
.reglages-ferme { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.reglages-fermetures { display:grid; gap:.75rem; }
.reglages-fermeture { display:grid; grid-template-columns:repeat(auto-fit, minmax(9.5rem, 1fr)); align-items:end; gap:.6rem;
  padding:.85rem; border:1px solid var(--trait); border-radius:var(--rayon-m); }
.reglages-fermeture .bouton { flex:none; min-height:44px; }
select.champ { appearance:auto; }
.reglages-pied { position:sticky; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  padding:.9rem 0 1rem; border-top:1px solid var(--trait); background:var(--fond); }
.reglages-pied .bouton.principal { flex:none; min-width:11rem; }
.reglages-pied .bouton.neutre { flex:none; }
.reglages-etat { flex:1 1 100%; }
.reglages-succes { margin:0; padding:.6rem .75rem; border-radius:var(--rayon-s); background:var(--vert-doux);
  color:var(--vert-texte); font-weight:600; }
.reglages-refus { margin:0; padding:.6rem .75rem; border-radius:var(--rayon-s); background:var(--rouge-doux);
  color:var(--rouge-texte); font-weight:600; }
.reglages-erreurs { margin:.5rem 0 0; padding-left:1.2rem; color:var(--rouge-texte); font-size:var(--t-s); }
/* Sur téléphone, le tableau des villes devient une fiche par ville : le nom
   sur toute la largeur, code postal et montants côte à côte, chacun titré. */
@media (max-width:640px) {
  .reglages-section { padding:1rem; }
  .reglages-villes { min-width:0; }
  .reglages-villes thead { display:none; }
  .reglages-villes tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.5rem; padding:.75rem 0;
    border-bottom:1px solid var(--trait); }
  .reglages-villes td, .reglages-villes td:nth-child(n) { display:grid; gap:.25rem; width:auto; padding:0; }
  .reglages-villes td:first-child, .reglages-villes td:last-child { grid-column:1 / -1; }
  .reglages-villes td[data-titre]::before { content:attr(data-titre); font-size:var(--t-xs); font-weight:600;
    color:var(--encre-3); }
  .reglages-villes td:last-child .bouton { justify-self:start; }
  .reglages-pied .bouton.principal, .reglages-pied .bouton.neutre { flex:1 1 100%; }
}

/* --- Classeur : l'administration --- */
@font-face { font-family:"Rubik"; src:url(/backoffice/polices/rubik.woff2) format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Rammetto One"; src:url(/backoffice/polices/rammetto-one.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }

.classeur {
  --petrole:#00504f; --petrole-fonce:#003e3d; --aubergine:#441b35; --prune:#713a5b; --lagon:#42b8b2;
  --sauge:#a7d489; --creme:#fff4d6; --feuille:#f2dfae; --sable:#f8e8bd; --bord:#e0c995;
  --fond:var(--feuille); --surface:var(--creme); --surface-2:var(--sable);
  --trait:var(--bord); --trait-fort:#cdb07a;
  --encre:var(--aubergine); --encre-2:#6a4560; --encre-3:#7a5670;
  /* Le bouton principal est aubergine : le jaune ne sert qu'au coût. */
  --or:var(--aubergine); --or-fort:var(--prune); --sur-or:var(--creme);
  --or-doux:#fdeaa6; --or-texte:#5c3a00;
  --vert:#3f7a2a; --vert-doux:#dcefcd; --vert-texte:#24451a;
  --rouge:#a8261b; --rouge-doux:#fbe2d8; --rouge-texte:#a8261b;
  --orange-doux:#fde3c8; --orange-texte:#7a3a06;
  --bleu-doux:#d6eeec; --bleu-texte:#0d4f4c;
  --ombre:0 1px 2px rgb(68 27 53 / .1);
  --ombre-haute:0 10px 30px -18px rgb(68 27 53 / .45);
  --rayon:16px; --rayon-m:12px; --rayon-s:8px;
  --t-xs:.8125rem; --t-s:.875rem; --t-m:.9375rem;
  --police:"Rubik", system-ui, sans-serif;
  --titre:"Rammetto One", "Rubik", sans-serif;
  --sortie:cubic-bezier(.16, 1, .3, 1);
  color-scheme:light;
}
body.classeur { background:var(--petrole); color:var(--encre); font-family:var(--police); font-size:var(--t-m);
  line-height:1.5; scrollbar-color:var(--petrole-fonce) var(--petrole); }
.classeur ::selection { background:#fabf0d; color:var(--aubergine); }
.classeur :focus-visible { outline:2px solid var(--prune); outline-offset:2px; border-radius:6px; }
.classeur a { text-underline-offset:3px; }
.classeur input, .classeur textarea, .classeur select { caret-color:var(--prune); }
.classeur .evitement:focus { background:var(--creme); color:var(--encre); }

/* Les titres : Rammetto, rare et ronde. Les sections : Rubik demi-gras. */
.classeur h1 { margin:0; font-family:var(--titre); font-size:1.75rem; font-weight:400; line-height:1.15;
  letter-spacing:.005em; text-wrap:balance; color:var(--encre); }
.classeur h2 { font-size:1.125rem; font-weight:600; line-height:1.4; }
.classeur strong, .classeur b { font-weight:600; }

/* La colonne pétrole et ses intercalaires. */
.classeur-cadre { display:flex; flex-direction:column; max-width:1440px; min-height:100vh; min-height:100dvh; margin:0 auto; }
.classeur-cote { display:flex; flex-direction:column; padding:.75rem .75rem 0; color:var(--creme); }
.classeur-cote :focus-visible { outline-color:#fabf0d; }
.classeur-tete { display:flex; align-items:center; gap:.75rem; padding:0 .25rem .75rem; }
.classeur-marque { display:flex; align-items:center; gap:.75rem; color:var(--creme); text-decoration:none; }
.classeur-logo { display:grid; flex:none; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--creme); box-shadow:0 6px 16px -8px rgb(0 0 0 / .55); }
.classeur-logo img { width:52px; height:52px; }
.classeur-nom { font-family:var(--titre); font-size:.9375rem; line-height:1.2; white-space:nowrap; }
.classeur-sortie { margin-left:auto; }
.classeur-sortir { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 .75rem;
  border:1px solid rgb(255 244 214 / .3); border-radius:var(--rayon-m); background:transparent;
  color:rgb(255 244 214 / .85); font-size:var(--t-s); font-weight:500;
  transition:background-color .2s, color .2s, border-color .2s; }
.classeur-sortir:hover { border-color:transparent; background:var(--petrole-fonce); color:var(--creme); }
/* Sur téléphone, le pictogramme seul : son libellé reste lu par les lecteurs d'écran. */
@media (max-width:639px) {
  .classeur-sortir { width:44px; justify-content:center; padding:0; }
  .classeur-sortir span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
.classeur-onglets { display:flex; gap:.25rem; margin:0 -.75rem; padding:0 .75rem; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.classeur-onglets::-webkit-scrollbar { display:none; }
.classeur-onglet { display:inline-flex; flex:none; align-items:center; gap:.55rem; padding:.625rem 1rem;
  border-radius:16px 16px 0 0; color:rgb(255 244 214 / .85); font-weight:500; line-height:1.4;
  text-decoration:none; white-space:nowrap; transition:background-color .2s, color .2s; }
.classeur-onglet:hover { background:var(--petrole-fonce); color:var(--creme); }
.classeur-onglet[aria-current="page"] { background:var(--feuille); color:var(--encre); }
.picto { width:1.25rem; height:1.25rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; }
.classeur-onglet .picto { color:var(--lagon); }
.classeur-onglet[aria-current="page"] .picto { color:var(--prune); }
/* Nos autres outils : au bout de la bande sur téléphone, sous les rubriques
   sur ordinateur. La flèche dit qu'ils s'ouvrent ailleurs. */
.classeur-outils { display:contents; }
.classeur-outils-titre { display:none; }
.classeur-outil .sortant { width:1rem; height:1rem; color:rgb(255 244 214 / .6); }

/* La feuille : chaque page y pose son contenu, calée à gauche. */
.classeur-feuille { flex:1; min-width:0; padding:1.5rem 1rem 4rem; border-radius:26px 26px 0 0;
  background:var(--feuille); }
.classeur-feuille > main { max-width:none; margin:0; padding:0; }
.classeur-feuille > main:focus { outline:none; }

@media (min-width:640px) {
  .classeur-feuille { padding:2rem 2rem 4rem; }
  .classeur h1 { font-size:2rem; }
}
@media (min-width:1024px) {
  .classeur-cadre { flex-direction:row; }
  .classeur-cote { position:sticky; top:0; display:grid; flex:none; grid-template-rows:auto 1fr auto; width:240px;
    height:100vh; height:100dvh; padding:1.5rem 0 1.5rem 1.25rem; }
  .classeur-tete { display:contents; }
  .classeur-marque { flex-direction:column; align-items:flex-start; gap:1rem; padding:0 .5rem 2rem; }
  .classeur-logo { width:72px; height:72px; }
  .classeur-logo img { width:66px; height:66px; }
  .classeur-nom { font-size:1.0625rem; }
  .classeur-onglets { flex-direction:column; align-self:start; margin:0; padding:0; overflow:visible; }
  /* L'intercalaire ouvert déborde d'un pixel sur la feuille : aucun trait entre eux. */
  .classeur-onglet { margin-right:-1px; border-radius:16px 0 0 16px; }
  .classeur-outils { display:flex; flex-direction:column; gap:.25rem; margin:1rem 1.25rem 0 0; padding-top:1rem;
    border-top:1px solid rgb(255 244 214 / .18); }
  .classeur-outils-titre { display:block; margin:0; padding:0 1rem .25rem; font-size:var(--t-xs); font-weight:500;
    color:rgb(255 244 214 / .6); }
  .classeur-outil { margin-right:0; border-radius:16px; }
  .classeur-outil .sortant { margin-left:auto; }
  .classeur-sortie { order:3; margin:0; padding:0 1.25rem 0 .5rem; }
  .classeur-feuille { margin:.75rem .75rem .75rem 0; padding:2.25rem 2.5rem 4rem; border-radius:26px; }
}

/* Boutons et champs du carnet. */
.classeur .bouton { min-height:44px; padding:0 1.25rem; font-weight:500; }
.classeur .bouton.principal:hover { background:var(--prune); }
.classeur .bouton.neutre, .classeur .bouton.retour, .classeur .bouton.option, .classeur .bouton.plus {
  border-color:var(--trait); background:var(--surface); }
.classeur .bouton.neutre:hover, .classeur .bouton.retour:hover, .classeur .bouton.option:hover,
.classeur .bouton.plus:hover { border-color:var(--trait); background:var(--surface-2); }
.classeur .bouton.danger { background:var(--rouge); color:var(--creme); }
.classeur .bouton.petit { min-height:40px; padding:0 .9rem; }
.classeur .champ { border-color:var(--trait); border-radius:var(--rayon-m); background:var(--surface);
  transition:border-color .2s; }
.classeur .champ:focus { border-color:var(--lagon); }
.classeur .champ::placeholder { color:#8d6a82; }
.classeur input[type="checkbox"], .classeur input[type="radio"], .classeur .reglages-case { accent-color:var(--prune); }
.classeur .outil { border-color:var(--trait); }

/* Bacs de choix : sable, l'élément actif plein aubergine. */
.classeur .vues { border:1px solid var(--trait); background:var(--surface-2); }
.classeur .vue { color:var(--encre); font-weight:500; }
.classeur .vue:hover { background:var(--surface); }
.classeur .vue[aria-selected="true"], .classeur .clients .vue[aria-pressed="true"] { background:var(--aubergine);
  color:var(--creme); box-shadow:none; }
.classeur .compteur { background:var(--feuille); color:var(--encre-2); }
.classeur .carte-onglet { border-color:var(--trait); background:var(--surface); font-weight:500; }
.classeur .carte-onglet:hover { background:var(--surface-2); }
.classeur .carte-onglet[aria-selected="true"] { border-color:var(--aubergine); background:var(--aubergine); color:var(--creme); }

/* Pastilles : pilules bordées de leur teinte. */
.classeur .pastille, .classeur .clients-badge, .classeur .carte-badge, .classeur .clients-statut {
  border:1px solid transparent; font-size:.75rem; font-weight:500; }
.classeur .pastille.attente, .classeur .clients-badge { border-color:#f2cf62; }
.classeur .pastille.vigueur, .classeur .pastille.completed, .classeur .clients-statut { border-color:#b4d99a; }
.classeur .pastille.not_honoured { border-color:#f1b9a8; }
.classeur .pastille.prevue, .classeur .pastille.en-cours { border-color:#a9d8d4; }
.classeur .carte-badge { border-color:var(--trait); background:var(--surface-2); }
.classeur .pastille.code { background:var(--aubergine); color:var(--creme); }

/* Les messages : brique pour un refus, sauge pour un succès. */
.classeur .reglages-succes, .classeur .reglages-refus, .classeur .erreur { border:1px solid; border-radius:var(--rayon-m);
  font-weight:500; }
.classeur .reglages-succes { border-color:#b4d99a; }
.classeur .reglages-refus, .classeur .erreur { border-color:#f1b9a8; }
.classeur .carte-avertissement { border:1px solid #f2cf62; }

/* Accueil : les rubriques en lignes d'une même liste crème. */
.classeur .admin { display:grid; gap:1.5rem; max-width:44rem; }
.classeur .admin-rubriques { gap:0; overflow:hidden; border:1px solid var(--trait); border-radius:var(--rayon);
  background:var(--surface); }
.classeur .admin-rubriques li + li { border-top:1px solid var(--trait); }
.classeur .admin-rubrique { grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:1rem;
  padding:1rem 1.25rem; border:0; border-radius:0; background:transparent; transition:background-color .2s; }
.classeur .admin-rubrique:hover { background:var(--surface-2); }
.classeur .admin-rubrique:focus-visible { outline-offset:-3px; }
.admin-pastille { display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%;
  background:var(--feuille); color:var(--prune); }
.admin-texte { display:grid; gap:.15rem; }
.classeur .admin-rubrique strong { font-size:1.0625rem; font-weight:600; }
.classeur .admin-rubrique .admin-texte span { color:var(--encre-2); font-size:var(--t-s); }
.admin-suite { width:1.25rem; height:1.25rem; fill:none; stroke:var(--encre-3); stroke-width:1.75; stroke-linecap:round;
  stroke-linejoin:round; transition:transform .2s var(--sortie); }
.classeur .admin-rubrique:hover .admin-suite { transform:translateX(2px); }
.classeur .admin-aide { max-width:56ch; color:var(--encre-2); }

/* Connexion : une fiche crème posée sur le pétrole. */
body.classeur-connexion { display:grid; place-items:center; min-height:100vh; min-height:100dvh; padding:1.5rem 1rem; }
.connexion-fiche { display:grid; gap:1rem; width:min(24rem, 100%); padding:2rem 1.75rem 1.75rem; border-radius:22px;
  background:var(--creme); box-shadow:0 18px 40px -24px rgb(0 0 0 / .6); }
.connexion-fiche .classeur-logo { width:72px; height:72px; margin-bottom:.25rem; }
.connexion-fiche .classeur-logo img { width:66px; height:66px; }
.connexion-fiche > p { margin:0; color:var(--encre-2); }
.connexion-formulaire { display:grid; gap:1rem; margin-top:.5rem; }
.connexion-formulaire label { display:grid; gap:.4rem; color:var(--encre-2); font-size:.75rem; font-weight:500; }
.connexion-formulaire .champ { font-size:var(--t-m); }
.connexion-formulaire .bouton { width:100%; }
.connexion-formulaire .erreur { margin:0; padding:.75rem 1rem; background:var(--rouge-doux); color:var(--rouge-texte); }

/* Clients et produits : les grands compteurs en Rammetto, prune. */
.classeur .clients-resume dd { font-family:var(--titre); font-size:1.25rem; font-weight:400; color:var(--prune);
  white-space:nowrap; }
.classeur .clients-tableau th { font-weight:500; }
.classeur .clients-ticket { border-radius:var(--rayon); }
.classeur .clients-coordonnees a { color:var(--encre); }

/* Réglages, carte, promotions : des cartes crème bordées de beige, les sections titrées en Rubik. */
.classeur .reglages-section h2, .classeur .carte-tete h2 { font-size:1.125rem; }
.classeur .carte-tete h2 { color:var(--encre); letter-spacing:0; text-transform:none; }
.classeur .reglages-jour, .classeur .carte-groupes { border-color:var(--trait); border-radius:var(--rayon-m); }
.classeur .carte-formulaire { border:1px solid var(--trait); background:var(--surface-2); }
.classeur .promo-nom, .classeur .carte-nom { font-weight:600; }
.classeur .reglages-pied { border-color:var(--trait); }

@media (prefers-reduced-motion:reduce) {
  .classeur-onglet, .classeur-sortir, .classeur .admin-rubrique, .admin-suite, .classeur .champ { transition:none; }
}