/* =====================================================================
   FRAUNCES EST SERVIE PAR NOUS, PLUS PAR GOOGLE.

   Cette ligne etait un `@import` vers fonts.googleapis.com, en tete de
   la feuille de style — donc sur CHAQUE page de l'administration et de
   l'espace client. Trois consequences :

     1. Un `@import` bloque le rendu : la page attendait la reponse de
        Google avant de peindre quoi que ce soit. Sur le reseau d'un
        restaurant, c'est une attente a chaque ecran.
     2. Reseau filtre ou coupe : la police ne chargeait pas et tout
        l'ecran changeait d'allure sans explication.
     3. L'adresse IP de chaque visiteur — les CLIENTS du restaurant
        compris, puisque la meme feuille sert les pages publiques —
        partait chez Google a chaque page. C'est une donnee personnelle
        transmise a un tiers sans necessite ni consentement ; la justice
        allemande a deja condamne exactement ce montage.

   Deux fichiers, 124 Ko au total, mis en cache par le navigateur apres
   la premiere page. Fraunces est sous licence SIL Open Font 1.1 (voir
   vendor/fraunces-LICENSE.txt), qui autorise cet hebergement.
   ===================================================================== */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(vendor/fraunces-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(vendor/fraunces-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --brand:oklch(42% 0.14 148); --brand-d:oklch(35% 0.15 148);
  --ink:oklch(25% 0.02 95); --muted:oklch(45% 0.02 95);
  --line:oklch(90% 0.01 95); --bg:oklch(95% 0.02 135); --card:oklch(98% 0.008 95);
  --gdark:oklch(28% 0.07 148); --amber:oklch(70% 0.15 60);
  --ok:#15803d; --err:#b91c1c; --wait:#b45309;

  /* ---------------------------------------------------------------
     CHARTE COMMUNE (posee avec la refonte de la Carte, 17/08/2026).
     Deux verts, deux roles, et on ne les melange pas :
       --sauge  = ce qui est SELECTIONNE (onglet actif, bloc courant)
       --brand  = l'ACTION principale de l'ecran (Enregistrer, Creer)
     Un ecran ou tout est vert de marque n'a plus de hierarchie : c'est
     ce que donnait l'ancien onglet actif du Plat du jour.
     --tap : la hauteur minimale d'une commande. L'admin se pilote
     debout, sur tablette, avec les doigts gras.

     Le sauge est MESURE, pas choisi a l'oeil : #7d8f69 sur du texte blanc
     ne donne que 3,50:1, en dessous du minimum lisible de 4,50:1. #6c7b5a
     est le sauge le plus CLAIR qui atteigne 4,55:1 — 14 % plus sombre,
     donc quasi identique a l'oeil, mais lisible par tout le monde et sur
     un ecran de cuisine en plein jour.
     --sauge-cl reste la teinte d'origine, pour ce qui ne porte pas de
     texte : filets, fonds clairs, aplats decoratifs. */
  --sauge:#6c7b5a; --sauge-cl:#7d8f69; --sauge-d:#5f6f4c; --sauge-bg:#eef2e8;
  --rupt:#b3372b;
  --tap:44px;
  --r-md:12px; --r-lg:14px;
  --sh:0 1px 2px rgba(26,26,26,.04), 0 10px 26px -14px rgba(26,26,26,.16);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--brand);text-decoration:none}
h1{font-family:'Fraunces',serif;font-size:28px;margin:0 0 12px;color:var(--ink)}
/* LES TITRES SONT EN FRAUNCES, TOUS. Seul h1 portait la regle : h2 et h3
   retombaient sur la police systeme, et une page qui empile un h1 et
   quatre h2 — Reglages, typiquement — affichait deux familles de
   caracteres pour la meme fonction. Personne ne sait dire pourquoi ca
   « fait bizarre », mais tout le monde le voit. */
h2,h3{font-family:'Fraunces',serif;color:var(--ink)}
/* [hidden] EST BATTU PAR N'IMPORTE QUELLE REGLE D'AUTEUR : la sienne vient
   de la feuille du navigateur, donc de la couche la plus faible. Un simple
   « .truc{display:flex} » plus loin, et l'element marque hidden reste
   affiche. Ce bug est deja revenu trois fois dans ce projet ; la regle est
   donc posee une bonne fois, au niveau de la feuille commune. */
[hidden]{display:none !important}
.muted{color:var(--muted)}
.rb-back{display:inline-block;color:var(--brand);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:8px}

/* RETOUR — un vrai bouton, pas un lien perdu en haut de page.
   Il NOMME sa destination (« Réservations ») au lieu de dire « Retour » :
   un bouton qui dit où il va se clique sans réfléchir, et il reste juste
   quand on est arrivé sur la page par le menu de gauche plutôt que par
   l'écran parent. 44 px, comme tout le reste. */
.btn-back{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  padding:9px 18px 9px 13px;border:1px solid var(--line);border-radius:100px;background:#fff;
  color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:700;
  box-shadow:var(--sh);margin:0 0 14px}
.btn-back svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-back:hover{border-color:var(--sauge);color:var(--sauge-d)}
.btn-back:active{transform:translateY(1px)}

/* Top bar */
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.topbar-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px}
.brand{display:flex;align-items:center;font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--gdark)}
.brand-logo{height:30px;width:auto;max-width:170px;display:block}
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.navtoggle span{display:block;width:24px;height:2px;background:var(--gdark);border-radius:2px}
.topnav{display:flex;align-items:center;gap:20px}
.topnav a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:14px;color:var(--ink);white-space:nowrap}
.topnav a:hover{color:var(--brand)}
.topnav .logout{color:var(--muted)}

.wrap{max-width:1120px;margin:22px auto;padding:0 18px}
.wrap-narrow{max-width:560px}

.alert{padding:12px 14px;border-radius:10px;margin:14px 0;font-size:14px}
.alert.ok{background:#ecfdf5;color:var(--ok)}
.alert.err{background:#fef2f2;color:var(--err)}
.alert.warn{background:#fdf1dc;color:#7a5312;border:1px solid #e2b96b}

.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* LE BOUTON D'ACTION EST SAUGE, PARTOUT. Il etait en --brand (#006017),
   a trente-six points en RVB de la pastille de statut « Confirmee »
   (#166534) : sur un ecran ou les deux se cotoient, on lit le bouton
   comme un etat deja atteint au lieu d'un geste a faire. La sauge en est
   trois fois plus loin, et c'est deja la couleur de l'action sur les
   onglets, les pastilles et les boutons « + » du reste de l'admin.
   --brand reste la couleur des LIENS : un lien n'est pas un bouton. */
.btn-primary{margin:0;padding:13px 20px;min-height:var(--tap);background:var(--sauge);color:#fff;
  border:none;border-radius:var(--r-md);font-size:15px;font-weight:700;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn-primary:hover{background:var(--sauge-d)}
.btn-create{margin:0}
.filters{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:10px 18px;border-radius:100px;background:#fff;border:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--muted)}
.tab.active{background:var(--sauge);color:#fff;border-color:var(--sauge)}
.tabbadge{display:inline-block;background:#b91c1c;color:#fff;border-radius:10px;padding:0 7px;font-size:11px;margin-left:4px}

.badge{display:inline-block;padding:3px 9px;border-radius:12px;font-size:12px;font-weight:600}
.badge.ok{background:#ecfdf5;color:var(--ok)}
.badge.wait{background:#fffbeb;color:var(--wait)}
.badge.no{background:#f3f4f6;color:var(--muted)}
.chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.chip-online{background:#eef2ff;color:#3949ab}
.chip-manual{background:#fff4e5;color:#b25f00}
.chip-table{background:#efe9ff;color:#5b3fb3}
.empty{padding:26px;text-align:center}

/* Reservations tiles */
.rz-daytitle{font-family:'Fraunces',serif;font-size:19px;color:var(--ink);margin:20px 0 4px}
.rz-legend{display:flex;gap:16px;font-size:13px;font-weight:600;color:var(--muted);margin:6px 0 2px;flex-wrap:wrap}
.rz-legend .sq{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}
.rz-group{margin-top:20px}
.rz-ghead{display:flex;justify-content:space-between;align-items:center;background:oklch(90% 0.06 145);padding:10px 18px;border-radius:10px;font-size:14px;font-weight:700;color:oklch(28% 0.1 148);text-transform:uppercase;letter-spacing:.04em}
.rz-ghead .sum{font-weight:500;text-transform:none;letter-spacing:0}
.rz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:16px;align-items:start}
.rz-tile{position:relative;background:#fff;border-radius:16px;padding:22px;box-shadow:0 1px 2px oklch(0% 0 0/.06);border:1px solid oklch(92% 0.01 95);border-left:6px solid var(--brand);min-height:180px;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.rz-tile[data-src="manual"]{border-left-color:var(--amber)}
.rz-tile.cancel{opacity:.6;filter:grayscale(.55)}
.rz-tile.cancel .rz-name{text-decoration:line-through}
/* Ce que le client a fait lui-meme, dit en toutes lettres sur la tuile.
   Vert quand il a pris une nouvelle table, gris quand il a annule. */
.rz-clientact{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;margin:0 0 6px;background:#eef3e8;color:#46603a;border:1px solid #cbd7bb}
.rz-clientact.off{background:#f2efeb;color:#7d7168;border-color:#ddd5cb}
.rz-toprow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rz-time{font-family:'Fraunces',serif;font-size:30px;font-weight:600;color:var(--gdark)}
.rz-table{font-size:17px;font-weight:700;color:#3a3a33;background:oklch(89% 0.07 145);padding:4px 12px;border-radius:8px;white-space:nowrap}
.rz-name{font-size:19px;font-weight:700;color:var(--ink)}
.rz-covers{font-size:24px;font-weight:700;color:var(--brand)}
.rz-covers small{font-size:14px;font-weight:500;color:var(--muted)}
.rz-takenby{font-size:12px;color:var(--muted)}
/* OU EST LA TABLE. Contour = salle simplement demandee a la reservation.
   Plein = la tablee est posee sur le plan, avec son numero de table.
   L'emoji 📍 est parti : il changeait de dessin selon le telephone et ne
   prenait jamais la couleur du theme. */
.rz-place{display:inline-flex;align-items:center;gap:5px;margin:4px 0 0;padding:4px 10px 4px 7px;
  align-self:flex-start;width:fit-content;max-width:100%;
  border-radius:100px;font-size:12.5px;font-weight:600;line-height:1;
  background:#fff;color:#5c6b4c;border:1px solid #cfd8c2}
.rz-place svg{width:14px;height:14px;flex:0 0 14px;fill:currentColor;stroke:none}
.rz-place b{font-weight:800;letter-spacing:.01em}
/* La couleur vient de la salle, posee en style sur l'element : le theme
   ne dit pas OU est la table, il ne dit que « Pixelis ». */
.rz-place.assis{font-weight:800}
.rz-comment{font-size:14px;font-style:italic;color:oklch(40% 0.02 95);background:oklch(97% 0.01 95);border-radius:8px;padding:9px 12px;margin-top:auto}
.rz-sec{position:absolute;inset:0;background:oklch(99% 0.005 95);border-radius:16px;padding:20px;opacity:0;pointer-events:none;transition:opacity .15s;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 18px oklch(0% 0 0/.14)}
.rz-tile:hover .rz-sec,.rz-tile.open .rz-sec{opacity:1;pointer-events:auto}
.rz-sec .c{font-size:14px;color:var(--muted);line-height:1.5}
.rz-sec .c a{color:var(--brand)}
.rz-sec-tags{display:flex;gap:6px;flex-wrap:wrap}
.rz-sec-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.rz-sec-act form{margin:0;flex:1}
.rz-sec-act .b{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:var(--tap);text-align:center;padding:9px;border-radius:10px;border:1px solid oklch(85% 0.01 95);font-size:13px;font-weight:600;background:#fff;cursor:pointer;color:var(--ink);text-decoration:none}
.rz-sec-act a.b{flex:1}
.rz-sec-act .b.ok{background:var(--brand);color:#fff;border-color:var(--brand)}
.rz-sec-act .b.del{width:var(--tap);flex:0 0 var(--tap);background:oklch(94% 0.06 30);color:oklch(45% 0.15 30);border-color:transparent}
.rz-sec-act form.delform{flex:0 0 auto}
.rz-daytotal{margin-top:14px;padding:10px 14px;background:oklch(97% 0.01 95);border:1px dashed var(--line);border-radius:8px;font-weight:700;text-align:right;font-size:14px;color:var(--ink)}

/* Clients */
.cl-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.cl-row{display:flex;align-items:center;gap:18px;background:#fff;border-radius:14px;border:1px solid oklch(92% 0.01 95);padding:18px 22px;flex-wrap:wrap}
.cl-name{font-size:18px;font-weight:700;color:var(--ink);flex:1.4;min-width:140px}
.cl-name a{color:var(--ink)}
.cl-contact{font-size:14px;color:var(--muted);flex:1.4;min-width:150px}
.cl-contact a{color:var(--brand)}
.cl-visits{font-size:18px;font-weight:700;color:#3a3a33;background:oklch(89% 0.07 145);padding:6px 16px;border-radius:8px;text-align:center;min-width:96px}
.cl-dates{flex-basis:100%;font-size:13px;color:var(--muted);margin-top:2px}
.cl-dates .lab{font-weight:600;color:#555}

/* Historique */
.stats{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap}
.stat{flex:1;min-width:130px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;text-align:center;box-shadow:var(--sh)}
.stat-n{font-size:26px;font-weight:700;color:var(--brand)}
.stat-l{font-size:12px;color:var(--muted);margin-top:2px}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.hcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh)}
.hcard h3{margin:0 0 12px;font-size:15px;color:var(--gdark)}

/* Cards / settings */
.card-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin:16px 0;box-shadow:var(--sh)}
.card-box h2{font-size:16px;margin:0 0 6px}
.sched-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.sched-day{background:#fafafa;border:1px solid var(--line);border-radius:12px;padding:14px}
.sched-day-name{font-weight:700;margin-bottom:8px}
.sched-svc{border-top:1px solid var(--line);padding:10px 0}
.sched-check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.sched-times{display:flex;align-items:center;gap:6px;margin-top:8px}
/* Double service : la ligne n'apparait pleinement que si la case est
   cochee — un intervalle affiche sur un service unique ne veut rien dire. */
.sched-2s{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;font-weight:700;color:var(--muted);flex-wrap:wrap}
.sched-2s input[type=number]{width:66px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;text-align:center;opacity:.45}
.sched-2s .min,.sched-2s .h2{opacity:.45}
.sched-2s.on{color:var(--ink)}
.sched-2s.on input[type=number]{opacity:1}
.sched-2s.on .min{opacity:1}
.sched-2s.on .h2{opacity:1;font-weight:800;color:var(--brand)}
.sched-times input{min-height:var(--tap);padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px}

/* Login */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px}
.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;width:100%;max-width:360px;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.login-card h1{margin:0}
.login-card label{display:block;margin:14px 0 6px;font-size:13px;font-weight:600}
.login-card input{width:100%;min-height:var(--tap);padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px}
.login-card button{width:100%;margin-top:20px;padding:13px;background:var(--brand);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.login-card button:hover{background:var(--brand-d)}

/* Create form */
.resform{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;max-width:520px;margin-top:14px}
.rf-field{margin:0 0 18px}
.rf-lab{font-size:13px;font-weight:600;color:#333;margin:0 0 8px}
.rf-input{width:100%;box-sizing:border-box;padding:12px 14px;font-size:16px;border:1px solid #d9d9d9;border-radius:10px;background:#fafafa;color:#1a1a1a;font-family:inherit}
.rf-input:focus{outline:none;border-color:var(--brand);background:#fff}
select.rf-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M6 8L0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.rf-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;gap:10px}
.seg .opt{flex:1;padding:16px 8px;border:2px solid #e3e3e3;border-radius:12px;text-align:center;font-weight:700;font-size:15px;cursor:pointer;background:#fafafa;color:#444}
.seg .opt.active{border-color:var(--brand);background:oklch(90% 0.06 145);color:var(--gdark)}
.grid-party{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid-party .opt{padding:12px 0;border:2px solid #e3e3e3;border-radius:10px;text-align:center;font-weight:700;font-size:15px;cursor:pointer;background:#fafafa;color:#444}
.grid-party .opt.active{border-color:var(--brand);background:oklch(90% 0.06 145);color:var(--gdark)}
.datebtns{display:flex;gap:8px;flex-wrap:wrap}
.datebtns .opt{padding:10px 14px;border:2px solid #e3e3e3;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;background:#fafafa;color:#444}
.datebtns .opt.active{border-color:var(--brand);background:oklch(90% 0.06 145);color:var(--gdark)}

/* Edit form */
.cform label{display:block;margin:12px 0 6px;font-size:13px;font-weight:600;color:#333}
/* 44 px : une liste deroulante de 38 px se rate au doigt une fois sur
   trois, et ces formulaires se remplissent en salle, pas au bureau. */
.cform input,.cform textarea,.cform select{width:100%;box-sizing:border-box;min-height:var(--tap);
  padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}
.cform textarea{min-height:72px}
.cseg{display:flex;gap:10px}
.cseg .copt{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:10px;font-weight:600;cursor:pointer;margin:0}
.cseg .copt input{width:auto}
.crow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.crow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Tickets */
.tickets{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.ticket{width:280px;background:#fff;border:1px dashed #999;border-radius:6px;padding:16px 12px;font-family:"Courier New",monospace;text-align:center}
.ticket .tk-h{font-size:13px;letter-spacing:3px;color:#333}
.ticket .tk-table{font-size:22px;font-weight:700;margin:6px 0}
.ticket .tk-name{font-size:18px;font-weight:700;margin:2px 0}
.ticket .tk-line{display:flex;justify-content:space-between;font-size:16px;font-weight:700;margin-top:10px;padding:0 8px}
.ticket .tk-note{font-size:11px;color:#888;margin-top:8px;font-style:italic}
.ticket .tk-cut{border-top:1px dashed #ccc;margin-top:12px;padding-top:6px;font-size:10px;color:#bbb}

@media(max-width:820px){
  .navtoggle{display:flex}
  .topbar-in{position:relative}
  .topnav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.12);display:none;padding:4px 0;z-index:70}
  .topnav.open{display:flex}
  .topnav a{padding:15px 20px;font-size:17px;font-weight:600;border-top:1px solid var(--line);white-space:normal}
  .topnav a:first-child{border-top:none}
  .tab{padding:12px 20px;font-size:16px}
  .dash-head>div{width:100%}
  .dash-head .btn-primary{width:100%;text-align:center}
  h1{font-size:24px}
  .rz-grid{grid-template-columns:1fr}
  .hgrid{grid-template-columns:1fr}
  .crow{grid-template-columns:1fr 1fr}
  .rf-2{grid-template-columns:1fr}
}

/* =====================================================================
   BLOCS DE NAVIGATION COMMUNS (reservations, plan de table)
   Ces classes vivaient en style en ligne dans admin/index.php. Le plan de
   table devait afficher EXACTEMENT les memes boutons : deux copies du
   meme dessin auraient diverge des la premiere retouche.
   ===================================================================== */
.rztabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.rztabs a,.rztabs button,.rztabs label{flex:1 1 auto;min-width:104px;min-height:62px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px;
  border-radius:var(--r-md);background:#fff;border:1px solid var(--line);text-decoration:none;
  color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:700;box-shadow:var(--sh);
  line-height:1.2;text-align:center;cursor:pointer}
.rztabs a svg,.rztabs button svg,.rztabs label svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rztabs a .n,.rztabs button .n,.rztabs label .n{font-size:15px;font-weight:800}
.rztabs a.on,.rztabs button.on,.rztabs label.on{background:var(--sauge);border-color:var(--sauge);
  color:#fff;box-shadow:none}
.rztabs a.alerte:not(.on) .n{color:var(--rupt)}
.rztabs a.alerte:not(.on){border-color:#e0b4ae;background:#fdf6f5}

.rzpills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.rzpills a,.rzpills button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;
  border:1px solid var(--line);border-radius:100px;background:#fff;text-decoration:none;
  color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.rzpills a svg,.rzpills button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){
  .rztabs{gap:6px}
  .rztabs a,.rztabs button,.rztabs label{min-width:0;flex:1 1 0;min-height:58px;font-size:10.5px;padding:6px 3px}
  .rztabs a svg,.rztabs button svg,.rztabs label svg{width:18px;height:18px}
  .rztabs a .n,.rztabs button .n,.rztabs label .n{font-size:14px}
}

/* --- Accords mets et vins (panneau d'edition d'un plat) --- */
.acc-l{display:flex;gap:8px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.acc-l .acc-v{flex:1 1 260px;min-width:0;margin:0}
.acc-l .acc-n{flex:1 1 220px;min-width:0;margin:0}
@media(max-width:560px){ .acc-l{gap:6px} .acc-l .acc-v,.acc-l .acc-n{flex:1 1 100%} }