/* Strojna · feuille du site
   Points de rupture : mobile < 768 px · tablette 768–1199 px · desktop ≥ 1200 px (contenu max 1200 px). */

/* Polices ---------------------------------------------------------------- */

@font-face {
  font-family: "Kindergarten";
  src: url("fonts/kindergarten.woff2") format("woff2");
  font-display: swap;
}

/* Inter variable réduite aux graisses utilisées (400 à 700) et aux fonctions OpenType utiles (fonttools, hors dépôt). */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* Charte ----------------------------------------------------------------- */

:root {
  --rose: #DE415F;
  --creme: #F9F6F0;
  --brun: #320204;
  --rose-profond: #B8304C;
  --rose-pale: #F6D0D7;
  --filet: #EFC3CB;
  --brun-doux: #6B4A4E;
  --placeholder: #8E2238;
  --vert-ouvert: #2F8A55;

  --police-titre: "Kindergarten", "Inter", system-ui, sans-serif; /* Inter prend « » ° · →, absents de Kindergarten */
  --police-texte: "Inter", system-ui, sans-serif;
  --contour: 0 0 0 1px rgba(50, 2, 4, 0.08);
  --ombre-flottante: 0 10px 30px rgba(50, 2, 4, 0.18), 0 0 0 1px rgba(50, 2, 4, 0.06);
  --marge: 24px;
  --barre-mobile: 96px; /* hauteur de la barre d'actions mobile + son retrait */

  /* Forme galet (viewBox 0 0 345 323), utilisée en masque pour pouvoir l'étirer, la tourner et la colorer. */
  --galet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 345 323' preserveAspectRatio='none'%3E%3Cpath d='M62.7461 50.8076C124.841 14.6174 184.875 -2.62102 232.894 0.322266C256.935 1.79594 278.086 8.33971 294.921 20.2314C311.791 32.1475 324.138 49.3031 330.728 71.6309C343.586 115.204 349.409 164.917 340.48 208.139C331.524 251.495 307.638 288.535 261.098 305.785C149.364 347.199 63.857 304.832 24.2168 241.176C-15.2559 177.788 -9.22036 92.7571 62.7461 50.8076Z'/%3E%3C/svg%3E");
}

@media (max-width: 399px) {
  :root { --marge: 16px; } /* petits téléphones (360 à 399 px) */
}

@media (min-width: 768px) {
  :root { --marge: 32px; }
}

/* Reset léger ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

@media (max-width: 767px) {
  html { scroll-padding-bottom: var(--barre-mobile); }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--creme);
  color: var(--brun);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  body { font-size: 17px; line-height: 1.55; }
}

main { flex: 1; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
nav ul, ul[class], ol[class] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }

a { color: var(--rose-profond); text-underline-offset: 3px; }
a:hover { color: var(--brun); }

:focus-visible {
  outline: 3px solid var(--brun);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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

h1, h2, h3, .titre {
  font-family: var(--police-titre);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--rose);
  text-wrap: balance;
}

h1 { font-size: 44px; line-height: 1; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; }
p { text-wrap: pretty; }

@media (min-width: 768px) {
  h1 { font-size: clamp(48px, 6vw, 84px); }
}

/* Groupe de mots qui ne se sépare pas (titres). */
.insecable { white-space: nowrap; }

/* Texte entre crochets, à fournir : visible en prévisualisation. */
.a-fournir { color: var(--placeholder); }

.texte-doux { color: var(--brun-doux); }

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute;
  z-index: 50;
  top: 8px;
  left: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--brun);
  color: var(--creme);
  font-weight: 700;
  transform: translateY(-200%);
}

.lien-evitement:focus { transform: none; color: var(--creme); }

/* Mise en page ----------------------------------------------------------- */

.conteneur {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--marge);
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.bouton svg { flex: none; }

/* Plein rose : texte blanc en 19 px gras minimum (contraste AA grand texte). */
.bouton--plein { background: var(--rose); color: #FFFFFF; font-size: 19px; }
.bouton--plein:hover { background: var(--rose-profond); color: #FFFFFF; }

.bouton--contour { background: #FFFFFF; color: var(--brun); box-shadow: inset 0 0 0 2px var(--brun); }
.bouton--contour:hover { background: var(--rose-pale); color: var(--brun); }

.bouton--compact { padding: 11px 20px; }
.bouton--contour.bouton--compact { padding: 12px 18px; font-size: 16px; background: transparent; }
.bouton--contour.bouton--compact:hover { background: var(--rose-pale); }

.lien-souligne {
  color: var(--rose-profond);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Galet ------------------------------------------------------------------
   <span class="galet galet--prix">8 €</span>, variantes de pose (--90, --180, --270, --miroir,
   --miroir-v, --incline) et de couleur (--pale, --creme). Le fond s'étire à la taille du contenu. */

.galet {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.galet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--galet-fond, var(--rose));
  -webkit-mask: var(--galet) center / 100% 100% no-repeat;
  mask: var(--galet) center / 100% 100% no-repeat;
  transform: var(--galet-pose, none);
}

.galet--90 { --galet-pose: rotate(90deg); }
.galet--180 { --galet-pose: rotate(180deg); }
.galet--270 { --galet-pose: rotate(270deg); }
.galet--miroir { --galet-pose: scaleX(-1); }
.galet--miroir-v { --galet-pose: scaleY(-1); }
.galet--incline { --galet-pose: rotate(-14deg); }

.galet--pale { --galet-fond: var(--rose-pale); color: var(--brun); }
.galet--creme { --galet-fond: var(--creme); color: var(--brun); }

.galet--prix { padding: 14px 18px; font-size: 22px; font-weight: 700; white-space: nowrap; }

.galet--etape {
  width: 40px;
  height: 38px;
  font-family: var(--police-titre);
  font-size: 22px;
  line-height: 1;
}

/* Pastille d'état : <p class="pastille">…</p>, point vert ; pastille--fermee, point rose. */

.pastille {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(50, 2, 4, 0.12);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.pastille::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vert-ouvert);
}

.pastille--fermee::before { background: var(--rose-profond); }

@media (min-width: 1200px) {
  .pastille { padding: 9px 16px; font-size: 15px; }
}

/* Bandeau d'information : <div class="bandeau" role="status"><p>…</p></div> */

.bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--rose-pale);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.bandeau::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--rose-profond);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bandeau--arrondi { padding: 10px 14px; border-radius: 14px; }

@media (min-width: 768px) {
  .bandeau:not(.bandeau--arrondi) { justify-content: center; padding-inline: 24px; font-size: 15px; text-align: center; }
}

/* Cartes blanches et pastille « bientôt » -------------------------------- */

.carte-blanche {
  padding: 24px;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: var(--contour);
}

@media (min-width: 768px) {
  .carte-blanche { border-radius: 28px; }
}

.bientot {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rose-pale);
  color: var(--brun);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

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

.entete {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  min-height: 76px;
  margin-inline: auto;
  padding: 0 20px 0 24px;
}

.logo {
  margin-right: auto;
  padding-block: 6px;
  color: var(--rose);
  font-family: var(--police-titre);
  font-size: 36px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.logo:hover { color: var(--rose); }

.entete__menu {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(50, 2, 4, 0.1);
  color: var(--brun);
  cursor: pointer;
}

.entete__itineraire { display: none; }

/* Mobile et tablette : la navigation est un panneau ouvert par le bouton menu. */
.entete__panneau {
  display: none;
  position: absolute;
  top: calc(100% - 4px);
  left: 12px;
  right: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--ombre-flottante);
}

.entete.est-ouvert .entete__panneau { display: flex; }

.entete__nav ul { display: flex; flex-direction: column; }

.entete__nav a,
.entete__traiteur {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-inline: 12px;
  border-radius: 14px;
  color: var(--brun);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.entete__nav a:hover { background: var(--creme); color: var(--brun); }

.entete__nav a[aria-current="page"] {
  color: var(--rose-profond);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (min-width: 768px) {
  .entete { padding: 20px var(--marge); }
  .logo { font-size: 42px; }
  .entete__itineraire { display: inline-flex; }
  .entete__panneau { left: auto; right: var(--marge); width: 320px; }
}

@media (min-width: 1200px) {
  .entete { gap: 16px 10px; }
  .logo { margin-right: 22px; font-size: 46px; }
  .entete__menu { display: none; }

  .entete__panneau,
  .entete.est-ouvert .entete__panneau {
    position: static;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .entete__nav { margin-inline: auto; }
  .entete__nav ul { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 28px; }

  .entete__nav a,
  .entete__traiteur { min-height: 0; padding: 4px 0; font-size: 16px; }

  .entete__nav a:hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
}

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

.pied {
  margin-top: 72px;
  padding-bottom: calc(var(--barre-mobile) + env(safe-area-inset-bottom));
  border-radius: 40px 40px 0 0;
  background: var(--brun);
  color: var(--creme);
}

.pied a { color: var(--creme); }
.pied a:hover { color: var(--rose-pale); }
.pied :focus-visible { outline-color: var(--rose-pale); }

.pied__haut {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 44px;
}

.pied__marque {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--rose-pale);
  line-height: 1;
}

.pied__accroche { font-size: 11px; letter-spacing: 0.08em; }
.pied__logo { font-family: var(--police-titre); font-size: 44px; text-transform: uppercase; }
.pied__activites { font-size: 11px; letter-spacing: 0.06em; }

.pied__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  font-size: 15px;
  font-weight: 600;
}

.pied__nav li { display: flex; align-items: center; gap: 6px; min-height: 48px; }
.pied__nav a { display: inline-flex; align-items: center; min-height: 48px; }

.pied__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #E7D6D8;
  font-size: 15px;
  font-style: normal;
}

.pied__contact strong { color: var(--creme); }
.pied__horaires { display: flex; flex-direction: column; gap: 10px; }

.pied__bas {
  padding-block: 24px;
  color: #CDB8BB;
  font-size: 13px;
}

.pied__bas a { color: #CDB8BB; }

@media (max-width: 767px) {
  .pied__contact a, .pied__bas a { display: inline-flex; align-items: center; min-height: 48px; }
  .pied__contact a { align-self: flex-start; }
  .pied__bas { padding-block: 12px; }
}

@media (min-width: 768px) {
  .pied { border-radius: 56px 56px 0 0; }

  .pied__haut {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 48px 64px;
    padding-top: 72px;
    padding-bottom: 48px;
  }

  .pied__marque { flex: 1 1 300px; gap: 12px; }
  .pied__accroche { font-size: 12px; }
  .pied__logo { font-size: 60px; }
  .pied__activites { font-size: 11px; letter-spacing: 0.16em; }
  .pied__nav { flex: 1 1 300px; }
  .pied__nav ul { gap: 16px 32px; }
  .pied__nav li, .pied__nav a { min-height: 0; }
  .pied__contact { flex: 1 1 260px; }

  .pied__bas {
    padding-block: 24px 40px;
    border-top: 1px solid rgba(246, 208, 215, 0.18);
  }
}

@media (min-width: 1200px) {
  .pied { margin-top: 96px; }
  .pied__haut { gap: 48px 96px; padding-top: 88px; padding-bottom: 64px; }
}

/* Barre d'actions mobile -------------------------------------------------
   Fixée en bas sous 768 px. Le pied de page réserve sa hauteur (--barre-mobile) pour qu'elle ne masque rien.
   Sur la page carte (<body data-page="carte">), « La carte » laisse la place à « Accueil ». */

.barre-mobile {
  position: fixed;
  z-index: 30;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  height: 72px;
  padding: 8px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--ombre-flottante);
}

.barre-mobile ul {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 6px;
  height: 100%;
}

.barre-mobile a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  border-radius: 16px;
  color: var(--brun);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.barre-mobile a:hover { background: var(--creme); }

.barre-mobile .barre-mobile__itineraire {
  flex-direction: row;
  gap: 8px;
  background: var(--rose);
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 700;
}

.barre-mobile .barre-mobile__itineraire:hover { background: var(--rose-profond); }

.barre-mobile__accueil,
[data-page="carte"] .barre-mobile__carte { display: none; }
[data-page="carte"] .barre-mobile__accueil { display: block; }

@media (min-width: 768px) {
  :root { --barre-mobile: 0px; }
  .barre-mobile { display: none; }
}

/* Page carte ------------------------------------------------------------- */

.carte-tete { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.carte-tete__texte { display: flex; flex-direction: column; gap: 16px; }
.carte-tete__titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carte-tete__mini { width: min(110px, 25vw); height: 60px; object-fit: contain; }
.carte-tete__intro { max-width: 560px; font-size: 17px; }
.carte-tete__etats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.carte-tete__pastille:empty, .carte-tete__date:empty { display: none; }
.carte-tete__pastille, .carte-tete__date { display: flex; }
.carte-tete__illus { display: none; }

.carte-date {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(50, 2, 4, 0.1);
  color: var(--brun-doux);
  font-size: 13px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .carte-tete {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    padding-top: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--filet);
  }
  .carte-tete__texte { flex: 1 1 400px; gap: 14px; min-width: 0; }
  .carte-tete__mini { display: none; }
  .carte-tete__intro { font-size: 18px; }
  .carte-date { padding: 6px 14px; font-size: 14px; }

  .carte-tete__illus { display: block; position: relative; flex: 0 1 300px; height: 160px; }
  .carte-tete__illus img { position: absolute; object-fit: contain; }
  .carte-tete__sandwich { left: 0; top: 24px; width: 176px; height: 96px; }
  .carte-tete__softs { right: 56px; top: 8px; width: 96px; height: 96px; }
  .carte-tete__cookie { right: 0; bottom: 0; width: 64px; height: 64px; }
}

@media (min-width: 1200px) {
  .carte-tete { padding-top: 32px; padding-bottom: 40px; }
  .carte-tete__intro { font-size: 19px; }
  .carte-tete__illus { flex-basis: 380px; height: 200px; }
  .carte-tete__sandwich { top: 30px; width: 220px; height: 120px; }
  .carte-tete__softs { right: 70px; top: 10px; width: 120px; height: 120px; }
  .carte-tete__cookie { width: 80px; height: 80px; }
}

/* Sommaire : défilement horizontal sur mobile, colonne qui suit la lecture sur desktop. */

.sommaire {
  margin-inline: calc(-1 * var(--marge));
  padding: 24px var(--marge) 8px;
  overflow-x: auto;
}

.sommaire__liste { display: flex; gap: 8px; width: max-content; }

.sommaire__lien {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 16px;
  border: 2px solid var(--rose);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--rose-profond); /* texte de moins de 24 px : rose profond (AA) */
  font-family: var(--police-titre);
  font-size: 18px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.sommaire__lien:hover { border-color: var(--rose-profond); background: var(--rose-profond); color: #FFFFFF; }

.carte-categories { display: flex; flex-direction: column; gap: 24px; padding-top: 16px; }

@media (min-width: 1200px) {
  .carte-corps { display: flex; align-items: flex-start; gap: 32px 48px; padding-top: 40px; }

  .sommaire {
    position: sticky;
    top: 24px;
    flex: 0 0 180px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .sommaire__liste { flex-wrap: wrap; width: auto; }
  .sommaire__lien { padding: 6px 18px; }

  .carte-categories {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    min-width: 0;
    padding-top: 0;
  }
}

/* Catégorie : carte blanche, illustration, titre, galet de prix, plats */

.categorie { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px; border-radius: 28px; scroll-margin-top: 16px; }
/* Mobile : illustration au-dessus ; titre et galet sur la même ligne, même à 360 px. */
.categorie__tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; }
.categorie__tete img { grid-column: 1 / -1; width: 56px; height: 40px; object-fit: contain; }
/* Titre et galet sur une ligne : 24 px en rose vif ; sous 380 px, 22 px en rose profond (AA sous 24 px). */
.categorie h2 { flex: 1 1 0; font-size: 24px; line-height: 1.05; }

@media (max-width: 379px) {
  .categorie h2 { color: var(--rose-profond); font-size: 22px; }
}
.categorie__prix { flex: none; min-width: 52px; margin-left: auto; padding: 9px 10px; font-size: 19px; font-weight: 700; } /* blanc sur rose : 19 px gras (charte) */
.categorie__chapo { color: var(--brun-doux); font-size: 15px; }

.plat { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--rose-pale); break-inside: avoid; }
.plat__ligne { display: flex; align-items: baseline; gap: 8px; }
.plat__nom { color: var(--rose-profond); font-family: var(--police-titre); font-size: 19px; line-height: 1.2; text-transform: uppercase; }
.plat__points { flex: 1 0 16px; border-bottom: 2px dotted var(--filet); }
.plat__prix { flex: none; white-space: nowrap; }
.plat__prix--double { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; line-height: 1.35; }
.plat__description { color: var(--brun-doux); font-size: 14px; }

/* Longues listes (boissons, alcool) : lignes plus serrées. */
.categorie--longue .plat { padding: 10px 0; }
.categorie--longue .plat__nom { font-size: 17px; }

@media (min-width: 768px) {
  .categorie { gap: 12px; padding: 28px; border-radius: 32px; }
  .categorie__tete { display: flex; flex-wrap: wrap; gap: 14px; }
  .categorie__tete img { flex: none; width: 84px; height: 60px; }
  .categorie h2 { font-size: 34px; }
  .categorie__prix { min-width: 70px; padding: 14px 18px; font-size: 22px; }
  .categorie__chapo { font-size: 16px; }
  .plat { gap: 2px; }
  .plat__ligne { gap: 10px; }
  .plat__nom { font-size: 22px; }
  .plat__prix { font-size: 18px; }
  .plat__description { font-size: 15px; }
  .categorie--longue .plat__nom { font-size: 19px; }

  /* Les longues listes passent sur deux colonnes. */
  .categorie--longue .categorie__plats { columns: 2; column-gap: 40px; }
}

@media (min-width: 1200px) {
  .categorie--longue { grid-column: 1 / -1; }
  /* Deux colonnes : en-tête resserré pour que le galet tienne à côté du titre. */
  .categorie:not(.categorie--longue) .categorie__tete { gap: 12px; }
  .categorie:not(.categorie--longue) .categorie__tete img { width: 64px; height: 48px; }
  .categorie:not(.categorie--longue) h2 { font-size: 32px; }
}

/* Bas de page : bon à savoir et horaires */

.carte-pied { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }

.bon-a-savoir {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 24px;
  background: var(--rose-pale);
  font-size: 14px;
}

.bon-a-savoir h2 { color: var(--brun); font-size: 22px; line-height: 1.1; }

.carte-horaires { display: flex; flex-direction: column; gap: 18px; border-radius: 24px; }
.carte-horaires .info { gap: 12px; }

@media (min-width: 768px) {
  .carte-pied { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .bon-a-savoir { flex: 1.3 1 420px; gap: 8px; padding: 32px; border-radius: 32px; font-size: 16px; }
  .bon-a-savoir h2 { font-size: 28px; }
  .carte-horaires { flex: 1 1 320px; gap: 14px; padding: 32px; border-radius: 32px; }
  .carte-horaires .info { gap: 14px; }
  .carte-horaires .info__icone { width: 48px; height: 48px; border-radius: 16px; }
  .carte-horaires .info__detail { font-size: 15px; }
  .carte-horaires .bouton { align-self: flex-start; }
}

/* Accueil ---------------------------------------------------------------- */

main { overflow-x: clip; } /* le galet de « Notre histoire » déborde de l'écran sur mobile */

.seulement-desktop { display: none; }

@media (min-width: 1200px) {
  .seulement-desktop { display: inline; }
  .sauf-desktop { display: none; }
}

.section { display: flex; flex-direction: column; gap: 20px; margin-top: 72px; }
.section__tete { display: flex; flex-direction: column; gap: 6px; }

@media (min-width: 768px) {
  .section { margin-top: 80px; gap: 24px; }
}

@media (min-width: 1200px) {
  .section { margin-top: 96px; gap: 28px; }
  .section__tete { gap: 8px; max-width: 640px; }
  h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; }
}

/* Héros */

.heros { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.heros__texte { display: flex; flex-direction: column; gap: 16px; }
.heros__pastille:empty { display: none; }
.heros__pastille { display: flex; }
.heros__illu { align-self: center; width: 100%; max-width: 230px; margin: -4px 0; }
.heros__actions { display: none; }
.heros__intro { max-width: 540px; font-size: 17px; }

.titre-accueil { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.titre-accueil__principal { font-size: 40px; line-height: 1; }

.titre-accueil__lieu {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brun);
  font-size: 20px;
  line-height: 1.1;
}

.titre-accueil__lieu svg { flex: none; width: 1.1em; height: 1.1em; color: var(--rose); }

@media (min-width: 768px) {
  .heros {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 40px;
  }
  .heros__illu { max-width: none; margin: 0; }
  .heros__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
  .titre-accueil { gap: 12px; margin-top: 0; }
  .titre-accueil__principal { font-size: clamp(48px, 5vw, 70px); }
  .titre-accueil__lieu { font-size: clamp(23px, 2.1vw, 30px); }
  .heros__intro { font-size: 18px; }
}

@media (min-width: 1200px) {
  .heros { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; padding-top: 32px; padding-bottom: 48px; }
  .heros__texte { gap: 28px; }
  .heros__illu { max-width: 560px; }
  .titre-accueil { gap: 20px; }
  .heros__intro { font-size: 19px; }
  .bouton--grand { padding: 15px 26px; }
}

/* Cartes d'infos : une carte à deux lignes sur mobile, trois cartes ensuite. */

.infos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.infos > .info:first-child { margin-top: 0; }

.info { display: flex; align-items: flex-start; gap: 16px; }
.info--desktop, .info--tablette { display: none; }
.info__texte { display: flex; flex-direction: column; }
.info__detail { color: var(--brun-doux); font-size: 14px; }

.info__icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--rose-pale);
  color: var(--rose-profond);
}

@media (max-width: 767px) {
  .infos {
    width: auto;
    margin-inline: var(--marge);
    padding: 16px 18px;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--contour);
  }
}

@media (min-width: 768px) {
  .infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
  .infos .info {
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--contour);
  }
  .info--tablette { display: flex; }
  .infos .info__texte { gap: 10px; font-size: 16px; }
  .infos .info__icone { width: 44px; height: 44px; }
}

@media (min-width: 1200px) {
  .infos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .infos .info { flex-direction: row; gap: 16px; padding: 24px; border-radius: 28px; }
  .info--tablette { display: none; }
  .info--desktop { display: flex; }
  .infos .info__texte { gap: 2px; font-size: inherit; }
  .info__detail { font-size: 15px; }
  .info__icone { width: 48px; height: 48px; border-radius: 16px; }
}

/* Votre sandwich, à votre façon */

.etapes__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }

.etape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px 14px;
}

.etape .galet--etape { position: absolute; left: 10px; top: 10px; width: 40px; height: 38px; font-size: 24px; }
.etape img { width: auto; max-width: 130px; height: 64px; }
.etape__nom { color: var(--rose-profond); font-family: var(--police-titre); font-size: 17px; text-align: center; }

@media (min-width: 768px) {
  .etapes__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
  .etape { gap: 8px; padding: 26px 14px 18px; }
  .etape .galet--etape { left: 14px; top: 12px; width: 44px; height: 41px; font-size: 24px; }
  .etape img { max-width: 160px; height: 80px; }
  .etape__nom { font-size: 19px; }
}

@media (min-width: 1200px) {
  .etapes__liste { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .etape { gap: 10px; padding: 32px 20px 24px; }
  .etape .galet--etape { left: 18px; top: 16px; width: 50px; height: 47px; font-size: 27px; }
  .etape img { max-width: 190px; height: 96px; }
  .etape__nom { color: var(--rose); font-size: 24px; }
}

/* La carte du moment (aperçu) */

.apercu { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.apercu__tete { display: contents; }
.apercu h2 { grid-row: 1; grid-column: 1; }
.apercu__illu { grid-row: 1; grid-column: 2; width: 76px; height: 40px; object-fit: contain; }
.apercu__tete p { display: none; }
.apercu__liste { grid-column: 1 / -1; }
.apercu__bouton { grid-column: 1 / -1; order: 1; }

.apercu__liste { padding: 8px 18px; border-radius: 24px; }
.apercu__liste:empty { display: none; }

.apercu__ligne {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rose-pale);
  color: var(--brun);
  text-decoration: none;
}

.apercu__ligne:last-child { border-bottom: 0; }
.apercu__ligne:hover .apercu__nom { text-decoration: underline; }
.apercu__nom { color: var(--rose-profond); font-family: var(--police-titre); font-size: 21px; text-transform: uppercase; }
.apercu__points { flex: 1; border-bottom: 2px dotted var(--filet); }
.apercu__prix { font-size: 18px; white-space: nowrap; }
.apercu__detail { color: var(--brun-doux); font-size: 14px; }

@media (max-width: 767px) {
  /* Boissons : « Chaudes et softs · 2 – 6 € » sous le nom */
  .apercu__ligne--detail { flex-wrap: wrap; row-gap: 0; column-gap: 0; }
  .apercu__ligne--detail .apercu__nom { flex-basis: 100%; }
  .apercu__ligne--detail .apercu__points { display: none; }
  .apercu__ligne--detail .apercu__detail { display: inline-block; }
  .apercu__ligne--detail .apercu__detail::first-letter { text-transform: uppercase; }
  .apercu__ligne--detail .apercu__detail::after { content: "\00a0·\00a0"; }
  .apercu__ligne--detail .apercu__prix { color: var(--brun-doux); font-size: 14px; font-weight: 600; }
}

@media (min-width: 768px) {
  .apercu { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; }
  .apercu__tete { display: flex; flex: 1 1 340px; flex-direction: column; gap: 16px; min-width: 0; }
  .apercu__tete p { display: block; }
  .apercu__illu { width: 220px; height: 112px; }
  .apercu__bouton { align-self: flex-start; margin-top: 20px; }
  .apercu__liste { flex: 1.4 1 480px; min-width: 0; padding: 16px 36px; border-radius: 32px; }
  .apercu__ligne { gap: 14px; padding: 18px 0; }
  .apercu__nom { color: var(--rose); font-size: 28px; }
  .apercu__prix { font-size: 22px; }
  .apercu__detail { font-size: 15px; }
}

/* Nos producteurs : défilement horizontal sur mobile et tablette, grille sur desktop. */

.producteurs__tete { gap: 6px; max-width: 1200px; }

.producteurs__defile { overflow-x: auto; padding: 4px 0 8px var(--marge); }
.producteurs__liste { display: flex; gap: 16px; width: max-content; padding-right: var(--marge); }

.producteur {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 236px;
  height: 150px;
  padding: 18px;
  overflow: hidden;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: var(--contour);
  text-align: center;
}

.producteur img {
  position: absolute;
  right: -18px;
  top: -10px;
  width: 72px;
  height: 48px;
  object-fit: contain;
  transform: rotate(-12deg);
}

.producteur__produit { color: var(--rose); font-family: var(--police-titre); font-size: 24px; line-height: 1; }
.producteur__produit .a-fournir { color: var(--placeholder); }
.producteur__nom { font-size: 15px; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; }
.producteur__lieu { color: var(--brun-doux); font-size: 13px; line-height: 1.4; }

@media (min-width: 1200px) {
  .producteurs__defile { width: 100%; max-width: 1200px; margin-inline: auto; padding: 0 var(--marge); overflow: visible; }
  .producteurs__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); width: auto; padding: 0; }
  .producteur { width: auto; height: 160px; border-radius: 24px; }
  .producteur img { width: 76px; height: 50px; }
  .producteur__produit { font-size: 26px; }
}

/* Notre histoire et Et le week-end ? */

.histoire-weekend { gap: 0; }

.histoire {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-inline: calc(-1 * var(--marge));
  padding: 112px 56px 88px;
  font-size: 16px;
}

.histoire::before { left: -14%; right: -14%; }
.histoire h2 { color: var(--brun); }
.histoire__texte { display: flex; flex-direction: column; gap: 16px; }
.histoire__fin { font-weight: 600; }
.histoire__photo { position: relative; align-self: center; width: 100%; max-width: 240px; margin-top: 8px; aspect-ratio: 364 / 376; }

/* Photo dans le galet tourné à 140°, avec un liseré blanc : deux masques CSS (la photo reste une <img> différée).
   Repères du dessin d'origine : liseré dans viewBox -16 -15 364 376, photo dans -5 -4 342 354. */
.histoire__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -15 364 376' preserveAspectRatio='none'%3E%3Cpath transform='rotate(140 172.5 161.5)' stroke='black' stroke-width='22' stroke-linejoin='round' d='M62.7461 50.8076C124.841 14.6174 184.875 -2.62102 232.894 0.322266C256.935 1.79594 278.086 8.33971 294.921 20.2314C311.791 32.1475 324.138 49.3031 330.728 71.6309C343.586 115.204 349.409 164.917 340.48 208.139C331.524 251.495 307.638 288.535 261.098 305.785C149.364 347.199 63.857 304.832 24.2168 241.176C-15.2559 177.788 -9.22036 92.7571 62.7461 50.8076Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -15 364 376' preserveAspectRatio='none'%3E%3Cpath transform='rotate(140 172.5 161.5)' stroke='black' stroke-width='22' stroke-linejoin='round' d='M62.7461 50.8076C124.841 14.6174 184.875 -2.62102 232.894 0.322266C256.935 1.79594 278.086 8.33971 294.921 20.2314C311.791 32.1475 324.138 49.3031 330.728 71.6309C343.586 115.204 349.409 164.917 340.48 208.139C331.524 251.495 307.638 288.535 261.098 305.785C149.364 347.199 63.857 304.832 24.2168 241.176C-15.2559 177.788 -9.22036 92.7571 62.7461 50.8076Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.histoire__photo img {
  position: absolute;
  left: 3.022%;
  top: 2.926%;
  width: 93.956%;
  height: 94.149%;
  object-fit: cover;
  object-position: 50% 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -4 342 354' preserveAspectRatio='none'%3E%3Cpath transform='rotate(140 172.5 161.5)' d='M62.7461 50.8076C124.841 14.6174 184.875 -2.62102 232.894 0.322266C256.935 1.79594 278.086 8.33971 294.921 20.2314C311.791 32.1475 324.138 49.3031 330.728 71.6309C343.586 115.204 349.409 164.917 340.48 208.139C331.524 251.495 307.638 288.535 261.098 305.785C149.364 347.199 63.857 304.832 24.2168 241.176C-15.2559 177.788 -9.22036 92.7571 62.7461 50.8076Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -4 342 354' preserveAspectRatio='none'%3E%3Cpath transform='rotate(140 172.5 161.5)' d='M62.7461 50.8076C124.841 14.6174 184.875 -2.62102 232.894 0.322266C256.935 1.79594 278.086 8.33971 294.921 20.2314C311.791 32.1475 324.138 49.3031 330.728 71.6309C343.586 115.204 349.409 164.917 340.48 208.139C331.524 251.495 307.638 288.535 261.098 305.785C149.364 347.199 63.857 304.832 24.2168 241.176C-15.2559 177.788 -9.22036 92.7571 62.7461 50.8076Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.weekend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  margin: 72px calc(16px - var(--marge)) 0;
  padding: 28px 24px;
}

.weekend h2 { grid-row: 1; grid-column: 1; }
.weekend__illu { grid-row: 1; grid-column: 2; width: 56px; height: 78px; object-fit: contain; }
.weekend__texte { grid-column: 1 / -1; }
.weekend__texte strong { display: block; margin-top: 12px; }

@media (min-width: 768px) {
  .histoire {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: center;
    gap: 32px 56px;
    margin-inline: 0;
    padding: 8% 10% 7%;
    font-size: inherit;
  }
  .histoire::before { left: 0; right: 0; }
  .histoire__texte { gap: 14px; }
  .histoire__photo { justify-self: center; max-width: 360px; margin-top: 0; }

  .weekend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 64px 0 0;
    padding: 24px 40px;
    border-radius: 32px;
  }
  .weekend h2 { flex: none; font-size: clamp(30px, 3vw, 40px); }
  .weekend__texte { flex: 1 1 420px; min-width: 0; }
  .weekend__texte strong { display: inline; margin: 0; }
}

@media (min-width: 1200px) {
  .histoire-weekend { margin-top: 80px; }
  .histoire { padding: 8% 12% 7%; }
}

/* Sur Instagram : trois vignettes et bouton dessous sur mobile, quatre ensuite. */

.instagram__tete { display: contents; }
.instagram__suivre { order: 1; }
.instagram__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.instagram__post {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: var(--contour);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

.instagram__post:nth-child(4) { display: none; }

@media (min-width: 768px) {
  .instagram__tete { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: none; }
  .instagram__suivre { order: 0; }
  .instagram__posts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .instagram__post { border-radius: 24px; font-size: 14px; }
  .instagram__post:nth-child(4) { display: flex; }
}

/* Nous trouver */

.trouver { gap: 20px; padding-bottom: 0; }
.trouver__texte { display: contents; }
.trouver h2 { order: -1; }
.trouver__plan { overflow: hidden; border-radius: 26px; background: var(--creme); box-shadow: var(--contour); }
.trouver address { display: flex; flex-direction: column; font-style: normal; }
.trouver address .texte-doux { font-size: 15px; }
.trouver__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trouver__actions .bouton { padding-inline: 10px; }

@media (min-width: 768px) {
  .trouver { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
  .trouver__plan { flex: 1 1 520px; min-width: 0; border-radius: 36px; }
  .trouver__texte { display: flex; flex: 1 1 360px; flex-direction: column; gap: 16px; min-width: 0; }
  .trouver__actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .trouver__actions .bouton { padding-inline: 24px; }
}

@media (min-width: 1200px) {
  .trouver { margin-bottom: 32px; }
}

/* Mentions légales ------------------------------------------------------- */

.page-texte { padding-top: 24px; }
.page-texte > * { max-width: 760px; }

.page-texte h1 { margin-bottom: 32px; }
.page-texte h2 { margin: 40px 0 12px; font-size: clamp(26px, 3vw, 34px); }
.page-texte p + p { margin-top: 10px; }
.page-texte address { font-style: normal; }

/* Animations du héros et du plan -------------------------------------------
   Hors media query : l'image fixe, belle et complète (première image de la maquette).
   Dans (prefers-reduced-motion: no-preference) : tout ce qui bouge, filtre de tremblement compris.
   Seuls transform et opacity sont animés (plus le tracé des flèches). Les saccades sont des steps. */

/* ---- image fixe ---- */
.heros-illu, .plan-anime { position: relative; width: 100%; color: var(--rose, #DE415F); }
.heros-illu { aspect-ratio: 600 / 560; }
.plan-anime { aspect-ratio: 16 / 11; overflow: hidden; background: var(--creme, #F9F6F0); }
.heros-illu svg, .plan-anime svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plan-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.heros-galet { fill: var(--rose-pale, #F6D0D7); }
.plan-ombre { fill: var(--brun, #320204); opacity: .22; }
.plan-disque, .plan-texte { fill: currentColor; }
.plan-onde { opacity: 0; }

/* pivots : coordonnées du SVG (view-box), valeurs de la maquette */
.heros-tourne, .heros-penche, .plan-penche, .plan-pastille { transform-box: view-box; }
.plan-pastille { transform-origin: 0 0; }
.heros-tourne { transform-origin: 0 0; transform: rotate(var(--r1)); }
.heros-penche, .plan-penche { transform: rotate(var(--r1)); }
.heros-tourne--1 { --r1: 0deg; --r2: 25deg; --r3: -10deg; animation-duration: 1.2s; }
.heros-tourne--2 { --r1: 0deg; --r2: -30deg; --r3: 15deg; animation-duration: 1.4s; }
.heros-tourne--3 { --r1: 0deg; --r2: 20deg; --r3: -15deg; animation-duration: 1.1s; }

.heros-penche--sandwich { transform-origin: 300px 325px; --r1: -5deg; --r2: -2deg; --r3: -6deg; --r4: -3deg; animation-duration: .8s; }
.heros-penche--poulet   { transform-origin: 140px 125px; --r1: -8deg; --r2: -4deg; --r3: -9deg; animation-duration: .9s; }
.heros-penche--fromage  { transform-origin: 470px 130px; --r1: 10deg; --r2: 6deg; --r3: 12deg; animation-duration: 1s; }
.heros-penche--legumes  { transform-origin: 100px 450px; --r1: -6deg; --r2: -2deg; --r3: -7deg; animation-duration: .85s; }
.heros-penche--sauces   { transform-origin: 500px 440px; --r1: 8deg; --r2: 4deg; --r3: 10deg; animation-duration: .95s; }

.plan-penche--sandwich { transform-origin: 445px 210px; --r1: -4deg; --r2: 2deg; --r3: -1deg; --r4: 3deg; animation-duration: .9s; }
.plan-penche--salade   { transform-origin: 465px 927px; --r1: 3deg; --r2: -2deg; --r3: 1deg; --r4: -3deg; animation-duration: 1s; }
.plan-penche--texte    { transform-origin: 1280px 410px; --r1: -9deg; --r2: -6deg; --r3: -10deg; animation-duration: .75s; }

/* croix et traits : opacité de départ = première valeur */
.heros-croix, .heros-trait { opacity: var(--o1); }
.heros-croix--1 { --o1: 1; --o2: .15; --o3: 1; --o4: 1; animation-duration: .9s; }
.heros-croix--2 { --o1: .15; --o2: 1; --o3: 1; --o4: .15; animation-duration: 1.1s; }
.heros-croix--3 { --o1: 1; --o2: 1; --o3: .15; --o4: 1; animation-duration: 1s; }
.heros-trait--1 { --o1: 1; --o2: .25; --o3: 1; animation-duration: .7s; }
.heros-trait--2 { --o1: .25; --o2: 1; --o3: 1; animation-duration: .8s; }
.heros-trait--3 { --o1: 1; --o2: 1; --o3: .25; animation-duration: .75s; }
.heros-trait--4 { --o1: .25; --o2: 1; --o3: .25; animation-duration: .85s; }

/* flottement : amplitude par ingrédient */
.heros-flotte--sandwich { --dx: 0px; --dy: -12px; animation-duration: 1.8s; }
.heros-flotte--poulet   { --dx: 6px; --dy: -10px; animation-duration: 2.4s; }
.heros-flotte--fromage  { --dx: -6px; --dy: -12px; animation-duration: 2.7s; }
.heros-flotte--legumes  { --dx: 5px; --dy: -9px; animation-duration: 2.2s; }
.heros-flotte--sauces   { --dx: -5px; --dy: -11px; animation-duration: 2.5s; }
.plan-flotte--sandwich  { --dx: 0px; --dy: -14px; animation-duration: 2.2s; }
.plan-flotte--salade    { --dx: 0px; --dy: -12px; animation-duration: 2.6s; }

/* ---- mouvement ---- */
@media (prefers-reduced-motion: no-preference) {
  /* tremblement : la graine de feTurbulence change dans le SVG, le filtre ne s'applique qu'ici, une fois la page chargée
     (classe « tremble » posée par site.js), pour ne pas retarder le premier affichage. Sans JavaScript : pas de tremblement.
     Option si trop coûteux sur mobile : le retirer sous 600 px (voir fin de fichier). */
  .tremble .heros-tremble { filter: url(#heros-boil); }
  .tremble .plan-tremble { filter: url(#plan-boil); }

  /* saccades : chaque valeur tient son tour, puis saute à la suivante */
  .heros-tourne, .heros-penche, .plan-penche, .heros-croix, .heros-trait {
    animation-iteration-count: infinite; animation-timing-function: step-end;
  }
  .heros-tourne, .heros-penche--poulet, .heros-penche--fromage, .heros-penche--legumes,
  .heros-penche--sauces, .plan-penche--texte { animation-name: penche-3; }
  .heros-penche--sandwich, .plan-penche--sandwich, .plan-penche--salade { animation-name: penche-4; }
  .heros-croix--1, .heros-croix--2, .heros-croix--3 { animation-name: clignote-4; }
  .heros-trait { animation-name: clignote-3; }

  /* flottement doux */
  .heros-flotte, .plan-flotte { animation-name: flotte; animation-iteration-count: infinite; animation-timing-function: linear; }

  /* flèches : le trait se dessine, la pointe apparaît à la fin, puis tout repart (3,4 s) */
  .plan-trait { stroke-dasharray: 100 101; animation: 3.4s linear infinite plan-trait-1; }
  .plan-fleche--2 .plan-trait { animation-name: plan-trait-2; }
  .plan-pointe { animation: 3.4s linear infinite plan-pointe-1; }
  .plan-fleche--2 .plan-pointe { animation-name: plan-pointe-2; }

  /* pastille qui pulse, ondes qui s'étendent */
  .plan-pastille { animation: pulse 1.6s linear infinite; }
  .plan-onde { animation: onde 2s linear infinite backwards; }
  .plan-onde--2 { animation-delay: 1s; }

  @keyframes penche-3 { 0% { transform: rotate(var(--r1)); } 33.333% { transform: rotate(var(--r2)); } 66.667% { transform: rotate(var(--r3)); } }
  @keyframes penche-4 { 0% { transform: rotate(var(--r1)); } 25% { transform: rotate(var(--r2)); } 50% { transform: rotate(var(--r3)); } 75% { transform: rotate(var(--r4)); } }
  @keyframes clignote-3 { 0% { opacity: var(--o1); } 33.333% { opacity: var(--o2); } 66.667% { opacity: var(--o3); } }
  @keyframes clignote-4 { 0% { opacity: var(--o1); } 25% { opacity: var(--o2); } 50% { opacity: var(--o3); } 75% { opacity: var(--o4); } }
  @keyframes flotte { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx), var(--dy)); } }
  @keyframes plan-trait-1 { 0% { stroke-dashoffset: 100; } 35%, 100% { stroke-dashoffset: 0; } }
  @keyframes plan-trait-2 { 0%, 15% { stroke-dashoffset: 100; } 50%, 100% { stroke-dashoffset: 0; } }
  @keyframes plan-pointe-1 { 0%, 33% { opacity: 0; } 36%, 100% { opacity: 1; } }
  @keyframes plan-pointe-2 { 0%, 48% { opacity: 0; } 51%, 100% { opacity: 1; } }
  @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  @keyframes onde { from { transform: scale(1); opacity: .7; } to { transform: scale(2.381); opacity: 0; } }
}

/* Option si le tremblement pèse trop sur mobile (à décommenter après mesure) :
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  .heros-tremble, .plan-tremble { filter: none; }
} */