/* =====================================================================================================
   Megacook « Brigade » — l'univers d'une vraie cuisine pro, pas d'un template.
   - Surfaces : inox clair (jour) / piano de cuisson éteint (nuit), cartes blanches nettes, ombres discrètes.
   - Signature : le SCOTCH DE MARQUAGE. En cuisine pro, tout ce qui va au frigo porte un bout de ruban de
     couleur écrit au feutre. Ici chaque catégorie a son scotch (bords dentelés, posé de travers).
   - Données = « ticket de commande » : temps, portions, numéros d'étapes en chiffres de caisse (mono).
   - Jaune de la toque du raton : réservé à l'action principale (Cuisiner, Importer…).
   Contrastes (WCAG) : texte 15,9:1 · secondaire 5,5:1 · encre sur scotch ≥ 8,9:1 · encre sur jaune 12,5:1.
   Ce fichier se charge après app.css : le supprimer revient à l'ancien style.
   ===================================================================================================== */
:root{
  --bg:#eef0f2;--bg2:#e4e7ea;--card:#fff;--card2:#f5f6f8;--ink:#13161c;--mut:#596170;--line:#13161c;--soft:#e4e7ea;
  --edge:#d9dde2;--fedge:#8a919c;--hdr:rgba(255,255,255,.86);--field:#fff;
  --acc:#ffd23f;--acc-ink:#13161c;--acc2:#fff3c4;--acc2-ink:#13161c;--shadow:rgba(19,22,28,.08);--r:16px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --t-aperitif:#ffb35c;--t-entree:#8fdc9b;--t-plat:#ff9b8a;--t-accompagnement:#a9cbff;--t-dessert:#f6b3dd;
  --t-petit-dej:#ffe27a;--t-boisson:#91e6e2;--t-sauce:#cdb3ff;--t-autre:#d7dbe0;--tape:var(--t-autre);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0f1217;--bg2:#151a21;--card:#181d25;--card2:#20262f;--ink:#eef1f5;--mut:#a3abb8;--line:#eef1f5;--soft:#20262f;
  --edge:#2a313c;--fedge:#6b7484;--hdr:rgba(15,18,23,.86);--field:#13171d;--acc2:#3a3320;--acc2-ink:#ffd23f;--shadow:rgba(0,0,0,.4)}}
:root[data-theme=dark]{
  --bg:#0f1217;--bg2:#151a21;--card:#181d25;--card2:#20262f;--ink:#eef1f5;--mut:#a3abb8;--line:#eef1f5;--soft:#20262f;
  --edge:#2a313c;--fedge:#6b7484;--hdr:rgba(15,18,23,.86);--field:#13171d;--acc2:#3a3320;--acc2-ink:#ffd23f;--shadow:rgba(0,0,0,.4)}

body{background:var(--bg);background-image:none}
h1{font-size:36px;letter-spacing:-.02em}
h2{font-size:21px}

/* ---------- le scotch ---------- */
.tape{display:inline-block;background:var(--tape);color:#13161c;font:700 12px/1 "Fredoka",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.09em;padding:7px 14px 6px;transform:rotate(-2deg);text-decoration:none;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 4px) 20%,100% 40%,calc(100% - 4px) 60%,100% 80%,calc(100% - 4px) 100%,0 100%,4px 80%,0 60%,4px 40%,0 20%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.tape.r{transform:rotate(1.5deg)}
.tape-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}

/* ---------- surfaces : nettes, plus de « stickers » ---------- */
.panel,.card,.item,.feat,.kpi,.fact,.auth .panel,.adm-nav,.gallery figure,.empty,.cover img,.flash{
  border:1px solid var(--edge);box-shadow:0 1px 2px var(--shadow),0 8px 24px -12px var(--shadow)}
/* flou posé sur un pseudo-élément : un backdrop-filter sur l'en-tête lui-même piégerait la barre d'onglets
   (position:fixed) du mobile à l'intérieur de l'en-tête */
header.top{background:transparent;isolation:isolate}
header.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hdr);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
@media (prefers-reduced-transparency:reduce){header.top::before{background:var(--card);backdrop-filter:none}}
nav.main a.on{background:var(--ink);color:var(--card);box-shadow:none}
nav.main a:hover:not(.on){background:var(--card2)}
@media (max-width:720px){nav.main{background:var(--card)}}
.brand b{background:var(--acc);color:var(--acc-ink);border-radius:6px;transform:rotate(-2deg);display:inline-block}

/* ---------- boutons : le jaune = l'action principale, le reste est neutre ---------- */
.btn{border:0;border-radius:12px;box-shadow:0 1px 2px var(--shadow);font-weight:600}
.btn:hover{box-shadow:0 4px 14px -4px var(--shadow)}
.btn.ghost,.btn.pink,.btn.blue{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.ghost:hover,.btn.pink:hover,.btn.blue:hover{background:var(--card2)}
.btn.green{background:var(--acc);color:var(--acc-ink)}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{box-shadow:inset 0 0 0 1px var(--edge)}
.btn.sm:not(.ghost):not(.danger){box-shadow:none}
.chip{background:var(--card2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.chip.mut{background:transparent}

/* ---------- cartes recette : photo, scotch de catégorie, ticket ---------- */
.grid{gap:22px}
.card{border-radius:18px}
.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px var(--shadow),0 18px 34px -16px var(--shadow)}
.card .ph{position:relative;background:color-mix(in srgb,var(--tape) 42%,var(--card));overflow:visible}
.card .ph img{border-radius:18px 18px 0 0}
.card .ph .tape{position:absolute;left:12px;bottom:-11px;z-index:1}
.card .bd{padding:20px 16px 16px;gap:8px}
.card h3{font-size:18px;letter-spacing:-.01em}
.card:nth-child(n){--tint:initial}
.meta{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;gap:12px}

/* ---------- fiche : en-tête, ticket de commande, étapes ---------- */
.recipe-head h1{margin-top:2px}
.facts{gap:0;background:var(--card);border:1px solid var(--edge);border-radius:14px;width:max-content;max-width:100%;overflow:hidden;
  box-shadow:0 1px 2px var(--shadow)}
.fact,.fact:nth-child(4n+1){background:none;border:0;border-radius:0;box-shadow:none;padding:10px 18px;font:500 11.5px var(--mono);
  text-transform:uppercase;letter-spacing:.06em}
.fact+.fact{border-left:1px dashed var(--fedge)}
.fact b{font:600 19px var(--mono);letter-spacing:0;text-transform:none;margin-top:2px}
@media (max-width:560px){.facts{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}.fact+.fact{border-left:0}
  .fact:nth-child(even){border-left:1px dashed var(--fedge)}.fact:nth-child(n+3){border-top:1px dashed var(--fedge)}}
ul.ing li{border-bottom:1px solid var(--edge)}
ul.ing li:before{width:9px;height:9px;top:18px;border-radius:2px;background:none;box-shadow:inset 0 0 0 2px var(--ink)}
ol.steps li{padding-left:56px}
ol.steps li:before,ol.steps li:nth-child(3n+2):before,ol.steps li:nth-child(3n):before{content:counter(s,decimal-leading-zero);background:var(--ink);
  color:var(--card);font:600 15px var(--mono);border-radius:10px;width:40px;height:32px;box-shadow:none}
.vchip{font-family:var(--mono)}

/* ---------- photos « punaisées » : un bout de scotch en haut ---------- */
.gallery figure{position:relative;overflow:visible}
.gallery figure::before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:18px;transform:translateX(-50%) rotate(-3deg);
  background:color-mix(in srgb,var(--acc) 70%,transparent);z-index:1;
  clip-path:polygon(0 0,100% 0,calc(100% - 3px) 25%,100% 50%,calc(100% - 3px) 75%,100% 100%,0 100%,3px 75%,0 50%,3px 25%)}

/* ---------- accueil ---------- */
.hero h1 mark{background:var(--acc);border-radius:4px;box-shadow:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 25%,100% 50%,calc(100% - 6px) 75%,100% 100%,0 100%,6px 75%,0 50%,6px 25%)}
.feat,.feat:nth-child(1){background:var(--card)}
.feat:nth-child(2),.feat:nth-child(3){transform:none}

/* ---------- divers ---------- */
.fact:nth-child(4n+1){background:none}
.kpi b{font-family:var(--mono)}
.flash.ok{background:color-mix(in srgb,var(--t-entree) 55%,var(--card));color:var(--ink)}
.empty{border-style:dashed;border-color:var(--fedge)}
.vis-toggle button.on,.seg a.on,.adm-nav a.on{background:var(--ink);color:var(--card)}
footer.bot img{filter:grayscale(.2)}

/* =====================================================================================================
   « Carte de bistrot » (mélange Brigade + Ardoise) : la mise en page d'un menu — titre, pointillés,
   prix à droite — avec les couleurs et polices de Brigade. Prix = temps ou quantité, en chiffres de caisse.
   ===================================================================================================== */
.dots{flex:1;min-width:18px;border-bottom:2px dotted var(--fedge);transform:translateY(-5px);margin:0 4px}
.carte{background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:6px 22px 10px;box-shadow:0 1px 2px var(--shadow),0 8px 24px -12px var(--shadow)}
.carte-head{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 6px;font:700 13px "Fredoka",sans-serif;text-transform:uppercase;letter-spacing:.14em}
.carte-head span{font:500 12px var(--mono);color:var(--mut);letter-spacing:.04em}
.menu-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px dashed var(--edge);text-decoration:none;color:inherit}
.menu-row:hover .tx b{text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:3px}
.menu-row .th{width:52px;height:52px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden;
  background:color-mix(in srgb,var(--tape) 45%,var(--card))}
.menu-row .th img{width:100%;height:100%;object-fit:cover}
.menu-row .tx{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;flex:0 1 auto}
.menu-row .tx b{font:600 18px/1.2 "Fredoka",sans-serif}
.menu-row .tx small{color:var(--mut);font-size:13px}
.tape.sm{font-size:10.5px;padding:5px 10px 4px;transform:rotate(-1.5deg)}
.menu-row .pr{font:600 20px var(--mono);white-space:nowrap}.menu-row .pr small{font-size:12px;color:var(--mut)}
@media (max-width:560px){.carte{padding:4px 14px 6px;border-radius:16px}.menu-row{gap:10px}.menu-row .tx b{font-size:16.5px}.menu-row .pr{font-size:17px}}
/* ingrédients : nom ........ quantité */
ul.menu-ing li{display:flex;align-items:baseline;padding:10px 0 10px 22px}
ul.menu-ing li:before{top:17px}
ul.menu-ing .n{min-width:0}
ul.menu-ing .q{font:600 15px var(--mono);white-space:nowrap}
/* en-tête : bloc compte poussé à droite */
header.top .who{margin-left:auto}