/*!
 * Nonno Pizza — feuille de style unique
 * 1. Espace gérant (jetons --fond, --accent…)  2. Charte de la carte imprimable (cotes en mm)
 * 3. Site vitrine (jetons --v-*)  4. Pages simples, impression et patchs
 */

/* Plan : établi d'édition — panneau de saisie à gauche, feuille imprimable à droite ; empilés et basculés sur téléphone. */
:root {
  --fond: #edf0ea;
  --surface: #ffffff;
  --surface-2: #f5f7f2;
  --encre: #1b1e1a;
  --doux: #5c6459;
  --trait: #d6dbd0;
  --accent: #c2412d;
  --accent-encre: #ffffff;
  --accent-doux: #fbe7e2;
  --basilic: #3d7429;
  --basilic-doux: #e5f0dd;
  --alerte: #8f5300;
  --alerte-doux: #fbefd6;
  --danger: #b42318;
  --danger-doux: #fde8e6;
  --selection: #2f6fde;
  --ombre-feuille: 0 1px 2px rgb(0 0 0 / .08), 0 12px 32px rgb(30 40 25 / .14);
  --f-ui: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --f-marque: 'Cookie', 'Brush Script MT', cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #111410; --surface: #1a1d18; --surface-2: #22261f; --encre: #e7ebe2; --doux: #9aa393; --trait: #30362c;
    --accent: #ea6a52; --accent-encre: #1c0b07; --accent-doux: #3a1d16; --basilic: #8cc56f; --basilic-doux: #1d2c17;
    --alerte: #f0b14a; --alerte-doux: #33270f; --danger: #ff8b7b; --danger-doux: #3b1613; --selection: #7aa7ff;
    --ombre-feuille: 0 0 0 1px rgb(255 255 255 / .06), 0 12px 32px rgb(0 0 0 / .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #111410; --surface: #1a1d18; --surface-2: #22261f; --encre: #e7ebe2; --doux: #9aa393; --trait: #30362c;
  --accent: #ea6a52; --accent-encre: #1c0b07; --accent-doux: #3a1d16; --basilic: #8cc56f; --basilic-doux: #1d2c17;
  --alerte: #f0b14a; --alerte-doux: #33270f; --danger: #ff8b7b; --danger-doux: #3b1613; --selection: #7aa7ff;
  --ombre-feuille: 0 0 0 1px rgb(255 255 255 / .06), 0 12px 32px rgb(0 0 0 / .55);
  color-scheme: dark;
}
html, body { background: var(--fond); color: var(--encre); }
/* v0.8.1 : Safari (iPhone) et Chrome (Android) grossissent d'office un texte jugé trop petit sans agrandir son cadre :
   les cartes réduites à l'écran débordaient. La taille du texte est toujours celle de la feuille. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font: 15px/1.45 var(--f-ui); }
[v-cloak] { display: none; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Coquille (v0.7) : menu latéral | zone de travail (barre du haut collante, rubrique, plan) ── */
:root { --l-menu: 252px; --l-menu-replie: 68px; --h-barre: 64px; }
html[data-mode="gerant"] { scroll-padding-top: calc(var(--h-barre) + 10px); }
html[data-mode="gerant"] body { margin: 0; }
.app-gerant, .page:has(> .coquille) { max-width: none; margin: 0; padding: 0; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--fond); }
.coquille { display: grid; grid-template-columns: var(--l-menu) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; transition: grid-template-columns .2s ease; }
.coquille.replie { grid-template-columns: var(--l-menu-replie) minmax(0, 1fr); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-plus { stroke-width: 3.2; }
.btn-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); color: var(--encre); cursor: pointer; }
.btn-icone:hover { border-color: var(--doux); }

/* Menu latéral */
.menu-lateral { position: sticky; top: 0; z-index: 40; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-right: 1px solid var(--trait); padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); }
.menu-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 6px; padding: 14px 10px 12px 18px; border-bottom: 1px solid var(--trait); }
.menu-marque { font-family: var(--f-marque); font-size: 32px; line-height: 1.05; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-espace { grid-column: 1; display: flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); white-space: nowrap; }
.menu-tete .btn-icone { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; border-color: transparent; background: transparent; color: var(--doux); }
.menu-tete .btn-icone:hover { background: var(--surface-2); color: var(--encre); }
.beta { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-doux); padding: 1px 6px; border-radius: 999px; }
.menu-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px 10px 12px; display: flex; flex-direction: column; }
.menu-groupe { display: flex; flex-direction: column; gap: 2px; }
.menu-titre { margin: 10px 8px 3px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--doux); white-space: nowrap; overflow: hidden; }
.menu-entree { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--encre); font-size: 14.5px; line-height: 1.25; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.menu-entree:hover { background: var(--surface-2); }
.menu-entree.actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }
.menu-entree.actif::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.menu-libelle { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; }
.menu-libelle b, .menu-libelle small { overflow: hidden; text-overflow: ellipsis; }
.menu-libelle small { font-size: 12px; font-weight: 400; color: var(--doux); }
.menu-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.menu-badge.danger { background: var(--danger); color: var(--surface); }
.menu-badge.alerte { background: var(--alerte-doux); color: var(--alerte); }
.menu-pied { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--trait); }
.menu-pied-actions { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 2px; }
.menu-pied-actions .menu-entree { gap: 6px; padding-inline: 6px; font-size: 13px; color: var(--doux); }
.menu-pied .form-deconnexion { display: block; }
.coquille.replie .menu-pied-actions { grid-template-columns: minmax(0, 1fr); }
.menu-compte { min-height: 50px; }
.avatar { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-encre); font-size: 13px; font-weight: 700; }

/* Menu réduit (ordinateur) : icônes seules ; libellés gardés pour les lecteurs d'écran, infobulle au survol */
.coquille.replie .menu-tete { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; padding: 12px 6px 10px; }
.coquille.replie .menu-tete .btn-icone { grid-column: 1; grid-row: auto; }
.coquille.replie .menu-marque { font-size: 30px; }
.coquille.replie .menu-espace, .coquille.replie .menu-titre { display: none; }
.coquille.replie .menu-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.coquille.replie .menu-nav, .coquille.replie .menu-pied { padding-inline: 8px; }
.coquille.replie .menu-entree { justify-content: center; padding: 8px; }
.coquille.replie .menu-entree.actif::before { left: -8px; }
.coquille.replie .menu-groupe + .menu-groupe { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--trait); }
.coquille.replie .menu-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px; line-height: 16px; }

/* Zone de travail : barre du haut (rubrique, titre, états, Publier, « Plus ») */
.zone { min-width: 0; padding: 0 clamp(14px, 2vw, 28px) 48px; padding-right: max(clamp(14px, 2vw, 28px), env(safe-area-inset-right, 0px)); }
.barre-haut, .zone-corps { max-width: 1480px; margin-inline: auto; }
.barre-haut { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px 16px; min-height: 64px; margin-bottom: 14px; padding: max(10px, env(safe-area-inset-top, 0px)) 0 10px; background: var(--fond); border-bottom: 1px solid var(--trait); }
.barre-titre { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; }
.barre-rubrique { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); white-space: nowrap; }
.barre-titre h1 { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etats { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
button.pastille { font: inherit; cursor: pointer; }
.actions-globales { flex: none; display: flex; align-items: center; gap: 6px; }
.actions-globales .btn { min-height: 40px; }
.plus { position: relative; }
.plus-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; display: flex; flex-direction: column; width: max-content; min-width: 270px; max-width: calc(100vw - 24px); padding: 6px; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / .16); }
.plus-menu button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font-size: 14.5px; text-align: left; cursor: pointer; }
.plus-menu button:hover:not(:disabled) { background: var(--surface-2); }
.plus-menu button:disabled { opacity: .45; cursor: not-allowed; }
.plus-menu button.danger { color: var(--danger); }
.plus-menu button.danger.arme { background: var(--danger); color: var(--surface); }
.plus-aide { margin: 4px 10px 6px; max-width: 32ch; font-size: 12.5px; color: var(--doux); }
.intro-rubrique { margin: -4px 0 12px; font-size: 13.5px; color: var(--doux); }
.intro-rubrique.large { max-width: 1080px; margin-inline: auto; }

/* Téléphone et petite tablette : menu en tiroir, barre compacte, états défilants, bascule Modifier / Aperçu collée sous la barre */
@media (max-width: 899px) {
  html[data-mode="gerant"] { scroll-padding-top: calc(var(--h-barre) + 60px); }
  html.tiroir-ouvert { overflow: hidden; }
  .coquille, .coquille.replie { display: block; }
  .menu-lateral { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(300px, 86vw); height: 100%; transform: translateX(-102%); visibility: hidden; box-shadow: 0 0 40px rgb(0 0 0 / .28); transition: transform .22s ease, visibility 0s linear .22s; }
  .coquille.tiroir .menu-lateral { transform: none; visibility: visible; transition: transform .22s ease; }
  .voile-menu { position: fixed; inset: 0; z-index: 55; background: rgb(10 12 8 / .45); }
  .menu-entree { min-height: 44px; }
  .zone { padding: 0 max(12px, env(safe-area-inset-right, 0px)) 40px max(12px, env(safe-area-inset-left, 0px)); }
  .barre-haut { gap: 8px; min-height: 56px; margin: 0 -12px; padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px; border-bottom: 0; }
  .barre-titre { flex: 1 1 auto; }
  .barre-titre h1 { font-size: 18px; }
  .barre-rubrique { font-size: 10.5px; }
  .actions-globales #btn-publier { padding-inline: 12px; }
  .etats-mobile { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 8px; }
  .etats-mobile::-webkit-scrollbar { display: none; }
  .etats-mobile .pastille { flex: none; }
  .intro-rubrique { margin: 0 0 10px; font-size: 13px; }
}
@media (max-width: 600px) {
  .pastille.secondaire { display: none; }
  .pastille { font-size: 12px; padding: 3px 9px; }
}
@media (max-width: 360px) {
  .barre-rubrique { display: none; }
}
@media (prefers-reduced-motion: reduce) { .coquille, .menu-lateral, .coquille.tiroir .menu-lateral { transition: none; } }
.pastille { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pastille.ok { background: var(--basilic-doux); color: var(--basilic); }
.pastille.alerte { background: var(--alerte-doux); color: var(--alerte); }
.pastille.danger { background: var(--danger-doux); color: var(--danger); }
.pastille.neutre { background: var(--surface-2); color: var(--doux); border-color: var(--trait); }

.btn { border: 1px solid var(--trait); background: var(--surface); padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.2; }
.btn:hover { border-color: var(--doux); }
.btn.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.btn.danger { color: var(--danger); }
.btn.danger.arme { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.petit { padding: 4px 9px; font-size: 13px; }

/* ── Bascule téléphone ── */
.bascule { display: none; position: sticky; top: var(--h-barre); z-index: 25; margin: 0 -12px 8px; padding: 2px 12px 8px; background: var(--fond); border-bottom: 1px solid var(--trait); }
.bascule .segment { width: 100%; }
@media (max-width: 899px) { .bascule { display: block; } }

.segment { display: inline-flex; background: var(--surface-2); border: 1px solid var(--trait); border-radius: 10px; padding: 3px; gap: 3px; }
.segment button { flex: 1; border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--doux); white-space: nowrap; }
.segment button.actif { background: var(--surface); color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.segment .marque-alerte { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-left: 5px; vertical-align: middle; }

/* ── Plan de travail ── */
.plan { display: grid; grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 899px) {
  .plan { grid-template-columns: minmax(0, 1fr); }
  .plan[data-vue="apercu"] .editeur, .plan[data-vue="modifier"] .apercu { display: none; }
}
.editeur { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; min-width: 0; }
.panneau { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.panneau h3 { margin: 0; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--doux); font-weight: 600; }
.groupe { display: flex; flex-direction: column; gap: 10px; }
.groupe + .groupe { border-top: 1px solid var(--trait); padding-top: 14px; }
.aide { font-size: 13px; color: var(--doux); margin: 0; }

.champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.champ > span { font-size: 12.5px; color: var(--doux); }
.champ input, .champ select, .champ textarea, .saisie { width: 100%; border: 1px solid var(--trait); background: var(--surface); border-radius: 8px; padding: 7px 9px; font-size: 15px; min-width: 0; }
.champ textarea { resize: vertical; line-height: 1.4; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grille-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .grille-3 { grid-template-columns: 1fr 1fr; } }
.case { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.case input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ── Liste produits ── */
.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.filtre { border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.filtre.actif { background: var(--encre); color: var(--surface); border-color: var(--encre); }
.filtre .pastille-couleur { width: 9px; height: 9px; border-radius: 50%; }
.titre-section { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.titre-section h4 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.titre-section .pastille-couleur { width: 11px; height: 11px; border-radius: 3px; }
.liste { display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.ligne-liste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; border: 0; background: var(--surface); padding: 9px 11px; cursor: pointer; border-top: 1px solid var(--trait); }
.liste > :first-child .ligne-liste, .liste > .ligne-liste:first-child { border-top: 0; }
.ligne-liste:hover { background: var(--surface-2); }
.ligne-liste.ouverte { background: var(--surface-2); }
.ligne-liste .nom { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-liste .nom.inactif { color: var(--doux); text-decoration: line-through; }
.ligne-liste .tarifs { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--doux); white-space: nowrap; }
.ligne-liste .tarifs .modifie { color: var(--accent); font-weight: 600; }
.statut { font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.statut.masque { background: var(--alerte-doux); color: var(--alerte); }
.statut.retire { background: var(--danger-doux); color: var(--danger); }

.fiche { background: var(--surface-2); border-top: 1px solid var(--trait); padding: 12px 11px 14px; display: flex; flex-direction: column; gap: 11px; }
.prix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.saisie-prix { display: flex; align-items: center; gap: 6px; }
.saisie-prix input { font-variant-numeric: tabular-nums; }
.avant { font-size: 12px; color: var(--accent); }
.puces-ingredients { display: flex; flex-wrap: wrap; gap: 5px; }
.puce-ing { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 2px 3px 2px 4px; font-size: 13px; }
.puce-ing.masque { border-style: dashed; color: var(--doux); }
.puce-ing .texte { padding: 0 3px; }
.mini { border: 0; background: transparent; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; color: var(--doux); font-size: 14px; line-height: 1; display: inline-grid; place-items: center; }
.mini:hover:not(:disabled) { background: var(--surface-2); color: var(--encre); }
.mini:disabled { opacity: .3; cursor: default; }
.mini.retirer:hover { color: var(--danger); }
.ajout-ing { display: flex; flex-wrap: wrap; gap: 6px; }
.ajout-ing select { flex: 1 1 180px; border: 1px solid var(--trait); background: var(--surface); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.apercu-desc { margin: 0; font-style: italic; font-size: 13.5px; color: var(--doux); }
.ligne-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ligne-actions .espace { flex: 1; }
.info { font-size: 12.5px; color: var(--doux); margin: 0; }

details.outil { border: 1px solid var(--trait); border-radius: 10px; background: var(--surface-2); }
details.outil summary { cursor: pointer; padding: 9px 12px; font-weight: 500; font-size: 14px; }
details.outil .contenu-outil { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }

/* Ingrédients */
.ing-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--trait); background: var(--surface); }
.ing-ligne:first-child { border-top: 0; }
.ing-ligne input { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 5px 6px; width: 100%; min-width: 0; }
.ing-ligne input:hover, .ing-ligne input:focus { border-color: var(--trait); background: var(--surface); }
.usage { font-size: 12px; color: var(--doux); white-space: nowrap; font-variant-numeric: tabular-nums; }
.allergenes { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 10px; background: var(--surface); }
.allergene { border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.allergene.actif, .allergene.contient { background: var(--alerte-doux); border-color: var(--alerte); color: var(--alerte); font-weight: 600; }
.allergene.traces { border-style: dashed; border-color: var(--alerte); color: var(--alerte); }
.mention-traces { font-weight: 400; }

/* Couleurs */
.couleur-ligne { display: grid; grid-template-columns: 36px minmax(0, 1fr) 92px; gap: 8px; align-items: center; }
.couleur-ligne input[type=color] { width: 36px; height: 30px; padding: 0; border: 1px solid var(--trait); border-radius: 6px; background: none; cursor: pointer; }
.couleur-ligne input[type=text] { font-family: ui-monospace, Menlo, monospace; font-size: 13px; border: 1px solid var(--trait); background: var(--surface); border-radius: 6px; padding: 5px 6px; width: 100%; }
.couleur-ligne span { font-size: 13.5px; }

/* Horaires */
.plage { border: 1px solid var(--trait); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 9px; background: var(--surface-2); }
.jours { display: flex; flex-wrap: wrap; gap: 4px; }
.jour { width: 38px; height: 32px; border-radius: 8px; border: 1px solid var(--trait); background: var(--surface); cursor: pointer; font-size: 13px; }
.jour.actif { background: var(--basilic); border-color: var(--basilic); color: var(--surface); font-weight: 600; }

/* Impression */
.mesures { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.mesure { border: 1px solid var(--trait); border-radius: 10px; padding: 9px 11px; background: var(--surface-2); }
.mesure b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.mesure small { color: var(--doux); font-size: 12px; }
.exemple { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--alerte); }
.controle { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14px; align-items: start; }
.controle i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.controle i.ok { background: var(--basilic-doux); color: var(--basilic); }
.controle i.ko { background: var(--alerte-doux); color: var(--alerte); }
table.patchs { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.patchs th { text-align: left; font-size: 12px; color: var(--doux); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--trait); }
table.patchs td { padding: 5px 6px; border-bottom: 1px solid var(--trait); }
table.patchs td.barre { text-decoration: line-through; color: var(--doux); }
.defile { overflow-x: auto; }

/* ── Aperçu ── */
.apercu { position: sticky; top: calc(var(--h-barre) + 12px); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 899px) { .apercu { position: static; } }
.barre-apercu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
@media (max-width: 899px) {
  .barre-apercu .segment { flex: 1 1 100%; }
  .barre-apercu .segment button { padding-inline: 6px; }
}
.atelier { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 14px; padding: 20px; }
@media (max-width: 899px) { .atelier { padding: 12px; } }
/* La feuille est mise à l'échelle par transform (homothétie exacte), puis centrée dans l'atelier */
.cadre-feuille { width: 100%; }
.fenetre { position: relative; overflow: hidden; margin-inline: auto; box-shadow: var(--ombre-feuille); background: #fff; border-radius: 2px; }
.glisse { position: absolute; left: 0; top: 0; width: 297mm; height: 210mm; transform-origin: 0 0; transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .glisse { transition: none; } }
.astuce { font-size: 13px; color: var(--doux); margin: 0; text-align: center; text-wrap: balance; }
.mesure-cachee { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }

/* ── Fenêtre export / import ── */
.voile { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 50; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.boite { background: var(--surface); border-radius: 14px; width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--trait); }
.boite h2 { margin: 0; font-size: 18px; }
.boite textarea { width: 100%; min-height: 240px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; border: 1px solid var(--trait); border-radius: 8px; padding: 8px; background: var(--surface-2); }
.message { font-size: 13px; }
.message.ko { color: var(--danger); }
.message.ok { color: var(--basilic); }

/* ═════════════ Charte de la carte (feuille papier : rendu identique quel que soit le thème) ═════════════ */
.carte-racine {
  --volet-l: 99mm; --volet-pad-x: 4mm; --volet-pad-y: 4.5mm;
  --cadre-b1: .35mm; --cadre-pad: .7mm; --cadre-b2: .3mm; --int-pad-x: 4mm; --int-pad-y: 4mm;
  --col-prix: 15mm; --pad-prix: 1.5mm;
  --f-texte: 'Arimo', Arial, sans-serif; --f-titre: 'Cookie', cursive; --f-logo: 'Dancing Script', cursive;
  --f-main: 'Kalam', cursive; --f-pinceau: 'Kaushan Script', cursive;
  font-family: var(--f-texte); color: var(--c-texte, #1a1a1a); line-height: normal; color-scheme: light;
}
.carte-face { width: 297mm; height: 210mm; display: flex; background: var(--c-fond, #fff); overflow: hidden; }
.volet { position: relative; width: var(--volet-l); height: 100%; padding: var(--volet-pad-y) var(--volet-pad-x); flex: none; }
.cadre { height: 100%; border: var(--cadre-b1) solid var(--c-liseret_vert); border-radius: 4.5mm; padding: var(--cadre-pad); }
.cadre-int { height: 100%; border: var(--cadre-b2) solid var(--c-liseret_rouge); border-radius: 3.8mm; padding: var(--int-pad-y) var(--int-pad-x); display: flex; flex-direction: column; }
.contenu { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3mm; overflow: hidden; }
.contenu > * { flex: none; }
.mentions-verticales { position: absolute; right: .9mm; top: 0; bottom: 0; writing-mode: vertical-rl; text-align: center; font-size: 5.5pt; color: #555; }
.section { display: flex; flex-direction: column; gap: 2.2mm; }
.section-liste { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 1.6mm; }
.bandeau { display: grid; grid-template-columns: 1fr var(--col-prix) var(--col-prix); align-items: center; min-height: 11.5mm; padding: 1mm var(--pad-prix) 1.6mm 4mm; border-radius: 3.5mm; color: #fff; }
.bandeau.prix-unique { grid-template-columns: 1fr; }
.bandeau-titre { font-family: var(--f-titre); font-size: 25pt; line-height: .95; white-space: nowrap; }
.bandeau-sous { display: block; font-size: 7.5pt; line-height: 1.1; margin-top: .3mm; }
.bandeau-format { font-weight: 700; font-size: 8.5pt; text-align: right; white-space: nowrap; }
.produit { display: flex; flex-direction: column; cursor: pointer; border-radius: 1mm; }
.produit:hover { background: rgb(47 111 222 / .07); }
.produit.surbrillance { outline: .55mm solid #2f6fde; outline-offset: .8mm; background: rgb(47 111 222 / .07); }
.produit-ligne { display: grid; grid-template-columns: auto 1fr var(--col-prix) var(--col-prix); align-items: end; padding-right: var(--pad-prix); }
.produit-ligne.prix-unique { grid-template-columns: auto 1fr var(--col-prix); }
.produit-nom { font-weight: 700; font-size: 12pt; line-height: 1.05; white-space: nowrap; }
.points { border-bottom: .45mm dotted currentColor; margin: 0 .8mm .9mm .8mm; min-width: 0; align-self: end; }
.prix { display: flex; align-items: end; justify-content: flex-end; font-weight: 700; font-size: 9.5pt; line-height: 1.05; white-space: nowrap; }
.prix .points { flex: 1; margin-left: 0; margin-right: .6mm; }
.produit-sous { font-weight: 700; font-style: italic; font-size: 8pt; line-height: 1.15; }
.produit-desc { font-style: italic; font-size: 8.4pt; line-height: 1.17; text-align: justify; margin-top: .5mm; }
.produit.compact .produit-nom { font-size: 9.5pt; }
.produit.compact .prix { font-size: 9pt; }
.logo { display: flex; align-items: center; justify-content: center; gap: 3mm; }
.logo-medaillon { flex: none; border-radius: 50%; border: .3mm dashed #9a9a9a; display: grid; place-items: center; text-align: center; font-size: 6pt; color: #8a8a8a; line-height: 1.2; overflow: hidden; }
.logo-medaillon.image { border: 0; border-radius: 0; }
.logo-medaillon img { width: 100%; height: 100%; object-fit: contain; }
.logo-nom { font-family: var(--f-logo); font-weight: 500; line-height: 1; }
.logo.couverture { flex-direction: column; gap: 2mm; }
.citation { display: grid; grid-template-columns: auto 1fr auto; gap: 1mm; padding: 0 1mm; }
.guillemet { font-weight: 700; font-size: 36pt; line-height: .7; color: var(--c-vert); }
.guillemet.ouvrant { align-self: start; }
.guillemet.fermant { align-self: end; }
.citation-texte { color: var(--c-citation); font-weight: 700; font-size: 12.5pt; line-height: 1.28; text-align: center; }
.encart-sombre { background: var(--c-anthracite); color: #fff; border-radius: 4mm; text-align: center; padding: 3mm 3.5mm; }
.reseaux-l1 { font-weight: 700; font-size: 10pt; line-height: 1.3; }
.reseaux-l2 { font-family: var(--f-titre); font-size: 23pt; line-height: 1.05; }
.reseaux-qr { display: flex; justify-content: center; align-items: center; gap: 4mm; margin-top: 2.5mm; }
.reseaux-sep { width: .25mm; align-self: stretch; background: currentColor; opacity: .6; }
.qr-groupe { display: flex; align-items: center; gap: 2.5mm; }
.qr-tuile { width: 17mm; height: 17mm; padding: 1.2mm; border-radius: 1.5mm; background: #fff; display: grid; place-items: center; }
.qr-tuile svg { width: 100%; height: 100%; display: block; }
.qr-absent { border: .3mm dashed #9a9a9a; background: transparent; color: #9a9a9a; font-size: 5.5pt; text-align: center; line-height: 1.15; }
.icone-reseau { width: 6.5mm; height: 6.5mm; flex: none; }
.reseaux-icones { display: flex; justify-content: center; gap: 4mm; }
.reseaux-identifiant { font-size: 8pt; text-align: center; margin-top: 1mm; }
.media { flex: 1 1 30mm; min-height: 30mm; border-radius: 4mm; overflow: hidden; background: #2b2b2b; color: #bdbdbd; display: grid; place-items: center; text-align: center; font-size: 8pt; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.encart-titre { font-weight: 700; font-size: 10.5pt; }
.encart-formats { font-weight: 700; font-size: 15pt; line-height: 1.25; }
.encart-formats .sep { opacity: .7; font-weight: 400; margin: 0 1.5mm; }
.encart-sauf { font-weight: 700; font-size: 10pt; }
.encart-precision { font-style: italic; font-size: 8pt; }
.encart-taille { font-weight: 700; font-size: 13pt; margin-top: 1mm; }
.coordonnees { text-align: center; font-size: 10pt; line-height: 1.35; }
.telephone { font-weight: 700; font-size: 18pt; letter-spacing: .2mm; margin-top: 1.5mm; }
.fidelite { display: flex; flex-direction: column; align-items: center; }
.fidelite svg { overflow: visible; display: block; }
/* v0.7.4 : carte de fidélité dessinée (logo et téléphone), légèrement décalée vers la droite comme sur la carte réelle */
/* marge haute négative : la pointe de la carte se loge sous « de fidélité », entre les jambages (aucun chevauchement) */
.fidelite-carte { margin: -2mm 0 .4mm 3mm; }
.fidelite-texte { font-size: 9pt; text-align: center; line-height: 1.3; }
.mention-couverture { font-family: var(--f-titre); font-size: 22pt; color: var(--c-liseret_rouge); text-align: center; line-height: 1; }
.texte-main { font-family: var(--f-main); font-weight: 700; font-size: 9.8pt; line-height: 1.62; text-align: center; }
.separateur { display: flex; flex-direction: column; align-items: center; gap: .7mm; }
.separateur span { display: block; width: 42mm; height: .45mm; }
.horaires { text-align: center; line-height: 1.3; }
.horaires-titre { font-family: var(--f-main); font-weight: 700; font-size: 11pt; text-decoration: underline; text-underline-offset: .8mm; }
.horaires-jours, .horaires-heures { font-weight: 700; font-size: 10.5pt; }
.horaires-fermeture { font-weight: 700; font-style: italic; font-size: 8.5pt; margin-top: .8mm; }
.commande { text-align: center; }
.commande-l1 { font-family: var(--f-main); font-weight: 700; font-size: 11pt; }
.commande-l2 { font-size: 10pt; }
.carte-racine .a-confirmer { outline: .5mm dashed #e3a008; outline-offset: .6mm; }
.carte-racine [data-debordement="true"] .cadre-int { box-shadow: inset 0 -6mm 0 -3mm rgba(220, 38, 38, .5); }
/* v0.7.6 : répartition automatique des sections (zone de hauteur fixe dans chaque volet), mesure hors écran, sections coupées,
   lignes « option » (sauces), pancarte 5 volets (dimensions posées sur .carte-face par le composant) */
.carte-racine { position: relative; }
.contenu > .flux-zone { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 3mm; overflow: hidden; }
.contenu:has(> .flux-zone) > .media { flex: 0 0 38mm; min-height: 0; }
.flux-mesure { position: absolute; left: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
  width: calc(var(--volet-l) - 2 * var(--volet-pad-x) - 2 * var(--cadre-b1) - 2 * var(--cadre-pad) - 2 * var(--cadre-b2) - 2 * var(--int-pad-x)); }
.section.mesure { position: relative; }
.section.mesure .section-liste { flex: none; justify-content: flex-start; }
.bandeau-suite { font-weight: 700; font-size: 9pt; margin-left: 2mm; white-space: nowrap; }
.options-intertitre { font-weight: 700; font-style: italic; font-size: 8.6pt; line-height: 1.15; margin-top: .4mm; }
.produit.option .prix { font-style: italic; }
.message-publication { text-align: center; margin: -4px 0 12px; font-size: 14px; color: var(--doux); }
.message-publication.erreur { color: var(--danger); }
.message-publication.ok { color: var(--basilic); }

/* ═════════════ Site vitrine ═════════════ */
/* Plan : bandeau charbon (accroche + pizza animée), carte en fiches filtrables par taille et régime, infos pratiques en trois blocs. */
:root {
  --v-papier: #ffffff;
  --v-alt: #f2f4ee;
  --v-encre: #1d1c1a;
  --v-doux: #5d5a55;
  --v-trait: #e2e4dc;
  --v-tomate: #c23a2d;
  --v-tomate-vif: #df4c3b;
  --v-tomate-doux: #fbe9e5;
  --v-basilic: #3b7228;
  --v-charbon: #1f1e1c;
  --v-sur-charbon: #fbf7f0;
  --v-sur-tomate: #ffffff;
  --v-croute: #e8ae5c;
  --v-ombre: 0 1px 2px rgb(0 0 0 / .06), 0 12px 30px rgb(40 30 20 / .12);
  --f-titre-site: 'Cookie', 'Brush Script MT', cursive;
  --f-main-site: 'Kalam', 'Comic Sans MS', cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v-papier: #151413; --v-alt: #1c1b19; --v-encre: #f1eee8; --v-doux: #aaa49b; --v-trait: #2f2d2a;
    --v-tomate: #f06e5f; --v-tomate-vif: #e2513f; --v-tomate-doux: #3a1c17; --v-basilic: #8cc56f; --v-charbon: #0d0c0b;
    --v-ombre: 0 0 0 1px rgb(255 255 255 / .05), 0 12px 30px rgb(0 0 0 / .5);
  }
}
:root[data-theme="dark"] {
  --v-papier: #151413; --v-alt: #1c1b19; --v-encre: #f1eee8; --v-doux: #aaa49b; --v-trait: #2f2d2a;
  --v-tomate: #f06e5f; --v-tomate-vif: #e2513f; --v-tomate-doux: #3a1c17; --v-basilic: #8cc56f; --v-charbon: #0d0c0b;
  --v-ombre: 0 0 0 1px rgb(255 255 255 / .05), 0 12px 30px rgb(0 0 0 / .5);
}
html[data-mode="site"], html[data-mode="site"] body { background: var(--v-papier); }
html[data-mode="site"] body::before { background: var(--v-charbon); }
.site { background: var(--v-papier); color: var(--v-encre); font: 16px/1.55 var(--f-ui); }
.v-gouttiere { max-width: 1180px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.v-lien-btn { border: 0; background: none; padding: 4px 2px; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Bandeau brouillon */
.v-brouillon { background: var(--alerte-doux); color: var(--alerte); font-size: 14px; }
.v-brouillon .v-gouttiere { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding-block: 8px; text-align: center; }

/* Navigation */
.v-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--v-charbon); color: var(--v-sur-charbon); border-bottom: 1px solid rgb(255 255 255 / .08); }
.v-nav .v-gouttiere { display: flex; align-items: center; gap: 14px; min-height: 58px; }
.v-logo { font-family: var(--f-titre-site); font-size: 34px; line-height: 1; color: var(--v-sur-charbon); text-decoration: none; }
.v-statut { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; opacity: .85; white-space: nowrap; }
.v-point { width: 8px; height: 8px; border-radius: 50%; background: #8a8680; flex: none; }
.v-point.ouvert { background: #5fd068; box-shadow: 0 0 0 0 rgb(95 208 104 / .6); animation: v-pouls 2.2s ease-out infinite; }
@keyframes v-pouls { 0% { box-shadow: 0 0 0 0 rgb(95 208 104 / .55); } 100% { box-shadow: 0 0 0 9px rgb(95 208 104 / 0); } }
.v-liens { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.v-liens a { color: var(--v-sur-charbon); text-decoration: none; font-size: 15px; padding: 8px 11px; border-radius: 999px; opacity: .82; }
.v-liens a:hover { opacity: 1; background: rgb(255 255 255 / .08); }
.v-liens a.v-cta-nav { opacity: 1; background: var(--v-tomate-vif); color: var(--v-sur-tomate); font-weight: 600; margin-left: 6px; }
@media (max-width: 640px) {
  .v-liens a:not(.v-cta-nav) { display: none; }
  .v-nav .v-statut { display: none; }
}

/* Bandeau d'accueil */
.v-hero { position: relative; overflow: hidden; background: var(--v-charbon); color: var(--v-sur-charbon); }
.v-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .055) 1px, transparent 1.3px); background-size: 18px 18px; pointer-events: none; }
.v-hero .v-gouttiere { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 32px; padding-block: 48px 92px; }
.v-surtitre { margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-croute); }
.v-titre { margin: 4px 0 0; font-family: var(--f-titre-site); font-weight: 400; font-size: clamp(68px, 11vw, 136px); line-height: .88; text-wrap: balance; }
.v-ruban { margin: 2px 0 0; font-family: var(--f-titre-site); font-size: clamp(30px, 4vw, 42px); line-height: 1; color: var(--v-tomate-vif); }
.v-tricolore { display: flex; gap: 5px; margin: 18px 0; }
.v-tricolore span { width: 30px; height: 4px; border-radius: 2px; }
.v-tricolore span:nth-child(1) { background: #4f9a3a; }
.v-tricolore span:nth-child(2) { background: var(--v-sur-charbon); }
.v-tricolore span:nth-child(3) { background: var(--v-tomate-vif); }
.v-accroche { margin: 0; max-width: 36ch; font-family: var(--f-main-site); font-weight: 700; font-size: clamp(17px, 2vw, 20px); line-height: 1.65; opacity: .94; text-wrap: pretty; }
.v-section { scroll-margin-top: 64px; }
.v-acces-nav { display: none; border: 1px solid rgb(255 255 255 / .3); background: transparent; color: var(--v-sur-charbon); border-radius: 999px; padding: 7px 12px; font: 600 13px/1 var(--f-ui); cursor: pointer; }
@media (max-width: 640px) {
  .v-acces { display: none; }
  .v-acces-nav { display: inline-block; }
  .v-liens { gap: 6px; }
}
.v-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font: 600 15px/1.2 var(--f-ui); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.v-btn:hover { transform: translateY(-1px); }
.v-btn.plein { background: var(--v-tomate-vif); color: var(--v-sur-tomate); }
.v-btn.contour { border-color: rgb(255 255 255 / .35); color: var(--v-sur-charbon); background: transparent; }
.v-btn.contour:hover { background: rgb(255 255 255 / .08); }
.v-btn.discret { border-color: var(--v-trait); color: var(--v-encre); background: var(--v-papier); }
.v-hero-statut { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; opacity: .9; }

.v-scene { position: relative; justify-self: center; width: min(430px, 100%); aspect-ratio: 1; }
.v-orbite { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / .16); animation: v-tourner 80s linear infinite reverse; }
.v-orbite i { position: absolute; width: 14px; height: 14px; border-radius: 50%; }
.v-orbite .o1 { top: -7px; left: calc(50% - 7px); background: var(--v-tomate-vif); }
.v-orbite .o2 { bottom: 14%; right: 4%; background: #4f9a3a; }
.v-orbite .o3 { bottom: 14%; left: 4%; background: var(--v-croute); }
.v-pizza { position: absolute; inset: 7%; animation: v-arrivee 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.v-pizza svg { display: block; width: 100%; height: 100%; animation: v-tourner 70s linear infinite; filter: drop-shadow(0 22px 30px rgb(0 0 0 / .5)); }
.v-feuille { position: absolute; width: 48px; animation: v-flotter 7s ease-in-out infinite; }
.v-feuille.f1 { top: 6%; right: 2%; transform: rotate(-25deg); }
.v-feuille.f2 { bottom: 2%; left: 18%; width: 38px; animation-delay: -3s; }
@keyframes v-tourner { to { transform: rotate(360deg); } }
@keyframes v-arrivee { from { transform: translateX(16%) rotate(-50deg) scale(.88); } to { transform: none; } }
@keyframes v-flotter { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Pizza de la semaine + atouts */
.v-semaine { position: relative; z-index: 2; margin-top: -54px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 20px 26px; background: var(--v-papier); border: 1px solid var(--v-trait); border-radius: 22px; box-shadow: var(--v-ombre); }
.v-semaine-icone { width: 92px; height: 92px; }
.v-semaine-icone svg { width: 100%; height: 100%; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.v-semaine:hover .v-semaine-icone svg { transform: rotate(120deg); }
.v-semaine-etiquette { margin: 0; font-family: var(--f-titre-site); font-size: 30px; line-height: 1; color: var(--v-tomate); }
.v-semaine-nom { margin: 2px 0 4px; font-size: 24px; line-height: 1.2; }
.v-semaine-prix { display: flex; gap: 18px; }
.v-semaine-prix span { display: flex; flex-direction: column; align-items: center; }
.v-semaine-prix small { font-size: 12px; color: var(--v-doux); }
.v-semaine-prix b { font-size: 24px; color: var(--v-tomate); font-variant-numeric: tabular-nums; }
.v-atouts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v-atouts li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--v-alt); font-size: 14px; color: var(--v-doux); }
.v-atouts b { display: block; color: var(--v-encre); font-size: 15px; }
.v-atout-icone { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--v-sur-tomate); font-weight: 700; font-size: 13px; }
@media (max-width: 860px) {
  .v-hero .v-gouttiere { grid-template-columns: minmax(0, 1fr); text-align: center; padding-block: 24px 84px; gap: 8px; }
  .v-scene { order: -1; width: min(230px, 64%); }
  .v-accroche { margin-inline: auto; }
  .v-actions, .v-tricolore { justify-content: center; }
  .v-semaine { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; gap: 10px; }
  .v-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .v-atouts li { flex-direction: column; text-align: center; } }

/* La carte */
.v-section { padding-block: 56px; }
.v-entete-section { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; }
.v-h2 { margin: 0; font-family: var(--f-titre-site); font-weight: 400; font-size: clamp(48px, 6vw, 66px); line-height: .95; }
.v-sous { margin: 6px 0 0; color: var(--v-doux); }
.v-reglages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.v-taille { position: relative; display: inline-flex; background: var(--v-alt); border: 1px solid var(--v-trait); border-radius: 999px; padding: 4px; }
.v-taille button { position: relative; z-index: 1; flex: 1; min-width: 84px; border: 0; background: transparent; padding: 8px 16px; font: 600 15px/1.2 var(--f-ui); color: var(--v-doux); border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums; transition: color .25s ease; }
.v-taille button.actif { color: var(--v-sur-tomate); }
.v-taille .curseur { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--v-tomate-vif); transition: transform .32s cubic-bezier(.3, .7, .2, 1); }
.v-filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.v-filtre { border: 1px solid var(--v-trait); background: var(--v-papier); color: var(--v-encre); border-radius: 999px; padding: 7px 13px; font: 500 14px/1.2 var(--f-ui); cursor: pointer; }
.v-filtre.actif { background: var(--v-encre); color: var(--v-papier); border-color: var(--v-encre); }
.v-barre-cat { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 20; margin-top: 22px; background: var(--v-papier); border-bottom: 1px solid var(--v-trait); }
.v-puces { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.v-puces::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .v-puces { justify-content: center; } }
.v-puce { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--v-trait); background: var(--v-papier); color: var(--v-encre); border-radius: 999px; padding: 7px 14px; font: 500 14px/1.2 var(--f-ui); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.v-puce .pastille-couleur { width: 9px; height: 9px; border-radius: 50%; }
.v-puce.actif { background: var(--v-encre); color: var(--v-papier); border-color: var(--v-encre); }
.v-categorie { scroll-margin-top: 128px; margin-top: 40px; }
.v-bandeau { display: inline-flex; align-items: baseline; gap: 12px; margin: 0; padding: 6px 22px 10px; border-radius: 14px; color: #fff; font-family: var(--f-titre-site); font-weight: 400; font-size: 38px; line-height: 1; }
.v-bandeau small { font: 500 13px/1 var(--f-ui); opacity: .92; }
.v-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 16px; }
.v-plat { --c-plat: var(--v-trait); display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; background: var(--v-papier); border: 1px solid var(--v-trait); border-radius: 16px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.v-plat:hover { transform: translateY(-3px); box-shadow: var(--v-ombre); border-color: var(--c-plat); }
.v-plat-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v-plat-nom { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.v-prix { display: inline-block; font-weight: 700; font-size: 20px; color: var(--v-tomate); font-variant-numeric: tabular-nums; white-space: nowrap; animation: v-pop .38s ease; }
@keyframes v-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.v-plat-sous { margin: -4px 0 0; font-size: 13px; font-weight: 600; color: var(--v-doux); }
.v-plat-desc { margin: 0; font-size: 14.5px; color: var(--v-doux); }
.v-plat-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.v-autre { margin-left: auto; font-size: 13px; color: var(--v-doux); font-variant-numeric: tabular-nums; }
.v-badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; }
.v-badge.vege { color: var(--v-basilic); }
.v-badge.epice { color: var(--v-tomate); }
.v-allergenes { margin: 0; font-size: 12.5px; color: var(--v-doux); }
/* v0.7.6 : options d'une section (sauces des Pizza Bowls) et photo de section */
.v-options { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--v-trait); border-left: 4px solid var(--c-plat, var(--v-basilic)); border-radius: 14px; background: var(--v-papier); max-width: 720px; }
.v-options-titre { margin: 0 0 6px; font-weight: 700; }
.v-options ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.v-options .v-plat-desc { display: inline; font-size: 14px; }
.v-options .v-allergenes { display: inline; font-size: 13px; }
.v-photo-section { display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin-top: 14px; }
.v-supplements { margin-top: 16px; max-width: 520px; border: 1px solid var(--v-trait); border-radius: 16px; overflow-x: auto; }
.v-supplements table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.v-supplements th, .v-supplements td { padding: 10px 16px; text-align: right; border-bottom: 1px solid var(--v-trait); }
.v-supplements th { font-size: 13px; font-weight: 600; color: var(--v-doux); }
.v-supplements th:first-child, .v-supplements td:first-child { text-align: left; }
.v-supplements tr:last-child td { border-bottom: 0; }
.v-calzone { margin: 40px auto 0; max-width: 32ch; text-align: center; font-family: var(--f-main-site); font-weight: 700; font-size: 21px; line-height: 1.5; color: var(--v-tomate); text-wrap: balance; }
.v-vide { margin: 32px 0 0; text-align: center; color: var(--v-doux); }

/* Infos pratiques */
.v-infos { background: var(--v-alt); }
.v-infos .v-h2 { text-align: center; margin-bottom: 24px; }
.v-infos-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v-bloc { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--v-papier); border: 1px solid var(--v-trait); border-radius: 18px; }
.v-bloc h3 { margin: 0; font-family: var(--f-titre-site); font-weight: 400; font-size: 36px; line-height: 1; }
.v-bloc p { margin: 0; }
.v-etat { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.v-jours { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.v-jours li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14.5px; }
.v-jours li.ferme span:last-child { color: var(--v-doux); }
.v-jours li.aujourdhui { background: var(--v-tomate-doux); font-weight: 600; }
.v-tel { font-size: 30px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; user-select: all; }
.v-actions-bloc { display: flex; flex-wrap: wrap; gap: 8px; }
.v-note { font-size: 13px; color: var(--v-doux); }
address { font-style: normal; line-height: 1.6; }
.v-fidelite { margin-top: auto; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--v-trait); font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 900px) { .v-infos-grille { grid-template-columns: minmax(0, 1fr); } }

/* Pied de page */
.v-pied { background: var(--v-charbon); color: var(--v-sur-charbon); }
.v-pied .v-gouttiere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 36px 96px; font-size: 14px; }
.v-pied p { margin: 4px 0 0; opacity: .8; }
.v-pied a { color: var(--v-sur-charbon); }
.v-reseaux { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) { .v-pied .v-gouttiere { grid-template-columns: minmax(0, 1fr); text-align: center; } }
.v-acces { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; border: 0; border-radius: 999px; padding: 11px 18px; background: var(--v-encre); color: var(--v-papier); font: 600 14px/1 var(--f-ui); box-shadow: var(--v-ombre); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .v-pizza, .v-pizza svg, .v-orbite, .v-feuille, .v-point.ouvert, .v-prix { animation: none; }
  .v-plat, .v-btn, .v-taille .curseur, .v-semaine-icone svg { transition: none; }
}

/* ═════════════ Compléments version serveur ═════════════ */
a.btn { display: inline-block; text-decoration: none; color: inherit; }
a.btn.principal { color: var(--accent-encre); }
.form-deconnexion { display: inline-flex; margin: 0; }
.chargement { text-align: center; color: var(--doux); padding: 40px 16px; }
.erreur-globale { margin: 0; padding: 10px 16px; text-align: center; background: var(--danger-doux); color: var(--danger); font: 500 14px/1.4 var(--f-ui); }
a.v-acces, a.v-acces-nav { text-decoration: none; display: inline-block; }
a.v-lien-btn { color: inherit; }
.segment-lien { flex: 1; padding: 6px 12px; border-radius: 7px; font-size: 14px; color: var(--doux); text-decoration: none; text-align: center; white-space: nowrap; }
.segment-lien.actif { background: var(--surface); color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
#fichier-import { font-size: 14px; }

/* Contenu sans JavaScript */
.site-statique { max-width: 760px; margin: 0 auto; padding: 24px 16px; font: 16px/1.5 Arial, sans-serif; color: #1d1c1a; background: #fff; }

/* ── Pages simples : installation, connexion ── */
html[data-mode="simple"], html[data-mode="simple"] body { background: var(--fond); color: var(--encre); }
.simple { min-height: 100vh; display: grid; place-items: start center; padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); font: 15px/1.5 var(--f-ui); }
.simple-carte { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.simple-marque { margin: 0; font-family: var(--f-marque); font-size: 40px; line-height: 1; color: var(--accent); }
.simple h1 { margin: 0; font-size: 22px; }
.simple h2 { margin: 10px 0 0; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--doux); }
.simple p { margin: 0; }
.simple code { font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.simple-aide { color: var(--doux); font-size: 14px; }
.simple-form { display: flex; flex-direction: column; gap: 12px; }
.simple-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--doux); min-width: 0; }
.simple-form input { font: inherit; font-size: 15px; color: var(--encre); background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; padding: 9px 10px; width: 100%; box-sizing: border-box; }
.simple-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .simple-grille { grid-template-columns: 1fr; } }
.simple-btn { align-self: flex-start; display: inline-block; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-encre); font: 600 15px/1.2 var(--f-ui); padding: 10px 18px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.simple-btn.secondaire { background: var(--surface); color: var(--accent); }
.simple-btn:disabled { opacity: .45; cursor: not-allowed; }
.simple-alerte { border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.simple-alerte.ko { background: var(--danger-doux); color: var(--danger); }
.simple-alerte.ok { background: var(--basilic-doux); color: var(--basilic); }
.simple-controles, .simple-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.simple-controles li { display: flex; gap: 8px; align-items: center; }
.simple-controles li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.simple-controles li.ok span { background: var(--basilic-doux); color: var(--basilic); }
.simple-controles li.ko span { background: var(--danger-doux); color: var(--danger); }
.simple-controles li.ko { color: var(--danger); }
.simple-liste li::before { content: "✓ "; color: var(--basilic); font-weight: 700; }

/* ── Impression (dépliant, pancarte) et patchs ── */
html[data-mode="impression"], html[data-mode="impression"] body { background: var(--fond); color: var(--encre); }
.impression { font: 15px/1.45 var(--f-ui); padding-block: 14px 40px; }
.barre-impression { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 10px 14px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.formulaire-impression { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.formulaire-impression select { border: 1px solid var(--trait); background: var(--surface); border-radius: 8px; padding: 6px 8px; }
.consignes { text-align: center; color: var(--doux); font-size: 13.5px; margin: 10px auto; max-width: 900px; padding-inline: 16px; text-wrap: balance; }
.alerte-impression { color: var(--danger); font-weight: 600; }
.feuilles { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 14px; }
.feuille { position: relative; overflow: hidden; background: #fff; box-shadow: var(--ombre-feuille); break-after: page; }
.feuille:last-child { break-after: auto; }
.feuille .zone { position: absolute; transform-origin: 0 0; }
.feuille .reperes { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-mode="impression"] .produit { cursor: default; }
html[data-mode="impression"] .produit:hover { background: none; }
.feuille-patchs { margin: 14px auto 0; background: #fff; box-shadow: var(--ombre-feuille); padding: 8mm; box-sizing: border-box; overflow: hidden; }
/* v0.8.1 : feuille réduite à l'écran par transformation (EcranFeuille), taille réelle à l'impression */
.ecran-feuille { margin: 14px auto 0; overflow: hidden; flex: none; }
.ecran-feuille-contenu { width: max-content; transform-origin: 0 0; }
.ecran-feuille .feuille, .ecran-feuille .feuille-patchs, .ecran-feuille .feuille-a4 { margin: 0; }
.feuilles > .ecran-feuille { margin-top: 0; }
.planche { display: flex; flex-wrap: wrap; gap: 3mm 4mm; align-items: flex-start; }
.patch { padding: 5mm 5mm 2mm; break-inside: avoid; }
.patch-zone { position: relative; }
.patch-source { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.patch-source.largeur-colonne { width: var(--largeur-colonne, 80.3mm); }
.carte-racine.planche { --largeur-colonne: calc(99mm - 2 * (4mm + .35mm + .7mm + .3mm + 4mm)); }
.patch-etiquette { font: 6pt/1.2 Arial, sans-serif; color: #777; margin-top: 5.5mm; padding-left: 1.5mm; white-space: nowrap; }
.tc { position: absolute; border: 0 solid #000; }
.tc.h { width: 3.5mm; border-top-width: .1mm; }
.tc.v { height: 3.5mm; border-left-width: .1mm; }
.tc.h.hg { left: -4.5mm; top: 0; }    .tc.v.hg { left: 0; top: -4.5mm; }
.tc.h.hd { right: -4.5mm; top: 0; }   .tc.v.hd { right: 0; top: -4.5mm; }
.tc.h.bg { left: -4.5mm; bottom: 0; } .tc.v.bg { left: 0; bottom: -4.5mm; }
.tc.h.bd { right: -4.5mm; bottom: 0; } .tc.v.bd { right: 0; bottom: -4.5mm; }

@media print {
  html, body, html[data-mode="impression"], html[data-mode="impression"] body { background: #fff !important; margin: 0; padding: 0; }
  :root { padding: 0 !important; }
  .barre-impression, .consignes, .erreur-globale { display: none !important; }
  .impression { padding: 0; }
  .feuilles { display: block; zoom: 1 !important; margin: 0; }
  .feuille, .feuille-patchs { box-shadow: none; margin: 0; }
  .feuille-patchs { padding: 0; width: auto !important; }
  .ecran-feuille { width: auto !important; height: auto !important; overflow: visible; margin: 0; }
  .ecran-feuille-contenu { transform: none !important; width: auto; }
  .carte-racine .a-confirmer { outline: none; }
  .carte-racine [data-debordement="true"] .cadre-int { box-shadow: none; }
}


/* ═════════════ v0.2.1 : allergènes et fermetures exceptionnelles ═════════════ */
/* Espace gérant */
.puces-allergenes { display: flex; flex-wrap: wrap; gap: 5px; }
.puces-allergenes .allergene { padding: 4px 10px; font-size: 12.5px; }
.legende-allergenes { width: 100%; margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--doux); }
.legende-allergenes .allergene { cursor: default; padding: 0 7px; font-size: 11px; }
.ing-detail { display: flex; flex-direction: column; gap: 9px; padding: 8px 10px 12px; background: var(--surface); }
.ing-resume { padding: 0 12px 7px; margin-top: -3px; background: var(--surface); font-size: 12px; color: var(--alerte); }
.badge-verif { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--alerte); background: var(--alerte-doux); border-radius: 999px; padding: 1px 7px; }
.a-verifier { border: 1px solid var(--alerte); background: var(--alerte-doux); color: var(--alerte); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ligne-verif { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ligne-verif .nom-verif { min-width: 92px; font-weight: 600; }
.etat-allergenes { border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; border: 1px solid transparent; }
.etat-allergenes.ok { background: var(--basilic-doux); color: var(--basilic); }
.etat-allergenes.alerte { background: var(--alerte-doux); color: var(--alerte); }
.etat-allergenes.danger { background: var(--danger-doux); color: var(--danger); }
.liste-simple { margin: 0; padding-left: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.ligne-attente, .ligne-fermeture { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--trait); background: var(--surface); font-size: 14px; }
.liste > .ligne-attente:first-child, .liste > .ligne-fermeture:first-child { border-top: 0; }
.ligne-fermeture.passee { opacity: .6; }
.statut.en_cours { background: var(--danger-doux); color: var(--danger); }
.statut.a_venir { background: var(--alerte-doux); color: var(--alerte); }
.statut.passee { background: var(--surface-2); color: var(--doux); }
.groupe.fermetures { padding-bottom: 14px; border-bottom: 1px solid var(--trait); }
.panneau > .groupe.fermetures + h3 { margin-top: 2px; }
button.pastille { cursor: pointer; font: inherit; font-size: 12.5px; }

/* Tableau des allergènes (écran, site, impression) */
.tableau-allergenes { overflow-x: auto; }
.ta { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ta th, .ta td { border: 1px solid var(--trait); padding: 3px 4px; text-align: center; }
.ta .ta-produit { text-align: left; white-space: nowrap; font-weight: 600; }
.ta thead .ta-col { vertical-align: bottom; height: 92px; padding: 4px 2px; min-width: 22px; }
.ta thead .ta-col span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 600; font-size: 12px; }
.ta-section th { color: #fff; text-align: left; font-weight: 700; padding: 3px 8px; }
.ta td.c { color: var(--alerte); font-weight: 700; }
.ta td.t { color: var(--doux); }
.ta .ta-variable { font-style: italic; color: var(--doux); }
.ta tr.incompatible { opacity: .32; }
.ta .evite { background: var(--accent-doux); }
.ta-legende { font-size: 12.5px; color: var(--doux); margin: 6px 0 0; }
.ta-liste { display: none; list-style: none; margin: 0; padding: 0; }
.ta-titre { margin-top: 12px; font-family: var(--f-titre-site); font-size: 30px; line-height: 1.1; }
.ta-carte { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--v-trait); border-radius: 12px; font-size: 14.5px; background: var(--v-papier); }
.ta-carte.incompatible { opacity: .38; }
.ta-traces { color: var(--v-doux); font-size: 13.5px; }
.mode-public .ta th, .mode-public .ta td { border-color: var(--v-trait); }
.mode-public .ta td.c { color: var(--v-tomate); }
.mode-public .ta td.t, .mode-public .ta .ta-variable, .mode-public + .ta-legende { color: var(--v-doux); }
.mode-public .ta .evite { background: var(--v-tomate-doux); }
@media (max-width: 760px) {
  .mode-public .ta { display: none; }
  .mode-public .ta-liste { display: flex; flex-direction: column; gap: 8px; }
}

/* Page publique « Allergènes » */
.pa-contenu { padding-block: 32px 72px; display: flex; flex-direction: column; gap: 16px; }
.pa-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-filtre > span { font-weight: 600; margin-right: 4px; }
.pa-resultat { margin: 0; font-weight: 600; color: var(--v-basilic); }
.pa-note { margin: 0; color: var(--v-doux); font-size: 14px; }
.pa-note a { color: inherit; font-weight: 600; }
.pa-indispo { max-width: 560px; }

/* Site : fermetures exceptionnelles */
.v-fermeture { font-size: 14.5px; }
.v-fermeture .v-gouttiere { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; padding-block: 10px; text-align: center; }
.v-fermeture.actif { background: var(--v-tomate-vif); color: var(--v-sur-tomate); }
.v-fermeture.avenir { background: var(--alerte-doux); color: var(--alerte); }
.v-point.exceptionnel { background: var(--v-tomate-vif); }
.v-exceptions { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--v-tomate-doux); font-size: 14px; }
.v-pied a { text-underline-offset: 3px; }

/* Impression du tableau des allergènes : A4 portrait, polices de la charte, couleurs conservées */
.feuille-a4 { position: relative; width: 210mm; min-height: 297mm; margin: 14px auto 0; padding: 10mm 10mm 8mm; box-sizing: border-box; background: #fff; color: #1a1a1a; box-shadow: var(--ombre-feuille); overflow: hidden; }
.feuille-a4, .feuille-a4 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.fa-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 6mm; border-bottom: .5mm solid var(--c-liseret_vert); padding-bottom: 2mm; margin-bottom: 4mm; }
.fa-nom { font-family: var(--f-logo); font-size: 22pt; line-height: 1; }
.fa-titre { font-weight: 700; font-size: 13pt; }
.mode-impression { overflow: visible; }
.mode-impression .ta { font-size: 8.6pt; color: #1a1a1a; }
.mode-impression .ta th, .mode-impression .ta td { border: .2mm solid #8a8a8a; padding: .7mm 1mm; }
.mode-impression .ta thead .ta-col { height: 25mm; min-width: 0; width: 8.6mm; }
.mode-impression .ta thead .ta-col span { font-size: 8pt; }
.mode-impression .ta td.c { color: #1a1a1a; font-size: 9pt; }
.mode-impression .ta td.t { color: #555; }
.mode-impression .ta-section th { font-size: 9pt; padding: .6mm 2mm; }
.mode-impression .ta-legende { font-size: 8pt; color: #333; margin-top: 2mm; }
.fa-pied { margin-top: 3mm; font-size: 7.6pt; line-height: 1.35; color: #333; }
.fa-pied p { margin: 0 0 1mm; }
.filigrane { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.filigrane span { transform: rotate(-32deg); font: 700 64pt/1 Arial, sans-serif; letter-spacing: 2mm; text-transform: uppercase; color: rgb(200 30 30 / .14); white-space: nowrap; }
@media print {
  .feuille-a4 { box-shadow: none; margin: 0; }
  .ta thead { display: table-header-group; }
  .ta tr { break-inside: avoid; }
}
.v-jours li.exceptionnel span:last-child { color: var(--v-tomate); font-weight: 600; }
.insecable { white-space: nowrap; }

/* ── v0.3 : droits, comptes, journal détaillé, contrôle des fichiers, aperçu avant publication ── */
/* Groupe de champs verrouillé selon les droits du compte (n'influe pas sur la mise en page) */
fieldset.droit { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.droit:disabled input:not([type=checkbox]), fieldset.droit:disabled select, fieldset.droit:disabled textarea,
.champ input:disabled, .champ select:disabled, .ing-ligne input:disabled { background: var(--surface-2); color: var(--doux); cursor: not-allowed; }
fieldset.droit:disabled .case { cursor: not-allowed; opacity: .7; }
fieldset.droit:disabled .allergene { cursor: not-allowed; }
.droit-info { border-left: 3px solid var(--alerte); padding: 2px 0 2px 8px; }
.badge-compte { border: 1px solid var(--trait); background: var(--surface-2); color: var(--doux); border-radius: 999px; font: inherit; font-size: 12px; padding: 2px 9px; cursor: pointer; white-space: nowrap; align-self: center; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.badge-compte:hover { border-color: var(--doux); color: var(--encre); }
@media (max-width: 600px) { .badge-compte { max-width: 150px; } }
.statut.role-gerant { background: var(--accent-doux); color: var(--accent); }
.statut.role-employe { background: var(--basilic-doux); color: var(--basilic); }
.statut.role-moi { background: var(--surface-2); color: var(--doux); border: 1px solid var(--trait); }
.compte-resume { margin: 0; padding: 0 11px 8px; background: var(--surface); font-size: 12.5px; color: var(--doux); }
.compte-nouveau { border: 1px solid var(--trait); border-radius: 10px; }
.compte-nouveau h4, .sous-groupe h4 { margin: 0; font-size: 14.5px; }
.droits-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.droit-case { align-items: flex-start; }
.droit-case input { margin-top: 2px; flex: none; }
.droit-case span { display: flex; flex-direction: column; gap: 1px; }
.droit-case small { color: var(--doux); font-size: 12px; line-height: 1.3; }
.sous-groupe { border-top: 1px dashed var(--trait); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.etat-bloc { border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.etat-bloc.ok { background: var(--basilic-doux); color: var(--basilic); }
.etat-bloc.alerte { background: var(--alerte-doux); color: var(--alerte); }
.etat-bloc.danger { background: var(--danger-doux); color: var(--danger); }
.anomalies li.ko { color: var(--danger); }
.anomalies li.alerte { color: var(--alerte); }
.anomalies code { font-size: 12.5px; word-break: break-all; }
.journal-filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.journal { display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.journal-ligne { padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); }
.journal-ligne + .journal-ligne { border-top: 1px solid var(--trait); }
.journal-tete { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 14px; }
.journal-date { font-size: 12.5px; color: var(--doux); font-variant-numeric: tabular-nums; }
.journal-auteur { margin-left: auto; font-size: 12.5px; color: var(--doux); }
.journal-voir { align-self: flex-start; font-size: 12.5px; padding: 2px 0; }
.j-acces_refuse .journal-tete b { color: var(--danger); }
.journal-detail { margin: 2px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.journal-detail .objet { color: var(--doux); }
.journal-detail s { color: var(--doux); }
.apercu-publication { max-width: 860px; margin: -4px auto 14px; border: 1px solid var(--alerte); background: var(--surface); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.apercu-publication h3 { margin: 0; font-size: 16px; }
.apercu-publication h3 small { color: var(--doux); font-weight: 500; }
.apercu-publication .journal-detail { max-height: 40vh; overflow: auto; }
fieldset.droit:disabled .jour, fieldset.droit:disabled button.mini { opacity: .6; cursor: not-allowed; }

/* ── v0.4 : coûts et marges (onglet pleine largeur, graphiques sans bibliothèque) ── */
:root {
  --serie-1: #2a78d6; --serie-2: #eb6834;                 /* séries des courbes (palette validée daltonisme, clair) */
  --st-ok: #0ca30c; --st-alerte: #fab219; --st-danger: #d03b3b; --st-vide: #c9cec4;
  --grille: #e1e0d9; --axe: #898781;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --serie-1: #3987e5; --serie-2: #d95926; --st-vide: #3a4036; --grille: #2c2c2a; }
}
:root[data-theme="dark"] { --serie-1: #3987e5; --serie-2: #d95926; --st-vide: #3a4036; --grille: #2c2c2a; }
.plan.large { grid-template-columns: minmax(0, 1fr); }
.plan.large .editeur { display: block; max-width: 1080px; width: 100%; margin-inline: auto; }
.couts-barre { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.couts-barre .segment { flex: 0 1 auto; }
.couts-filtres { display: flex; gap: 10px; flex-wrap: wrap; }
.couts-filtres .champ { min-width: 120px; }
.couts-barre > .pastille { margin-left: auto; align-self: center; }
@media (max-width: 600px) {
  .couts-barre .segment { width: 100%; }
  .couts-barre .segment button { padding-inline: 2px; font-size: 12.5px; }
  .couts-barre .segment .marque-alerte { margin-left: 3px; }
  .couts-filtres { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .couts-filtres .champ { min-width: 0; }
  .couts-filtres .champ:nth-child(3) { grid-column: 1 / -1; }
  .couts-barre > .pastille { margin-left: 0; }
}
.petit-segment button { padding: 3px 10px; }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tuile { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); font: inherit; color: inherit; }
button.tuile { cursor: pointer; }
.tuile small { font-size: 12.5px; color: var(--doux); }
.tuile b { font-size: 26px; font-weight: 600; line-height: 1.15; }
.tuile span { font-size: 12.5px; color: var(--doux); }
.tuile.alerte { border-color: var(--alerte); background: var(--alerte-doux); }
.titre-couts { margin: 6px 0 -6px; font-size: 14px; }
/* Barres horizontales */
.gb { display: flex; flex-direction: column; gap: 6px; }
.gb-reperes-legende { display: flex; gap: 14px; justify-content: flex-end; font-size: 12px; color: var(--doux); }
.gb-repere-cle::before { content: ""; display: inline-block; width: 12px; height: 0; border-top: 2px solid var(--axe); vertical-align: middle; margin-right: 5px; }
.gb-repere-cle.seuil::before { border-top-color: var(--st-danger); }
.gb-lignes { display: flex; flex-direction: column; }
.gb-ligne { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); gap: 10px; align-items: center; border: 0; background: transparent; padding: 3px 4px; min-height: 30px; text-align: left; cursor: pointer; border-radius: 6px; font: inherit; color: inherit; }
.gb-ligne:hover, .gb-ligne:focus-visible { background: var(--surface-2); }
.gb-nom { font-size: 13.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.gb-nom small { display: block; font-size: 11px; color: var(--doux); }
.gb-piste { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; min-height: 24px; }
.gb-barre { display: block; height: 18px; border-radius: 0 4px 4px 0; flex: none; }
.gb-barre.ok { background: var(--st-ok); } .gb-barre.alerte { background: var(--st-alerte); } .gb-barre.danger { background: var(--st-danger); } .gb-barre.incomplet { background: var(--st-vide); }
.gb-valeur { position: relative; z-index: 1; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre); background: var(--surface); padding-right: 3px; border-radius: 3px; }
.gb-ligne:hover .gb-valeur, .gb-ligne:focus-visible .gb-valeur { background: var(--surface-2); }
.gb-valeur i { font-style: normal; display: inline-block; width: 14px; text-align: center; color: var(--doux); margin-right: 2px; }
.gb-repere { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1px solid var(--axe); pointer-events: none; }
.gb-repere.seuil { border-left-color: var(--st-danger); }
@media (max-width: 600px) { .gb-ligne { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 6px; } }
/* Courbes */
.gc { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gc-titre { font-size: 13.5px; font-weight: 600; }
.gc-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--doux); }
.gc-legende i, .gc-bulle i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; border-radius: 1px; }
.gc-zone { position: relative; width: 100%; touch-action: pan-y; border-radius: 8px; }
.gc-zone svg { display: block; overflow: visible; }
.gc-grille line { stroke: var(--grille); stroke-width: 1; }
.gc-axe text, .gc-fin { font: 11px var(--f-ui); fill: var(--doux); font-variant-numeric: tabular-nums; }
.gc-fin { fill: var(--encre); font-weight: 600; }
.gc-ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gc-aire { fill: var(--serie-1); opacity: .1; }
.gc-point { stroke: var(--surface); stroke-width: 2; }
.gc-reticule { stroke: var(--axe); stroke-width: 1; }
.gc-bulle { position: absolute; top: 4px; display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--trait); box-shadow: 0 4px 14px rgb(0 0 0 / .12); font-size: 12.5px; white-space: nowrap; pointer-events: none; z-index: 2; }
.gc-bulle span { color: var(--doux); }
.gc-bulle span b { color: var(--encre); }
/* Listes et tableaux des coûts */
.pastille-cout { font-variant-numeric: tabular-nums; }
.pastille-cout.ok { color: var(--basilic); } .pastille-cout.alerte { color: var(--alerte); } .pastille-cout.danger { color: var(--danger); font-weight: 600; } .pastille-cout.incomplet { color: var(--doux); }
.tableau-couts td, .tableau-couts th { white-space: nowrap; }
.tableau-couts tr.t-danger td:nth-child(5) { color: var(--danger); font-weight: 600; }
.tableau-couts tr.t-alerte td:nth-child(5) { color: var(--alerte); }
.recette-couts .saisie-prix { min-width: 92px; max-width: 130px; }
.recette-couts .saisie-prix input { padding: 4px 6px; font-size: 14px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); width: 100%; }
.recette-couts tr.ignore td { color: var(--doux); }
.recette-couts .part { min-width: 104px; }
.mini-barre { display: inline-block; width: 46px; height: 8px; margin-right: 6px; background: var(--surface-2); border-radius: 0 4px 4px 0; vertical-align: middle; overflow: hidden; }
.mini-barre i { display: block; height: 100%; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.fiche-cout .mesures { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.mesure.m-ok b { color: var(--basilic); } .mesure.m-alerte b { color: var(--alerte); } .mesure.m-danger b { color: var(--danger); }
.couts .champ .saisie-prix input { width: 100%; min-width: 0; border: 1px solid var(--trait); background: var(--surface); border-radius: 8px; padding: 7px 9px; font-size: 15px; }
.ligne-emballage { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(2, minmax(100px, 160px)); gap: 8px 10px; align-items: end; padding: 6px 0; border-top: 1px solid var(--trait); }
.ligne-emballage > span { font-weight: 500; align-self: center; }
@media (max-width: 480px) { .ligne-emballage { grid-template-columns: 1fr 1fr; } .ligne-emballage > span { grid-column: 1 / -1; } }
.simu-liste { max-height: 50vh; overflow: auto; }
.couts .ligne-liste .nom { white-space: normal; }
.couts .ligne-liste .tarifs { text-align: right; }
.incomplets-liste { line-height: 1.7; }
.incomplets-liste .v-lien-btn { padding: 0; font-weight: 500; }
@media (max-width: 600px) {
  /* Recette sur téléphone : une carte par ingrédient (nom et coût, puis quantité et part), sans défilement horizontal */
  .recette-couts thead { display: none; }
  .recette-couts, .recette-couts tbody { display: block; }
  .recette-couts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom cout" "qte part"; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
  table.patchs.recette-couts td { border: 0; padding: 0; white-space: normal; }
  .gb-ligne { grid-template-columns: minmax(92px, 34%) minmax(0, 1fr); }
  .recette-couts .c-nom { grid-area: nom; font-weight: 500; } .recette-couts .c-cout { grid-area: cout; text-align: right; }
  .recette-couts .c-qte { grid-area: qte; } .recette-couts .c-part { grid-area: part; text-align: right; min-width: 0; }
  .fiche-cout .mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-cout .mesure b { font-size: 16px; }
}

/* ── v0.4.1 : logo animé du bandeau d'accueil (remplace la pizza) ──
   Le logo (fond détouré) est posé sur une assiette crème : son texte noir reste lisible sur le bandeau sombre.
   Entrée en marchant, dandinement continu, vapeur de la pizza, goutte de fromage ; tout s'arrête si l'utilisateur réduit les animations. */
.v-assiette { position: absolute; inset: 5%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fffefa 0 58%, #f4ede1 100%); box-shadow: 0 26px 50px rgb(0 0 0 / .5), inset 0 0 0 7px rgb(255 255 255 / .55), inset 0 -10px 24px rgb(120 90 50 / .12); animation: v-assiette-arrivee 1s cubic-bezier(.2, .8, .2, 1) both; }
.v-chef { position: absolute; inset: 10.5% 10.5% 11% 12%; animation: v-chef-entree 1.4s .2s cubic-bezier(.2, .8, .2, 1) both; }
.v-dandine { position: relative; width: 100%; height: 100%; transform-origin: 40% 92%; animation: v-dandine 1.7s 1.6s ease-in-out infinite; }
.v-logo-chef { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.v-vapeur { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.v-vapeur path { fill: none; stroke: rgb(140 125 105 / .75); stroke-width: 1.8; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: v-vapeur 3.2s ease-out infinite; vector-effect: non-scaling-stroke; }
.v-vapeur .w2 { animation-delay: 1.05s; } .v-vapeur .w3 { animation-delay: 2.1s; }
.v-goutte { position: absolute; left: 67.6%; top: 67.2%; width: 1.9%; height: 2.6%; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #f3c447; box-shadow: inset -1px -1px 0 rgb(200 140 30 / .45); opacity: 0; transform-origin: 50% 0; animation: v-goutte 3.6s 2.4s ease-in infinite; }
@keyframes v-assiette-arrivee { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v-chef-entree { 0% { transform: translateX(-45%) rotate(-10deg); opacity: 0; } 60% { opacity: 1; } 80% { transform: translateX(3%) rotate(2deg); } 100% { transform: none; } }
@keyframes v-dandine { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 25% { transform: translateY(-2.6%) rotate(0); } 50% { transform: translateY(0) rotate(1.6deg); } 75% { transform: translateY(-2.6%) rotate(0); } }
@keyframes v-vapeur { 0% { opacity: 0; transform: translateY(18%) scaleY(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-55%) scaleY(1.15); } }
@keyframes v-goutte { 0%, 40% { opacity: 0; transform: scaleY(.3); } 50% { opacity: 1; transform: scaleY(1); } 72% { opacity: 1; transform: translateY(160%) scaleY(1.25); } 82%, 100% { opacity: 0; transform: translateY(260%) scaleY(.8); } }
@media (max-width: 860px) { .v-scene { width: min(300px, 80%); } }
@media (prefers-reduced-motion: reduce) { .v-assiette, .v-chef, .v-dandine, .v-vapeur path, .v-goutte { animation: none; } .v-goutte { display: none; } }

/* ═════════════ v0.7 — Pizzaiolo en calques : il respire, lance sa pizza, la rattrape, cligne des yeux, fait un clin d'œil ═════════════
   Calques superposés sur la même toile (720 × 720) : pizza (sous le corps, la main reste devant), corps, paupières (une par œil, découpées
   par clip-path), étincelles à la réception. Cycle commun de 10 s, lancé après l'entrée ; tout est désactivé si l'utilisateur
   demande moins d'animations, et mis en pause hors écran (.v-scene.repos). Pivot du corps : les pieds ; centre de la pizza : 64,7 % 56,7 %. */
.v-chef.calques { --cycle: 10s; --depart: 1.7s; }
.v-chef.calques .v-dandine { animation: v-respire var(--cycle) var(--depart) ease-in-out infinite; }
.v-calque { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.v-pizza { position: absolute; inset: 0; perspective: 900px; perspective-origin: 64.7% 56.7%; }
.v-pizza-vol { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 64.7% 56.7%; animation: v-lancer var(--cycle) var(--depart) infinite; }
.v-pizza-dessus { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.v-pizza-dessous { position: absolute; left: 49.4%; top: 48.7%; width: 30.6%; height: 15.9%; border-radius: 50%; background: radial-gradient(circle at 28% 42%, #7d4b22 0 3%, transparent 4.5%), radial-gradient(circle at 63% 30%, #8a5a2b 0 2.4%, transparent 3.6%), radial-gradient(circle at 55% 70%, #7d4b22 0 3%, transparent 4.5%), radial-gradient(circle at 80% 55%, #8a5a2b 0 2%, transparent 3.2%), radial-gradient(circle at 40% 62%, #9a6633 0 1.8%, transparent 3%), radial-gradient(ellipse at 45% 40%, #f2c27a 0 35%, #dc9a4b 70%, #b8742f 100%); box-shadow: inset 0 0 0 2px #3b2414, inset 0 -3px 8px rgb(90 50 20 / .35); transform: rotateX(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.v-chef.calques .v-goutte { animation-duration: 3.4s; }
.v-paupiere { opacity: 0; }
.v-paupiere.g { clip-path: inset(0 66.25% 0 0); animation: v-cligne var(--cycle) var(--depart) infinite; }
.v-paupiere.d { clip-path: inset(0 0 0 33.75%); animation: v-cligne-clin var(--cycle) var(--depart) infinite; }
.v-etincelles { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.v-etincelles path { fill: #f3c447; stroke: #c98a1c; stroke-width: .35; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: v-etincelle var(--cycle) var(--depart) infinite; }
.v-etincelles .s2 { animation-delay: calc(var(--depart) + .18s); }
.v-etincelles .s3 { animation-delay: calc(var(--depart) + .34s); }
.v-chef.calques .v-vapeur { animation: v-vapeur-pause var(--cycle) var(--depart) infinite; }
.v-scene.repos *, .v-scene.repos *::before, .v-scene.repos *::after { animation-play-state: paused !important; }

/* Corps : respiration, léger balancement, élan avant le lancer, réception */
@keyframes v-respire {
  0%, 24%, 47%, 58%, 64.5%, 70%, 92%, 100% { transform: translateY(0) rotate(0) scaleY(1); }
  12%, 82% { transform: translateY(-.7%) rotate(-1.1deg) scaleY(1); }
  36% { transform: translateY(-.7%) rotate(1.1deg) scaleY(1); }
  51% { transform: translateY(1.3%) rotate(0) scaleY(.972); }
  54.5% { transform: translateY(-1.8%) rotate(0) scaleY(1.025); }
  67% { transform: translateY(1%) rotate(0) scaleY(.978); }
}
/* Pizza : petite descente, lancer avec un tour complet (on voit le dessous), retombée écrasée puis rebond.
   Même liste de fonctions à chaque étape : le tour (rotateX 0 → 360°) est interpolé tel quel. */
@keyframes v-lancer {
  0%, 49% { transform: translateY(0) rotate(0) rotateX(0) scale(1, 1); }
  51.5% { transform: translateY(2.6%) rotate(-3deg) rotateX(0) scale(1, 1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  60.5% { transform: translateY(-27%) rotate(2deg) rotateX(180deg) scale(1, 1); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  66% { transform: translateY(0) rotate(0) rotateX(360deg) scale(1, 1); animation-timing-function: ease-out; }
  67.6% { transform: translateY(1.4%) rotate(0) rotateX(360deg) scale(1.05, .9); }
  69.6% { transform: translateY(-.8%) rotate(0) rotateX(360deg) scale(.98, 1.03); }
  71.4%, 100% { transform: translateY(0) rotate(0) rotateX(360deg) scale(1, 1); }
}
/* Clignements (les deux yeux) ; l'œil droit fait en plus un clin d'œil après la réception */
@keyframes v-cligne {
  0%, 13.9%, 15.3%, 37.9%, 39.1%, 40.3%, 41.5%, 89.9%, 91.3%, 100% { opacity: 0; }
  14%, 15.2%, 38%, 39%, 40.4%, 41.4%, 90%, 91.2% { opacity: 1; }
}
@keyframes v-cligne-clin {
  0%, 13.9%, 15.3%, 37.9%, 39.1%, 40.3%, 41.5%, 73.4%, 79.6%, 89.9%, 91.3%, 100% { opacity: 0; }
  14%, 15.2%, 38%, 39%, 40.4%, 41.4%, 73.5%, 79.5%, 90%, 91.2% { opacity: 1; }
}
/* Étincelles autour de la pizza rattrapée (« ta-da ! ») */
@keyframes v-etincelle {
  0%, 66.5% { transform: scale(0) rotate(0); opacity: 0; }
  68.5% { transform: scale(1.25) rotate(40deg); opacity: 1; }
  72% { transform: scale(.9) rotate(80deg); opacity: 1; }
  75%, 100% { transform: scale(0) rotate(120deg); opacity: 0; }
}
/* Vapeur : s'efface pendant le vol de la pizza */
@keyframes v-vapeur-pause { 0%, 49%, 76%, 100% { opacity: 1; } 52%, 70% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .v-chef.calques .v-dandine, .v-pizza-vol, .v-paupiere, .v-etincelles path, .v-chef.calques .v-vapeur { animation: none; }
  .v-paupiere, .v-etincelles { display: none; }
}

/* ═════════════ Réseaux sociaux (v0.5) : studio de publication ═════════════ */
/* Plan : réglages à gauche, visuel (canvas 1080 px réduit à l'écran) à droite et collé en haut ; sur téléphone, le visuel passe au-dessus. */
.studio-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 430px); gap: 18px; align-items: start; }
.studio-reglages { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.studio-apercu { margin: 0; position: sticky; top: calc(var(--h-barre) + 12px); display: flex; flex-direction: column; gap: 10px; align-items: center; min-width: 0; }
.studio-toile { display: block; max-width: 100%; max-height: min(76vh, 740px); width: auto; height: auto; border-radius: 12px; box-shadow: var(--ombre-feuille); background: var(--surface-2); }
.studio-actions { justify-content: center; }
.segment-large { display: flex; flex-wrap: wrap; width: 100%; }
.segment-large button { flex: 1 1 auto; }
.studio-fichier { position: relative; overflow: hidden; display: inline-block; }
.studio-fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.studio-idee { margin: 0; font-size: 13.5px; padding: 8px 11px; border-radius: 10px; background: var(--basilic-doux); color: var(--basilic); }
.studio-texte-options { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.studio-legende { min-height: 210px; resize: vertical; line-height: 1.45; }
.texte-alerte { color: var(--danger); font-weight: 600; }
.liste-simple li.alerte { color: var(--alerte); }
.studio-proposition { border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.studio-proposition p { margin: 0; white-space: pre-wrap; font-size: 14px; }
.studio-historique { display: flex; flex-direction: column; gap: 8px; }
.studio-pub { border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.studio-pub.courante { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.studio-pub-tete { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.statut.publie { background: var(--basilic-doux); color: var(--basilic); }
@media (max-width: 899px) {
  .studio-plan { grid-template-columns: minmax(0, 1fr); }
  .studio-apercu { position: static; order: -1; }
  .studio-toile { max-height: 60vh; }
  .studio-texte-options .segment { width: 100%; }
}

/* ═════════════ v0.6 — Publication directe (Administration → Publication directe, onglet Réseaux) ═════════════ */
.btn.principal.arme, .btn.petit.arme:not(.danger) { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.meta-adresses { display: flex; flex-direction: column; gap: 8px; }
.meta-adresse { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface-2); }
.meta-adresse small { grid-column: 1 / -1; color: var(--doux); font-size: 12px; }
.meta-adresse code { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.meta-etape { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.meta-pages { display: flex; flex-direction: column; gap: 8px; }
.meta-page { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; }
.meta-page > div { display: flex; flex-direction: column; min-width: 0; }
.meta-test { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.meta-test p { margin: 0; overflow-wrap: anywhere; }
.studio-direct h4 { margin: 8px 0 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.direct-cibles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.direct-cible { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); }
.direct-cible.inactive { opacity: .75; background: var(--surface-2); }
.direct-cible textarea { width: 100%; min-height: 120px; resize: vertical; }
.direct-liste { display: flex; flex-direction: column; gap: 8px; }
.statut.d-attente { background: var(--alerte-doux); color: var(--alerte); }
.statut.d-incertain { background: var(--alerte-doux); color: var(--alerte); font-weight: 600; }
.statut.d-echec { background: var(--danger-doux); color: var(--danger); }
@media (max-width: 760px) {
  .direct-cibles { grid-template-columns: minmax(0, 1fr); }
}

/* Page publique « Confidentialité » (rendue par le serveur, sans JavaScript) */
.conf { max-width: 820px; }
.conf h2 { margin: 18px 0 6px; font-size: 20px; }
.conf section { scroll-margin-top: 72px; }
.conf p, .conf li { line-height: 1.6; overflow-wrap: anywhere; }
.conf ul, .conf ol { margin: 6px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.conf a { color: var(--v-tomate); }
.conf a[href^="tel:"] { white-space: nowrap; }
.conf-sommaire { display: flex; flex-wrap: wrap; gap: 6px; }
.conf-sommaire a { border: 1px solid var(--v-trait); border-radius: 999px; padding: 5px 12px; font-size: 14px; color: var(--v-encre); text-decoration: none; }
.conf-sommaire a:hover { background: var(--v-alt); }
.conf-pied .v-gouttiere { padding-block: 28px 48px; }
@media (max-width: 640px) {
  .conf-pied .v-gouttiere { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* v0.7.1 — Mentions légales (page publique) et tableau des durées (Confidentialité) */
.ml-liste { margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.ml-liste > div { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 2px 14px; padding: 6px 0; border-bottom: 1px solid var(--v-trait); }
.ml-liste dt { color: var(--v-doux); font-size: 14px; }
.ml-liste dd { margin: 0; overflow-wrap: anywhere; }
.ml-discret { color: var(--v-doux); font-size: 14px; }
.ml-manquants { border: 1px solid var(--v-tomate); border-radius: 12px; padding: 10px 14px; background: var(--v-alt); }
.ml-manquants p { margin: 0 0 4px; }
.ml-manquants p:last-child { margin: 0; font-size: 13px; color: var(--v-doux); }
.conf-tableau { overflow-x: auto; max-width: 100%; border: 1px solid var(--v-trait); border-radius: 12px; }
.conf-tableau:focus-visible { outline: 2px solid var(--v-tomate); outline-offset: 2px; }
.conf-tableau table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.conf-tableau th, .conf-tableau td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--v-trait); line-height: 1.45; }
.conf-tableau thead th { background: var(--v-alt); font-weight: 600; }
.conf-tableau tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .ml-liste > div { grid-template-columns: minmax(0, 1fr); }
  /* Téléphone : chaque ligne du tableau devient une fiche (libellé au-dessus de chaque valeur) */
  .conf-tableau { overflow: visible; border: 0; }
  .conf-tableau table { min-width: 0; }
  .conf-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .conf-tableau tbody, .conf-tableau tr, .conf-tableau td { display: block; }
  .conf-tableau tr { border: 1px solid var(--v-trait); border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; }
  .conf-tableau td { border: 0; padding: 4px 0; }
  .conf-tableau td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--v-doux); }
  .conf-tableau td:first-child { font-weight: 600; }
  .conf-tableau td:first-child::before { display: none; }
}

/* ═════════════ v0.7 — Ergonomie et responsive de l'espace de gestion ═════════════ */
/* Segments : passent à la ligne au lieu de sortir de l'écran (Réseaux : formats, tons…) */
.segment { max-width: 100%; flex-wrap: wrap; }
.segment button { min-height: 34px; }
/* Champs : jamais plus larges que leur colonne (dates et heures comprises) */
input, select, textarea { max-width: 100%; }
.champ input[type="date"], .champ input[type="time"], input[type="date"].saisie, input[type="time"].saisie { min-width: 0; }
/* iOS (Safari) : les champs date et heure gardent une largeur minimale native et débordent ; on retire l'apparence native */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; min-height: 2.55em; line-height: 1.3; }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}
/* Écrans tactiles : cibles d'au moins 40 px (boutons, segments, cases) */
@media (pointer: coarse), (max-width: 600px) {
  .btn { min-height: 40px; }
  .btn.petit { min-height: 36px; }
  .segment button { min-height: 38px; }
  .case { min-height: 36px; }
  .case input { width: 20px; height: 20px; }
  .champ input, .champ select, .saisie { min-height: 42px; font-size: 16px; } /* 16 px : pas de zoom automatique sur iOS */
  .champ textarea { font-size: 16px; }
}
/* Bandeaux d'information au-dessus du plan */
.message-publication { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--trait); }
.message-publication.erreur { border-color: var(--danger); background: var(--danger-doux); }
.message-publication.ok { border-color: var(--basilic); background: var(--basilic-doux); }
.message-publication a { color: inherit; font-weight: 600; }
.apercu-publication { margin: 0 auto 14px; }
@media (max-width: 899px) {
  .grille-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plan { gap: 12px; }
}
/* Téléphone : deux champs texte côte à côte deviennent illisibles → une colonne ; les paires courtes (heures, dates, nombres, listes) restent côte à côte */
@media (max-width: 480px) {
  .grille-2:has(input:not([type]), input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="file"], textarea) { grid-template-columns: minmax(0, 1fr); }
}
/* Adresse : code postal étroit, ville large, lieu-dit sur sa ligne (« Saint-Gilles-les-Hauts » n'est plus coupé) */
.grille-3.grille-adresse { grid-template-columns: minmax(84px, 1fr) minmax(0, 2.4fr); }
.grille-3.grille-adresse > :nth-child(3) { grid-column: 1 / -1; }
/* Écrans tactiles : petits boutons ronds (‹ › × +) et filtres agrandis */
@media (pointer: coarse), (max-width: 600px) {
  .mini { width: 34px; height: 34px; font-size: 17px; }
  .filtre { min-height: 36px; padding-inline: 13px; }
}

/* v0.7.1 — Mentions légales du site (Restaurant & site) */
.etat-legal { border-radius: 10px; padding: 9px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.etat-legal p { margin: 0; overflow-wrap: anywhere; }
.etat-legal.alerte { background: var(--alerte-doux); color: var(--alerte); }
.etat-legal.ok { background: var(--basilic-doux); color: var(--basilic); }
.etat-legal .aide { color: inherit; opacity: .85; }
.choix-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.choix-legal .case { min-height: 34px; }
.message.alerte { color: var(--alerte); }

/* v0.7.2 : points à confirmer */
.btn-points { cursor: pointer; font: inherit; }
.boite-points { width: min(760px, 100%); overflow: auto; }
.boite-points h2:focus { outline: none; }
.boite-points h3 { margin: 6px 0 0; font-size: 15px; }
.liste-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liste-points .point { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface-2); }
.liste-points.regles .point { opacity: .75; background: transparent; }
.point-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.point-texte small { font-size: 12px; }
.point-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
@media (max-width: 640px) { .liste-points .point { flex-direction: column; } .point-actions { justify-content: flex-start; } }

/* v0.7.3 : pastille du site et régime dans la fiche produit ; vérification des allergènes d'un nouvel ingrédient */
.regime-produit { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--doux); padding: 6px 10px; border-radius: 8px; background: var(--surface-2); overflow-wrap: anywhere; }
.regime-produit b { color: var(--encre); }
.regime-produit.alerte { color: var(--alerte); background: var(--alerte-doux); border: 1px solid var(--alerte); }
.regime-produit .v-lien-btn { padding: 0; font-weight: 600; }
.confirmer-verif .btn { max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.ajout-ing select#ing-nouveau-regime { flex: 1 1 150px; }

/* v0.7.5 : pizza de la semaine (pizza de la carte, suggestion hors carte ou texte libre) */
.bloc-semaine { display: flex; flex-direction: column; gap: 10px; }
.bloc-semaine .titre-champ { font-size: 13px; font-weight: 600; color: var(--doux); }
.segment-semaine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.segment-semaine button { white-space: normal; line-height: 1.2; min-height: 36px; padding-inline: 6px; }
@media (max-width: 560px) { .segment-semaine { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-suggestion { border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.carte-suggestion p { margin: 0; overflow-wrap: anywhere; }
.cs-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.cs-prix { color: var(--doux); font-variant-numeric: tabular-nums; }
.cs-desc { font-size: 14px; color: var(--doux); }
.cs-allerg { font-size: 13px; border-radius: 8px; padding: 6px 8px; }
.cs-allerg.ok { background: var(--basilic-doux); color: var(--basilic); }
.cs-allerg.alerte { background: var(--alerte-doux); color: var(--alerte); }
.alerte-texte { color: var(--alerte); }
.encart-suggestion { border-left: 3px solid var(--accent); background: var(--accent-doux); border-radius: 0 10px 10px 0; padding: 8px 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.encart-suggestion p { margin: 0; font-size: 14px; }
.statut.suggestion { background: var(--accent-doux); color: var(--accent); }
.v-badge.hors-carte { color: var(--v-tomate); margin-left: 10px; vertical-align: 4px; white-space: nowrap; }
.v-semaine .v-allergenes { margin-top: 4px; }
.ta-suggestion { font-weight: 400; font-style: italic; color: inherit; opacity: .8; }
.v-semaine.texte-libre .v-semaine-prix { max-width: 260px; text-align: right; }
.v-semaine.texte-libre .v-semaine-prix b { font-size: 20px; line-height: 1.25; }
@media (max-width: 860px) { .v-semaine.texte-libre .v-semaine-prix { max-width: none; text-align: center; } }

/* v0.7.6 : espace de gestion — section Pizza Bowls, répartition des sections */
.encart-nouveaute { border-left: 4px solid var(--basilic, #3b7228); }
.repartition-face { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.repartition-sections { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 26px; }
.case.petit { font-size: 13px; }
/* v0.8.0 : mise en service (Administration) */
.liste-service { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-service .condition { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); }
.condition-icone { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--surface-2); color: var(--doux); }
.condition.remplie .condition-icone { background: var(--basilic-doux); color: var(--basilic); }
.condition.manquante.bloquante { border-color: var(--danger); }
.condition.manquante.bloquante .condition-icone { background: var(--danger-doux); color: var(--danger); }
.condition.manquante.derogeable .condition-icone { background: var(--alerte-doux); color: var(--alerte); }
.condition.info .condition-icone { font-style: italic; }
.condition-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.condition-texte b { overflow-wrap: anywhere; }
.condition-texte p { margin: 0; font-size: 13.5px; color: var(--doux); overflow-wrap: anywhere; }
.condition-type { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--doux); }
.condition.manquante.bloquante .condition-type { color: var(--danger); }
.condition .ligne-actions { margin-top: 2px; }