/* ============================================================
   Polices auto-hébergées (Chango pour les titres, Archivo pour le texte).
   Aucun appel à Google Fonts : ni dépendance CDN — souvent bloquée
   sur mutualisé OVH — ni transfert d'adresse IP vers Google.
   ============================================================ */

@font-face {
  font-family: "Chango";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/chango-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Chango";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/chango-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Hot or Not — feuille de style principale
   Palette et direction artistique issues du cahier des charges.
   ============================================================ */

:root {
  /* Palette de marque */
  --noir: #070606;
  --noir-2: #14110f;
  --noir-3: #211c19;
  --rouge: #cf2d23;
  --rouge-sombre: #8e1c15;
  --vert: #afe410;
  --vert-sombre: #6f9209;
  --blanc: #fdfdfc;
  --gris: #a5a899;
  --gris-clair: #e9e8e1;

  /* Accent piloté par la jauge de piment (voir hon.js) */
  --accent: var(--vert);
  --accent-contraste: var(--noir);

  /* Typographie */
  --display: "Chango", "Arial Black", system-ui, sans-serif;
  --texte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xxl: clamp(1.75rem, 6.4vw, 4.25rem);
  --t-xl: clamp(2.25rem, 7vw, 4.5rem);
  --t-l: clamp(1.6rem, 4vw, 2.6rem);
  --t-m: clamp(1.15rem, 2.2vw, 1.4rem);
  --t-base: clamp(1rem, 1.2vw, 1.0625rem);
  --t-s: 0.875rem;
  --t-xs: 0.75rem;

  /* Rythme */
  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(3.5rem, 9vw, 7rem);
  --max: 1240px;
  --radius: 18px;
  --radius-l: 32px;

  --ombre: 0 18px 40px -18px rgba(7, 6, 6, 0.55);
  --transition: 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--texte);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

/* Les classes de composants ont priorité sur la feuille du navigateur :
   on réaffirme [hidden] pour que le filtrage JS masque réellement. */
[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--vert);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert);
  color: var(--noir);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  z-index: 200;
}
.saut:focus { left: 0.5rem; top: 0.5rem; }

.invisible {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

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

/* ---------- Typographie ---------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
}

.sourcil {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rouge);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sourcil::before {
  content: "";
  width: 26px; height: 3px;
  background: currentColor;
  flex: none;
}

.titre-section {
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}

.chapo {
  font-size: var(--t-m);
  max-width: 46ch;
  margin: 0 0 2rem;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border: 3px solid var(--noir);
  border-radius: 999px;
  background: var(--vert);
  color: var(--noir);
  font-weight: 700;
  font-size: var(--t-s);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition);
  font-family: var(--texte);
}
.bouton:hover { transform: translate(-2px, -2px); }
.bouton:active { transform: translate(0, 0); }

.bouton--rouge { background: var(--rouge); color: var(--blanc); border-color: var(--blanc); }
.bouton--rouge:hover { background: var(--blanc); color: var(--rouge); border-color: var(--rouge); }
.bouton--fantome {
  background: transparent;
  color: var(--blanc);
  border-color: var(--blanc);
}
.bouton--fantome:hover { background: var(--blanc); color: var(--noir); }
.bouton--petit { padding: 0.6rem 1.1rem; font-size: var(--t-xs); border-width: 2px; }

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--noir);
  color: var(--blanc);
  border-bottom: 3px solid var(--noir);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  padding-block: 0.6rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--blanc);
}
.logo__mot {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
}
.logo__hot { color: var(--rouge); }
.logo__not { color: var(--vert); }
.logo__marque { width: 42px; height: 42px; flex: none; }
.logo__mot { letter-spacing: 0; }

.nav { display: none; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lien {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-s);
  letter-spacing: 0.03em;
  padding: 0.4rem 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav__lien:hover { border-bottom-color: var(--vert); }
.nav__lien[aria-current="page"] { border-bottom-color: var(--rouge); }

.langue {
  position: relative;
}
.langue__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 2px solid var(--gris);
  color: var(--blanc);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.langue__liste {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--noir-2);
  border: 2px solid var(--gris);
  border-radius: 12px;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  min-width: 170px;
  display: none;
}
.langue__liste[data-ouvert="true"] { display: block; }
.langue__liste a,
.langue__liste span {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: var(--t-s);
  text-decoration: none;
}
.langue__liste a:hover { background: var(--noir-3); }
.langue__liste span { color: var(--gris); }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 40px;
  background: transparent;
  border: 2px solid var(--gris);
  border-radius: 10px;
  cursor: pointer;
  padding: 0 9px;
}
.burger span {
  display: block;
  height: 3px;
  background: var(--blanc);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu-mobile {
  background: var(--noir-2);
  border-top: 2px solid var(--noir-3);
  display: none;
}
.menu-mobile[data-ouvert="true"] { display: block; }
.menu-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0.75rem var(--gouttiere) 1.5rem;
}
.menu-mobile li + li { border-top: 1px solid var(--noir-3); }
.menu-mobile a {
  display: block;
  padding: 0.95rem 0;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--blanc);
}
.menu-mobile a[aria-current="page"] { color: var(--vert); }

/* ---------- Sections ---------- */

.bloc { padding-block: var(--section); }
.bloc--noir { background: var(--noir); color: var(--blanc); }
.bloc--rouge { background: var(--rouge); color: var(--blanc); }
.bloc--clair { background: var(--blanc); color: var(--noir); }
.bloc--gris { background: var(--gris-clair); color: var(--noir); }

.bloc--noir .sourcil { color: var(--vert); }
.bloc--rouge .sourcil { color: var(--noir); }

/* ---------- Héros ---------- */

.heros {
  position: relative;
  background: var(--noir);
  color: var(--blanc);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* Les deux personnages de marque, en arrière-plan du héros.
   Ils réagissent à la souris et au défilement (voir hon.js) et leur
   présence suit la jauge : « Not » domine à froid, « Hot » à chaud. */
.heros__perso {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transition: opacity 400ms ease;
}
.heros__perso img { width: 100%; height: auto; display: block; }

/* Les deux se font face dans l'angle bas droit, là où le texte du héros
   ne va jamais : « Hot or Not », c'est un duel, autant le montrer.
   Celui qui mène passe devant, l'autre recule d'un cran. */
.heros__perso--not {
  right: 16%;
  bottom: -26%;
  width: min(28vw, 330px);
  z-index: -2;
  opacity: var(--poids-not, 0.34);
  filter: drop-shadow(0 22px 28px rgba(7, 6, 6, 0.6));
}
.heros__perso--hot {
  right: -6%;
  bottom: -20%;
  width: min(31vw, 370px);
  z-index: -2;
  opacity: var(--poids-hot, 0.16);
  filter: drop-shadow(0 22px 28px rgba(7, 6, 6, 0.6));
}

.heros__tache {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}
.heros__tache--rouge {
  width: 46vw; height: 46vw;
  background: var(--rouge);
  top: -12vw; right: -14vw;
}
.heros__tache--vert {
  width: 34vw; height: 34vw;
  background: var(--vert);
  bottom: -16vw; left: -12vw;
  opacity: 0.2;
}

.heros__titre {
  font-family: var(--display);
  font-size: var(--t-xxl);
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  max-width: 20ch;
}
.heros__titre span { display: block; }
.heros__titre .l2 { color: var(--rouge); }
.heros__titre .l3 { color: var(--accent); transition: color var(--transition); }

.heros__chapo {
  font-size: var(--t-m);
  max-width: 40ch;
  color: var(--gris-clair);
  margin: 0 0 2rem;
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

/* Signature : la jauge Hot or Not */
.jauge {
  border: 2px dashed rgba(253, 253, 252, 0.28);
  border-radius: var(--radius-l);
  padding: 1.25rem 1.4rem 1.5rem;
  max-width: 520px;
  background: rgba(20, 17, 15, 0.6);
  backdrop-filter: blur(6px);
}
.jauge__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}
.jauge__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}
.jauge__verdict {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--transition);
}
.jauge__piste {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.jauge input[type="range"] {
  flex: 1;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vert), #f2c200, var(--rouge));
  cursor: pointer;
  margin: 0;
}
.jauge input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blanc);
  border: 4px solid var(--accent);
  cursor: grab;
  transition: border-color var(--transition);
}
.jauge input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blanc);
  border: 4px solid var(--accent);
  cursor: grab;
}
.jauge__piments { display: flex; gap: 0.2rem; }
.jauge__piments svg { width: 22px; height: 22px; opacity: 0.25; transition: opacity var(--transition), transform var(--transition); }
.jauge__piments svg.actif { opacity: 1; transform: scale(1.1); }
.jauge__aide { font-size: var(--t-xs); color: var(--gris); margin: 0.75rem 0 0; }

/* ---------- Bandeau défilant ---------- */

.bandeau {
  background: var(--vert);
  color: var(--noir);
  border-block: 3px solid var(--noir);
  overflow: hidden;
  padding-block: 0.7rem;
}
.bandeau__piste {
  display: flex;
  width: max-content;
  animation: defile 38s linear infinite;
}
.bandeau__texte {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 2rem;
  letter-spacing: 0.02em;
}
@keyframes defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Anatomie du taco ---------- */

.taco { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.taco__visuel { position: relative; }
.taco__svg { width: 100%; height: auto; }
.taco__note {
  font-family: var(--display);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--rouge);
  margin-top: 1.25rem;
  transform: rotate(-1.5deg);
}
.taco__couches { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.taco__couche {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid rgba(7, 6, 6, 0.12);
}
.taco__pastille {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--vert);
  font-family: var(--display);
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  flex: none;
}
.taco__nom { font-weight: 700; display: block; }
.taco__detail { color: #4d4844; font-size: var(--t-s); }

/* ---------- Grille de plats ---------- */

.plats {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.plat {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  color: var(--noir);
  border: 3px solid var(--noir);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.plat:hover { transform: translateY(-4px); box-shadow: var(--ombre); }

.plat__media {
  aspect-ratio: 4 / 3;
  background: var(--noir-2);
  display: grid;
  place-items: center;
  border-bottom: 3px solid var(--noir);
  position: relative;
  overflow: hidden;
}
.plat__media img { width: 100%; height: 100%; object-fit: cover; }
.plat__placeholder {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  color: var(--gris);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.plat__placeholder svg { width: 48px; height: 48px; opacity: 0.8; }

.plat__corps { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.plat__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.plat__nom { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; margin: 0; line-height: 1.05; }
.plat__prix { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plat__desc { margin: 0; font-size: var(--t-s); color: #4d4844; }
.plat__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.etiquette {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 2px solid currentColor;
}
.etiquette--vegetarien { color: var(--vert-sombre); }
.etiquette--vegan { color: var(--vert-sombre); }
.etiquette--sans-gluten { color: #8a6b12; }

.piment { display: inline-flex; gap: 2px; align-items: center; }
.piment svg { width: 16px; height: 16px; }
.piment__off { opacity: 0.2; }

.plat__details { border-top: 2px solid rgba(7, 6, 6, 0.1); padding-top: 0.6rem; font-size: var(--t-xs); }
.plat__details summary { cursor: pointer; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.plat__details p { margin: 0.5rem 0 0; color: #4d4844; }

/* ---------- Carte : filtres et familles ---------- */

.filtres {
  position: sticky;
  top: 68px;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 3px solid var(--noir);
  padding-block: 0.75rem;
}
.filtres__ligne { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.filtres__ligne::-webkit-scrollbar { height: 4px; }
.filtres__ligne::-webkit-scrollbar-thumb { background: var(--gris); border-radius: 4px; }
.filtres__ligne + .filtres__ligne { margin-top: 0.5rem; }

.puce {
  flex: none;
  border: 2px solid var(--noir);
  background: var(--blanc);
  color: var(--noir);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.puce[aria-pressed="true"],
.puce[aria-current="true"] { background: var(--noir); color: var(--vert); }
.puce--regime[aria-pressed="true"] { background: var(--vert); color: var(--noir); }
.puce--piment[aria-pressed="true"] { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

.compteur { font-size: var(--t-xs); color: #4d4844; margin: 0.75rem 0 0; }

.famille { padding-block: clamp(2rem, 5vw, 3.25rem); scroll-margin-top: 150px; }
.famille__entete { margin-bottom: 1.5rem; }
.famille__titre {
  font-family: var(--display);
  font-size: var(--t-l);
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}
.famille__note { margin: 0; color: #4d4844; max-width: 60ch; }
.famille[hidden] { display: none; }

.vide {
  border: 3px dashed var(--gris);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #4d4844;
}

/* ---------- Événements ---------- */

.events { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); list-style: none; padding: 0; margin: 0; }

.event {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--noir);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blanc);
  color: var(--noir);
}
.event__media { aspect-ratio: 16 / 9; background: var(--noir-2); display: grid; place-items: center; border-bottom: 3px solid var(--noir); }
.event__media img { width: 100%; height: 100%; object-fit: cover; }
.event__corps { padding: 1.15rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.event__date {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rouge);
}
.event__titre { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; margin: 0; line-height: 1.05; }
.event__lieu { font-size: var(--t-s); color: #4d4844; display: flex; align-items: center; gap: 0.35rem; }
.event__desc { margin: 0; font-size: var(--t-s); }
.event__pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

.statut {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.statut--a-venir { background: var(--vert); color: var(--noir); }
.statut--complet { background: var(--gris); color: var(--noir); }
.statut--annule { background: var(--noir); color: var(--blanc); }
.statut--termine { background: var(--gris-clair); color: #4d4844; }
.statut--fermeture { background: var(--rouge); color: var(--blanc); }

.dispos { display: grid; gap: 0.85rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.dispo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 1rem 1.15rem;
  border: 2px solid currentColor;
  border-radius: var(--radius);
}
.dispo__periode { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; }
.dispo__detail { font-size: var(--t-s); opacity: 0.85; }

/* ---------- Colonnes et infos pratiques ---------- */

.duo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.trio { display: grid; gap: 1.25rem; }

.carte-info {
  border: 3px solid currentColor;
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.carte-info__titre { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; margin: 0; }
.carte-info__valeur {
  font-size: var(--t-m);
  font-weight: 700;
  text-decoration: none;
  /* Une adresse e-mail longue ne doit pas élargir sa colonne. */
  overflow-wrap: anywhere;
}
.carte-info__note { font-size: var(--t-s); opacity: 0.8; margin: 0; }

.horaires { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horaires th { text-align: left; font-weight: 600; padding: 0.45rem 0; }
.horaires td { text-align: right; padding: 0.45rem 0; white-space: nowrap; }
.horaires tr + tr th,
.horaires tr + tr td { border-top: 1px solid rgba(253, 253, 252, 0.15); }
.horaires .aujourdhui th,
.horaires .aujourdhui td { color: var(--vert); font-weight: 700; }

.badge-ouvert {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--vert);
  color: var(--noir);
}
.badge-ouvert[data-ouvert="false"] { background: var(--noir-3); color: var(--gris); }
.badge-ouvert::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.plan {
  border: 3px solid var(--blanc);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--noir-2);
}
.plan__image { width: 100%; display: block; }
.plan__pied { padding: 1rem 1.15rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.plan__note { font-size: var(--t-xs); color: var(--gris); margin: 0; max-width: 42ch; }

/* ---------- Formulaire ---------- */

.formulaire { display: grid; gap: 1.1rem; max-width: 720px; }
.champ { display: flex; flex-direction: column; gap: 0.4rem; }
.champ__label { font-size: var(--t-s); font-weight: 700; letter-spacing: 0.04em; }
.champ__label .requis { color: var(--rouge); }
.champ__aide { font-size: var(--t-xs); color: #4d4844; }

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--noir);
  border-radius: 12px;
  background: var(--blanc);
  color: var(--noir);
  width: 100%;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:invalid[data-touche="true"],
.champ select:invalid[data-touche="true"],
.champ textarea:invalid[data-touche="true"] { border-color: var(--rouge); }

.champ__erreur { font-size: var(--t-xs); color: var(--rouge-sombre); font-weight: 700; min-height: 1em; }

.duo-champs { display: grid; gap: 1.1rem; }

.choix { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choix label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 2px solid var(--noir);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: var(--t-s);
  cursor: pointer;
}
.choix input { accent-color: var(--rouge); }

.consentement { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: var(--t-s); }
.consentement input { margin-top: 0.25rem; accent-color: var(--rouge); }

.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.message-formulaire {
  padding: 1rem 1.15rem;
  border-radius: 12px;
  font-weight: 600;
  border: 2px solid;
}
.message-formulaire--ok { background: #f2fbdd; border-color: var(--vert-sombre); color: #3d5205; }
.message-formulaire--ko { background: #fdeceb; border-color: var(--rouge); color: var(--rouge-sombre); }
.message-formulaire[hidden] { display: none; }

.rgpd { font-size: var(--t-xs); color: #4d4844; max-width: 60ch; }

/* ---------- Liste de prestations ---------- */

.prestations { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.prestations li {
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: var(--t-s);
  font-weight: 600;
}

/* ---------- Pied de page ---------- */

.pied {
  background: var(--noir);
  color: var(--gris-clair);
  padding-block: var(--section) 2rem;
}
.pied__grille { display: grid; gap: 2rem; }
.pied__titre {
  font-family: var(--display);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 0 0 0.9rem;
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--t-s); }
.pied__liste a { text-decoration: none; }
.pied__liste a:hover { color: var(--vert); text-decoration: underline; }
.pied__bas {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--noir-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--gris);
}

/* ---------- Barre d'actions mobile ---------- */

.barre-actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--noir);
  border-top: 3px solid var(--vert);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-actions a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.25rem;
  color: var(--blanc);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 58px;
}
.barre-actions a + a { border-left: 1px solid var(--noir-3); }
.barre-actions svg { width: 20px; height: 20px; }
.barre-actions a:active { background: var(--noir-2); }

body.a-barre { padding-bottom: 64px; }

/* ---------- Apparitions au défilement ---------- */

.apparait {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.apparait.visible { opacity: 1; transform: none; }

/* ---------- Points de rupture ---------- */

@media (min-width: 700px) {
  .duo { grid-template-columns: 1fr 1fr; align-items: start; }
  .duo-champs { grid-template-columns: 1fr 1fr; }
  .taco { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .pied__grille { grid-template-columns: repeat(2, 1fr); }
}

/* Trois colonnes seulement quand elles ont la place : à 768 px,
   une adresse e-mail ne tient pas dans un tiers de la largeur. */
@media (min-width: 900px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .nav { display: block; }
  .burger { display: none; }
  .menu-mobile { display: none !important; }
  .barre-actions { display: none; }
  body.a-barre { padding-bottom: 0; }
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .filtres { top: 74px; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .apparait { opacity: 1; transform: none; }
  .bandeau__piste { animation: none; }
  .heros__perso { transform: none !important; }
}

/* ---------- Impression ---------- */

@media print {
  .entete, .barre-actions, .filtres, .bandeau, .heros__fond, .pied { display: none !important; }
  body { background: #fff; color: #000; }
  .plat, .event { break-inside: avoid; border-width: 1px; }
}

/* ---------- Anatomie du taco : composition au défilement ---------- */

.taco__visuel .couche {
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transform-box: view-box;
  transform-origin: 50% 70%;
  transition: opacity 520ms ease, transform 620ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.taco__visuel.visible .couche { opacity: 1; transform: none; }
.taco__visuel.visible .couche-0 { transition-delay: 0ms; }
.taco__visuel.visible .couche-1 { transition-delay: 90ms; }
.taco__visuel.visible .couche-2 { transition-delay: 220ms; }
.taco__visuel.visible .couche-3 { transition-delay: 350ms; }
.taco__visuel.visible .couche-4 { transition-delay: 470ms; }
.taco__visuel.visible .couche-5 { transition-delay: 590ms; }
.taco__visuel.visible .couche-6 { transition-delay: 720ms; }

.taco__detail { display: block; }

@media (prefers-reduced-motion: reduce) {
  .taco__visuel .couche { opacity: 1; transform: none; }
}

/* ---------- Prose (pages légales) ---------- */

.enveloppe h2 {
  font-family: var(--display);
  font-size: 1.35rem;
  text-transform: uppercase;
  margin: 2.25rem 0 0.75rem;
  line-height: 1.1;
}
.enveloppe h2.titre-section,
.enveloppe h2.famille__titre,
.enveloppe h2.carte-info__titre { margin-top: 0; }
.enveloppe h2 + p { margin-top: 0; }

/* ---------- Extras et sous-groupes de la carte ---------- */

.plat__extras {
  margin: 0;
  font-size: var(--t-xs);
  color: #4d4844;
  border-top: 2px dotted rgba(7, 6, 6, 0.15);
  padding-top: 0.5rem;
}

.famille__groupe {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--noir);
}
.groupe:first-child .famille__groupe { margin-top: 0; }

/* ---------- Commander : sur place, à emporter, livraison ---------- */

.commandes {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.commande {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 3px solid var(--noir);
  border-radius: var(--radius);
  background: var(--blanc);
}
.commande__titre {
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 0;
}
.commande__texte { margin: 0; font-size: var(--t-s); color: #4d4844; flex: 1; }

/* Correction : sur une carte claire, le bouton fantôme doit être sombre,
   sinon il est blanc sur blanc et n'apparaît qu'au survol. */
.commande .bouton--fantome { color: var(--noir); border-color: var(--noir); }
.commande .bouton--fantome:hover { background: var(--noir); color: var(--blanc); }
.commande--phare .bouton--fantome { color: var(--blanc); border-color: var(--blanc); }
.commande--phare .bouton--fantome:hover { background: var(--blanc); color: var(--noir); }

/* L'option sur place est mise en avant : c'est là que la cuisine est à son meilleur. */
.commande--phare {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}
.commande--phare .commande__texte { color: var(--gris-clair); }

/* La livraison passe par un tiers : présente, mais visuellement en retrait. */
.commande--tierce {
  background: transparent;
  border-style: dashed;
  border-color: var(--gris);
}
.commande--tierce .commande__titre { color: #4d4844; }
.commande--tierce .bouton--fantome { color: var(--noir); border-color: var(--noir); }
.commande--tierce .bouton--fantome:hover { background: var(--noir); color: var(--blanc); }

@media (min-width: 760px) {
  .commandes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ---------- Lien de livraison ---------- */

.lien-uber {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--noir);
  color: var(--blanc);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-s);
  border: 3px solid var(--noir);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.lien-uber:hover { transform: translate(-2px, -2px); background: var(--noir-3); }
.lien-uber img { height: 22px; width: auto; display: block; }

/* ---------- Bandeau cookies ---------- */

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  background: var(--noir);
  color: var(--blanc);
  border-top: 3px solid var(--vert);
  padding: 1.25rem var(--gouttiere) calc(1.25rem + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 40px -25px rgba(7, 6, 6, 0.9);
}
.cookies[hidden] { display: none !important; }

.cookies__interieur {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: 1rem;
}
.cookies__titre {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  margin: 0;
}
.cookies__texte { margin: 0; font-size: var(--t-s); color: var(--gris-clair); max-width: 62ch; }
.cookies__texte a { color: var(--vert); }

.cookies__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Refuser doit être aussi accessible qu'accepter : même taille, même poids. */
.cookies__actions .bouton { flex: 1 1 auto; min-width: 150px; }

.cookies__details { display: grid; gap: 0.75rem; margin: 0; }
.cookies__details[hidden] { display: none !important; }

.cookie-categorie {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 0.85rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border: 2px solid var(--noir-3);
  border-radius: 12px;
}
.cookie-categorie h3 {
  font-size: var(--t-s);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cookie-categorie p { margin: 0; font-size: var(--t-xs); color: var(--gris); grid-column: 2; }
.cookie-categorie input { accent-color: var(--vert); width: 20px; height: 20px; margin-top: 2px; }
.cookie-categorie__fixe {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--vert);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Le bandeau ne doit pas masquer la barre d'actions mobile. */
body.cookies-ouvert .barre-actions { display: none; }

@media (min-width: 860px) {
  .cookies__interieur { grid-template-columns: 1fr auto; align-items: center; }
  .cookies__actions { justify-content: flex-end; }
  .cookies__actions .bouton { flex: 0 0 auto; }
  .cookies__details { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Photos d'ambiance ---------- */

.photo {
  margin: 0;
  border: 3px solid var(--noir);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.photo img { width: 100%; height: auto; display: block; }
.photo--cadre-clair { border-color: var(--blanc); }
.photo--collante { align-self: start; }

@media (min-width: 700px) {
  .photo--collante { position: sticky; top: 100px; }
}

/* ---------- Section sticker ---------- */

.sticker { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.sticker__visuel {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}
/* Le badge est posé sur le rouge de marque : on lui donne du relief sans cadre. */
.sticker__visuel img {
  width: min(320px, 70%);
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(7, 6, 6, 0.35));
  transform: rotate(-4deg);
  transition: transform var(--transition);
}
.sticker__visuel img:hover { transform: rotate(0deg) scale(1.03); }
.sticker__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; }
.sticker__note { font-size: var(--t-xs); opacity: 0.75; margin: 0; max-width: 48ch; }

@media (min-width: 760px) {
  .sticker { grid-template-columns: 0.85fr 1.15fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker__visuel img { transform: none; }
}

/* Entre 760 et 1023 px, la jauge occupe presque toute la largeur :
   on descend le duel pour qu'il passe dessous. */
@media (min-width: 760px) and (max-width: 1023px) {
  .heros__perso--not { right: 8%; bottom: -34%; width: 26vw; }
  .heros__perso--hot { right: -8%; bottom: -30%; width: 28vw; }
}

/* Sur mobile, le héros est déjà plein : on réserve une bande en bas
   plutôt que de faire passer les personnages derrière le titre. */
@media (max-width: 759px) {
  .heros { padding-bottom: 8.5rem; }
  .heros__perso--not {
    right: 34%; bottom: -6%; width: 34vw;
    opacity: calc(var(--poids-not, 0.34) * 1.35);
  }
  .heros__perso--hot {
    right: -6%; bottom: -8%; width: 36vw;
    opacity: calc(var(--poids-hot, 0.16) * 1.35);
  }
}

/* ---------- Photos qui s'alignent sur la colonne voisine ----------
   L'image est sortie du flux et recadrée par « cover » : la figure ne
   pèse plus que sa hauteur minimale dans le calcul de la ligne, donc
   c'est la colonne de texte qui fixe la hauteur, et les deux colonnes
   se terminent exactement au même niveau. */

/* La règle générale « .duo { align-items: start } » empêchait les colonnes
   de s'étirer : sans étirement, il n'y a rien à remplir. On la lève ici. */
.duo--aligne { align-items: stretch; }

.photo--remplit {
  position: relative;
  min-height: 200px;
  align-self: stretch;
}
.photo--remplit img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dans une colonne de texte, la figure occupe simplement ce qui reste. */
.colonne-photo { display: flex; flex-direction: column; }
.colonne-photo > .photo--remplit { flex: 1 1 0; margin-top: 1.5rem; }

@media (max-width: 699px) {
  .photo--remplit { min-height: 240px; }
}

/* Entre 700 et 900 px, la colonne de droite devient plus haute que le
   tableau des horaires : on rabaisse le minimum pour rester aligné. */
@media (min-width: 700px) and (max-width: 900px) {
  .colonne-photo > .photo--remplit { min-height: 170px; }
}

/* ---------- Confort tactile ----------
   Sur écran tactile, les cibles montent à 44 px : c'est la taille
   recommandée, et l'audit en relevait plusieurs sous 40. */

@media (pointer: coarse) {
  .puce { padding-block: 0.7rem; }
  .langue__bouton { padding: 0.6rem 1rem; }
  .langue__liste a,
  .langue__liste span { padding-block: 0.7rem; }

  .pied__bas a { display: inline-block; padding-block: 0.8rem; }
  .carte-info__valeur { display: inline-block; padding-block: 0.35rem; }
  .plat__details summary,
  .famille__form summary { padding-block: 0.75rem; }
  /* Liens dans une phrase : on les remonte à 44 px sans casser le texte. */
  .pied__liste a,
  .cookies__texte a { display: inline-block; padding-block: 0.6rem; }
  .cookies__actions .bouton { min-height: 44px; }
  .choix label,
  .consentement label { min-height: 44px; display: flex; align-items: center; }
}