/* ═══════════════════════════════════════════════════════════
   La Table de Carthage — application (tunnels, compte, salon)
   Reprend les tokens du site vitrine (assets/css/style.css).
   ═══════════════════════════════════════════════════════════ */
:root{
  --navy-900:#071A31; --navy-800:#0E2A4E; --navy-700:#14345F;
  --gold-500:#C9A961; --gold-400:#D9BE7E; --gold-300:#EBD8A8;
  --cream:#FAF6EC; --cream-2:#F2EADA; --ink:#12212F; --muted:#5B6773; --gold-700:#7D6224;
  --ok:#3E7A4C; --err:#B4402A;
  --ff-title:'Marcellus', Georgia, serif;
  --ff-display:'Cormorant Garamond', Georgia, serif;
  --ff-body:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
/* La règle [hidden] du navigateur a la spécificité d'un attribut : la
   moindre classe qui pose un display la bat. Les barres fixées en bas de
   page (envoi, épinglage) portent toutes deux un display, et restaient donc
   affichées malgré leur attribut hidden — la barre d'envoi s'est ainsi
   montrée en permanence, panier vide, avec un bouton qui soumettait le
   néant. Une seule règle remet l'attribut au-dessus de tout. */
[hidden]{display:none !important}
body{
  margin:0;background:var(--cream);color:var(--ink);font-family:var(--ff-body);
  font-weight:300;line-height:1.6;font-size:16px;
}
a{color:inherit;text-decoration:none}
a:not([class]):hover{text-decoration:underline}
.wrap{width:min(100% - 2.5rem, 980px);margin-inline:auto}
.wrap--large{width:min(100% - 2.5rem, 1240px);margin-inline:auto}

.topbar{
  background:var(--navy-900);color:var(--cream);padding:1rem 0;
  display:flex;align-items:center;justify-content:space-between;
}
.topbar .wrap--large{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar__brand{font-family:var(--ff-title);letter-spacing:.06em;font-size:1.1rem;display:flex;align-items:center;gap:.7rem}
.topbar__brand img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.topbar__nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.topbar__nav a{opacity:.8;transition:opacity .3s}
.topbar__nav a:hover,.topbar__nav a.is-active{opacity:1;color:var(--gold-400)}

main{padding:0 0 5rem}
h1{font-family:var(--ff-title);font-weight:400;font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .3em;color:var(--navy-800)}
h2{
  font-family:var(--ff-title);font-weight:400;font-size:1.4rem;margin:2.4rem 0 1.1rem;color:var(--navy-800);
  display:flex;align-items:center;gap:.9rem;
}
h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(201,169,97,.5),transparent)}
p.lead{color:var(--muted);max-width:60ch;margin:0 0 2rem}

/* Bandeau d'en-tête façon hero, en écho à la page d'accueil : donne aux
   tunnels de réservation/commande la même assise visuelle que le site
   vitrine plutôt qu'un simple titre posé sur fond crème. */
.page-head{
  background:radial-gradient(120% 180% at 15% 0%, var(--navy-700), var(--navy-900) 70%);
  color:var(--cream);padding:clamp(3rem,7vw,4.5rem) 0 clamp(2.2rem,5vw,3rem);
  margin-bottom:clamp(2rem,4vw,3rem);position:relative;overflow:hidden;
}
.page-head::before{
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(201,169,97,.35) 1px, transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.page-head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent);
}
.page-head .wrap{position:relative}
.page-head__kicker{
  font-family:var(--ff-body);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-400);margin:0 0 1rem;
}
.page-head h1{
  font-family:var(--ff-display);font-weight:500;color:var(--cream);
  font-size:clamp(2.3rem,5vw,3.4rem);margin:0 0 .7rem;
}
.page-head p.lead{color:rgba(250,246,236,.75);margin:0;max-width:56ch}

.card{
  background:#fff;border:1px solid rgba(14,42,78,.07);padding:clamp(1.5rem,3vw,2.1rem);
  border-radius:10px;box-shadow:0 1px 2px rgba(14,42,78,.04),0 14px 30px -18px rgba(14,42,78,.18);
}
.card + .card{margin-top:1.5rem}

.grid{display:grid;gap:1.5rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.field{margin-bottom:1.2rem}
.field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700);margin-bottom:.4rem;font-weight:500}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .8rem;border:1px solid rgba(14,42,78,.2);border-radius:3px;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold-500);outline-offset:1px;border-color:var(--gold-500)}
.field small{display:block;margin-top:.35rem;color:var(--muted);font-size:.8rem}
.field .erreur{display:block;margin-top:.35rem;color:var(--err);font-size:.82rem}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.field--row{grid-template-columns:1fr}}
.champ-invalide input,.champ-invalide select{border-color:var(--err)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 2.1rem;border:1px solid var(--navy-800);background:var(--navy-800);color:#fff;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:3px;
  text-decoration:none;transition:background .3s,color .3s,border-color .3s,box-shadow .3s;
}
.btn:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900);box-shadow:0 10px 24px -12px rgba(201,169,97,.6)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn--ghost{background:none;color:var(--navy-800)}
.btn--ghost:hover{background:var(--cream-2);color:var(--navy-800)}
.btn--danger{background:none;border-color:var(--err);color:var(--err)}
.btn--danger:hover{background:var(--err);color:#fff}
.btn--sm{padding:.5rem 1rem;font-size:.72rem}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}

.alerte{padding:1rem 1.2rem;border-radius:3px;margin-bottom:1.5rem;font-size:.92rem}
.alerte--erreur{background:#FBEAE6;color:var(--err);border:1px solid #EBC5BA}
.alerte--ok{background:#E9F3EB;color:var(--ok);border:1px solid #C3DEC8}
.alerte--info{background:var(--cream-2);color:var(--navy-800);border:1px solid rgba(14,42,78,.12)}

table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid rgba(14,42,78,.1)}
th{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
tbody tr:hover{background:var(--cream-2)}
.table-scroll{overflow-x:auto}

.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.badge--attente{background:#FCF3D9;color:#8A6D1D}
.badge--confirmee{background:#DCEAE0;color:var(--ok)}
.badge--prete{background:#DCE8F5;color:#2A5C8A}
.badge--honoree,.badge--retiree{background:#E4E4E4;color:#555}
.badge--annulee,.badge--absente{background:#F3DCD8;color:var(--err)}
.badge--veg{background:#E4EFE0;color:#3F6B30}
.badge--signature{background:var(--gold-500);color:var(--navy-900)}
/* Les classes ci-dessus viennent de `statut.replace('_','')` : un statut à
   rallonge donne « enattente », « enpreparation », « apayer ». Sans ces
   règles, la pastille perdait sa couleur et le statut se lisait comme du
   texte ordinaire — visible dans l'espace client, où c'est pourtant la
   seule indication de ce qu'il reste à faire. */
.badge--enattente{background:#FCF3D9;color:#8A6D1D}
.badge--apayer{background:#F6E4C0;color:#8A5A1D}
.badge--vue,.badge--enpreparation{background:#DCE8F5;color:#2A5C8A}
.badge--encaissee{background:#DCEAE0;color:var(--ok)}

.creneaux{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.creneau{
  padding:.65rem 1.2rem;border:1px solid rgba(14,42,78,.2);border-radius:999px;cursor:pointer;
  font-size:.85rem;letter-spacing:.02em;background:#fff;transition:all .25s var(--ease);
}
.creneau:hover{border-color:var(--gold-500);color:var(--gold-500)}
.creneau.is-choisi{
  background:var(--navy-800);border-color:var(--navy-800);color:#fff;
  box-shadow:0 8px 18px -8px rgba(14,42,78,.5);
}
.creneau.is-choisi:hover{color:#fff}
.creneau[disabled],.creneau.is-indisponible{opacity:.35;cursor:not-allowed;text-decoration:line-through}

.plat-photo{width:76px;height:76px;object-fit:cover;border-radius:6px;border:1px solid rgba(14,42,78,.1);flex-shrink:0}
.plat-photo--placeholder{
  display:flex;align-items:center;justify-content:center;background:var(--cream-2);color:var(--gold-500);
  font-size:1.4rem;font-family:var(--ff-display);text-align:center;
}

.menu-carte{display:grid;gap:1rem}
.menu-plat{
  display:flex;gap:1.1rem;padding:1.1rem;border:1px solid rgba(14,42,78,.08);border-radius:8px;
  background:#fff;align-items:center;transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.menu-plat:has(.js-qte[value]:not([value="0"])){border-color:rgba(201,169,97,.5)}
.menu-plat:hover{box-shadow:0 10px 24px -16px rgba(14,42,78,.25)}
.menu-plat__infos{flex:1;min-width:0}
.menu-plat__infos h4{margin:0 0 .25rem;font-family:var(--ff-title);font-weight:400;font-size:1.08rem}
.menu-plat__infos p{margin:0;color:var(--muted);font-size:.85rem}
.menu-plat__prix{font-family:var(--ff-display);font-weight:600;color:var(--gold-700);font-size:1.25rem;white-space:nowrap}
.menu-plat__qte{width:70px}
.menu-plat__qte input{text-align:center}

.panier-total{
  display:flex;justify-content:space-between;align-items:center;padding:1.3rem 1.5rem;
  background:linear-gradient(120deg,var(--navy-900),var(--navy-800));color:#fff;border-radius:10px;
  margin:1.5rem 0;font-family:var(--ff-title);font-size:1.15rem;letter-spacing:.04em;
  border-top:1px solid rgba(201,169,97,.4);
}
.panier-total strong{font-family:var(--ff-display);font-weight:600;font-size:1.5rem;color:var(--gold-300)}

.stat-tuile{background:#fff;border:1px solid rgba(14,42,78,.1);padding:1.4rem;border-radius:4px;text-align:center}
.stat-tuile b{display:block;font-family:var(--ff-title);font-size:2.2rem;color:var(--navy-800)}
.stat-tuile span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.filtre-bar{display:flex;gap:.8rem;flex-wrap:wrap;align-items:end;margin-bottom:1.5rem}
.filtre-bar .field{margin-bottom:0}

.onglets{display:flex;gap:.4rem;border-bottom:1px solid rgba(14,42,78,.15);margin-bottom:1.8rem;flex-wrap:wrap}
.onglets a{padding:.7rem 1.1rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.onglets a.is-active{color:var(--navy-800);border-color:var(--gold-500)}

.vide{text-align:center;padding:3rem 1rem;color:var(--muted)}

footer.app-foot{text-align:center;padding:2rem 0;color:var(--muted);font-size:.8rem}

/* ═══════════════════════════════════════════════════════════
   Le salon (back-office)
   Pensé pour une tablette posée près du passe : cibles tactiles
   larges, densité d'information forte, lisible d'un coup d'œil.
   ═══════════════════════════════════════════════════════════ */
body.salon{background:#F4F6F9}

.salonbar{
  background:linear-gradient(160deg,var(--navy-900),var(--navy-800));
  color:var(--cream);position:sticky;top:0;z-index:50;
  box-shadow:0 2px 18px -8px rgba(7,26,49,.6);
}
.salonbar__haut{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem clamp(1rem,3vw,2rem) .6rem;
}
.salonbar__brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.salonbar__brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(201,169,97,.5);flex-shrink:0}
.salonbar__brand span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.salonbar__brand b{
  font-family:var(--ff-title);font-weight:400;font-size:1.02rem;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.salonbar__brand small{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-400)}
.salonbar__voir{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,246,236,.7);
  border:1px solid rgba(250,246,236,.25);border-radius:999px;padding:.45rem .9rem;white-space:nowrap;
  transition:border-color .3s,color .3s;
}
.salonbar__voir:hover{color:var(--gold-400);border-color:var(--gold-400)}

/* Sur mobile la barre défile horizontalement plutôt que de passer à la
   ligne : l'onglet actif reste visible sans écraser le contenu. */
.salonbar__nav{
  display:flex;gap:.2rem;padding:0 clamp(1rem,3vw,2rem);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
/* Sur un écran large, la barre passe à la ligne plutôt que de défiler : à
   onze entrées, la dernière se retrouvait coupée au bord sans que rien
   n'indique qu'il fallait faire défiler. Sous 900 px, le défilement
   horizontal reste le bon geste — c'est celui qu'on fait au doigt. */
@media (min-width:900px){
  .salonbar__nav{flex-wrap:wrap;overflow-x:visible}
}
.salonbar__nav::-webkit-scrollbar{display:none}
.salonbar__nav a{
  padding:.7rem .95rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,246,236,.62);border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .25s,border-color .25s;
}
.salonbar__nav a:hover{color:var(--cream)}
.salonbar__nav a.is-active{color:var(--gold-400);border-color:var(--gold-500)}

body.salon main{padding:clamp(1.5rem,3vw,2.5rem) 0 4rem}
body.salon h1{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.3rem);margin:0 0 .25em}
.page-titre{margin-bottom:1.8rem}
.page-titre .lead{margin-bottom:0}
.fil{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.fil a{color:var(--gold-500)}

.sous-onglets{
  display:flex;gap:.4rem;margin-bottom:1.6rem;flex-wrap:wrap;
  border-bottom:1px solid rgba(14,42,78,.12);
}
.sous-onglets a{
  padding:.6rem 1.1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .25s;
}
.sous-onglets a:hover{color:var(--navy-800)}
.sous-onglets a.is-active{color:var(--navy-800);border-color:var(--gold-500);font-weight:400}

.barre-filtres{
  display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.8rem;
  background:#fff;border:1px solid rgba(14,42,78,.07);border-radius:10px;padding:1rem 1.2rem;
}
.barre-filtres .field{margin-bottom:0;min-width:150px}

/* ── Tuiles de synthèse ───────────────────────────────────── */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.8rem}
.tuile{
  background:#fff;border:1px solid rgba(14,42,78,.07);border-radius:10px;padding:1.1rem 1rem;
  text-align:center;box-shadow:0 1px 2px rgba(14,42,78,.04);
}
.tuile b{display:block;font-family:var(--ff-display);font-weight:600;font-size:2rem;color:var(--navy-800);line-height:1.1}
.tuile span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tuile--accent b{color:var(--gold-500)}

/* ── Plan de salle ────────────────────────────────────────── */
.plan-salle{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.table-carte{
  background:#fff;border:1px solid rgba(14,42,78,.1);border-left:4px solid var(--muted);
  border-radius:10px;padding:1rem;display:flex;flex-direction:column;gap:.7rem;
  box-shadow:0 1px 2px rgba(14,42,78,.04);
}
.table-carte__tete{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.table-carte__tete b{font-family:var(--ff-title);font-weight:400;font-size:1.1rem;color:var(--navy-800)}
.table-carte__cap{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.table-carte__info{margin:0;font-size:.85rem;line-height:1.45}
.table-carte__note{margin:0;font-size:.72rem;color:var(--muted);font-style:italic}
.table-carte__form{display:flex;flex-direction:column;gap:.55rem}
.table-carte__champ{display:flex;align-items:center;gap:.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.table-carte__champ input{width:70px;padding:.45rem .5rem;border:1px solid rgba(14,42,78,.2);border-radius:3px;font:inherit;text-align:center}
.btn--bloc{width:100%}

.table-carte--libre{border-left-color:#4C9A5E}
.table-carte--resa{border-left-color:var(--navy-700);background:#F7FAFE}
.table-carte--manuel{border-left-color:var(--gold-500);background:#FEFBF3}
.table-carte--hs{border-left-color:#C3CBD4;opacity:.6}

.legende{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem;font-size:.78rem;color:var(--muted)}
.pastille{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.pastille--libre{background:#4C9A5E}
.pastille--resa{background:var(--navy-700)}
.pastille--manuel{background:var(--gold-500)}
.pastille--hs{background:#C3CBD4}

/* ── Formulaires en ligne (tables, équipe) ────────────────── */
.ligne-champs{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
.ligne-champs .field{margin-bottom:0;flex:1 1 150px;min-width:120px}
.ligne-champs--serree{gap:.7rem}
.ligne-champs--serree .field{flex:1 1 110px}
/* Sous 520 px, deux champs côte à côte se réduisent à des fentes : chacun
   prend la ligne, et le bouton avec. */
@media (max-width:520px){
  .ligne-champs .field,
  .ligne-champs--serree .field{flex:1 1 100%}
  .ligne-champs > .btn{width:100%}
}
.field--court{flex:0 0 100px !important;min-width:90px}
.aide{font-size:.78rem;color:var(--muted);margin:.9rem 0 0}

.liste-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.liste-tables .card{margin-top:0}
.carte-table{padding:1.1rem}
.carte-table.est-inactive{opacity:.6;background:#FAFBFC}
/* Ce qui remplace le bouton « Supprimer » quand la table a déjà servi :
   une explication, pas un bouton grisé qu'on cliquerait dix fois. */
.carte-table__tenue{
  font-size:.74rem;line-height:1.35;color:var(--muted);
  align-self:center;flex:1 1 140px;
}
.btn-row--serree{margin-top:1rem;gap:.5rem}
.case{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted);white-space:nowrap;padding-bottom:.55rem}
.case input{width:18px;height:18px;accent-color:var(--navy-800)}

/* ── Planning ─────────────────────────────────────────────── */
.nav-semaine{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.nav-semaine strong{font-family:var(--ff-title);font-weight:400;font-size:1.05rem;color:var(--navy-800)}

.grille-planning{background:#fff;border-radius:10px;overflow:hidden;min-width:760px}
.grille-planning th,.grille-planning td{border:1px solid rgba(14,42,78,.08);vertical-align:top;padding:.6rem .5rem}
.grille-planning thead th{background:#F0F3F7;text-align:center}
.grille-planning .jour-nom{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-800)}
.grille-planning .jour-num{display:block;font-size:.68rem;color:var(--muted);text-transform:none;letter-spacing:0}
.grille-planning .est-aujourdhui{background:#FDF8EC}
.grille-planning .col-personne{min-width:150px;background:#FAFBFC}
.grille-planning .col-personne small{color:var(--muted);font-size:.72rem}
.grille-planning .col-total{text-align:center;background:#FAFBFC;white-space:nowrap}
.grille-planning tbody tr:hover{background:transparent}

.shift{
  display:flex;align-items:center;justify-content:space-between;gap:.3rem;
  background:var(--navy-800);color:#fff;border-radius:4px;padding:.28rem .45rem;
  font-size:.76rem;margin-bottom:.3rem;
}
.shift form{display:flex}
.shift__x{
  background:none;border:0;color:rgba(255,255,255,.65);cursor:pointer;
  font-size:1rem;line-height:1;padding:0 .1rem;
}
.shift__x:hover{color:#fff}
.shift__note{display:block;color:var(--muted);font-size:.7rem;margin-bottom:.35rem}

/* ── Présences ────────────────────────────────────────────── */
.carte-presence{border-left:4px solid var(--muted);padding:1.1rem}
.carte-presence--present{border-left-color:#4C9A5E}
.carte-presence--absent{border-left-color:var(--err)}
.carte-presence--conge,.carte-presence--maladie{border-left-color:var(--gold-500)}
.carte-presence--attente{border-left-color:#C3CBD4}
.carte-presence__tete{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.6rem}
.carte-presence__tete strong{font-family:var(--ff-title);font-weight:400;font-size:1.05rem;color:var(--navy-800)}
.carte-presence__tete small{display:block;color:var(--muted);font-size:.75rem}
.carte-presence__prevu,.carte-presence__reel{margin:0 0 .5rem;font-size:.85rem;color:var(--muted)}
.carte-presence__reel strong{color:var(--navy-800)}
.carte-presence__actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.9rem}
.carte-presence__actions form{display:flex;gap:.35rem;align-items:center}
.carte-presence__actions input[type=time],.carte-presence__actions select{
  padding:.45rem .5rem;border:1px solid rgba(14,42,78,.2);border-radius:3px;font:inherit;font-size:.85rem;
}

/* ── Écrans étroits (téléphone) ───────────────────────────── */
@media (max-width:640px){
  .wrap,.wrap--large{width:min(100% - 1.6rem, 1240px)}
  .plan-salle{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
  .liste-tables{grid-template-columns:1fr}
  .tuiles{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .tuile b{font-size:1.6rem}
  .barre-filtres{padding:.9rem 1rem}
  .barre-filtres .field{min-width:0;flex:1 1 130px}
  .carte-presence__actions{gap:.4rem}
  .carte-presence__actions form{flex:1 1 100%}
  .carte-presence__actions .btn{flex:1}
  /* Cibles tactiles : un doigt vaut ~9 mm, on ne descend pas sous 44 px. */
  .btn--sm{padding:.6rem 1rem}
  .table-carte__champ input,
  .carte-presence__actions input[type=time],
  .carte-presence__actions select{min-height:44px}
}

/* ── Compteur + / − du panier ─────────────────────────────── */
.compteur{
  display:flex;align-items:center;gap:0;border:1px solid rgba(14,42,78,.2);
  border-radius:999px;overflow:hidden;background:#fff;flex-shrink:0;
  transition:border-color .25s var(--ease);
}
.compteur.est-actif{border-color:var(--gold-500)}
.compteur__btn{
  width:42px;height:42px;border:0;background:none;cursor:pointer;flex-shrink:0;
  font-size:1.35rem;line-height:1;color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.compteur__btn:hover{background:var(--cream-2)}
.compteur__btn:active{background:var(--gold-500);color:#fff}
.compteur .js-qte{
  width:44px;border:0;border-left:1px solid rgba(14,42,78,.12);
  border-right:1px solid rgba(14,42,78,.12);
  text-align:center;font:inherit;font-size:1rem;padding:.55rem 0;
  -moz-appearance:textfield;background:none;color:var(--ink);
}
.compteur .js-qte::-webkit-outer-spin-button,
.compteur .js-qte::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.compteur .js-qte:focus{outline:2px solid var(--gold-500);outline-offset:-2px}

.menu-plat.est-choisi{border-color:rgba(201,169,97,.55);background:#FFFDF8}
.panier-total span em{font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-300);margin-left:.6rem}

/* ── Navigation par jour (réservations, commandes) ─────────── */
.nav-jour{
  display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.2rem;
  background:#fff;border:1px solid rgba(14,42,78,.07);border-radius:999px;
  padding:.5rem .6rem;box-shadow:0 1px 2px rgba(14,42,78,.04);
}
.nav-jour__fleche{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;line-height:1;color:var(--navy-800);background:var(--cream-2);flex-shrink:0;
  transition:background .25s,color .25s;
}
.nav-jour__fleche:hover{background:var(--navy-800);color:#fff}
.nav-jour__centre{text-align:center;flex:1;min-width:0}
.nav-jour__centre strong{
  display:block;font-family:var(--ff-title);font-weight:400;font-size:1.15rem;
  color:var(--navy-800);text-transform:capitalize;
}
.nav-jour__centre small{display:block;font-size:.78rem;color:var(--muted)}

.raccourcis-jour{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.raccourcis-jour .est-actif{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.raccourcis-jour .est-actif:hover{background:var(--navy-800);color:#fff}
.tuile--compacte{padding:.6rem 1.1rem;margin-left:auto}
.tuile--compacte b{font-size:1.4rem}

/* ── Tuiles cliquables du tableau de bord ─────────────────── */
.tuiles--dashboard{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tuile--lien{
  display:block;text-align:left;padding:1.2rem 1.3rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.tuile--lien:hover{
  transform:translateY(-2px);border-color:rgba(201,169,97,.5);
  box-shadow:0 14px 30px -18px rgba(14,42,78,.35);
}
.tuile--lien b{font-size:2.3rem}
.tuile--lien span{display:block;color:var(--navy-800);font-size:.74rem;letter-spacing:.08em}
.tuile--lien em{display:block;margin-top:.3rem;font-style:normal;font-size:.78rem;color:var(--muted)}

.acces-rapide{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.acces{
  background:#fff;border:1px solid rgba(14,42,78,.07);border-radius:10px;padding:1.1rem 1.2rem;
  display:block;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
  box-shadow:0 1px 2px rgba(14,42,78,.04);
}
.acces:hover{transform:translateY(-2px);border-color:rgba(201,169,97,.5);box-shadow:0 14px 30px -18px rgba(14,42,78,.3)}
.acces b{display:block;font-family:var(--ff-title);font-weight:400;font-size:1.08rem;color:var(--navy-800);margin-bottom:.25rem}
.acces span{display:block;font-size:.84rem;color:var(--muted);line-height:1.45}

/* ── Cloche et badge de notifications ─────────────────────── */
.salonbar__actions{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.salonbar__cloche{
  position:relative;width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(250,246,236,.75);border:1px solid rgba(250,246,236,.2);
  transition:color .25s,border-color .25s,background .25s;
}
.salonbar__cloche:hover,.salonbar__cloche.is-active{color:var(--gold-400);border-color:var(--gold-400)}
.salonbar__badge{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--err);color:#fff;
  font-size:.68rem;font-weight:500;line-height:20px;text-align:center;
  border:2px solid var(--navy-900);
}
.salonbar__badge.est-vide{display:none}

/* ── Liste des notifications ──────────────────────────────── */
.liste-notifs{display:flex;flex-direction:column;gap:.7rem}
.notif{
  background:#fff;border:1px solid rgba(14,42,78,.08);border-left:4px solid var(--gold-500);
  border-radius:8px;padding:.95rem 1.1rem;display:flex;align-items:center;gap:1rem;
  box-shadow:0 1px 2px rgba(14,42,78,.04);
}
.notif--reservation{border-left-color:var(--navy-700)}
.notif--commande{border-left-color:#4C9A5E}
.notif--annulation_reservation,.notif--annulation_commande{border-left-color:var(--err)}
.notif.est-lue{opacity:.55;background:#FAFBFC}
.notif__corps{flex:1;min-width:0}
.notif__titre{
  display:block;font-family:var(--ff-title);font-weight:400;font-size:1.02rem;
  color:var(--navy-800);margin-bottom:.15rem;
}
.notif__titre:hover{color:var(--gold-500)}
.notif__detail{margin:0 0 .25rem;font-size:.85rem;color:var(--muted)}
.notif__quand{font-size:.75rem;color:var(--muted);opacity:.8}

@media (max-width:640px){
  .nav-jour__centre strong{font-size:1rem}
  .tuiles--dashboard{grid-template-columns:1fr 1fr}
  .tuile--lien b{font-size:1.8rem}
  .acces-rapide{grid-template-columns:1fr}
  .tuile--compacte{margin-left:0;flex:1 1 100%;text-align:center}
  .notif{flex-direction:column;align-items:stretch;gap:.7rem}
  .raccourcis-jour{flex:1 1 100%}
  .raccourcis-jour .btn{flex:1}
}

/* ── Identité dans les tunnels ────────────────────────────── */
/* Une seule colonne, et dans l'ordre : d'abord le téléphone et la date de
   naissance — tout le monde en a besoin, ce sont les identifiants —, puis
   les coordonnées, qui ne concernent que ceux qui viennent pour la
   première fois. L'ancienne mise en page en deux colonnes « ou » laissait
   croire qu'on pouvait choisir l'une des deux. */
.identite-titre{
  font-family:var(--ff-title);font-weight:400;font-size:1.1rem;color:var(--navy-800);
  margin:0 0 .4rem;
}
.identite-mot{margin:0 0 1.1rem;font-size:.85rem;color:var(--muted);line-height:1.5}
.identite-retour{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.3rem;
  font-size:.85rem;color:var(--muted);line-height:1.5;
}
.identite-retour span{flex:1 1 12rem}
.bloc-identite .separateur-ou{margin:1.6rem 0 1.2rem}

.carte-identifie{border-left:4px solid #4C9A5E}
.identifie{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.identifie__pastille{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-800);color:var(--gold-300);
  font-family:var(--ff-title);font-size:1rem;letter-spacing:.04em;
}
.identifie__qui{flex:1;min-width:0}
.identifie__qui strong{
  display:block;font-family:var(--ff-title);font-weight:400;font-size:1.1rem;color:var(--navy-800);
}
.identifie__qui small{display:block;color:var(--muted);font-size:.84rem}

@media (max-width:720px){
  .identite-retour .btn{flex:1 1 100%}
  .identifie{gap:.7rem}
  .identifie .btn{flex:1 1 100%}
}

/* Sur un téléphone, deux boutons côte à côte dans une cellule poussent la
   colonne hors de l'écran : le client doit alors deviner qu'il faut faire
   défiler le tableau pour trouver « Régler ». Ils s'empilent donc. */
@media (max-width:600px){
  td .btn-row--serree{flex-direction:column;align-items:stretch;gap:.3rem}
  td .btn-row--serree .btn{width:100%}
  /* Et on resserre le tableau lui-même : sans ça, la colonne d'actions
     part au-delà du bord et « Régler » n'existe que pour qui pense à faire
     défiler de côté. */
  .table-scroll table{font-size:.82rem}
  .table-scroll th,.table-scroll td{padding:.55rem .4rem}
  .table-scroll td:first-child{word-break:break-all}
}

/* Resserrer ne suffisait pas : à cinq colonnes sur 390 px, la dernière —
   celle qui porte « Régler » — tombait quand même au-delà du bord droit.
   Un bouton qui règle une commande ne doit pas dépendre d'un défilement
   latéral que rien n'annonce. Sur téléphone, chaque ligne devient donc une
   fiche : l'en-tête de colonne passe en étiquette devant la valeur, et
   l'action prend toute la largeur.

   Les intitulés viennent de `data-l` sur chaque cellule. C'est une
   duplication du `<thead>`, assumée : le tableau reste un vrai tableau
   pour un lecteur d'écran comme pour une impression, et seule la mise en
   forme change. */
@media (max-width:600px){
  .table-empilee thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .table-empilee,.table-empilee tbody,.table-empilee tr,.table-empilee td{display:block;width:100%}
  .table-empilee tr{
    background:#fff;border:1px solid rgba(14,42,78,.12);border-radius:12px;
    padding:.6rem .85rem;margin-bottom:.7rem;
  }
  .table-empilee tbody tr:hover{background:#fff}
  .table-empilee td{
    border:0;padding:.3rem 0;display:flex;align-items:baseline;
    justify-content:space-between;gap:1rem;
  }
  .table-empilee td::before{
    content:attr(data-l);flex:0 0 auto;
    font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  }
  .table-empilee td:first-child{word-break:normal}
  /* La cellule d'action n'a pas d'étiquette : elle se déplie sur toute la
     largeur, sous les informations qu'elle concerne. */
  .table-empilee td.cellule-action{display:block;padding-top:.5rem}
  .table-empilee td.cellule-action::before{content:none}
  .table-empilee td.cellule-action:empty,
  .table-empilee td.cellule-action .btn-row--serree:empty{display:none}
}

/* ── Paiement en ligne ────────────────────────────────────── */
.montant-du{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0;
}
.montant-du span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.montant-du b{
  font-family:var(--ff-display);font-weight:600;font-size:1.6rem;color:var(--navy-800);
  font-variant-numeric:tabular-nums;
}
/* Le trait qui sépare « payer en un geste » de « saisir sa carte ». Sans
   lui, les boutons Apple Pay / Google Pay et le formulaire de carte se
   lisent comme une seule suite d'étapes à franchir, alors que ce sont deux
   chemins au choix. */
.separateur-ou{
  display:flex;align-items:center;gap:.9rem;margin:1.2rem 0 0;
  color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
}
.separateur-ou::before,.separateur-ou::after{
  content:"";flex:1;height:1px;background:rgba(14,42,78,.14);
}

/* La case « enregistrer ma carte ». Toute la ligne est cliquable : viser
   une case de 13 px au pouce, sur un téléphone, rate une fois sur deux. */
.case-garder{
  display:flex;align-items:flex-start;gap:.7rem;margin-top:1.1rem;
  padding:.75rem .85rem;border:1px solid rgba(14,42,78,.14);border-radius:8px;
  cursor:pointer;
}
.case-garder:hover{background:var(--cream)}
.case-garder input{margin-top:.15rem;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--navy-800)}
.case-garder b{display:block;font-weight:500;font-size:.94rem}
.case-garder small{display:block;color:var(--muted);font-size:.8rem;line-height:1.45;margin-top:.15rem}

/* Le cadre que Stripe injecte doit respirer comme nos propres champs. */
#carte{margin-bottom:.4rem}

/* ═══════════════════════════════════════════════════════════
   Analyse (chiffre d'affaires, plats vendus, prévision)
   ═══════════════════════════════════════════════════════════ */
.graph-jours{width:100%;height:146px;display:block}
.graph-jours__barre{fill:var(--gold-500);transition:fill .15s}
.graph-jours__barre:hover{fill:var(--navy-800)}
.graph-jours__barre.est-vide{fill:rgba(14,42,78,.08)}
.graph-jours__etiquette{
  font-size:9px;fill:var(--muted);font-family:var(--ff-body);text-anchor:start;
}

details > summary{
  cursor:pointer;color:var(--navy-800);font-size:.85rem;padding:.4rem 0;
  list-style:none;display:flex;align-items:center;gap:.4rem;
}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:'▸';color:var(--gold-500);transition:transform .2s}
details[open] > summary::before{transform:rotate(90deg)}
details[open] > summary{margin-bottom:.8rem}

/* Une jauge horizontale par ligne : le plat le plus vendu donne l'échelle,
   les autres s'y comparent d'un coup d'œil sans qu'un graphique séparé soit
   nécessaire. */
.barres-plats{display:grid;gap:.55rem}
.barre-plat{
  display:grid;grid-template-columns:11rem 1fr 4.2rem 6rem;gap:.8rem;align-items:center;
  font-size:.87rem;
}
.barre-plat__nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-plat__jauge{background:var(--cream-2);border-radius:3px;height:.6rem;overflow:hidden}
.barre-plat__jauge i{display:block;height:100%;background:var(--gold-500);border-radius:3px}
.barre-plat__nombre{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.barre-plat__ca{text-align:right;font-weight:500;color:var(--navy-800);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .barre-plat{grid-template-columns:7rem 1fr 2.4rem;gap:.5rem}
  .barre-plat__ca{display:none}
}

.grid-analyse{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem}
.grid-analyse h3{margin-top:0}

/* ═══════════════════════════════════════════════════════════
   Analyse (chiffre d'affaires, plats vendus, prévision)
   ═══════════════════════════════════════════════════════════ */
.graph-jours{width:100%;height:146px;display:block}
.graph-jours__barre{fill:var(--gold-500);transition:fill .15s}
.graph-jours__barre:hover{fill:var(--navy-800)}
.graph-jours__barre.est-vide{fill:rgba(14,42,78,.08)}
.graph-jours__etiquette{
  font-size:9px;fill:var(--muted);font-family:var(--ff-body);text-anchor:start;
}

details > summary{
  cursor:pointer;color:var(--navy-800);font-size:.85rem;padding:.4rem 0;
  list-style:none;display:flex;align-items:center;gap:.4rem;
}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:'▸';color:var(--gold-500);transition:transform .2s}
details[open] > summary::before{transform:rotate(90deg)}
details[open] > summary{margin-bottom:.8rem}

/* Une jauge horizontale par ligne : le plat le plus vendu donne l'échelle,
   les autres s'y comparent d'un coup d'œil sans qu'un graphique séparé soit
   nécessaire. */
.barres-plats{display:grid;gap:.55rem}
.barre-plat{
  display:grid;grid-template-columns:11rem 1fr 4.2rem 6rem;gap:.8rem;align-items:center;
  font-size:.87rem;
}
.barre-plat__nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-plat__jauge{background:var(--cream-2);border-radius:3px;height:.6rem;overflow:hidden}
.barre-plat__jauge i{display:block;height:100%;background:var(--gold-500);border-radius:3px}
.barre-plat__nombre{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.barre-plat__ca{text-align:right;font-weight:500;color:var(--navy-800);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .barre-plat{grid-template-columns:7rem 1fr 2.4rem;gap:.5rem}
  .barre-plat__ca{display:none}
}

.grid-analyse{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem}
.grid-analyse h3{margin-top:0}

/* ═══════════════════════════════════════════════════════════
   Service à table (QR, tablées, additions)
   ═══════════════════════════════════════════════════════════ */

/* Le client commande debout ou assis, téléphone en main : la barre
   d'envoi reste sous le pouce quelle que soit la longueur de la carte. */
.barre-envoi{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2rem);
  padding-bottom:calc(.85rem + env(safe-area-inset-bottom));
  background:linear-gradient(120deg,var(--navy-900),var(--navy-800));color:#fff;
  box-shadow:0 -6px 24px -10px rgba(7,26,49,.55);
}
.barre-envoi__total{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.barre-envoi__total span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300)}
.barre-envoi__total strong{font-family:var(--ff-display);font-weight:600;font-size:1.45rem}
.barre-envoi .btn{border-color:var(--gold-500);background:var(--gold-500);color:var(--navy-900);flex-shrink:0}
.barre-envoi .btn:hover{background:var(--gold-400);border-color:var(--gold-400)}
/* De quoi ne pas masquer la fin de la carte derrière la barre. */
body:has(.barre-envoi:not([hidden])) main{padding-bottom:7rem}

.page-head--table h1{font-size:clamp(2rem,4.5vw,2.9rem)}

/* ── L'addition ───────────────────────────────────────────── */
.addition{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.2rem}
.addition__cmd{border-left:3px solid rgba(201,169,97,.5);padding-left:.9rem}
.addition__cmd.est-annulee{opacity:.45;text-decoration:line-through;border-left-color:var(--muted)}
.addition__entete{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.75rem;letter-spacing:.06em;color:var(--muted);margin-bottom:.35rem;
}
.addition__ligne{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;padding:.15rem 0}
.addition__mot{margin:.4rem 0 0;font-size:.82rem;font-style:italic;color:var(--muted)}

/* ── Tablées côté salon ───────────────────────────────────── */
.carte-tablee{display:block;border-left:4px solid #4C9A5E;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.carte-tablee:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(14,42,78,.35)}
.carte-tablee--fermee{border-left-color:var(--muted);opacity:.7}
.carte-tablee__tete{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.carte-tablee__tete b{font-family:var(--ff-title);font-weight:400;font-size:1.15rem;color:var(--navy-800)}
.carte-tablee__client{margin:0 0 .5rem;font-size:.9rem}
.carte-tablee__client small{color:var(--muted)}
.carte-tablee__resa{margin:0 0 .5rem;font-size:.78rem;color:var(--gold-500)}
.carte-tablee__pied{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin-top:.8rem;padding-top:.7rem;border-top:1px solid rgba(14,42,78,.08);
}
.carte-tablee__pied span{font-size:.78rem;color:var(--muted)}
.carte-tablee__pied strong{font-family:var(--ff-display);font-weight:600;font-size:1.25rem;color:var(--navy-800)}

/* Saisie rapide d'une commande au comptoir : dense, tabulable. */
.grille-saisie{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.saisie-plat{
  display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;
  padding:.5rem .7rem;border:1px solid rgba(14,42,78,.1);border-radius:6px;background:#fff;
}
.saisie-plat__nom{font-size:.9rem;min-width:0}
.saisie-plat__prix{font-size:.82rem;color:var(--gold-500);white-space:nowrap}
.saisie-plat input{width:62px;padding:.4rem;border:1px solid rgba(14,42,78,.2);border-radius:4px;font:inherit;text-align:center}

/* ── Planche de QR à imprimer ─────────────────────────────── */
.planche-qr{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem}
.fiche-qr{
  background:#fff;border:1px solid rgba(14,42,78,.15);border-radius:10px;
  padding:1.4rem 1rem;text-align:center;break-inside:avoid;
}
.fiche-qr__marque{
  font-family:var(--ff-title);font-size:.82rem;letter-spacing:.12em;
  color:var(--gold-500);margin-bottom:.3rem;
}
.fiche-qr__table{font-family:var(--ff-display);font-weight:600;font-size:1.6rem;color:var(--navy-800);margin-bottom:.8rem}
.fiche-qr__code svg{width:100%;height:auto;max-width:190px;display:block;margin:0 auto}
.fiche-qr__mode{margin:.8rem 0 0;font-size:.76rem;color:var(--muted);line-height:1.4}
.fiche-qr__url{margin:.4rem 0 0;font-size:.62rem;color:var(--muted);word-break:break-all}

@media print{
  .salonbar,.app-foot,.no-print{display:none !important}
  body.salon{background:#fff}
  body.salon main{padding:0}
  .planche-qr{grid-template-columns:repeat(2,1fr);gap:1rem}
  .fiche-qr{border-color:#999}
}

@media (max-width:640px){
  .grille-saisie{grid-template-columns:1fr}
  .barre-envoi{gap:.7rem}
  .barre-envoi .btn{padding:.85rem 1.2rem;font-size:.72rem}
}

/* Sur un téléphone, photo + description + prix + compteur ne tiennent pas
   sur une seule ligne : la carte débordait horizontalement. On repasse en
   grille, prix et compteur sur une deuxième ligne sous le texte. */
@media (max-width:560px){
  .menu-plat{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:'photo infos' 'prix compteur';
    gap:.7rem .9rem;align-items:center;
  }
  .menu-plat > img.plat-photo,
  .menu-plat > .plat-photo--placeholder{grid-area:photo;width:60px;height:60px}
  .menu-plat__infos{grid-area:infos}
  .menu-plat__infos h4{font-size:1rem}
  .menu-plat__infos p{font-size:.8rem}
  .menu-plat__prix{grid-area:prix;font-size:1.1rem}
  .menu-plat .compteur{grid-area:compteur;justify-self:end}
  .menu-plat__qte{grid-area:compteur;justify-self:end}
}

/* ═══════════════════════════════════════════════════════════
   Interface de prise de commande (/service)
   Pensée pour un téléphone tenu d'une main pendant le service :
   cibles larges, peu d'écrans, rien d'essentiel hors du pouce.
   ═══════════════════════════════════════════════════════════ */
.servicebar{
  position:sticky;top:0;z-index:20;
  background:var(--navy-900);color:var(--cream);
  display:flex;align-items:center;gap:.9rem;
  padding:.75rem clamp(.9rem,3vw,1.4rem);
  padding-top:calc(.75rem + env(safe-area-inset-top));
}
.servicebar__retour{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border:1px solid rgba(201,169,97,.4);border-radius:8px;color:var(--gold-300);
}
.servicebar__titre{display:grid;line-height:1.25;min-width:0}
.servicebar__titre b{font-family:var(--ff-title);font-weight:400;font-size:1.05rem;letter-spacing:.04em}
.servicebar__titre small{color:rgba(250,246,236,.55);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.servicebar__qui{
  margin-left:auto;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-400);white-space:nowrap;
}

.serviceonglets{
  position:sticky;top:0;z-index:19;display:flex;
  background:var(--navy-800);border-bottom:1px solid rgba(201,169,97,.25);
}
.serviceonglets a{
  flex:1 1 auto;text-align:center;padding:.85rem .5rem;color:rgba(250,246,236,.6);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid transparent;
}
/* À quatre onglets sur un téléphone, « À emporter » passait à la ligne et
   décalait toute la barre : on resserre l'interlettrage plutôt que de
   couper un libellé. */
@media (max-width:440px){
  .serviceonglets a{font-size:.72rem;letter-spacing:.06em;padding:.85rem .35rem}
}
.serviceonglets a.is-active{color:var(--gold-300);border-bottom-color:var(--gold-500)}

/* La barre d'envoi est fixée en bas : la marge évite qu'elle recouvre
   la dernière carte de la carte. */
.servicemain{
  width:min(100% - 1.6rem, 760px);margin-inline:auto;
  padding:1.1rem 0 7rem;
}

/* ── Le plan de salle ────────────────────────────────────── */
.plan-service{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));
}
.tuile-table{
  display:grid;gap:.15rem;align-content:start;
  min-height:104px;padding:.85rem .9rem;
  background:#fff;border:1px solid rgba(14,42,78,.14);border-left:3px solid var(--ok);
  box-shadow:0 18px 30px -28px rgba(14,42,78,.7);
  transition:transform .2s var(--ease),border-color .2s;
}
.tuile-table:active{transform:scale(.985)}
.tuile-table.est-occupee{border-left-color:var(--gold-500);background:#FFFDF7}
.tuile-table__nom{font-family:var(--ff-title);font-size:1.1rem;color:var(--navy-800)}
.tuile-table__couverts{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tuile-table__libre{margin-top:.35rem;font-size:.8rem;color:var(--ok)}
.tuile-table__client{margin-top:.35rem;font-size:.92rem;color:var(--ink)}
.tuile-table__total{font-weight:500;color:var(--navy-800)}

/* ── Titres de section, plus discrets que les h2 du salon ── */
.titre-section{
  font-family:var(--ff-title);font-weight:400;font-size:1.25rem;
  color:var(--navy-800);margin:2rem 0 .9rem;
}
.titre-categorie{
  margin:0 0 .9rem;font-family:var(--ff-title);font-weight:400;color:var(--gold-500);
}

/* ── La fiche client, rappelée partout où l'on encaisse ──── */
.carte-client-service{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.carte-client-service small{display:block;color:var(--muted);font-size:.85rem}
.carte-client-service__cagnotte{text-align:right}
.carte-client-service__cagnotte span{
  display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.carte-client-service__cagnotte b{font-size:1.25rem;color:var(--gold-500)}

/* ── Une ligne de carte en salle : ni photo ni description,
      seulement le nom, le prix et le compteur. ───────────── */
.menu-plat--service{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.8rem;
}
.menu-plat--service .menu-plat__infos h4{margin:0;font-size:1rem;font-weight:400}
@media (max-width:420px){
  .menu-plat--service{grid-template-columns:1fr auto;grid-template-areas:'nom prix' 'compteur compteur';row-gap:.5rem}
  .menu-plat--service .menu-plat__infos{grid-area:nom}
  .menu-plat--service .menu-plat__prix{grid-area:prix}
  .menu-plat--service .compteur{grid-area:compteur;justify-self:stretch}
}

/* ── Repli « nouveau client » ─────────────────────────────── */
.repli{margin:.6rem 0 1rem;border-top:1px solid rgba(14,42,78,.12);padding-top:.6rem}
.repli > summary{
  cursor:pointer;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-500);
  padding:.35rem 0;
}

/* ── Accès serveur, sur la fiche employé du salon ────────── */
.carte-acces{border-left:3px solid rgba(14,42,78,.14);margin-top:-.6rem}
.carte-acces.a-acces{border-left-color:var(--gold-500)}
.carte-acces__titre{
  margin:0 0 .3rem;font-family:var(--ff-title);font-weight:400;font-size:1.1rem;
  color:var(--navy-800);display:flex;align-items:center;gap:.7rem;
}
.badge--ok{background:rgba(62,122,76,.14);color:var(--ok)}

/* ── La cagnotte dans l'espace client ────────────────────── */
.cagnotte{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700));color:var(--cream);
  padding:1.4rem clamp(1.1rem,3vw,1.8rem);
}
.cagnotte__somme{font-family:var(--ff-display);font-size:clamp(2rem,7vw,2.8rem);color:var(--gold-300);line-height:1}
.cagnotte__quoi{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,236,.6)}
.cagnotte__aide{margin:.4rem 0 0;font-size:.9rem;color:rgba(250,246,236,.75);max-width:40ch}

.mouvements{display:grid;gap:.1rem}
.mouvement{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-top:1px solid rgba(14,42,78,.1);
}
.mouvement:first-child{border-top:0}
.mouvement__quoi{display:grid;gap:.1rem;min-width:0}
.mouvement__quoi small{color:var(--muted);font-size:.8rem}
.mouvement__delta{font-weight:500;white-space:nowrap}
.mouvement__delta.est-positif{color:var(--ok)}
.mouvement__delta.est-negatif{color:var(--muted)}

/* ═══════════════════════════════════════════════════════════
   Appel à épingler l'application sur l'écran d'accueil
   ═══════════════════════════════════════════════════════════ */
.epingler{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem clamp(.9rem,3vw,1.3rem);
  padding-bottom:calc(.85rem + env(safe-area-inset-bottom));
  background:var(--navy-900);color:var(--cream);
  box-shadow:0 -12px 30px -22px rgba(0,0,0,.9);
  animation:epinglerMonte .5s var(--ease) both;
}
@keyframes epinglerMonte{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.epingler{animation:none}}

.epingler__icone{
  flex:0 0 auto;width:44px;height:44px;border-radius:10px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(201,169,97,.45);
}
.epingler__mots{display:grid;gap:.1rem;min-width:0;line-height:1.35}
.epingler__mots b{font-family:var(--ff-title);font-weight:400;font-size:1rem;letter-spacing:.02em}
.epingler__mots span{font-size:.82rem;color:rgba(250,246,236,.66);text-wrap:pretty}
.epingler__mots b:only-child{font-size:1.02rem}

/* Le pictogramme « Partager » d'iOS, aligné sur la ligne de texte. */
/* « Sur l'écran d'accueil » est le nom exact du bouton d'iOS : le couper en
   deux lignes le rendrait moins reconnaissable. */
.epingler__insecable{white-space:nowrap;font-weight:500;color:var(--cream)}
.epingler__geste{
  display:inline-flex;vertical-align:-.18em;margin:0 .1em;
  color:var(--gold-300);
}

.epingler__actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.epingler__fermer{
  background:none;border:0;cursor:pointer;color:rgba(250,246,236,.5);
  font-size:1.5rem;line-height:1;padding:.2rem .45rem;border-radius:4px;
}
.epingler__fermer:hover{color:var(--cream)}

/* La barre d'envoi occupe déjà le bas de l'écran sur les pages de commande.
   Le décalage est posé par le script, qui seul sait quand elle est visible. */
.epingler{bottom:var(--epingler-bas, 0px)}
@media (max-width:520px){
  .epingler{gap:.7rem;padding-left:.8rem;padding-right:.8rem}
  .epingler__mots span{font-size:.78rem}
  .epingler__icone{width:38px;height:38px}
}

/* ═══════════════════════════════════════════════════════════
   Le passe (/cuisine)
   Écran autonome, lu à un mètre au-dessus du piano, les mains
   occupées : gros caractères, contrastes francs, et l'origine
   d'une commande visible avant même de lire le ticket.
   ═══════════════════════════════════════════════════════════ */
body.cuisine{background:var(--cream-2)}

.passebar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1rem;
  background:var(--navy-900);color:var(--cream);
  padding:.7rem clamp(.9rem,2.5vw,1.6rem);
  padding-top:calc(.7rem + env(safe-area-inset-top));
}
.passebar__qui{display:grid;line-height:1.2;min-width:0}
.passebar__qui b{font-family:var(--ff-title);font-weight:400;font-size:1.15rem;letter-spacing:.04em}
.passebar__qui small{color:rgba(250,246,236,.55);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}

/* L'heure : on s'y réfère sans arrêt pour les retraits. */
.passebar__heure{
  margin-inline:auto;font-family:var(--ff-display);font-size:clamp(1.6rem,4vw,2.2rem);
  font-weight:600;color:var(--gold-300);line-height:1;font-variant-numeric:tabular-nums;
}
.passebar__droite{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.passebar__nom{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);
  white-space:nowrap;
}
.passebar__lien{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(250,246,236,.62);white-space:nowrap;
}
.passebar__lien:hover{color:var(--cream)}

/* ── Le filtre de circuit ─────────────────────────────────── */
.passefiltre{
  position:sticky;top:0;z-index:19;display:flex;
  background:var(--navy-800);border-bottom:1px solid rgba(201,169,97,.25);
}
.passefiltre__btn{
  flex:1;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem .5rem;color:rgba(250,246,236,.6);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.passefiltre__btn:hover{color:var(--cream)}
.passefiltre__btn.is-active{color:var(--gold-300);border-bottom-color:var(--gold-500)}
.passefiltre__n{
  min-width:1.5rem;padding:.05rem .4rem;border-radius:999px;
  background:rgba(250,246,236,.14);font-size:.76rem;letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.passefiltre__btn.is-active .passefiltre__n{background:rgba(201,169,97,.28);color:var(--gold-300)}
@media (max-width:440px){
  .passefiltre__btn{font-size:.7rem;letter-spacing:.04em;padding:.8rem .3rem;gap:.35rem}
}

.passemain{width:min(100% - 1.4rem, 1600px);margin-inline:auto;padding:1rem 0 5rem}
.passepied{text-align:center;padding:0 0 2rem}
.passe-vide{text-align:center;color:var(--muted);padding:4rem 1rem;font-size:1.05rem}

/* ── Les colonnes ─────────────────────────────────────────── */
.passe-colonnes{
  display:grid;gap:.8rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.passe-col{
  background:#fff;border:1px solid rgba(14,42,78,.12);
  border-top:3px solid var(--muted);padding:.75rem .75rem 1rem;
}
/* Une couleur par état : au passe, on repère la colonne avant de lire son
   titre. Le vert n'arrive qu'à « prête » — le seul état qui appelle
   quelqu'un de la salle. */
.passe-col--confirmee{border-top-color:var(--err)}
.passe-col--vue{border-top-color:var(--gold-500)}
.passe-col--enpreparation{border-top-color:var(--navy-700)}
.passe-col--prete{border-top-color:var(--ok)}

.passe-col__titre{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin:0 0 .75rem;font-family:var(--ff-title);font-weight:400;font-size:1.05rem;
  color:var(--navy-800);letter-spacing:.02em;
}
.passe-col__titre::after{display:none}
.passe-col__compte{
  min-width:1.8rem;text-align:center;padding:.1rem .45rem;border-radius:999px;
  background:var(--cream-2);color:var(--navy-800);font-size:.82rem;font-weight:500;
  font-family:var(--ff-body);font-variant-numeric:tabular-nums;
}
.passe-col__vide{text-align:center;color:rgba(108,122,136,.5);margin:1.2rem 0}

/* ── Le ticket ────────────────────────────────────────────── */
.ticket{
  border:1px solid rgba(14,42,78,.14);background:var(--cream);
  border-left:4px solid var(--navy-700);
  padding:.7rem .75rem;margin-bottom:.7rem;
}
.ticket:last-child{margin-bottom:0}
/* L'origine se lit au liseré, avant même le texte : marine pour la salle,
   doré pour l'emporter. Deux circuits, deux façons de travailler. */
.ticket--salle{border-left-color:var(--navy-700)}
.ticket--emporter{border-left-color:var(--gold-500);background:#FFFCF3}

.ticket__tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
}
.ticket__origine{
  font-family:var(--ff-title);font-weight:400;font-size:1.08rem;color:var(--navy-800);
}
.ticket__origine--emporter{
  font-family:var(--ff-body);font-size:.74rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#8A6A1E;
}
.ticket__minutes{
  font-family:var(--ff-body);font-size:.8rem;font-weight:500;
  color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* Un plat qui traîne se voit de loin, sans qu'on ait à lire le chiffre. */
.ticket.est-long{border-color:rgba(201,169,97,.7)}
.ticket.est-long .ticket__minutes{color:#9A6B12}
.ticket.est-tardif{border-color:var(--err);background:#FDF3F0}
.ticket.est-tardif .ticket__minutes{color:var(--err);font-weight:600}

.ticket__qui{
  margin:.15rem 0 .5rem;font-size:.85rem;color:var(--muted);
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
}
/* L'heure de retrait pilote la cuisson d'une commande à emporter : elle a
   le même poids que le nom de la table pour une commande en salle. */
.ticket__retrait{color:var(--navy-800);font-size:.88rem}
.ticket__retrait b{font-weight:600;font-variant-numeric:tabular-nums}

.ticket__lignes{list-style:none;margin:0 0 .5rem;padding:0;display:grid;gap:.15rem}
.ticket__lignes li{font-size:1rem;line-height:1.35}
.ticket__lignes b{display:inline-block;min-width:1.4rem;font-weight:600;color:var(--navy-800)}
.ticket__mot{
  margin:.4rem 0 .6rem;padding:.4rem .55rem;background:rgba(201,169,97,.16);
  border-left:2px solid var(--gold-500);font-size:.88rem;color:var(--navy-800);
}
.ticket__actions .btn{padding:.75rem 1rem;font-size:.72rem}

/* Une commande tombée depuis le dernier rafraîchissement se signale une
   fois : au coup de feu, un ticket qui apparaît sans bruit se rate. */
.vient-de-tomber{animation:ticketArrive 2.4s ease-out 2}
@keyframes ticketArrive{
  0%,100%{box-shadow:0 0 0 0 rgba(180,64,42,0)}
  35%{box-shadow:0 0 0 4px rgba(180,64,42,.35)}
}
@media (prefers-reduced-motion:reduce){.vient-de-tomber{animation:none;outline:2px solid var(--err)}}

/* ── Le lien vers la cuisine, dans la barre du service ───── */
.serviceonglets__ailleurs{
  flex:0 0 auto;color:var(--gold-400) !important;
  border-left:1px solid rgba(201,169,97,.28);
}

/* ── L'état d'un plat, rappelé côté salle ────────────────── */
/* Le serveur vient vérifier où en est un plat avant de passer au pass :
   l'information vit en cuisine, mais elle se lit sur l'addition. */
.etat-plat{
  display:inline-block;padding:.12rem .5rem;border-radius:999px;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--cream-2);color:var(--muted);
}
.etat-plat--enattente,
.etat-plat--confirmee{background:rgba(180,64,42,.14);color:var(--err)}
.etat-plat--vue{background:rgba(201,169,97,.2);color:#8A6A1E}
.etat-plat--enpreparation{background:rgba(20,52,95,.12);color:var(--navy-700)}
.etat-plat--prete{background:rgba(62,122,76,.16);color:var(--ok)}

/* ── La page d'une soirée ──────────────────────────────────
   Ici les photos ne défilent pas : on les regarde. Le ruban animé de la
   page d'accueil est fait pour attirer l'œil, pas pour être consulté. */
.galerie-soiree{
  display:grid;gap:.7rem;margin:1.5rem 0 2rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.galerie-soiree figure{margin:0;position:relative;border-radius:10px;overflow:hidden}
.galerie-soiree img{width:100%;height:190px;object-fit:cover;display:block}
.galerie-soiree figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .6rem;
  font-size:.76rem;letter-spacing:.05em;color:#fff;
  background:linear-gradient(to top,rgba(7,26,49,.86),rgba(7,26,49,0));
}

.soiree-detail{display:grid;gap:1.6rem;grid-template-columns:1fr;margin-bottom:2rem}
@media (min-width:820px){.soiree-detail{grid-template-columns:1fr 20rem;align-items:start}}
.soiree-detail__accroche{
  font-family:var(--ff-display);font-size:1.25rem;line-height:1.5;
  color:var(--navy-800);margin:0 0 1rem;
}
.soiree-detail__recit p{line-height:1.7}

/* Les photos d'une soirée, au salon : la vignette d'abord, puis de quoi la
   légender et l'ordonner sous les yeux. */
.grille-photos{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:1.5rem}
.photo-fiche img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:.8rem;display:block}