/* ============================================================================
   DIAMOND SQUARE × ZENITHRA — système de design partagé
   Utilisé par les 3 prototypes. Ne pas forker : corriger ici.

   Palette dérivée du lieu réel :
     façade anthracite + lattes bois · banquettes bordeaux · or du
     coucher de soleil de leur carte papier actuelle.

   Thème : sombre par défaut (la façade et la salle sont sombres, et les
   photos de plats ressortent mieux), bascule claire pour le plein soleil
   en terrasse — les deux sont des citoyens de première classe.
   ========================================================================= */

/* ---------------------------------------------------------------- polices */
@font-face{font-family:'Inter';font-weight:400;src:url('fonts/inter-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:500;src:url('fonts/inter-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:600;src:url('fonts/inter-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:700;src:url('fonts/inter-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Manrope';font-weight:500;src:url('fonts/manrope-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Manrope';font-weight:700;src:url('fonts/manrope-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Manrope';font-weight:800;src:url('fonts/manrope-800.woff2') format('woff2');font-display:swap}

/* ================================================================= tokens
   Palette CLAIRE définie sur :root nu (jamais uniquement dans un media),
   puis redéfinie en sombre. Voir la règle « theme-aware » : toute couleur
   a une valeur de base ici.                                              */
:root{
  color-scheme: light dark;

  /* — marque — */
  --gold:#C8952F;          --gold-lo:#9A6F1E;      --gold-hi:#E8C87A;
  --wine:#7A2231;          --wine-hi:#A63446;
  --wood:#8A5A2B;
  --cream:#F6F1E7;
  --ink:#121417;

  /* — surfaces (clair) — */
  --bg:#F6F1E7;
  --bg-2:#FFFDF8;
  --surface:#FFFFFF;
  --surface-2:#FAF6EE;
  --line:rgba(18,20,23,.12);
  --line-soft:rgba(18,20,23,.07);

  /* — texte (clair) — */
  --fg:#16181C;
  --fg-2:#4A4E57;
  --fg-3:#767B86;

  /* — accents fonctionnels — */
  --ok:#2E7D5B;  --warn:#B4741A;  --err:#B3261E;
  --focus:#1E3AE0;

  /* — ombres — */
  --sh-1:0 1px 2px rgba(18,20,23,.06), 0 2px 8px rgba(18,20,23,.05);
  --sh-2:0 2px 6px rgba(18,20,23,.08), 0 12px 32px rgba(18,20,23,.10);
  --sh-3:0 8px 24px rgba(18,20,23,.12), 0 32px 64px rgba(18,20,23,.14);

  /* — géométrie — */
  --r-1:8px; --r-2:14px; --r-3:20px; --r-4:28px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* — typo — */
  --f-display:'Manrope','Inter',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-num:'Manrope','Inter',system-ui,sans-serif;

  /* — mouvement (une seule courbe pour toute l'app) — */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:140ms; --t:220ms; --t-slow:380ms;

  /* — dégradés — */
  --g-gold:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 52%,var(--gold-lo) 100%);
  --g-sunset:linear-gradient(160deg,#F3B23F 0%,#C8952F 38%,#7A2231 100%);
  --max:1180px;
}

/* — sombre : par défaut système, sauf si l'utilisateur a choisi « clair » — */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1013;      --bg-2:#141719;
    --surface:#191D21; --surface-2:#20252A;
    --line:rgba(246,241,231,.13); --line-soft:rgba(246,241,231,.07);
    --fg:#F4F1EA;      --fg-2:#B6B9BF;  --fg-3:#868B94;
    --gold:#D9A845;    --gold-hi:#F0D493;  --gold-lo:#A87C24;
    --wine-hi:#C4485C;
    --ok:#4BAE83;      --warn:#D69B3E;   --err:#E5645C;
    --focus:#6E86FF;
    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --sh-2:0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
    --sh-3:0 8px 24px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.45);
  }
}
/* — bascule explicite : gagne dans les deux sens — */
:root[data-theme="dark"]{
  --bg:#0E1013;      --bg-2:#141719;
  --surface:#191D21; --surface-2:#20252A;
  --line:rgba(246,241,231,.13); --line-soft:rgba(246,241,231,.07);
  --fg:#F4F1EA;      --fg-2:#B6B9BF;  --fg-3:#868B94;
  --gold:#D9A845;    --gold-hi:#F0D493;  --gold-lo:#A87C24;
  --wine-hi:#C4485C;
  --ok:#4BAE83;      --warn:#D69B3E;   --err:#E5645C;
  --focus:#6E86FF;
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
  --sh-3:0 8px 24px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.45);
}

/* ================================================================== base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:-.02em;line-height:1.12;margin:0}
h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800}
h2{font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 var(--sp-3)}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}

/* focus visible unique et cohérent partout */
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}

/* ============================================================ CRÉNEAUX PHOTO
   Le point qui avait cassé la 1ʳᵉ tentative.

   Chaque photo est un <img> DANS un conteneur qui porte déjà un décor CSS
   complet. Si le fichier manque (pas encore généré par Nano Banana), l'`img`
   se retire tout seul via onerror et le décor reste : la page est belle AVANT
   même que les photos existent, et s'enrichit quand elles arrivent.

   Markup attendu :
     <figure class="shot shot--sq" data-ph="Nous-Nous">
       <img src="img/nous-nous.jpg" alt="…" loading="lazy"
            onerror="this.closest('.shot').classList.add('shot--empty');this.remove()">
     </figure>
   ------------------------------------------------------------------------ */
.shot{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r-2); background:var(--surface-2);
  isolation:isolate;
}
.shot--sq{aspect-ratio:1/1}
.shot--4x3{aspect-ratio:4/3}
.shot--16x9{aspect-ratio:16/9}
.shot--3x4{aspect-ratio:3/4}
.shot > img{width:100%;height:100%;object-fit:cover;display:block}

/* décor de repli : dégradé « coucher de soleil » tamisé + grain + monogramme */
.shot::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 22% 12%, color-mix(in srgb, var(--gold) 34%, transparent) 0%, transparent 58%),
    radial-gradient(110% 80% at 82% 88%, color-mix(in srgb, var(--wine) 40%, transparent) 0%, transparent 62%),
    linear-gradient(150deg, var(--surface-2) 0%, var(--surface) 100%);
}
/* le libellé du plat, en filigrane, tant qu'il n'y a pas d'image */
.shot::after{
  content:attr(data-ph); position:absolute; inset:0; z-index:1;
  display:grid; place-content:center; text-align:center; padding:12% 14%;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(.72rem,2.1cqw,1rem); letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--fg) 42%, transparent);
  text-shadow:0 1px 0 color-mix(in srgb, var(--bg) 55%, transparent);
}
/* dès qu'une image est chargée elle passe au-dessus du décor */
.shot > img{position:relative;z-index:2}
/* état explicite quand le fichier manque (posé par onerror) */
.shot--empty::after{opacity:1}

/* variante « photo indisponible mais volontaire » : pas de filigrane */
.shot--plain::after{content:''}

/* ==================================================== composants communs */

/* — pastille / badge — */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb, var(--gold) 16%, transparent);
  color:var(--gold);border:1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  white-space:nowrap;
}
.badge--wine{background:color-mix(in srgb, var(--wine-hi) 16%, transparent);color:var(--wine-hi);
  border-color:color-mix(in srgb, var(--wine-hi) 34%, transparent)}
.badge--veg{background:color-mix(in srgb, var(--ok) 15%, transparent);color:var(--ok);
  border-color:color-mix(in srgb, var(--ok) 32%, transparent)}
.badge--neutral{background:var(--surface-2);color:var(--fg-2);border-color:var(--line)}

/* — allergène : la lettre est décorative, le sens est dans aria-label — */
.allergen{
  display:inline-grid;place-content:center;
  min-width:24px;height:24px;padding:0 6px;border-radius:7px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:.7rem;font-weight:700;color:var(--fg-2);
}

/* — bouton — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:600;font-size:.94rem;cursor:pointer;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
             background var(--t) var(--ease), border-color var(--t) var(--ease);
  background:var(--surface-2);color:var(--fg);border-color:var(--line);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--gold{background:var(--g-gold);color:#1B1305;border-color:transparent;box-shadow:var(--sh-1);font-weight:700}
.btn--gold:hover{box-shadow:var(--sh-2)}
.btn--wine{background:var(--wine);color:#fff;border-color:transparent}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--lg{padding:15px 28px;font-size:1rem}
.btn--sm{padding:8px 14px;font-size:.85rem}
.btn--icon{padding:10px;border-radius:50%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* — carte — */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);box-shadow:var(--sh-1);overflow:hidden;
}

/* — prix : chiffres tabulaires, jamais de saut de ligne — */
.price{
  font-family:var(--f-num);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;white-space:nowrap;color:var(--fg);
}
.price small{font-size:.66em;font-weight:700;color:var(--fg-3);margin-left:3px}

/* — filet pointillé entre nom et prix (carte imprimée) — */
.leader{flex:1;min-width:14px;height:1px;align-self:flex-end;margin-bottom:.38em;
  background-image:radial-gradient(circle, var(--fg-3) .8px, transparent .9px);
  background-size:5px 2px;background-repeat:repeat-x;background-position:0 100%;opacity:.5}

/* — barre de contenu défilable horizontalement (jamais le body) — */
.scroll-x{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll-x::-webkit-scrollbar{display:none}

/* — cadre téléphone pour les maquettes de présentation — */
.phone{
  width:390px;max-width:100%;aspect-ratio:390/844;
  border-radius:46px;padding:11px;background:#0A0C0E;
  box-shadow:var(--sh-3), inset 0 0 0 1.5px rgba(255,255,255,.1);
  position:relative;flex:none;
}
.phone__screen{
  width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:var(--bg);position:relative;
}
.phone__notch{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:96px;height:26px;border-radius:var(--r-pill);background:#0A0C0E;z-index:40;
}

/* ============================================================ animations */
@keyframes ds-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ds-fade{from{opacity:0}to{opacity:1}}
@keyframes ds-pop{0%{transform:scale(.94);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
@keyframes ds-shimmer{from{background-position:-180% 0}to{background-position:180% 0}}
@keyframes ds-pulse{0%,100%{opacity:1}50%{opacity:.45}}

.reveal{animation:ds-fade-up var(--t-slow) var(--ease-out) both}

/* Respect strict de prefers-reduced-motion : on garde l'état final, on
   supprime le déplacement — jamais d'élément resté invisible. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{animation:none;opacity:1;transform:none}
}

/* ================================================================ impression
   La carte statique doit pouvoir sortir sur A4 chez l'imprimeur du coin. */
@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff;--fg:#000;--fg-2:#333;--fg-3:#555;
        --line:rgba(0,0,0,.2);--sh-1:none;--sh-2:none;--sh-3:none}
  body{background:#fff}
  .no-print{display:none !important}
  .shot::before{background:#EEE}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#555}
}