/* ZONEH24 FOOD — socle commun des pages /test/ (couleurs, barre du haut, boutons, étiquettes, assiettes, message, menu 🎨).
   Changer ?v= dans toutes les pages à chaque modification.
   COULEURS : uniquement par variables. Thème posé sur <html> par theme.js :
   data-theme="voice-clair|voice-sombre" + data-accent="turquoise|bleu|violet|orange". Sans attribut = clair turquoise.
   Toute nouvelle couleur doit être définie dans les DEUX palettes (clair et sombre). Seules exceptions : les dessins
   (bol, bannière, assiettes, logo, couleur propre à chaque cuisinier) qui remplacent des photos. */

/* ===== Palette CLAIRE (par défaut) ===== */
:root,html[data-theme="voice-clair"]{
  --bg:#f6f8fa;--bg-a1:rgba(242,107,44,.07);--bg-a2:rgba(14,124,123,.07);
  --card:#ffffff;--card2:#f3f6f9;--card-t:#ffffff;--card-b:#fbfcfd;
  --line:#e3e8ee;--line2:#d3dbe4;--soft:#f6f8fa;--hover:rgba(15,23,42,.05);
  --tx:#14212e;--tx2:#46535f;--mu:#6b7a88;
  --head-bg:rgba(255,255,255,.92);--drawer:#ffffff;
  --shadow:0 10px 30px rgba(15,23,42,.14);--shadow-sm:0 2px 10px rgba(15,23,42,.06);--title-shadow:none;
  --toast-bg:#14212e;--toast-tx:#ffffff;
  --on-img:#ffffff;--img-shade:rgba(0,0,0,.78);
  --ic-warm:#b5813f;--leaf:#5fb83c;--hat-fill:#ffffff;--hat-stroke:#7d8b99;
  --map-1:#f1f5f9;--map-2:#e2e9f0;--map-line:rgba(70,90,110,.18);--map-dot:#5d6b78;
  --cover-fade:rgba(255,255,255,.35);--av-ring:#ffffff;
  --amb-line:rgba(217,138,11,.45);--amb-glow:rgba(217,138,11,.10);--amb-tx:#a35f00;--amb-soft:#fff5e5;
  --bar-bg:#e6ebf0;--ok-tx:#15803d;
  --in-bg:#ffffff;--in-tx:#13202c;--in-ph:#66778a;--in-ic:#25384a;--in-bd:#d3dbe4;--pin:#e5484d;
  --hrt-bg:rgba(255,255,255,.85);--hrt-bd:rgba(20,33,46,.18);--hrt-tx:#14212e;
  --or:#e8611f;--or-h:#d4520f;--or-tx:#ffffff;--amber:#e07a12;--star:#f5a623;--ok:#22c55e;
  --tg-g-tx:#15803d;--tg-g-bg:#e9f8ef;--tg-g-bd:#a7e0bd;
  --tg-b-tx:#1d4ed8;--tg-b-bg:#eaf1fe;--tg-b-bd:#bcd0fb;
  --tg-o-tx:#c2410c;--tg-o-bg:#fff1e8;--tg-o-bd:#f8c7a5;
  --tg-br-tx:#8a5a12;--tg-br-bg:#f8f0e2;--tg-br-bd:#e3c99a;
  --tg-m-tx:#a21caf;--tg-m-bg:#fbeafd;--tg-m-bd:#eab3f3;
  --tag-n-tx:#33414e;--tag-n-bg:#f3f6f9;
  --drop:rgba(15,23,42,.18);--av-gloss:rgba(255,255,255,.4);--inset-hl:transparent;
  --or-soft1:rgba(232,97,31,.12);--or-soft2:rgba(232,97,31,.03);--or-line:rgba(232,97,31,.35);
  /* couleur principale : turquoise */
  --acc:#0e7c7b;--acc-h:#0b6968;--acc-tx:#ffffff;--acc-link:#0e7c7b;--acc-soft:#e6f4f3;--acc-line:#b7dcdb;--acc-glow:rgba(14,124,123,.18);
  --hi:#0e7c7b;--hi-h:#0b6968;--hi-tx:#ffffff;
  color-scheme:light;
}
html[data-theme="voice-clair"][data-accent="bleu"]{--acc:#2563eb;--acc-h:#1d4ed8;--acc-link:#2563eb;--acc-soft:#e8effd;--acc-line:#bfd1f8;--acc-glow:rgba(37,99,235,.18);--hi:#2563eb;--hi-h:#1d4ed8}
html[data-theme="voice-clair"][data-accent="violet"]{--acc:#7c3aed;--acc-h:#6d28d9;--acc-link:#7c3aed;--acc-soft:#f1eafe;--acc-line:#d8c5fb;--acc-glow:rgba(124,58,237,.18);--hi:#7c3aed;--hi-h:#6d28d9}
html[data-theme="voice-clair"][data-accent="orange"]{--acc:#d9620f;--acc-h:#c2550b;--acc-link:#c2550b;--acc-soft:#fdf0e6;--acc-line:#f6cfb0;--acc-glow:rgba(217,98,15,.18);--hi:#d9620f;--hi-h:#c2550b}

/* ===== Palette SOMBRE (celle des maquettes de Gérald) ===== */
html[data-theme="voice-sombre"]{
  --bg:#0c1722;--bg-a1:rgba(242,107,44,.11);--bg-a2:rgba(19,154,135,.10);
  --card:#122130;--card2:#16283a;--card-t:#132538;--card-b:#0f1d2b;
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.15);--soft:rgba(255,255,255,.025);--hover:rgba(255,255,255,.06);
  --tx:#eef3f8;--tx2:#c7d3de;--mu:#9aadbf;
  --head-bg:rgba(12,23,34,.88);--drawer:#0f1c29;
  --shadow:0 12px 30px rgba(0,0,0,.45);--shadow-sm:0 2px 10px rgba(0,0,0,.25);--title-shadow:0 2px 18px rgba(0,0,0,.35);
  --toast-bg:#1b3044;--toast-tx:#ffffff;
  --on-img:#ffffff;--img-shade:rgba(0,0,0,.8);
  --ic-warm:#f1dcba;--leaf:#9be27a;--hat-fill:#ffffff;--hat-stroke:transparent;
  --map-1:#132a3c;--map-2:#0b1824;--map-line:rgba(160,190,215,.13);--map-dot:#c7d3de;
  --cover-fade:rgba(15,29,43,.85);--av-ring:#11202f;
  --amb-line:rgba(247,164,40,.42);--amb-glow:rgba(247,164,40,.09);--amb-tx:#ffcf8a;--amb-soft:rgba(247,164,40,.1);
  --bar-bg:rgba(255,255,255,.12);--ok-tx:#4ade80;
  --in-bg:#ffffff;--in-tx:#13202c;--in-ph:#66778a;--in-ic:#25384a;--in-bd:#d9e0e7;--pin:#e5484d;
  --hrt-bg:rgba(5,12,20,.6);--hrt-bd:rgba(255,255,255,.35);--hrt-tx:#ffffff;
  --or:#f26b2c;--or-h:#ff7c3d;--or-tx:#ffffff;--amber:#f7a428;--star:#f7b500;--ok:#22c55e;
  --tg-g-tx:#86e3a6;--tg-g-bg:rgba(34,197,94,.14);--tg-g-bd:rgba(34,197,94,.5);
  --tg-b-tx:#a8c8ff;--tg-b-bg:rgba(59,130,246,.16);--tg-b-bd:rgba(59,130,246,.5);
  --tg-o-tx:#ffb487;--tg-o-bg:rgba(242,107,44,.15);--tg-o-bd:rgba(242,107,44,.55);
  --tg-br-tx:#f0c58a;--tg-br-bg:rgba(161,98,7,.2);--tg-br-bd:rgba(217,160,80,.45);
  --tg-m-tx:#f3b0ff;--tg-m-bg:rgba(192,38,211,.17);--tg-m-bd:rgba(192,38,211,.5);
  --tag-n-tx:#dbe4ec;--tag-n-bg:rgba(255,255,255,.03);
  --drop:rgba(0,0,0,.35);--av-gloss:rgba(255,255,255,.4);--inset-hl:rgba(255,255,255,.04);
  --or-soft1:rgba(242,107,44,.17);--or-soft2:rgba(242,107,44,.04);--or-line:rgba(242,107,44,.38);
  /* couleur principale : turquoise (boutons sarcelle + cyan lumineux des maquettes) */
  --acc:#139a87;--acc-h:#17b29c;--acc-tx:#ffffff;--acc-link:#2fd0b3;--acc-soft:rgba(47,208,179,.14);--acc-line:rgba(47,208,179,.45);--acc-glow:rgba(31,214,200,.32);
  --hi:#1fd6c8;--hi-h:#4be3d7;--hi-tx:#05211e;
  color-scheme:dark;
}
html[data-theme="voice-sombre"][data-accent="bleu"]{--acc:#2f6fe8;--acc-h:#4f8cff;--acc-link:#7fb0ff;--acc-soft:rgba(79,140,255,.15);--acc-line:rgba(79,140,255,.5);--acc-glow:rgba(79,140,255,.32);--hi:#5b9bff;--hi-h:#7fb0ff;--hi-tx:#06142b}
html[data-theme="voice-sombre"][data-accent="violet"]{--acc:#7c4ff0;--acc-h:#9f6bff;--acc-link:#c4a5ff;--acc-soft:rgba(159,107,255,.16);--acc-line:rgba(159,107,255,.5);--acc-glow:rgba(159,107,255,.32);--hi:#a98bff;--hi-h:#c4a5ff;--hi-tx:#170a33}
html[data-theme="voice-sombre"][data-accent="orange"]{--acc:#e8772a;--acc-h:#f08a3c;--acc-tx:#1a1206;--acc-link:#ffb27a;--acc-soft:rgba(240,138,60,.15);--acc-line:rgba(240,138,60,.5);--acc-glow:rgba(240,138,60,.32);--hi:#f59a52;--hi-h:#ffb27a;--hi-tx:#1a1206}

/* ===== Base ===== */
:root{
  --head:74px;
  --play:#ff1f2d;--play-h:#ff4752;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --hand:"Segoe Script","Bradley Hand","Brush Script MT","Snell Roundhand",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--tx);line-height:1.45;min-height:100vh;overflow-x:hidden;
  background:radial-gradient(900px 520px at 88% -8%,var(--bg-a1),transparent 62%),
             radial-gradient(800px 620px at -12% 18%,var(--bg-a2),transparent 60%),var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input{font:inherit}
:focus-visible{outline:2px solid var(--acc-link);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
section[id],article[id]{scroll-margin-top:calc(var(--head) + 12px)}

/* ===== Barre du haut ===== */
.top{position:sticky;top:0;z-index:50;background:var(--head-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:18px;height:var(--head)}
.logo{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.logo-ic svg{display:block;width:44px;height:36px}
.logo-tx b{display:block;font-size:24px;font-weight:800;line-height:1;letter-spacing:.2px;white-space:nowrap}
.logo-tx em{font-style:normal;color:var(--or)}
.logo-tx small{display:block;margin-top:4px;font-size:11.5px;color:var(--mu);white-space:nowrap}
.nav{display:flex;align-items:center;gap:2px;margin-left:30px;flex:1}
.nav a{position:relative;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--tx2)}
.nav a:hover{color:var(--tx);background:var(--hover)}
.nav a.on{color:var(--acc-link);font-weight:600}
.nav a.on::after{content:'';position:absolute;left:12px;right:12px;bottom:-8px;height:2px;border-radius:2px;background:var(--acc-link)}
.nav-acc{display:none}
.top-act{display:flex;align-items:center;gap:10px;margin-left:auto}
.ic-btn{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;color:var(--tx)}
.ic-btn:hover{background:var(--hover)}
.ic-btn svg{width:22px;height:22px}
.ic-btn.on{color:var(--or)}
.ic-btn.on svg{fill:currentColor}
.bdg{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--or);color:var(--or-tx);font-size:10.5px;font-weight:800;line-height:17px;text-align:center}
.burger{display:none}

/* ===== Menu 🎨 (même aspect que le forum et Voice) ===== */
.theme-wrap{position:relative;flex:none}
.theme-btn{font-size:19px;line-height:1;border:1px solid var(--line2)}
.theme-menu{position:fixed;right:12px;top:calc(var(--head) + 6px);z-index:1000;width:270px;max-width:calc(100vw - 24px);padding:12px;
  border-radius:12px;background:var(--card);color:var(--tx);border:1px solid var(--line2);box-shadow:var(--shadow)}
.theme-menu[hidden]{display:none}
.theme-menu-title{padding:2px 2px 8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.theme-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
.theme-acc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.theme-seg button,.theme-acc button{min-width:0;padding:8px 2px;border-radius:8px;font-size:12.5px;color:var(--tx);background:var(--card);border:1.5px solid var(--line2)}
.theme-seg button:hover,.theme-acc button:hover{background:var(--hover)}
.theme-acc button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px;font-size:11px}
.theme-acc i{display:block;width:20px;height:20px;border-radius:50%}
.theme-seg button.on{font-weight:700;border-color:var(--acc);background:var(--acc-soft)}
.theme-acc button.on{font-weight:700;border-color:var(--tx)}
/* pastilles : toujours la couleur claire de référence, quel que soit le mode */
.sw-turquoise{background:#0e7c7b}.sw-bleu{background:#2563eb}.sw-violet{background:#7c3aed}.sw-orange{background:#d9620f}

/* ===== Boutons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 18px;border-radius:9px;font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn svg{width:19px;height:19px}
.btn-ghost{border:1px solid var(--line2);color:var(--tx)}
.btn-ghost:hover{border-color:var(--mu);background:var(--hover)}
.btn-teal{background:var(--acc);color:var(--acc-tx)}
.btn-teal:hover{background:var(--acc-h)}
.btn-or{background:var(--or);color:var(--or-tx)}
.btn-or:hover{background:var(--or-h)}
.btn-out{border:1px solid var(--acc-line);color:var(--acc-link)}
.btn-out:hover{background:var(--acc-soft)}
.btn-cy{background:var(--hi);color:var(--hi-tx);font-weight:700;box-shadow:0 0 16px var(--acc-glow)}
.btn-cy:hover{background:var(--hi-h);box-shadow:0 0 22px var(--acc-glow)}
.btn-lg{height:44px;padding:0 26px;font-size:15px}
.btn-xl{height:48px;padding:0 30px;font-size:15.5px}
.btn-xl svg{width:22px;height:22px}

/* ===== Étiquettes colorées ===== */
.tg{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid}
.tg svg{width:12px;height:12px}
.tg-g{color:var(--tg-g-tx);background:var(--tg-g-bg);border-color:var(--tg-g-bd)}
.tg-b{color:var(--tg-b-tx);background:var(--tg-b-bg);border-color:var(--tg-b-bd)}
.tg-o{color:var(--tg-o-tx);background:var(--tg-o-bg);border-color:var(--tg-o-bd)}
.tg-br{color:var(--tg-br-tx);background:var(--tg-br-bg);border-color:var(--tg-br-bd)}
.tg-m{color:var(--tg-m-tx);background:var(--tg-m-bg);border-color:var(--tg-m-bd)}

/* ===== Assiettes dessinées (en attendant les vraies photos : couleurs de dessin, identiques dans les deux modes) ===== */
.dish{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;border-radius:8px;
  background:radial-gradient(120% 95% at 28% 18%,hsl(var(--h),34%,27%),hsl(var(--h),30%,9%))}
.dish::before{content:'';position:absolute;top:8%;width:56%;aspect-ratio:1;border-radius:50%;box-shadow:0 6px 14px rgba(0,0,0,.5);
  background:radial-gradient(circle closest-side,hsl(var(--h),62%,42%) 0 56%,hsl(var(--h),55%,26%) 61%,#efe9df 64% 83%,#cfc5b4 86%,#f5f0e7 90% 100%)}
.dish i{position:relative;top:-6%;font-style:normal;font-size:27px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.dish span{position:absolute;left:0;right:0;bottom:0;padding:12px 6px 4px;font-size:10px;line-height:1.2;text-align:center;color:var(--on-img);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(transparent,var(--img-shade))}
.dish.big::before{top:9%;width:60%}
.dish.big i{top:-3%;font-size:46px}
.dish.ph::before{display:none}
.dish.ph{background:radial-gradient(90% 80% at 50% 45%,hsl(var(--h),45%,34%),hsl(var(--h),35%,10%))}
.dish.ph i{top:-4%;font-size:50px}

/* ===== Pied de page et message ===== */
footer{margin-top:40px;padding:22px 0 34px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mu)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px}
.foot b{color:var(--tx2)}
.toast{position:fixed;left:50%;bottom:22px;z-index:90;max-width:calc(100% - 32px);padding:12px 18px;border-radius:10px;font-size:14px;color:var(--toast-tx);
  background:var(--toast-bg);border:1px solid var(--acc-line);box-shadow:var(--shadow);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:980px){
  .burger{display:grid}
  .top-act>.btn-ghost{display:none}
  .nav{display:none;position:fixed;top:var(--head);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px 16px 16px;
    background:var(--drawer);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:12px}
  .nav a.on::after{display:none}
  .nav-acc{display:flex;gap:10px;margin-top:8px}
  .nav-acc .btn{flex:1}
}
@media (max-width:760px){
  :root{--head:64px}
  .wrap{padding:0 16px}
  .top-in{gap:6px}
  .top-act{gap:4px}
  .ic-btn{width:40px;height:40px}
  .logo{gap:8px}
  .logo-ic svg{width:34px;height:28px}
  .logo-tx b{font-size:20px}
  .logo-tx small{font-size:10.5px}
}
@media (max-width:480px){
  .top-act>.btn-teal{display:none}
  .logo-tx small{display:none}
}