/* ============================================================
   LA CORBEILLE DORÉE — maquette de démonstration. « Ici, on dit chocolatine. »
   Un site de marque : la photo d'abord, une voix qui parle
   comme au comptoir, et des objets vrais (tirages scotchés,
   devanture peinte, carte postale). Pas de mécanisme, pas de
   simulation — du pain.
   Deux voix typographiques : Young Serif (la pâte),
   Spline Sans Mono (l'étiquette).
   ============================================================ */

:root {
  /* la palette sort de la chocolatine : crème, chocolat, beurre */
  --farine: #f4e5d4;
  --encre: #221610;
  --encre-70: rgba(34, 22, 16, 0.74);
  --encre-45: rgba(34, 22, 16, 0.5);
  --trait: rgba(34, 22, 16, 0.3);
  --trait-fin: rgba(34, 22, 16, 0.14);
  --rouge: #b8791e;
  --serif: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", sans-serif;
  --main: "Kalam", cursive;
  --pad: clamp(20px, 4vw, 60px);
  --maxw: 1240px;
  --ease: cubic-bezier(.22, .8, .3, 1);
  /* brutalisme chaud : l'ombre est de l'encre, franche, décalée. jamais de flou. */
  --ombre-dure: 6px 6px 0 var(--encre);
  --ombre-dure-clair: 6px 6px 0 var(--farine);
  --bord: 2px solid var(--encre);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* les cibles du menu ne passent pas sous l'en-tête fixe */
#carte, #midi, #avis, #infos, #gateaux { scroll-margin-top: clamp(80px, 12vh, 120px); }
body {
  margin: 0; overflow-x: clip;
  background: var(--farine);
  color: var(--encre);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* le grain du papier, au-dessus de tout */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: 0.05;
}
a { color: inherit; }
.w { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ============================================================
   SYSTÈME ÉDITORIAL — le fil rouge : chaque chapitre est numéroté,
   annoncé par un running head et un filet. C'est ça qui fait
   « imprimé, composé » plutôt que « généré ».
   ============================================================ */
.folio {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 clamp(40px, 6.5vh, 78px);
}
.folio__n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: clamp(38px, 4vw, 54px); padding: 4px 8px;
  font-family: var(--sans); font-weight: 700; line-height: 1;
  font-size: clamp(15px, 1.6vw, 20px); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--farine); background: var(--rouge);
  border: 2px solid var(--encre);
  box-shadow: 3px 3px 0 var(--encre);
}
/* sur fond encre, la chrome du numéro passe en crème pour rester visible */
.carte .folio__n, .nombres .folio__n {
  border-color: var(--farine);
  box-shadow: 3px 3px 0 var(--farine);
}
.folio__t {
  flex: none;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase;
}
.folio::after {
  content: ""; flex: 1; height: 2px; background: currentColor;
}
/* le folio qui flotte au-dessus de la scène chocolatine */
.folio--flottant {
  position: absolute; z-index: 2; margin: 0;
  top: clamp(88px, 14vh, 150px); left: var(--pad); right: var(--pad);
  color: var(--encre);
}

/* le repère fonctionnel : un mot en mono, minuscule, façon étiquette
   de rayon. Sert d'ancrage discret là où un titre ne suffit pas —
   pas un numéro de série. */
/* le repère : plus une étiquette « eyebrow » mais une annotation
   manuscrite, comme un mot tracé à la craie. Minuscule, penchée,
   posée dans la marge — la main de l'artisan, pas un composant. */
.repere {
  margin: 0 0 clamp(22px, 4vh, 46px);
  font-family: var(--main); font-weight: 700;
  font-size: clamp(18px, 2vw, 26px); line-height: 1;
  letter-spacing: 0; text-transform: none;
  color: var(--rouge);
  transform: rotate(-2deg); transform-origin: left center;
}
.carte .repere { color: #e8b46a; }

/* ============================================================
   TÊTE — le nom, et l'état réel de la boutique (calculé)
   ============================================================ */
.tete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--pad);
  pointer-events: none;
}
.tete__mark {
  pointer-events: auto;
  display: block;
}
.tete__logo {
  display: block;
  height: clamp(62px, 7vw, 88px);
  width: auto;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}
/* le menu ancré : accès direct sans casser le vitrine */
.tete__nav {
  pointer-events: auto;
  display: flex;
  gap: clamp(18px, 2.4vw, 38px);
}
.tete__nav a {
  position: relative;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f6efe0; text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  padding-bottom: 4px;
}
.tete__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: currentColor; transition: right 0.3s var(--ease);
}
.tete__nav a:hover::after { right: 0; }
@media (max-width: 760px) {
  .tete__nav { display: none; }
}
/* la pancarte de porte : un petit carton retourné selon l'heure,
   accroché de travers — l'objet, pas la pastille */
/* la pancarte de porte : un petit carton crème accroché de travers,
   avec son ombre franche — il se détache sur le sombre comme sur le
   clair. Une pastille pleine qui vit : verte quand c'est ouvert (elle
   respire), terracotta quand c'est fermé. */
.tete__etat {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 8px 12px 7px;
  color: var(--encre);
  background: var(--farine);
  border: var(--bord);
  box-shadow: var(--ombre-dure);
  transform: rotate(-1.5deg);
}
.tete__etat::before {
  content: ""; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: #6f9c4f;
  border: 1.5px solid var(--encre);
  animation: etatBraise 2.6s var(--ease) infinite;
}
/* fermé : la pastille passe en terracotta, immobile */
.tete__etat.is-ferme::before {
  background: #c25a3a;
  animation: none;
}
@keyframes etatBraise {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 156, 79, 0.55); }
  60% { box-shadow: 0 0 0 6px rgba(111, 156, 79, 0); }
}

/* ============================================================
   LA LEVÉE — les titres montent comme une pâte
   ============================================================ */
.rise { display: block; overflow: hidden; }
.rise i {
  display: block; font-style: inherit;
  transform: translateY(112%);
  animation: riseUp 0.9s var(--ease) 0.25s forwards;
}
.rise--2 i { animation-delay: 0.42s; }
@keyframes riseUp { to { transform: none; } }

/* ============================================================
   LE HERO — la photo, le titre qui parle, le macaron qui tourne
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* --hero-filtre : à ajuster quand l'image éditoriale Higgsfield arrive
     (elle sera déjà contrastée, on pourra alléger) */
  filter: var(--hero-filtre, contrast(1.04) brightness(0.88));
}
.hero__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 13, 8, 0.5), rgba(18, 13, 8, 0.05) 34%,
      rgba(18, 13, 8, 0.02) 55%, rgba(18, 13, 8, 0.68));
}
.hero__bas { position: relative; z-index: 2; padding-bottom: clamp(46px, 9vh, 110px); width: 100%; }
.hero__kicker {
  margin: 0 0 clamp(18px, 3vh, 30px);
  font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(246, 239, 224, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.hero__titre {
  margin: 0;
  font-family: var(--serif); font-weight: 750;
  font-size: clamp(48px, 9vw, 142px); line-height: 0.95; letter-spacing: -0.035em;
  color: #f6efe0;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35);
}
.hero__titre .rise--2 i { color: #e8b46a; }
.hero__sous {
  margin: 24px 0 0; max-width: 52ch;
  font-size: clamp(13px, 1.25vw, 15px); line-height: 1.75;
  color: rgba(246, 239, 224, 0.88);
}
/* le macaron « zéro congélo » : un autocollant collé sur la vitre */
.hero__macaron {
  position: absolute; z-index: 2;
  right: clamp(18px, 6vw, 90px); top: clamp(86px, 15vh, 160px);
  width: clamp(96px, 11vw, 150px); height: clamp(96px, 11vw, 150px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--rouge);
  border: 2px solid #f6efe0;
  box-shadow: 5px 5px 0 rgba(18, 13, 8, 0.55);
  transform: rotate(8deg);
}
.hero__macaron svg {
  position: absolute; inset: 6%;
  fill: none;
  transform-box: border-box; transform-origin: 50% 50%;
  animation: tourne 22s linear infinite;
}
.hero__macaron text {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.22em;
  fill: #f8e8d8;
}
.hero__macaron b {
  font-family: var(--serif); font-weight: 700; font-size: clamp(14px, 1.5vw, 19px);
  line-height: 1.08; text-align: center; color: #f8e8d8; letter-spacing: -0.01em;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .hero__macaron { top: auto; bottom: 46vh; } }

/* ============================================================
   LE CONSEIL D'AMIE — l'étiquette à la verticale sur la tranche,
   la phrase énorme poussée à droite. Un panneau, pas un paragraphe.
   ============================================================ */
.conseil {
  padding: clamp(70px, 13vh, 150px) 0;
  background: var(--encre); color: var(--farine);
}
.conseil .w { display: flex; align-items: stretch; gap: clamp(20px, 3vw, 50px); }
.conseil__sur {
  margin: 0; flex: none;
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: flex-end;
  font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(244, 229, 212, 0.55);
  border-left: 1px solid rgba(244, 229, 212, 0.3);
  padding-left: 14px;
}
.conseil__txt {
  margin: 0; margin-left: auto;
  max-width: 13ch; text-align: right;
  font-family: var(--serif); font-weight: 750;
  font-size: clamp(42px, 8vw, 128px); line-height: 0.94; letter-spacing: -0.035em;
  /* la consigne en creux : juste le contour, comme tracé à la farine */
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 229, 212, 0.85);
}
.conseil__txt em {
  font-style: normal;
  /* la chute, elle, est pleine : beurre */
  color: #e8b46a;
  -webkit-text-stroke: 0;
}
@media (max-width: 640px) {
  .conseil .w { flex-direction: column; }
  .conseil__sur { writing-mode: horizontal-tb; transform: none; border-left: 0; padding-left: 0; align-self: flex-start; }
  .conseil__txt { text-align: left; margin-left: 0; max-width: none; -webkit-text-stroke-width: 1px; }
}

/* ============================================================
   LE MANIFESTE — les lignes descendent en escalier,
   la chute part se ranger à droite au bout d'un filet.
   ============================================================ */
.credo { padding: clamp(90px, 16vh, 190px) 0; }
.credo__ligne {
  margin: 0 0 clamp(4px, 0.8vh, 10px);
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -0.03em;
}
/* chaque mot part fantôme et s'encre en séquence, comme si la
   phrase s'imprimait — le délai est posé par le JS */
.credo__ligne .mo {
  opacity: 0.1;
  transition: opacity 0.5s var(--ease);
  transition-delay: var(--d, 0s);
}
.credo__ligne.is-visible .mo { opacity: 1; }
.credo__ligne em { font-style: normal; color: var(--rouge); }
.credo__ligne--fin {
  margin-top: clamp(36px, 6vh, 60px); margin-left: 0;
  display: flex; align-items: center; gap: 22px;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--encre-70);
  transition-delay: 0.3s;
}
.credo__ligne--fin::before {
  content: ""; flex: 1; height: 1px;
  background: var(--trait);
}
.credo__ligne:nth-child(2) { margin-left: clamp(0px, 7vw, 104px); }
.credo__ligne:nth-child(3) { margin-left: clamp(0px, 12vw, 180px); }
@media (max-width: 640px) {
  .credo__ligne:nth-child(2), .credo__ligne:nth-child(3) { margin-left: 0; }
}

/* ============================================================
   LA CARTE — un index, sur fond encre. Numéro, nom énorme en
   capitales, note à droite. Des lignes franches, pas de pointillés.
   ============================================================ */
.carte {
  padding: clamp(80px, 13vh, 160px) 0 clamp(90px, 14vh, 170px);
  background: var(--encre);
  color: var(--farine);
}
.carte__tete { text-align: left; margin-bottom: clamp(30px, 5vh, 60px); }
.carte__sur {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: #e8b46a;
}
.carte__liste { list-style: none; margin: 0; padding: 0 0 0 clamp(0px, 4vw, 64px); counter-reset: plat; }
/* l'affiche : les noms empilés au centre, énormes ; la note vit
   dans la marge, à gauche puis à droite. Survoler un nom éteint
   les autres. */
.carte__ligne {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(6px, 1.2vh, 14px) 0;
  counter-increment: plat;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
/* le nom devient une entrée de catalogue : petit numéro tabulaire collé devant */
.carte__ligne b::before {
  content: counter(plat, decimal-leading-zero);
  font-family: var(--sans); font-weight: 700;
  font-size: 0.2em; letter-spacing: 0.08em; vertical-align: 0.85em;
  font-variant-numeric: tabular-nums;
  color: var(--rouge); margin-right: 0.5em;
}
.carte__ligne.is-visible { opacity: 1; transform: none; }
.carte__liste:hover .carte__ligne.is-visible { opacity: 0.18; }
.carte__liste .carte__ligne.is-visible:hover { opacity: 1; }
.carte__ligne b {
  grid-column: 2; grid-row: 1;
  text-align: center;
  font-family: var(--serif); font-weight: 750;
  font-size: clamp(34px, 6.4vw, 96px); line-height: 0.96; letter-spacing: -0.03em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.carte__ligne:hover b { color: #e8b46a; }
.carte__file { display: none; }
.carte__ligne i {
  grid-row: 1;
  font-style: normal; font-size: clamp(11px, 1.05vw, 13.5px); line-height: 1.5;
  color: rgba(244, 229, 212, 0.5);
  max-width: 24ch;
}
.carte__ligne:nth-child(odd) i { grid-column: 1; text-align: right; justify-self: end; }
.carte__ligne:nth-child(even) i { grid-column: 3; text-align: left; justify-self: start; }
@media (max-width: 760px) {
  .carte__ligne { grid-template-columns: 1fr; row-gap: 6px; }
  .carte__ligne b { grid-column: 1; text-align: left; }
  .carte__ligne:nth-child(odd) i, .carte__ligne:nth-child(even) i {
    grid-column: 1; grid-row: 2; text-align: left; justify-self: start; max-width: none;
  }
  .carte__liste:hover .carte__ligne.is-visible { opacity: 1; }
}

/* ============================================================
   LE COLLAGE — un bandeau photo bord à bord, trois plans,
   la légende posée dessus. Pas de cadre, pas de scotch.
   ============================================================ */
/* ============================================================
   LE COLLAGE — carrousel typographique. Une seule photo, montée
   comme un tirage encadré (bord + ombre dure). Les titres, en
   capitales évidées, la pilotent au survol. La typo est le moteur.
   ============================================================ */
.colle { padding: clamp(50px, 9vh, 110px) 0 clamp(90px, 15vh, 180px); }
.colle__zone {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.colle__zone.is-visible { opacity: 1; transform: none; }

/* l'écran : le tirage encadré, une pile d'images en fondu */
.colle__ecran {
  position: relative; overflow: hidden;
  min-height: clamp(360px, 58vh, 620px);
  border: var(--bord);
  box-shadow: var(--ombre-dure);
  background: var(--encre);
}
.colle__vue {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05);
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.55s var(--ease), transform 0.9s var(--ease);
}
.colle__vue.is-actif { opacity: 1; transform: none; }
.colle__ecran::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(18, 11, 5, 0.6));
  pointer-events: none;
}
.colle__leg {
  position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 16px;
  font-family: var(--main); font-size: clamp(15px, 1.5vw, 19px);
  color: #f4e5d4; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

/* le menu : les titres évidés, énormes ; l'actif se remplit */
.colle__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(6px, 1.4vh, 16px);
  border-top: 2px solid var(--trait);
}
.colle__menu li { border-bottom: 2px solid var(--trait); }
.colle__item {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 100%; padding: clamp(10px, 1.8vh, 20px) 0;
  display: flex; align-items: baseline; gap: clamp(12px, 1.4vw, 22px);
  text-align: left;
  transition: padding-left 0.3s var(--ease);
}
.colle__num {
  flex: none;
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; font-variant-numeric: tabular-nums;
  color: var(--rouge);
  padding-top: 0.4em;
}
.colle__mot {
  font-family: var(--serif); font-weight: 750;
  font-size: clamp(30px, 4.6vw, 68px); line-height: 0.95; letter-spacing: -0.03em;
  text-transform: uppercase;
  /* évidé par défaut : juste le contour */
  color: transparent;
  -webkit-text-stroke: 1.4px var(--encre);
  transition: -webkit-text-stroke-color 0.25s ease, color 0.25s ease;
}
/* actif ou survolé : le titre se remplit, la ligne se décale */
.colle__item.is-actif { padding-left: clamp(10px, 1.6vw, 26px); }
.colle__item.is-actif .colle__mot,
.colle__item:hover .colle__mot,
.colle__item:focus-visible .colle__mot {
  color: var(--encre);
  -webkit-text-stroke-color: transparent;
}
.colle__item:hover { padding-left: clamp(10px, 1.6vw, 26px); }

@media (max-width: 820px) {
  .colle__zone { grid-template-columns: 1fr; gap: clamp(20px, 4vh, 34px); }
  .colle__ecran { min-height: clamp(300px, 50vh, 460px); }
  .colle__mot { -webkit-text-stroke-width: 1px; }
}

/* ============================================================
   L'ÉCLAT — la chocolatine se démonte au scroll (canvas + frames)
   Le fond du canvas (#f4e5d4) est celui de la séquence : elle se
   fond dans la page, pas de cadre, pas de bord.
   ============================================================ */
.eclat {
  /* même crème que le site : la séquence fusionne avec la page */
  --fond-eclat: var(--farine);
  position: relative;
  height: 400vh; /* la course de scroll = la durée du démontage */
  background: var(--fond-eclat);
}
.eclat__scene {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.eclat__toile { display: block; width: 100%; height: 100%; }

/* le préchargement : tout doit être là avant de scrubber */
.eclat__chargement {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--fond-eclat);
  transition: opacity 0.5s var(--ease);
}
.eclat__chargement.is-parti { opacity: 0; pointer-events: none; }
.eclat__jauge {
  display: block; width: min(180px, 40vw); height: 2px;
  background: rgba(32, 27, 20, 0.14);
  overflow: hidden;
}
.eclat__jauge i {
  display: block; height: 100%; width: 0%;
  background: var(--rouge);
  transition: width 0.2s linear;
}

/* les phrases qui passent pendant le démontage */
.eclat__mots {
  position: absolute; z-index: 2;
  left: var(--pad); bottom: clamp(40px, 9vh, 96px);
  max-width: 30ch;
  pointer-events: none;
}
.eclat__mot {
  position: absolute; bottom: 0; left: 0; margin: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.eclat__mot.is-la { opacity: 1; transform: none; }
.eclat__mot b {
  display: block;
  font-family: var(--serif); font-weight: 750;
  font-size: clamp(34px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.035em;
  color: var(--encre);
}
.eclat__mot span {
  display: block; margin-top: 12px;
  font-size: clamp(13px, 1.3vw, 15.5px); line-height: 1.6;
  color: var(--encre-70);
}

.eclat__indice {
  position: absolute; z-index: 2;
  right: var(--pad); bottom: clamp(40px, 9vh, 96px); margin: 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--encre-45);
  transition: opacity 0.5s var(--ease);
}
.eclat__indice.is-parti { opacity: 0; }

/* mobile : le scrub frame par frame rame — une image, et on passe */
@media (max-width: 820px) {
  .eclat { height: auto; }
  .eclat__scene { position: relative; height: auto; padding: clamp(60px, 10vh, 90px) 0; }
  .eclat__toile { height: auto; aspect-ratio: 16 / 9; }
  .eclat__mots {
    position: relative; left: auto; bottom: auto;
    padding: clamp(24px, 5vh, 40px) var(--pad) 0;
    max-width: none;
  }
  .eclat__mot { position: relative; opacity: 1; transform: none; margin-bottom: 34px; }
  .eclat__indice { display: none; }
}

/* ============================================================
   LES NOMBRES — le cake design
   ============================================================ */
.nombres {
  padding: clamp(90px, 15vh, 180px) 0;
  background: linear-gradient(178deg, #2a1c12, #221610);
  color: #f4e5d4;
}
/* pas deux colonnes propres : un texte qui mène, et un mot du client
   griffonné plus bas, décroché sur la droite — comme une page de cahier
   d'atelier où l'on aurait recopié un avis à la main. */
.nombres__page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: start;
}
.nombres__lead { max-width: 56ch; padding-top: clamp(0px, 1vh, 12px); }
.nombres__titre {
  margin: 0 0 22px;
  font-family: var(--serif); font-weight: 680;
  font-size: clamp(32px, 5vw, 74px); line-height: 1.0; letter-spacing: -0.02em;
}
.nombres__p {
  margin: 0 0 34px; max-width: 52ch;
  font-size: 14px; line-height: 1.8; color: rgba(236, 229, 210, 0.72);
}
/* le téléphone, comme une note de comptoir : mention manuscrite, puis
   le numéro à l'encre, souligné à main levée. */
.nombres__appel { margin: 0; }
.nombres__tel-sur {
  display: block; margin-bottom: 2px;
  font-family: var(--main); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px); color: rgba(232, 180, 106, 0.78);
  transform: rotate(-1.5deg); transform-origin: left center;
}
.nombres__tel {
  display: inline-block; text-decoration: none;
  font-family: var(--serif); font-weight: 650; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.01em;
  color: #e8b46a;
  border-bottom: 2px solid rgba(232, 180, 106, 0.5); padding-bottom: 2px;
}
/* le mot du client : manuscrit, penché, décroché vers le bas, avec un
   guillemet géant en filigrane. Aucune bordure, aucune boîte. */
.nombres__note {
  position: relative; margin: clamp(40px, 11vh, 130px) 0 0;
  padding-left: clamp(28px, 3.2vw, 52px);
  transform: rotate(-2.4deg); transform-origin: left top;
  opacity: 0; transition: opacity 0.8s var(--ease);
}
.nombres__note.is-visible { opacity: 1; }
.nombres__note::before {
  content: "\201C"; position: absolute;
  left: -0.08em; top: -0.44em;
  font-family: var(--serif); font-weight: 750; line-height: 1;
  font-size: clamp(84px, 10vw, 156px);
  color: rgba(232, 180, 106, 0.28); pointer-events: none;
}
.nombres__note blockquote {
  margin: 0; position: relative;
  font-family: var(--main); font-weight: 400;
  font-size: clamp(21px, 2.5vw, 33px); line-height: 1.34;
  color: #f4e5d4;
}
.nombres__note figcaption {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--main); font-weight: 400;
  font-size: clamp(14px, 1.4vw, 17px); color: rgba(232, 180, 106, 0.82);
}
@media (max-width: 820px) {
  .nombres__page { grid-template-columns: 1fr; gap: clamp(30px, 6vh, 56px); }
  .nombres__note { margin-top: clamp(20px, 4vh, 40px); transform: rotate(-1.6deg); }
}

/* ============================================================
   LE MIDI — court, net
   ============================================================ */
/* ============================================================
   LE MIDI — split-screen, façon carte de resto. Menu structuré à
   filets fins à gauche, grande photo encadrée asymétrique à droite.
   ============================================================ */
.midi { padding: clamp(64px, 10vh, 120px) 0; }
.midi__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 78px);
  align-items: stretch;
}
.midi__titre {
  margin: 0 0 clamp(30px, 5vh, 54px);
  font-family: var(--serif); font-weight: 680;
  font-size: clamp(32px, 5vw, 68px); line-height: 0.98; letter-spacing: -0.02em;
}
.midi__menu {
  list-style: none; margin: 0; padding: 0;
  border-top: 2px solid var(--encre);
}
.midi__plat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 20px; row-gap: 8px;
  padding: clamp(16px, 2.6vh, 28px) 0;
  border-bottom: 1px solid var(--trait);
}
.midi__nom {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(21px, 2.8vw, 34px); line-height: 1.0; letter-spacing: -0.02em;
}
.midi__nom em { font-style: normal; color: var(--rouge); }
.midi__tag {
  justify-self: end;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--encre); background: transparent;
  border: 1.5px solid var(--encre); padding: 4px 9px;
  white-space: nowrap;
}
.midi__desc {
  grid-column: 1 / -1;
  margin: 0; max-width: 44ch;
  font-size: 13.5px; line-height: 1.65; color: var(--encre-70);
}
.midi__fin {
  margin: clamp(26px, 4vh, 40px) 0 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(16px, 1.7vw, 22px); line-height: 1.35; letter-spacing: -0.01em;
}
.midi__fin em { font-style: normal; color: var(--rouge); }

/* la photo : plein cadre, bord + ombre dure, un cachet posé dessus */
.midi__photo {
  position: relative; overflow: visible;
  min-height: clamp(320px, 52vh, 560px);
}
.midi__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  border: var(--bord); box-shadow: var(--ombre-dure);
  filter: contrast(1.05);
}
.midi__cachet {
  position: absolute; z-index: 2;
  left: clamp(-14px, -1.4vw, -10px); bottom: clamp(20px, 4vh, 40px);
  padding: 10px 14px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.25;
  text-align: center;
  color: var(--farine); background: var(--rouge);
  border: 2px solid var(--encre); box-shadow: var(--ombre-dure);
  transform: rotate(-4deg);
}
@media (max-width: 820px) {
  .midi__split { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
  .midi__photo { min-height: clamp(280px, 44vh, 400px); order: -1; }
}

/* ============================================================
   LES AVIS — une citation à la fois, énorme. Un compteur,
   deux flèches nues. Rien d'autre.
   ============================================================ */
.parole { padding: clamp(90px, 15vh, 180px) 0; }
.parole__tete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; margin-bottom: clamp(40px, 7vh, 80px);
}
.parole__sur {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--rouge);
}
.parole__compte {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--encre-45);
}
.parole__compte b { color: var(--encre); font-weight: 600; }
.parole__scene { min-height: clamp(200px, 34vh, 360px); }
.parole__mot { margin: 0; }
.parole__mot[hidden] { display: none; }
.parole__mot p {
  margin: 0; max-width: 18ch;
  font-family: var(--serif); font-weight: 750;
  font-size: clamp(34px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.035em;
}
.parole__mot em { font-style: normal; color: var(--rouge); }
.parole__mot cite {
  display: block; margin-top: clamp(18px, 3vh, 30px);
  font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--encre-45);
}
.parole__mot.is-actif p,
.parole__mot.is-actif cite {
  animation: paroleMonte 0.55s var(--ease) both;
}
.parole__mot.is-actif cite { animation-delay: 0.08s; }
@keyframes paroleMonte {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.parole__pied {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; margin-top: clamp(36px, 6vh, 70px);
}
.parole__fleches { display: flex; gap: clamp(22px, 3vw, 40px); }
.parole__fleches button {
  appearance: none; cursor: pointer;
  width: clamp(48px, 5vw, 62px); height: clamp(48px, 5vw, 62px);
  display: flex; align-items: center; justify-content: center;
  background: var(--farine); color: var(--encre);
  border: var(--bord); box-shadow: var(--ombre-dure);
  font-family: var(--sans); font-size: clamp(20px, 2vw, 26px); line-height: 1;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s ease, color 0.15s ease;
}
.parole__fleches button:hover { background: var(--rouge); color: var(--farine); }
/* l'appui : le bouton s'enfonce vers son ombre */
.parole__fleches button:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--encre); }
.parole__fin {
  margin: 0;
  font-size: clamp(13px, 1.3vw, 15.5px); line-height: 1.7;
  color: var(--encre-70);
  text-align: right;
}
.parole__fin a { color: var(--encre); font-weight: 600; }
@media (max-width: 700px) {
  .parole__pied { flex-direction: column; align-items: flex-start; }
  .parole__fin { text-align: left; }
}

/* ============================================================
   LA DEVANTURE — où, quand, comment commander
   ============================================================ */
.fin { padding: clamp(80px, 13vh, 160px) 0 0; }
.devanture {
  --encre: #2a2218;
  --encre-70: rgba(42, 34, 24, 0.72);
  --encre-45: rgba(42, 34, 24, 0.48);
  --trait-fin: rgba(42, 34, 24, 0.15);
  color: var(--encre);
  background: #faf3e2;
  border: 2px solid #2a1c13;
  box-shadow: 5px 5px 0 #2a1c13;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.devanture.is-visible { opacity: 1; transform: none; }
.devanture__enseigne {
  margin: 0; padding: 20px 20px 24px;
  background: #2a1c13;
  text-align: center;
  font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(24px, 3vw, 40px); line-height: 1.05;
  color: #e2c47e;
  box-shadow: inset 0 -8px 18px -10px rgba(0, 0, 0, 0.5);
}
.devanture__enseigne span {
  display: block; margin-top: 10px;
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(226, 196, 126, 0.75);
}
.infos__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 60px);
  padding: clamp(26px, 4vw, 48px) clamp(22px, 3.5vw, 44px) clamp(30px, 4vw, 52px);
}
@media (max-width: 820px) { .infos__grid { grid-template-columns: 1fr; } }
.infos__bloc h3 {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: #b8791e;
}
.infos__big { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.3; letter-spacing: -0.01em; }
.infos__small { margin: 0; font-size: 14px; line-height: 1.65; color: var(--encre-70); max-width: 34ch; }

.carte-post {
  position: relative; display: block; overflow: hidden;
  margin-top: 20px; height: clamp(200px, 26vw, 260px);
  text-decoration: none; color: #2a221a;
  border: 2px solid #2a1c13;
  box-shadow: 8px 8px 0 #2a1c13;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.carte-post:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #2a1c13; }
.carte-post:active { transform: translate(8px, 8px); box-shadow: 0 0 0 #2a1c13; }
/* pas de vraie carte (adresse fictive) : un fond façon plan dessiné */
.carte-post__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  background-color: #e4d2ac;
  background-image:
    repeating-linear-gradient(0deg, rgba(42, 28, 19, 0.16) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(42, 28, 19, 0.16) 0 1px, transparent 1px 34px);
  pointer-events: none;
}
.carte-post::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(168deg, rgba(34, 20, 8, 0.14), rgba(34, 20, 8, 0.32));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.carte-post__tampon {
  position: absolute; top: 14px; right: 14px;
  width: clamp(64px, 9vw, 84px); height: clamp(64px, 9vw, 84px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(243, 236, 221, 0.88);
  box-shadow: 0 4px 12px rgba(15, 9, 4, 0.35);
  transform: rotate(-8deg);
}
.carte-post__tampon svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #b8791e; stroke-width: 1.4; }
.carte-post__tampon circle { stroke-dasharray: 3 3; }
.carte-post__tampon text { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; fill: #b8791e; }
.carte-post__tampon b {
  position: relative; font-style: italic; font-weight: 500;
  font-size: 9.5px; color: #b8791e; text-align: center; line-height: 1.2;
  max-width: 74%;
}
.carte-post__go {
  position: absolute; left: 14px; bottom: 12px;
  padding: 7px 13px;
  background: rgba(243, 236, 221, 0.92); color: #221a12;
  font-style: italic; font-size: 11.5px;
  transform: rotate(-1deg);
  box-shadow: 0 4px 10px rgba(15, 9, 4, 0.3);
}
.infos__table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.infos__table td { padding: 9px 0; border-bottom: 1px solid var(--trait-fin); }
.infos__table td:last-child { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.infos__table tr:last-child td { border-bottom: none; }
.infos__off td { color: var(--encre-45); }
.infos__off td:last-child { font-family: var(--main); font-weight: 400; font-size: 14px; }
.infos__live {
  margin: 14px 0 0;
  font-style: italic; font-size: 13px; color: var(--encre-70);
}
.infos__live:empty { display: none; }
.infos__tel {
  display: inline-block; margin-top: 14px; text-decoration: none;
  font-family: var(--serif); font-weight: 650; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -0.01em;
  border-bottom: 2px solid #b8791e; padding-bottom: 1px;
}
.fin__mot {
  margin: clamp(80px, 12vh, 150px) 0 0; text-align: center;
  font-family: var(--serif); font-weight: 750;
  font-size: clamp(38px, 7.6vw, 118px); line-height: 1.0; letter-spacing: -0.03em;
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fin__mot.is-visible { opacity: 1; transform: none; }
.fin__mot em { font-style: normal; color: var(--rouge); }

/* ============================================================
   SUIVEZ-NOUS — deux chips tactiles, logos de marque en couleur,
   accrochées de travers. Pas de widget, pas de tracker : juste deux
   liens qui donnent envie de cliquer.
   ============================================================ */
.suivre {
  padding: clamp(60px, 10vh, 120px) 0;
  border-top: 1px solid var(--trait-fin);
}
.suivre__note {
  margin: 0 0 8px;
  font-family: var(--main); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px); color: var(--rouge);
  transform: rotate(-2deg); transform-origin: left center;
}
.suivre__txt {
  margin: 0 0 clamp(26px, 4vh, 42px); max-width: 46ch;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(19px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -0.015em;
}
.suivre__liens { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 26px); }
.suivre__lien {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 16px; text-decoration: none;
  background: var(--farine); color: var(--encre);
  border: var(--bord); box-shadow: var(--ombre-dure);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.suivre__lien:nth-child(1) { transform: rotate(-1.5deg); }
.suivre__lien:nth-child(2) { transform: rotate(1.5deg); }
.suivre__lien:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 8px 8px 0 var(--encre); }
.suivre__lien:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--encre); }
.suivre__ic { flex: none; display: block; }
.suivre__ic svg { display: block; width: clamp(30px, 3.4vw, 38px); height: auto; }
.suivre__nom {
  display: flex; flex-direction: column; line-height: 1.1;
  font-family: var(--sans); font-weight: 700; font-size: clamp(15px, 1.7vw, 18px);
}
.suivre__nom em {
  font-style: normal; font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.02em; color: var(--encre-45); margin-top: 3px;
}

/* ============================================================
   PIED
   ============================================================ */
/* Pas de grille sage à colonnes égales : trois blocs qui démarrent à
   des hauteurs différentes (décrochés), le téléphone traité comme une
   enseigne, les intitulés en manuscrit. Les mentions légales fondues,
   toutes petites, tout en bas. */
.pied {
  padding: clamp(64px, 10vh, 120px) var(--pad) clamp(26px, 4vh, 44px);
  font-size: 13px; color: var(--encre-70);
  border-top: 1px solid var(--trait-fin);
}
.pied a { color: var(--encre); text-decoration: none; }
.pied a:hover { text-decoration: underline; }

.pied__corps {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(34px, 5vw, 72px);
}
/* les décrochés : chaque bloc entre à une hauteur différente */
.pied__marque  { flex: 1 1 320px; }
.pied__joindre { flex: 1 1 240px; margin-top: clamp(8px, 3vh, 32px); }
.pied__quand   { flex: 1 1 200px; margin-top: clamp(18px, 5vh, 58px); }

.pied__logo { display: inline-block; }
.pied__logo img {
  height: clamp(84px, 10vw, 126px); width: auto;
  filter: brightness(0); opacity: 0.55; transition: opacity 0.3s;
}
.pied__logo:hover img { opacity: 0.8; }
.pied__lieu {
  margin: clamp(16px, 2.4vh, 24px) 0 0; max-width: 30ch;
  line-height: 1.7; font-size: 13.5px; color: var(--encre-70);
}

/* intitulé manuscrit, dans la voix des repères */
.pied__note-main {
  margin: 0 0 6px;
  font-family: var(--main); font-weight: 700;
  font-size: clamp(16px, 1.7vw, 20px); color: var(--rouge);
  transform: rotate(-1.5deg); transform-origin: left center;
}
.pied__tel {
  display: inline-block;
  font-family: var(--serif); font-weight: 680;
  font-size: clamp(25px, 3vw, 40px); letter-spacing: -0.02em;
  color: var(--encre);
}
.pied__tel:hover { text-decoration: none; color: var(--rouge); }
.pied__liens {
  margin: clamp(14px, 2vh, 20px) 0 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.pied__ico {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34, 22, 16, 0.05);
  transition: transform 0.16s var(--ease), background 0.16s;
}
.pied__ico:hover { transform: translateY(-2px); background: rgba(34, 22, 16, 0.1); text-decoration: none; }
.pied__ico svg { width: 19px; height: 19px; display: block; }

.pied__horaire { margin: 0; max-width: 28ch; line-height: 1.7; font-size: 13.5px; color: var(--encre-70); }
.pied__horaire em { font-style: normal; color: var(--encre); font-weight: 600; }

/* la mention allergènes : une phrase sobre, dans la voix du comptoir */
.pied__note {
  max-width: var(--maxw);
  margin: clamp(42px, 6vh, 74px) auto 0;
  font-size: 13.5px; line-height: 1.7; color: var(--encre-70);
}
.pied__note em { font-style: normal; color: var(--encre); font-weight: 600; }

/* le bas légal : fondu, minuscule, deux lignes qui s'écartent */
.pied__bas {
  max-width: var(--maxw); margin: clamp(30px, 5vh, 54px) auto 0;
  padding-top: 18px; border-top: 1px solid var(--trait-fin);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px 28px; flex-wrap: wrap;
  font-size: 11px; color: var(--encre-45); letter-spacing: 0.02em;
}
.pied__bas p { margin: 0; }
.pied__legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.pied__legal a { color: var(--encre-45); font-weight: 600; }
.pied__legal a:hover { color: var(--encre-70); }
.pied__credit a { color: var(--encre-70); font-weight: 600; }

@media (max-width: 720px) {
  .pied__joindre, .pied__quand { margin-top: 0; }
  .pied__logo img { height: 62px; }
  .pied__bas { flex-direction: column; gap: 8px; }
}

/* ============================================================
   REDUCED MOTION — tout lisible, rien ne bouge
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rise i { transform: none; animation: none; }
  .hero__macaron svg { animation: none; }
  .tete__etat::before { animation: none; }
  .credo__ligne, .carte__ligne, .colle__tirage, .nombres__mot,
  .devanture, .fin__mot {
    opacity: 1 !important; transform: rotate(var(--r, 0deg)) !important; transition: none !important;
  }
  .parole__mot.is-actif p, .parole__mot.is-actif cite { animation: none; }
  .credo__ligne .mo { opacity: 1 !important; transition: none !important; }
  .eclat { height: auto; }
  .eclat__scene { position: relative; height: auto; }
  .eclat__mot { opacity: 1 !important; transform: none !important; transition: none !important; }
}