/* Écrans de service : salle (iPhone d'abord), préparation, caisse.
   Complète white-tree.css, dont il reprend les variables de la charte. */

[hidden]{display:none!important}

/* iOS zoome sur tout champ dont le texte fait moins de 16 px. */
@media (hover:none){
  .champ input,.champ select,.prix-champ,.caisse-note{font-size:16px}
}

.page-service .contenu{max-width:1200px}
.service-entete{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 16px;margin-bottom:16px}
.service-entete .retour{flex-basis:100%;margin-bottom:2px}
.indicateur{display:flex;align-items:center;gap:6px;margin:0 0 0 auto;font-size:12.5px;color:var(--cambridge-fonce);white-space:nowrap}
.indicateur::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cambridge)}
.indicateur.hors-ligne{color:var(--danger)}
.indicateur.hors-ligne::before{background:var(--danger)}
.indicateur:empty{display:none}

.bouton-compact{min-height:36px;padding:0 14px;font-size:13.5px}

/* ---------- Statuts de préparation ---------- */
.puce{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.puce::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.puce-en_attente{background:var(--almond);color:#6B4A2C}
.puce-pret{background:var(--redwood);color:#fff}
.puce-servi{background:var(--cambridge-pale);color:#3E5649}
.puce-annulee{background:var(--trait);color:var(--encre-douce)}
.suivi-ligne-annulee .suivi-qte,.suivi-ligne-annulee .suivi-nom{color:var(--encre-douce);text-decoration:line-through;text-decoration-color:rgba(110,95,87,.4)}

/* ---------- Salle : tables ---------- */
.tables-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.table-tuile{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:104px;padding:14px;border:1px dashed var(--trait-fort);border-radius:var(--rayon);color:var(--encre);text-decoration:none;transition:transform .1s,border-color .15s,box-shadow .15s}
.table-tuile:active{transform:scale(.98)}
.table-tuile-nom{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.05}
.table-tuile-libre{font-size:13px;color:var(--encre-douce)}
.table-tuile-etats{display:flex;flex-wrap:wrap;gap:6px}
.table-tuile.occupee{border:1px solid var(--trait);background:var(--carte);box-shadow:var(--ombre)}
.table-tuile.a-servir{border-color:var(--redwood);box-shadow:0 0 0 2px rgba(165,98,77,.22),var(--ombre)}

/* ---------- Salle : fiche d'une table ---------- */
.onglets{display:flex;gap:4px;margin-bottom:16px;padding:4px;border-radius:999px;background:rgba(234,219,203,.7)}
.onglet{flex:1;min-height:42px;border:0;border-radius:999px;background:transparent;color:var(--encre-douce);font-weight:600;cursor:pointer}
.onglet.actif{background:var(--carte);color:var(--encre);box-shadow:0 1px 3px rgba(59,47,42,.14)}
.panneau.inactif{display:none}

.categories-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.categorie-tuile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;min-height:96px;padding:14px;border:0;border-radius:var(--rayon);color:var(--encre);text-align:left;cursor:pointer;transition:transform .1s}
.categorie-cuisine{background:var(--redwood-pale)}
.categorie-bar{background:var(--cambridge-pale)}
.categorie-seconde_cuisine{background:var(--almond)}
.categorie-tuile-nom{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.15}
.categorie-tuile-infos{font-size:12.5px;color:var(--encre-douce)}
.categorie-tuile:active,.article-tuile:active{transform:scale(.98)}

.articles-vue h2{margin:4px 0 12px}
.retour-bouton{padding:6px 0;border:0;background:none;font:inherit;font-size:14px;cursor:pointer}
.articles-liste{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.article-tuile{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 16px;border:1px solid var(--trait);border-radius:12px;background:var(--carte);color:var(--encre);text-align:left;cursor:pointer;transition:transform .1s,border-color .15s,background .15s}
.article-tuile-nom{flex:1;font-weight:600}
.article-tuile-prix{color:var(--encre-douce);font-variant-numeric:tabular-nums;white-space:nowrap}
.article-tuile-quantite{min-width:36px;padding:2px 8px;border-radius:999px;background:var(--redwood);color:#fff;font-size:13px;font-weight:700;text-align:center}
.article-tuile:disabled{opacity:.5;cursor:not-allowed}
.article-tuile.ajoute{border-color:var(--redwood);background:var(--redwood-pale)}

/* Suivi */
.envoi{margin-bottom:12px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);overflow:hidden}
.envoi-entete{display:flex;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid var(--trait);background:rgba(248,239,230,.6);font-size:13.5px;color:var(--encre-douce)}
.envoi-entete strong{color:var(--encre)}
.suivi-lignes{margin:0;padding:0;list-style:none}
.suivi-ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--trait)}
.suivi-ligne:last-child{border-bottom:0}
.suivi-qte{font-weight:700;font-variant-numeric:tabular-nums}
.suivi-nom{font-weight:500}
.suivi-ligne-pret{background:rgba(241,221,212,.5)}
.suivi-ligne-servi .suivi-qte,.suivi-ligne-servi .suivi-nom{color:var(--encre-douce)}
.suivi-action{margin:0}
.suivi-total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 2px 0;color:var(--encre-douce)}
.suivi-total strong{font-family:var(--serif);font-size:22px;color:var(--encre)}
.suivi-vide{padding:22px 4px}
.ligne-traitee{opacity:.4;transition:opacity .2s}

/* Panier */
.panier-barre{position:fixed;right:0;bottom:0;left:0;z-index:20;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--beige) 65%,rgba(248,239,230,0))}
.panier-barre-bouton{display:flex;align-items:center;gap:12px;width:100%;max-width:640px;min-height:56px;margin:0 auto;padding:0 20px;border:0;border-radius:999px;background:var(--redwood);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(120,72,52,.3)}
.panier-barre-bouton span:nth-child(2){flex:1;text-align:center;opacity:.85}
body.panier-actif .contenu{padding-bottom:120px}
body.feuille-ouverte{overflow:hidden}
/* La feuille occupe la zone VISIBLE : sur iPhone, le script pose --vv-haut et
   --vv-hauteur (visualViewport) quand le clavier s'ouvre, pour que « Envoyer »
   reste au-dessus du clavier. Sans script ou sans visualViewport : tout l'écran. */
.panier-feuille{position:fixed;top:var(--vv-haut,0);left:0;right:0;height:var(--vv-hauteur,100%);z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(59,47,42,.42)}
.panier-contenu{display:flex;flex-direction:column;width:100%;max-width:640px;max-height:min(88vh,100%);padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--carte);box-shadow:0 -10px 40px rgba(59,47,42,.2)}
.panier-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.panier-lignes{min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.panier-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto 80px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--trait)}
.panier-ligne-nom{font-weight:600}
.panier-ligne-prix{text-align:right;color:var(--encre-douce);font-variant-numeric:tabular-nums}
.panier-ligne-indisponible .panier-ligne-nom{color:var(--danger);text-decoration:line-through}
.quantite{display:inline-flex;align-items:center;gap:4px}
.quantite button{width:40px;height:40px;border:1px solid var(--trait-fort);border-radius:50%;background:#fff;color:var(--encre);font-size:20px;line-height:1;cursor:pointer}
.panier-ligne-qte{min-width:26px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
/* Note libre sous l'article. 16 px : en dessous, iOS zoome sur le champ. */
.panier-note{grid-column:1 / -1;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--trait-fort);border-radius:12px;background:#fff;color:var(--encre);font:inherit;font-size:16px}
.panier-note:focus{border-color:var(--redwood);box-shadow:0 0 0 3px rgba(165,98,77,.16);outline:none}
.panier-note-seule{margin:8px 0 0}
.note-actions{margin-top:12px}
.panier-message{margin:10px 0 0;font-size:14px;color:var(--danger)}
.panier-message:empty{display:none}
.panier-pied{padding-top:12px}
.panier-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:16px}
.panier-total strong{font-family:var(--serif);font-size:24px}
.panier-actions{display:flex;gap:8px}
.panier-envoyer{flex:1;min-height:52px;font-size:16px}
.toast{position:fixed;bottom:calc(88px + env(safe-area-inset-bottom));left:50%;z-index:40;margin:0;padding:8px 16px;border-radius:999px;background:var(--encre);color:#fff;font-size:14px;white-space:nowrap;pointer-events:none;transform:translateX(-50%)}

@media (min-width:600px){
  .categories-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:700px){
  .panier-feuille{align-items:center}
  .panier-contenu{border-radius:22px}
}
@media (min-width:900px){
  .onglets{display:none}
  .table-panneaux{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;gap:24px}
  .panneau.inactif{display:block}
}
@media (max-width:900px){
  /* Salle et préparation n'ont qu'un écran : la barre de navigation ne ferait
     que prendre de la hauteur sur téléphone. */
  .role-salle .nav,.role-preparation .nav{display:none}
}
@media (max-width:420px){
  .suivi-ligne{grid-template-columns:auto minmax(0,1fr) auto}
  .suivi-ligne .puce{grid-row:2;grid-column:2;justify-self:start}
  .suivi-action{grid-row:1 / span 2;grid-column:3}
}

/* ---------- Préparation ---------- */
.page-preparation{background:#F3E8DC}
.prep-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start;gap:16px}
.prep-table{overflow:hidden;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);box-shadow:var(--ombre)}
.prep-table-nom{padding:12px 16px;background:var(--redwood);color:#fff;font-size:22px}
.prep-heure{margin:0;padding:8px 16px;background:var(--beige);font-size:13.5px;color:var(--encre-douce)}
.prep-envoi+.prep-envoi{border-top:1px solid var(--trait-fort)}
.prep-envoi-long .prep-heure{background:var(--redwood-pale);color:#7A3F2E}
.prep-lignes{margin:0;padding:0;list-style:none}
.prep-ligne{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--trait)}
.prep-qte{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:10px;background:var(--almond);font-size:20px;font-weight:700}
.prep-nom{flex:1;font-size:18px;font-weight:600;line-height:1.25}
/* Note du serveur : en évidence mais sobre — texte brun foncé sur Almond
   (contraste ~9:1), 19 px gras, lisible de loin. Corrigée après l'envoi : fond
   rosé et contour Redwood, avec l'heure, pour qu'on ne la manque pas. */
.prep-note{display:block;margin-top:6px;padding:4px 10px;border-radius:8px;background:var(--almond);color:#4A2E1E;font-size:19px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.prep-note small{display:block;font-size:12px;font-weight:600;color:#7A3F2E}
.prep-note-modifiee{background:var(--redwood-pale);box-shadow:inset 0 0 0 2px var(--redwood)}
/* Note dans les listes secondaires (suivi, caisse, modification, prêts). */
.note-ligne{display:block;margin-top:2px;font-style:normal;font-size:13px;font-weight:600;color:#7A3F2E;overflow-wrap:anywhere}
.prep-prets .note-ligne{display:inline;font-size:inherit}
.note-bouton{display:block;min-height:40px;margin-top:2px;padding:8px 0 4px;border:0;background:none;color:var(--redwood-fonce);font:inherit;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.prep-ligne form,.prep-prets form{margin:0}
.prep-bouton{min-width:92px;min-height:48px;font-size:16px}
.prep-vide{padding:40px 24px}
.prep-prets{margin-top:24px}
.prep-prets h2{margin-bottom:8px;font-size:17px;color:var(--encre-douce)}
.prep-prets ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.prep-prets li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-radius:10px;background:var(--cambridge-pale)}

/* ---------- Caisse ---------- */
.section-titre{margin:28px 0 12px;font-size:20px}
.caisse-journal-entete{margin:0}
.caisse-journal-entete .section-titre{margin-bottom:0}
.bandeau-ticket{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.caisse-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:start;gap:16px}
.caisse-table{margin:0}
.caisse-table-nom{font-size:20px}
.caisse-total{margin-left:auto;font-family:var(--serif);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.caisse-detail{padding:4px 20px 0}
.caisse-detail summary{padding:8px 0;font-size:14px;color:var(--encre-douce);cursor:pointer}
.caisse-detail ul{margin:0 0 8px;padding:0;list-style:none}
.caisse-detail li{display:flex;gap:10px;padding:3px 0;font-size:14px;font-variant-numeric:tabular-nums}
.caisse-detail li span:nth-child(2){flex:1}
.alerte{margin:8px 20px 0;padding:8px 12px;border-radius:10px;background:var(--almond);font-size:13.5px;color:#6B4A2C}
.caisse-form{display:flex;flex-direction:column;gap:12px;margin:0;padding:14px 20px 20px}
.choix-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;border:0}
.choix{position:relative}
.choix input{position:absolute;top:50%;left:50%;width:1px;height:1px;opacity:0}
.choix span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--trait-fort);border-radius:12px;background:#fff;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.choix input:checked+span{border-color:var(--redwood);background:var(--redwood-pale);color:#7A3F2E;box-shadow:inset 0 0 0 1px var(--redwood)}
.choix input:focus-visible+span{outline:2px solid var(--redwood);outline-offset:2px}
.caisse-note{width:100%;min-height:42px;padding:8px 12px;border:1px solid var(--trait-fort);border-radius:10px;background:#fff}
.caisse-note:focus{border-color:var(--redwood);box-shadow:0 0 0 3px rgba(165,98,77,.16);outline:none}
.caisse-actions{display:flex;gap:8px}
.caisse-actions .bouton{min-height:46px}
.caisse-actions .bouton-plein{flex:1}
.caisse-remise{margin:0;padding:10px 20px 0;font-size:13.5px;color:var(--encre-douce)}
.caisse-detail-titre{margin:12px 0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce)}
.caisse-detail .carte-vide{padding:4px 0 8px}

/* ---------- Icône d'en-tête ---------- */
.marque-icone{border-radius:9px;object-fit:cover}

/* ---------- Correction d'une table avant encaissement ---------- */
.modif-grille{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start;gap:20px}
.modif-envoi+.modif-envoi{border-top:1px solid var(--trait-fort)}
.modif-lignes{margin:0;padding:0;list-style:none}
.modif-ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:10px 20px;border-top:1px solid var(--trait)}
.modif-qte{font-weight:700;font-variant-numeric:tabular-nums}
.modif-nom{font-weight:600}
.modif-nom small{display:block;font-size:12px;font-weight:400;color:var(--encre-douce)}
.modif-montant{font-variant-numeric:tabular-nums;white-space:nowrap}
.modif-suppression{display:flex;align-items:center;gap:8px;grid-column:2 / span 2;justify-self:end;margin:0}
.modif-suppression input{min-height:34px;max-width:190px;padding:6px 10px;border:1px solid var(--trait-fort);border-radius:8px;background:#fff;font-size:13px}
.modif-ligne-annulee{background:rgba(234,219,203,.35)}
.modif-ligne-annulee .modif-nom,.modif-ligne-annulee .modif-qte{color:var(--encre-douce);text-decoration:line-through;text-decoration-color:rgba(110,95,87,.4)}
.modif-ligne-annulee .modif-nom small{text-decoration:none}
.modif-totaux{display:flex;flex-direction:column;gap:6px;margin:0;padding:14px 20px 18px;border-top:1px solid var(--trait-fort)}
.modif-totaux div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.modif-totaux dt,.modif-totaux dd{margin:0}
.modif-totaux dd{font-variant-numeric:tabular-nums}
.modif-totaux-remise{color:var(--redwood-fonce)}
.modif-totaux-net{padding-top:6px;border-top:1px solid var(--trait);font-weight:700}
.modif-totaux-net dd{font-family:var(--serif);font-size:22px}
.remise-active{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:14px 20px 0;padding:12px 14px;border:1px solid var(--redwood);border-radius:12px;background:var(--redwood-pale)}
.remise-active p{margin:0;font-size:14px}
.remise-active form{margin:0}
.carte-intro{margin:6px 20px 0;color:var(--encre-douce);font-size:14px}
.carte-corps{padding:14px 20px 20px}

/* ---------- Administration du menu : photo, description, ordre ---------- */
.champ textarea{width:100%;min-height:64px;padding:8px 12px;border:1px solid var(--trait-fort);border-radius:10px;background:#fff;font:inherit;resize:vertical}
.champ textarea:focus{border-color:var(--redwood);box-shadow:0 0 0 3px rgba(165,98,77,.16);outline:none}
.photo-actuelle{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.photo-actuelle img{width:96px;height:96px;border-radius:12px;background:var(--almond);object-fit:cover}
.photo-retirer{margin:0}

.articles-admin{margin:0;padding:0;list-style:none}
.art{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border-top:1px solid var(--trait)}
.art:first-child{border-top:0}
.art.deplacement{opacity:.45}
.art-poignee{width:26px;height:32px;padding:0;border:0;background:none;color:var(--encre-douce);font-size:16px;line-height:1;cursor:grab}
.art-poignee:active{cursor:grabbing}
.art-photo-bloc{position:relative;flex-shrink:0}
.art-photo{margin:0}
.art-photo-zone{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;background:var(--almond);cursor:pointer;overflow:hidden}
.art-photo-zone img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.art-photo-zone.survol{outline:2px dashed var(--redwood);outline-offset:2px}
.art-photo-zone.en-cours{opacity:.5}
.art-photo-retirer{position:absolute;top:-7px;right:-7px;margin:0}
.art-photo-x{width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--encre);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.art-texte{display:flex;flex-direction:column;gap:4px;flex:1 1 240px;min-width:0}
.art-nom{margin:0;font-weight:600}
.art.indisponible .art-nom{color:var(--encre-douce);text-decoration:line-through;text-decoration-color:rgba(110,95,87,.45)}
.art-description{display:flex;align-items:center;gap:6px;margin:0}
.art-description input{flex:1;min-width:0;min-height:32px;padding:5px 10px;border:1px solid transparent;border-radius:8px;background:transparent;font-size:13px;color:var(--encre-douce)}
.art-description input:hover{border-color:var(--trait-fort);background:var(--beige)}
.art-description input:focus{border-color:var(--redwood);background:#fff;color:var(--encre);box-shadow:0 0 0 3px rgba(165,98,77,.16);outline:none}
.art-champ-ok{display:none}
.art-description:focus-within .art-champ-ok{display:inline-flex}
.champ-statut{font-size:12px;font-weight:500;white-space:nowrap}
.art-description.enregistre .champ-statut{color:var(--cambridge-fonce)}
.art-description.erreur .champ-statut{color:var(--danger);white-space:normal}
.art-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.art-fleche{width:32px;height:32px;padding:0;border:1px solid var(--trait-fort);border-radius:8px;background:#fff;color:var(--encre);cursor:pointer}
.art-fleche[disabled]{opacity:.35;cursor:default}
.ordre-statut{font-size:12.5px;color:var(--cambridge-fonce)}
.ordre-statut.erreur{color:var(--danger)}

/* ---------- Menu public : adresse et QR code ---------- */
.alerte-page{margin:0 0 20px;padding:12px 16px;border-radius:12px;background:var(--almond);color:#6B4A2C;font-size:14px}
.qr-bloc{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.qr-image{width:296px;height:296px;border:1px solid var(--trait);border-radius:12px;background:#fff}
.qr-actions{flex:1 1 220px}
.qr-actions .champ-aide{margin-top:8px}
.qr-url{margin:0 0 6px;font-family:var(--serif);font-size:18px;word-break:break-all}

@media (max-width:700px){
  .art-actions{flex-basis:100%;margin-left:0;justify-content:flex-end}
  .qr-image{width:220px;height:220px}
}

/* ---------- Recettes et ingrédients ---------- */
.onglets-liens .onglet{display:flex;align-items:center;justify-content:center;text-decoration:none}
.tuile-negative{border-color:var(--danger)}
.tuile-negative .tuile-valeur{color:var(--danger)}
.pastille-sans-prix{background:var(--almond);color:#6B4A2C}
.alerte-page a{color:inherit}

/* Les étapes sont des phrases entières : une colonne étroite les tronque.
   Deux colonnes seulement quand l'écran est vraiment large. */
.recette-grille{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:20px}
.recette-grille>.carte{margin-bottom:0}
@media (min-width:1200px){
  .recette-grille{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}

.recette-lignes{margin:0;padding:0;list-style:none}
.recette-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 20px;border-top:1px solid var(--trait)}
.recette-nom{flex:1 1 200px;min-width:0;font-weight:600}
.recette-nom small,.recette-nom .pastille{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--encre-douce)}
.recette-nom .pastille{display:inline-block;color:#6B4A2C}
.recette-quantite{display:flex;align-items:center;gap:6px;margin:0}
.recette-quantite input{width:78px;min-height:34px;padding:5px 10px;border:1px solid var(--trait-fort);border-radius:8px;background:#fff;font-size:14px;text-align:right}
.recette-quantite select{min-height:34px;padding:4px 8px;border:1px solid var(--trait-fort);border-radius:8px;background:#fff;font-size:14px}
.recette-cout{min-width:90px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.recette-ligne form{margin:0}
.recette-ajout{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}

.etapes-liste{margin:0;padding:0;list-style:none}
.etape{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 20px;border-top:1px solid var(--trait)}
.etape.deplacement{opacity:.45}
.etape-numero{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--almond);font-size:13px;font-weight:700}
.etape-texte{display:flex;align-items:center;gap:6px;flex:1 1 220px;min-width:0;margin:0}
.etape-texte input{flex:1;min-width:0;min-height:34px;padding:6px 10px;border:1px solid transparent;border-radius:8px;background:transparent;font-size:14px}
.etape-texte input:hover{border-color:var(--trait-fort);background:var(--beige)}
.etape-texte input:focus{border-color:var(--redwood);background:#fff;box-shadow:0 0 0 3px rgba(165,98,77,.16);outline:none}
.etape-texte.enregistre .champ-statut{color:var(--cambridge-fonce)}
.etape-texte.erreur .champ-statut{color:var(--danger)}
.etape-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.etape-actions form{margin:0}

.colonne-formulaires{display:flex;flex-direction:column;gap:20px}
.colonne-formulaires .carte{margin-bottom:0}
.achat-ligne{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.achats-liste{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.achats-liste li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:8px 12px;border-radius:10px;background:var(--beige);font-size:13.5px}
.achats-liste form{margin:0 0 0 auto}
.achat-date{min-width:88px;font-variant-numeric:tabular-nums;color:var(--encre-douce)}
.ligne-detail td{padding-top:0!important;border-top:0!important}

.pastille-sous-recette{background:var(--cambridge-pale);color:#3E5649}
.recette-qte-detail{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--encre-douce)}
.recette-perte{width:56px!important}
.choix-type-ligne{grid-template-columns:1fr 1fr;margin-bottom:2px}
.recette-sous-titre{margin:0 0 10px;font-size:15px;font-weight:600}
.recette-dressage{padding-top:0}
.rendement-actuel{margin:0 0 12px;font-size:14px;color:var(--encre-douce)}
.rendement-actuel strong{color:var(--encre)}

.allergenes-champ{border:0;margin:0;padding:0}
.allergenes-champ legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600}
.allergenes-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.allergene-choix{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--trait-fort);border-radius:10px;background:#fff;font-size:13px;cursor:pointer}
.allergene-choix input{margin:0;accent-color:var(--redwood)}
.allergene-choix:has(input:checked){border-color:var(--redwood);background:var(--redwood-pale)}

.prep-fiche-lien{margin-left:6px;font-size:12px;font-weight:500;color:var(--encre-douce);text-decoration:underline;text-underline-offset:2px}
.prep-fiche-lien:hover{color:var(--redwood-fonce)}

@media (max-width:700px){
  .recette-cout{min-width:0;margin-left:auto}
  .etape-actions{flex-basis:100%;margin-left:0;justify-content:flex-end}
  .choix-type-ligne{grid-template-columns:1fr}
}

/* ---------- Journal d'audit ---------- */
.journal{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.journal li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:8px 12px;border-radius:10px;background:var(--beige);font-size:13.5px}
.journal-heure{font-variant-numeric:tabular-nums;color:var(--encre-douce)}
.journal-texte em{display:block;font-style:normal;color:var(--encre-douce)}
.journal-texte small{display:block;color:var(--encre-douce)}
.journal-montant{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.journal-suppression{background:var(--danger-pale)}
.journal-remise{background:var(--redwood-pale)}
.journal-ajout{background:var(--cambridge-pale)}
.journal-note_modifiee{background:var(--almond)}

@media (max-width:900px){
  .modif-grille{grid-template-columns:1fr}
  .modif-suppression{grid-column:1 / -1;justify-self:stretch}
  .modif-suppression input{max-width:none;flex:1}
}

/* ---------- Connexion perdue (bandeau global) ---------- */
.bandeau-connexion{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--danger);color:#fff;font-size:15px;font-weight:700;line-height:1.3;text-align:center;box-shadow:0 2px 12px rgba(59,47,42,.3)}
.bandeau-connexion[hidden]{display:none}
.bandeau-connexion::before{content:"";flex-shrink:0;width:10px;height:10px;border-radius:50%;background:#fff;animation:pulsation 1.2s ease-in-out infinite}
@keyframes pulsation{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.bandeau-connexion::before{animation:none}}
/* Le bandeau recouvre le haut de l'écran : on décale la page plutôt que de masquer l'en-tête.
   Sa hauteur réelle (--bandeau-h) est mesurée par le script : le texte passe sur
   deux lignes sur un petit téléphone. */
body.hors-ligne{padding-top:var(--bandeau-h,0)}
body.hors-ligne .entete{top:var(--bandeau-h,0)}
.panier-message.hors-ligne,.panier-envoyer.hors-ligne{font-weight:700}
.panier-envoyer.hors-ligne{opacity:.55}

/* ---------- Aide à l'installation ---------- */
.aide-etapes,.aide-liste{margin:0 0 10px;padding-left:22px;font-size:15px;line-height:1.55}
.aide-etapes li,.aide-liste li{margin-bottom:8px}