/* =====================================================================
   O'FOODS — SYSTÈME DE DESIGN
   ---------------------------------------------------------------------
   Direction : street-food premium, nocturne, éditoriale.
   Fond charbon, un seul accent (le jaune de marque #F0B400 prélevé sur
   leurs propres affiches), une braise rouge en secondaire. Le luxe vient
   de la précision : peu d'éléments, beaucoup de soin.

   Signature visuelle, répétée partout :
     · le filet jaune qui se déroule sous chaque titre
     · le numéro de chapitre en contour, très grand
     · le grain fin sur les fonds
     · le halo chaud derrière chaque produit
   ===================================================================== */

/* ---------------------------------------------------------------- */
/*  1. JETONS                                                        */
/* ---------------------------------------------------------------- */
:root {
  /* — couleurs de rôle — */
  --fond:            #08070A;
  --fond-2:          #101014;
  --surface:         #16161B;
  --surface-haute:   #1E1E25;
  --bord:            rgba(255,255,255,.09);
  --bord-fort:       rgba(255,255,255,.18);

  --primaire:        #F0B400;   /* jaune de marque, mesuré 12:1 sur --fond */
  --primaire-clair:  #FFCE3D;
  --primaire-sombre: #B98A00;   /* jaune assombri, pour un texte blanc dessus */
  --secondaire:      #E8321E;   /* braise */
  --secondaire-clair:#FF5A3C;

  --texte:           #FFFFFF;
  --texte-2:         #B6B6BE;
  --texte-3:         #83838C;
  --texte-sur-primaire: #0A0A0C;

  --succes:          #3DD68C;
  --alerte:          #FFB020;
  --erreur:          #FF5A5A;

  --survol:          rgba(240,180,0,.12);
  --actif:           rgba(240,180,0,.22);

  /* — espace : échelle unique, jamais de valeur magique — */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --e9: 96px; --e10: 128px;

  /* — rayons — */
  --r-xs: 6px; --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;

  /* — élévation : rare, jamais décorative — */
  --ombre-1: 0 2px 8px rgba(0,0,0,.4);
  --ombre-2: 0 12px 34px -12px rgba(0,0,0,.75);
  --ombre-lueur: 0 10px 38px -12px rgba(240,180,0,.55);

  /* — mouvement : un langage unique, rapide et souple — */
  --t-rapide: 140ms;
  --t-normal: 260ms;
  --t-lent:   520ms;
  --e-sortie: cubic-bezier(.22,.8,.28,1);
  --e-douce:  cubic-bezier(.4,0,.2,1);
  --e-ressort: cubic-bezier(.22,1.2,.36,1);

  /* — plans — */
  --z-grain: 1;
  --z-entete: 60;
  --z-voile: 80;
  --z-panneau: 90;
  --z-toast: 100;

  /* — typographie — */
  --display: 'Anton', 'Arial Black', Impact, system-ui, sans-serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --tt-1: clamp(3rem, 9vw, 7.5rem);
  --tt-2: clamp(2.2rem, 5.2vw, 4.2rem);
  --tt-3: clamp(1.6rem, 3vw, 2.4rem);
  --tt-4: 1.25rem;
  --tc-grand: 1.125rem;
  --tc: 1rem;
  --tc-petit: .9rem;
  --tc-mini: .78rem;

  --largeur-max: 1280px;
  --gouttiere: clamp(18px, 4.5vw, 48px);
}

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- */
/*  2. REMISE À ZÉRO                                                 */
/* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* les marges par défaut de figure/blockquote/dl cassent les grilles,
   et les remises à zéro habituelles ne couvrent que p et les titres */
p, figure, blockquote, dl, dd, h1, h2, h3, h4, h5, ul, ol, fieldset, legend {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
fieldset { border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* une classe display bat l'attribut hidden de la feuille du navigateur */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte-2);
  font-family: var(--ui);
  font-size: var(--tc);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto est obligatoire dès qu'une image porte width/height en
   HTML : l'attribut height bat aspect-ratio */
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--primaire-clair); text-decoration: none; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  color: var(--texte);
  line-height: .95;
  letter-spacing: .004em;
  text-transform: uppercase;
}
h1 { font-size: var(--tt-1); }
h2 { font-size: var(--tt-2); }
h3 { font-size: var(--tt-3); line-height: 1.1; }

:focus-visible {
  outline: 3px solid var(--primaire-clair);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--primaire); color: var(--texte-sur-primaire); }

/* ---------------------------------------------------------------- */
/*  3. UTILITAIRES                                                   */
/* ---------------------------------------------------------------- */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.evitement {
  position: fixed; left: var(--e4); top: -120px; z-index: 200;
  background: var(--primaire); color: var(--texte-sur-primaire);
  padding: var(--e3) var(--e5); border-radius: var(--r-s);
  font-weight: 700; transition: top var(--t-rapide) var(--e-sortie);
}
.evitement:focus { top: var(--e4); }

.conteneur {
  width: 100%; max-width: var(--largeur-max);
  margin-inline: auto; padding-inline: var(--gouttiere);
}

.etiquette {
  font-size: var(--tc-mini); text-transform: uppercase;
  letter-spacing: .18em; font-weight: 700; color: var(--primaire);
}

/* grain : la texture qui empêche les aplats de paraître plats */
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  z-index: var(--z-grain); opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* halo chaud derrière un produit */
.halo { position: relative; }
.halo::before {
  content: ''; position: absolute; inset: -12% -8%;
  background: radial-gradient(48% 46% at 50% 46%, rgba(240,180,0,.26), transparent 70%);
  pointer-events: none; z-index: 0;
}
.halo > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- */
/*  4. TÊTE DE CHAPITRE — la signature du site                       */
/* ---------------------------------------------------------------- */
.chapitre { display: flex; align-items: flex-start; gap: var(--e5); margin-bottom: var(--e7); }
.chapitre-num {
  font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: .8; color: transparent;
  -webkit-text-stroke: 1.5px rgba(240,180,0,.5);
  flex: none; padding-top: .08em;
}
.chapitre-txt { min-width: 0; }
.chapitre h2 { margin-top: var(--e2); }

.filet {
  display: block; width: 84px; height: 5px; border-radius: 3px;
  margin-top: var(--e4); transform-origin: left;
  background: linear-gradient(90deg, var(--primaire), var(--secondaire));
}
.js .filet { transform: scaleX(0); transition: transform var(--t-lent) var(--e-sortie) 80ms; }
.js .vu .filet, .js .filet.vu { transform: scaleX(1); }

/* ---------------------------------------------------------------- */
/*  5. BOUTONS                                                       */
/* ---------------------------------------------------------------- */
.btn {
  --btn-fond: transparent;
  --btn-texte: var(--texte);
  --btn-bord: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  min-height: 48px; padding: var(--e3) var(--e5);
  border: 1px solid var(--btn-bord); border-radius: var(--r-pill);
  background: var(--btn-fond); color: var(--btn-texte);
  font-weight: 700; font-size: var(--tc); letter-spacing: .01em;
  cursor: pointer; text-align: center;
  transition: transform var(--t-rapide) var(--e-sortie),
              background-color var(--t-rapide) var(--e-douce),
              border-color var(--t-rapide) var(--e-douce),
              box-shadow var(--t-normal) var(--e-douce),
              opacity var(--t-rapide) linear;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .45; cursor: not-allowed; transform: none;
}

.btn--primaire {
  --btn-fond: var(--primaire);
  --btn-texte: var(--texte-sur-primaire);
  box-shadow: var(--ombre-lueur);
}
.btn--primaire:hover { --btn-fond: var(--primaire-clair); box-shadow: 0 16px 42px -12px rgba(240,180,0,.75); }

.btn--secondaire { --btn-bord: var(--bord-fort); }
.btn--secondaire:hover { --btn-bord: var(--primaire); --btn-texte: var(--primaire-clair); }

.btn--fantome { --btn-texte: var(--texte-2); padding-inline: var(--e3); }
.btn--fantome:hover { --btn-texte: var(--texte); background: var(--survol); }

.btn--destructif { --btn-texte: var(--erreur); --btn-bord: rgba(255,90,90,.3); }
.btn--destructif:hover { background: rgba(255,90,90,.12); }

.btn--icone {
  min-height: 46px; width: 46px; padding: 0; border-radius: var(--r-pill);
  --btn-bord: var(--bord);
}
.btn--icone:hover { --btn-bord: var(--primaire); background: var(--survol); }

.btn--large { width: 100%; }

/* état de chargement : le libellé reste lisible, un anneau tourne */
.btn[data-charge='1'] { pointer-events: none; color: transparent; }
.btn[data-charge='1']::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--btn-texte);
  animation: tourner .7s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- */
/*  6. PASTILLES                                                     */
/* ---------------------------------------------------------------- */
.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--tc-mini); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--bord);
  color: var(--texte-2); background: rgba(255,255,255,.04);
}
.pastille--or { color: var(--primaire); border-color: rgba(240,180,0,.4); background: rgba(240,180,0,.1); }
.pastille--feu { color: var(--secondaire-clair); border-color: rgba(232,50,30,.4); background: rgba(232,50,30,.1); }
.pastille--etat { text-transform: none; letter-spacing: 0; font-weight: 600; }
.pastille-point { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pastille--ouvert { color: var(--succes); border-color: rgba(61,214,140,.35); background: rgba(61,214,140,.1); }
.pastille--ferme  { color: var(--texte-3); }

/* ---------------------------------------------------------------- */
/*  7. CHAMPS DE FORMULAIRE                                          */
/* ---------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > label { font-size: var(--tc-petit); font-weight: 600; color: var(--texte-2); }
.champ .requis { color: var(--primaire); }
.champ input, .champ textarea, .champ select {
  width: 100%; min-height: 48px; padding: var(--e3) var(--e4);
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--r-s);
  transition: border-color var(--t-rapide) var(--e-douce),
              background-color var(--t-rapide) var(--e-douce);
}
.champ textarea { min-height: 128px; resize: vertical; padding-top: var(--e3); }
.champ input:hover, .champ textarea:hover { border-color: var(--bord-fort); }
.champ input:focus, .champ textarea:focus { border-color: var(--primaire); background: var(--surface-haute); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-3); }
.champ-erreur { font-size: var(--tc-petit); color: var(--erreur); display: flex; gap: 6px; align-items: center; }
.champ[data-invalide='1'] input, .champ[data-invalide='1'] textarea { border-color: var(--erreur); }

/* choix : radio et cases, dessinés, animés, accessibles au clavier */
.choix {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border: 1px solid var(--bord);
  border-radius: var(--r-s); cursor: pointer; background: var(--surface);
  transition: border-color var(--t-rapide) var(--e-douce),
              background-color var(--t-rapide) var(--e-douce);
}
.choix:hover { border-color: var(--bord-fort); background: var(--surface-haute); }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-marque {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--bord-fort); position: relative;
  transition: border-color var(--t-rapide) var(--e-douce);
}
.choix-marque::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--primaire); transform: scale(0);
  transition: transform var(--t-rapide) var(--e-ressort);
}
.choix input:checked ~ .choix-marque { border-color: var(--primaire); }
.choix input:checked ~ .choix-marque::after { transform: scale(1); }
.choix:has(input:checked) { border-color: var(--primaire); background: var(--actif); }
.choix input:focus-visible ~ .choix-marque { outline: 3px solid var(--primaire-clair); outline-offset: 3px; }
.choix-nom { flex: 1; color: var(--texte); font-weight: 600; }
.choix-prix { color: var(--texte-3); font-size: var(--tc-petit); }

/* ---------------------------------------------------------------- */
/*  8. VOILE, MODALE, PANNEAU                                        */
/* ---------------------------------------------------------------- */
.voile {
  position: fixed; inset: 0; z-index: var(--z-voile);
  background: rgba(4,4,6,.72); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--t-normal) var(--e-douce);
}
.voile[data-ouvert='1'] { opacity: 1; }

/* jamais de transition sur visibility : elle laisse l'élément dans
   l'ordre de tabulation pendant l'animation, et le focus atterrit
   derrière un panneau fermé */
.modale {
  position: fixed; z-index: var(--z-panneau);
  background: var(--fond-2); border: 1px solid var(--bord);
  display: flex; flex-direction: column;
  box-shadow: var(--ombre-2);
}
.modale:focus { outline: none; }

/* bureau : fenêtre centrée */
@media (min-width: 761px) {
  .modale {
    inset: auto; left: 50%; top: 50%;
    width: min(620px, 92vw); max-height: min(86vh, 820px);
    border-radius: var(--r-l);
    transform: translate(-50%, -48%) scale(.96);
    opacity: 0;
    transition: transform var(--t-normal) var(--e-sortie),
                opacity var(--t-normal) var(--e-douce);
  }
  .modale[data-ouvert='1'] { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* mobile : feuille qui monte du bas */
@media (max-width: 760px) {
  .modale {
    left: 0; right: 0; bottom: 0; top: auto;
    max-height: 90dvh;
    border-radius: var(--r-l) var(--r-l) 0 0;
    transform: translateY(100%);
    transition: transform var(--t-normal) var(--e-sortie);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modale[data-ouvert='1'] { transform: translateY(0); }
  .modale-poignee {
    width: 44px; height: 4px; border-radius: 2px; flex: none;
    background: var(--bord-fort); margin: var(--e3) auto var(--e1);
  }
}
@media (min-width: 761px) { .modale-poignee { display: none; } }

.modale-tete {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e5) var(--e5) var(--e4);
  border-bottom: 1px solid var(--bord); flex: none;
}
.modale-tete h2, .modale-tete h3 { flex: 1; min-width: 0; }
.modale-corps { padding: var(--e5); overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.modale-pied {
  padding: var(--e4) var(--e5) var(--e5);
  border-top: 1px solid var(--bord); flex: none;
  background: var(--fond-2);
}

/* panneau latéral (le panier) */
.panneau {
  position: fixed; z-index: var(--z-panneau); top: 0; bottom: 0; right: 0;
  width: min(430px, 100vw);
  background: var(--fond-2); border-left: 1px solid var(--bord);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-normal) var(--e-sortie);
  box-shadow: var(--ombre-2);
}
.panneau[data-ouvert='1'] { transform: translateX(0); }

/* ---------------------------------------------------------------- */
/*  9. TOASTS                                                        */
/* ---------------------------------------------------------------- */
.toasts {
  position: fixed; z-index: var(--z-toast);
  right: var(--e4); bottom: var(--e4);
  display: flex; flex-direction: column; gap: var(--e2);
  pointer-events: none;
}
@media (max-width: 760px) {
  .toasts { left: var(--e4); right: var(--e4); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.toast {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--surface-haute); border: 1px solid var(--bord-fort);
  border-radius: var(--r-s); box-shadow: var(--ombre-2);
  color: var(--texte); font-weight: 600; font-size: var(--tc-petit);
  pointer-events: auto;
  animation: toast-entre var(--t-normal) var(--e-sortie) both;
}
.toast[data-sort='1'] { animation: toast-sort var(--t-rapide) var(--e-douce) both; }
.toast-icone { color: var(--primaire); flex: none; }
@keyframes toast-entre { from { transform: translateY(12px) scale(.97); opacity: 0; } }
@keyframes toast-sort  { to   { transform: translateY(6px); opacity: 0; } }

/* ---------------------------------------------------------------- */
/*  10. SQUELETTES ET ÉTATS VIDES                                    */
/* ---------------------------------------------------------------- */
.squelette {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-haute) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: squelette 1.3s ease-in-out infinite;
  border-radius: var(--r-s);
}
@keyframes squelette { to { background-position: -135% 0; } }

.etat-vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--e4); padding: var(--e8) var(--e5);
}
.etat-vide-dessin { font-size: 3rem; line-height: 1; filter: grayscale(.2); }
.etat-vide p { color: var(--texte-2); max-width: 30ch; }

/* ---------------------------------------------------------------- */
/*  11. BANDEAU DÉFILANT                                             */
/* ---------------------------------------------------------------- */
.ruban {
  overflow: hidden; border-block: 1px solid rgba(240,180,0,.2);
  background: linear-gradient(90deg, #14110A, #201803 55%, #14110A);
  padding-block: var(--e3);
}
.ruban-defile { display: flex; width: max-content; }
@keyframes ruban-glisse { to { transform: translateX(-50%); } }
@keyframes ruban-glisse-inv { from { transform: translateX(-50%); } }
.js .ruban-defile { animation: ruban-glisse 34s linear infinite; }
.js .ruban--inverse .ruban-defile { animation-name: ruban-glisse-inv; animation-duration: 42s; }
.ruban:hover .ruban-defile { animation-play-state: paused; }
.ruban-piste { display: flex; align-items: center; gap: var(--e5); padding-right: var(--e5); white-space: nowrap; }
.ruban-piste span {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.75rem); color: var(--texte);
}
.ruban-piste i { font-style: normal; color: var(--primaire); font-size: .8em; }
.ruban--sourd .ruban-piste span { color: var(--texte-3); }

/* ---------------------------------------------------------------- */
/*  12. APPARITION AU DÉFILEMENT                                     */
/*  L'état de départ n'existe que sous .js, donc jamais sans         */
/*  JavaScript. Le dévoilement est déclenché par l'observateur ET    */
/*  par un balayage au défilement, qui rattrape tout ce qu'un saut   */
/*  direct aurait franchi sans jamais croiser le viewport.           */
/* ---------------------------------------------------------------- */
.js [data-revele] {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t-lent) var(--e-douce),
              transform var(--t-lent) var(--e-sortie);
}
.js [data-revele].vu { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- */
/*  13. CURSEUR PERSONNALISÉ (pointeur fin uniquement)               */
/* ---------------------------------------------------------------- */
.curseur {
  position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--primaire);
  transform: translate(-50%, -50%);
  transition: width var(--t-rapide) var(--e-sortie),
              height var(--t-rapide) var(--e-sortie),
              background-color var(--t-rapide) var(--e-douce),
              opacity var(--t-rapide) linear;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-sur-primaire);
  opacity: 0;
}
.curseur[data-actif='1'] { opacity: 1; }
.curseur[data-libelle]:not([data-libelle='']) {
  width: 74px; height: 74px; background: var(--primaire); border-color: var(--primaire);
}
.curseur[data-libelle]:not([data-libelle=''])::after { content: attr(data-libelle); }

/* ---------------------------------------------------------------- */
/*  14. MOUVEMENT RÉDUIT                                             */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-revele] { opacity: 1; transform: none; }
  .js .filet { transform: scaleX(1); }
  .js .ruban-defile { animation: none; }
  .curseur { display: none !important; }
}