/* L'Endémique · aperçu. Une planche d'herbier : papier crème, vert forêt des bois de couleurs,
   rose du mahot pour l'action, or des étoiles. Titres Cormorant Garamond, texte DM Sans.
   Modification du 13 octobre (« palette trop restreinte ») : deux couleurs reprises de la carte
   du restaurant lui-même, le pêche de son logo et le bleu de ses gravures de fleurs.
   Le haut de page parle de la cuisine ; les avis ont leur section plus bas. */
@font-face { font-family: "Cormorant Garamond"; src: url("polices/cormorant.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("polices/cormorant-italique.woff2") format("woff2"); font-weight: 500 700; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("polices/dm-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --papier: #F5F0E6;
  --papier-2: #ECE5D5;
  --blanc: #FFFDF8;
  --foret: #10291F;
  --foret-2: #183A2C;
  --mousse: #3F7A5A;
  --mousse-pale: #DDEBE0;
  --encre: #142620;
  --gris: #5C6B62;
  --filet: #D9D1C0;
  --mahot: #C8506C;
  --mahot-fonce: #A93A55;
  --mahot-pale: #F6DDE3;
  --or: #D9A441;
  /* Les deux couleurs de la carte du restaurant (sa seule photo publiée) : le pêche du logo,
     le bleu des gravures de fleurs. */
  --peche: #F5AE82;
  --peche-clair: #FFC7A2;
  --peche-pale: #F8C9A8;
  --gravure: #2A5B72;
  --gravure-clair: #CFDDE4;
  --f-titre: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --f-texte: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --courbe: cubic-bezier(.2, .75, .15, 1);
  --gouttiere: clamp(18px, 4vw, 44px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 17px/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, blockquote, figure, ul, ol, address, form { margin: 0; }
address { font-style: normal; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--mahot); outline-offset: 3px; border-radius: 8px; }

.corps { max-width: 1180px; margin-inline: auto; padding-inline: var(--gouttiere); }
.sur { font: 700 13px/1.3 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--mousse); }
.sur-clair { color: var(--peche-clair); }
.titre { font: 600 clamp(40px, 6.2vw, 76px)/1 var(--f-titre); letter-spacing: -.015em; margin-top: 14px; }
.titre em { font-style: italic; font-weight: 500; color: var(--mousse); }
.titre-clair { color: var(--papier); }
.titre-clair em { color: var(--peche-clair); }
.titre-moyen { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.04; }
.chapo { font-size: clamp(17px, 1.9vw, 19.5px); color: var(--gris); max-width: 56ch; margin-top: 18px; }
.chapo-clair { color: #B7C8BD; }
cite { display: block; margin-top: 8px; font: 600 14px/1.3 var(--f-texte); font-style: normal; color: var(--encre); }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border-radius: 999px; background: var(--mahot); color: #fff; font: 600 16.5px/1 var(--f-texte); letter-spacing: -.005em; text-decoration: none; border: 0; cursor: pointer; text-align: center; transition: transform .2s var(--courbe), background .2s; box-shadow: 0 14px 30px -16px rgba(200, 80, 108, .9); }
.bouton:hover { background: var(--mahot-fonce); transform: translateY(-2px); }
.bouton-contour { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton-contour:hover { background: var(--encre); color: var(--papier); }
.bouton-contour-sombre { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--filet); }
.bouton-contour-sombre:hover { background: var(--encre); color: var(--papier); }
.bouton-papier { background: var(--papier); color: var(--foret); box-shadow: none; }
.bouton-papier:hover { background: #fff; }

/* ───────── En-tête ───────── */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 12px var(--gouttiere); padding-top: max(12px, env(safe-area-inset-top)); color: var(--encre); transition: background .35s, box-shadow .35s; }
.entete.colle { background: rgba(245, 240, 230, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--filet); }
.marque { display: inline-flex; align-items: center; gap: 8px; font: 700 22px/1 var(--f-titre); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; }
.marque-feuille { width: 30px; height: 30px; border-radius: 50%; background: var(--foret); display: grid; place-items: center; flex: none; }
.marque-feuille svg { width: 18px; height: 18px; fill: none; stroke: var(--papier); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.apercu { font: 700 11px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(20, 38, 32, .35); }
.entete-tel { margin-left: auto; min-height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--foret); color: var(--papier); text-decoration: none; font: 600 15px/1 var(--f-texte); white-space: nowrap; }
.entete-tel-court { display: none; }
@media (max-width: 420px) { .entete-tel-num { display: none; } .entete-tel-court { display: inline; } }

/* ───────── Le haut de page ───────── */
.heros { position: relative; padding: calc(84px + env(safe-area-inset-top)) 0 48px; background: radial-gradient(90% 60% at 100% 0%, var(--mousse-pale) 0%, transparent 60%), radial-gradient(80% 55% at 0% 100%, rgba(245, 174, 130, .34) 0%, transparent 65%), var(--papier); }
.heros-grille { display: grid; grid-template-columns: 1fr minmax(0, 540px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.heros-sur { opacity: 0; transform: translateY(8px); transition: opacity .6s .1s, transform .6s .1s var(--courbe); }
.heros.pret .heros-sur { opacity: 1; transform: none; }
.heros-titre { font: 600 clamp(44px, 5.6vw, 78px)/.98 var(--f-titre); letter-spacing: -.02em; margin-top: 14px; }
.heros-titre em { font-style: italic; font-weight: 500; color: var(--mousse); }
.heros-chapo { font-size: clamp(17px, 1.9vw, 19px); color: var(--gris); max-width: 54ch; margin-top: 20px; }
.heros-suite > * { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--d, .9s), transform .7s var(--d, .9s) var(--courbe); }
.heros-suite > :nth-child(2) { --d: 1.05s; } .heros-suite > :nth-child(3) { --d: 1.2s; } .heros-suite > :nth-child(4) { --d: 1.35s; }
.heros.pret .heros-suite > * { opacity: 1; transform: none; }

.direct { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); font-weight: 600; font-size: 15.5px; }
.direct-point { width: 10px; height: 10px; border-radius: 50%; background: #B9A98F; flex: none; }
.direct.ouvert .direct-point { background: #2E9B5E; box-shadow: 0 0 0 4px rgba(46, 155, 94, .18); }
.direct.ouvert { color: #1F6D40; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.confiance { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; color: var(--gris); font-weight: 500; }
.etoiles { display: inline-flex; gap: 2px; }
.etoiles i { width: 16px; height: 16px; background: var(--or); clip-path: polygon(50% 2%, 62% 36%, 98% 38%, 69% 60%, 79% 96%, 50% 75%, 21% 96%, 31% 60%, 2% 38%, 38% 36%); }
.etoiles i.demi { background: linear-gradient(90deg, var(--or) 80%, var(--filet) 80%); }
.etoiles-grandes { gap: 4px; justify-content: center; margin-top: 10px; }
.etoiles-grandes i { width: 22px; height: 22px; }

/* La planche d'herbier */
.planche { position: relative; background: var(--blanc); border-radius: 22px; padding: 14px; box-shadow: 0 30px 60px -36px rgba(16, 41, 31, .45), inset 0 0 0 1px var(--filet); }
.planche::before { content: ""; position: absolute; inset: 24px; border: 1px solid var(--filet); border-radius: 12px; pointer-events: none; }
.herbier { width: 100%; height: auto; }
.herbier .assiette { fill: var(--papier); stroke: var(--gravure); stroke-width: 1.5; opacity: 0; transition: opacity 1s .2s; }
.herbier .assiette-bord { fill: none; stroke: var(--gravure); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0; transition: opacity 1s .5s; }
.heros.pret .herbier .assiette, .heros.pret .herbier .assiette-bord { opacity: 1; }
.herbier .trait { fill: none; stroke: var(--foret); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s calc(.35s + var(--i, 0) * .045s) var(--courbe); }
.herbier .tige { stroke-width: 2.2; }
.herbier .nervure { stroke-width: 1.1; stroke: var(--mousse); }
.herbier .bourgeon { stroke: var(--mahot-fonce); }
.heros.pret .herbier .trait { stroke-dashoffset: 0; }
.herbier .feuille { fill: #BFD6C4; opacity: 0; transition: opacity .9s calc(1.2s + var(--i, 0) * .07s); }
.herbier .phyllode { fill: #C8DCCB; stroke: var(--mousse); stroke-width: .8; opacity: 0; transition: opacity .9s calc(1.6s + var(--i, 0) * .07s); }
.herbier .petale { fill: var(--mahot); stroke: var(--mahot-fonce); stroke-width: 1; opacity: 0; transform-origin: 160px 190px; transform: scale(.6); transition: opacity .7s calc(2.1s + var(--i, 0) * .09s), transform .8s calc(2.1s + var(--i, 0) * .09s) var(--courbe); }
.herbier .coeur { fill: var(--or); opacity: 0; transition: opacity .6s 2.7s; }
.heros.pret .herbier .feuille, .heros.pret .herbier .phyllode, .heros.pret .herbier .coeur { opacity: 1; }
.heros.pret .herbier .petale { opacity: 1; transform: none; }
/* La brise : les trois plantes de la planche se balancent sans fin, chacune autour de sa base,
   l'une après l'autre comme un souffle qui passe. Transform seul, en pause hors de l'écran. */
@media (prefers-reduced-motion: no-preference) {
  .herbier .fougere, .herbier .tamarin, .herbier .mahot { animation: brise 5.6s ease-in-out infinite alternate; }
  .herbier .fougere { transform-origin: 150px 598px; --a: 2.6deg; }
  .herbier .mahot { transform-origin: 168px 340px; --a: 4.5deg; animation-duration: 4.4s; animation-delay: -1.3s; }
  .herbier .tamarin { transform-origin: 468px 586px; --a: 3.4deg; animation-duration: 6.4s; animation-delay: -2.6s; }
  .heros.hors .herbier g { animation-play-state: paused; }
}
@keyframes brise { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(var(--a)); } }
.planche-legendes { position: absolute; inset: 0; pointer-events: none; }
.legende { position: absolute; display: inline-flex; align-items: center; gap: 8px; font: italic 500 clamp(15px, 1.4vw, 18px)/1 var(--f-titre); color: var(--encre); opacity: 0; transition: opacity .8s 2.6s; }
.legende span { background: rgba(255, 253, 248, .85); padding: 3px 6px; border-radius: 4px; }
.legende i { width: 26px; height: 1px; background: var(--encre); }
.legende-fougere { left: 4%; top: 56%; }
.legende-tamarin { right: 5%; top: 24%; flex-direction: row-reverse; }
.legende-mahot { left: 36%; top: 15%; }
.heros.pret .legende { opacity: 1; }
.planche-etiquette { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 7px 14px; border-radius: 4px; background: var(--peche-pale); font: 600 11.5px/1 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--gravure); white-space: nowrap; }

/* ───────── La formule ───────── */
.formule { padding: clamp(64px, 9vw, 120px) 0; background: var(--blanc); }
.formule-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.tuile { padding: 26px 24px 28px; border-radius: 20px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--filet); }
.tuile h3 { font: 600 28px/1.05 var(--f-titre); margin-top: 18px; }
.tuile p { margin-top: 10px; font-size: 15.5px; color: var(--gris); }
.icone { width: 72px; height: 72px; }
.icone .trait { fill: none; stroke: var(--gravure); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s calc(.2s + var(--i, 0) * .25s) var(--courbe); }
.vu .icone .trait { stroke-dashoffset: 0; }

/* ───────── Passées par la carte ───────── */
.carte { padding: clamp(64px, 9vw, 120px) 0; background: var(--foret); color: var(--papier); }
.carte-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }
.plats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; margin-top: 44px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--mousse) transparent; }
.plat { position: relative; scroll-snap-align: start; padding: 22px 22px 24px; border-radius: 18px; background: var(--foret-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); display: flex; flex-direction: column; }
.plat-num { font: italic 600 15px/1 var(--f-titre); color: var(--peche-clair); letter-spacing: .08em; }
.plat h3 { font: 600 26px/1.05 var(--f-titre); margin-top: 12px; color: var(--papier); }
.plat p { margin-top: 12px; font-size: 15px; color: #B7C8BD; flex: 1; }
.plat cite { color: var(--papier); opacity: .85; }
.glisser { margin-top: 12px; font-size: 14px; color: #9CCDB0; }
@media (min-width: 1100px) { .plats { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } .glisser { display: none; } }

/* ───────── Ce qui revient ───────── */
.remarques { padding: clamp(64px, 9vw, 120px) 0; background: var(--peche-pale); }
.remarques .sur, .remarques .titre em { color: var(--gravure); }
.remarques .chapo { color: var(--encre); }
.remarques-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.remarque { padding: 22px 22px 24px; border-radius: 18px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); }
.remarque-compte { display: block; font: 600 54px/1 var(--f-titre); letter-spacing: -.02em; color: var(--mousse); }
.remarque-sur { display: block; margin-top: 2px; font: 600 12px/1.3 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.remarque h3 { font: 600 24px/1.1 var(--f-titre); margin-top: 14px; }
.remarque blockquote { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 14.5px; color: var(--gris); }
.remarque cite { font-size: 13px; }

/* ───────── Les avis (14 octobre) : une planche d'herbier ─────────
   La note en tampon d'encre, un avis en très grand, les autres en étiquettes d'herbier collées
   sur la feuille : une mosaïque sur ordinateur, une bande qui glisse au doigt sur téléphone. */
.avis { padding: clamp(56px, 9vw, 120px) 0; background-color: var(--mousse-pale); background-image: repeating-linear-gradient(0deg, rgba(16, 41, 31, .04) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(16, 41, 31, .035) 0 1px, transparent 1px 5px); }
.feuille-herbier {
  position: relative; isolation: isolate; overflow: hidden; padding: 34px 18px 30px; border-radius: 3px;
  background-color: #FBF7EC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"), radial-gradient(90% 60% at 100% 0%, rgba(245, 174, 130, .16), transparent 70%);
  box-shadow: 0 1px 2px rgba(16, 41, 31, .14), 0 40px 70px -42px rgba(16, 41, 31, .55);
}
.feuille-herbier::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(42, 91, 114, .25); pointer-events: none; z-index: -1; }
.avis-fougere { position: absolute; z-index: -1; top: -30px; right: -46px; width: 230px; height: auto; max-width: none; opacity: .2; rotate: 16deg; pointer-events: none; }
.avis-fougere path { fill: none; stroke: var(--gravure); stroke-width: 1.4; stroke-linecap: round; }
.avis-fougere .feuille { fill: var(--gravure-clair); stroke: none; }
.herbier-haut { display: grid; gap: 34px; }

/* le tampon : la note, à l'encre bleue des gravures */
.tampon-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tampon {
  position: relative; width: min(60vw, 224px); aspect-ratio: 1; rotate: -9deg; color: var(--gravure); mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.3 0 0 0 1.45'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 140px 140px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.3 0 0 0 1.45'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 140px 140px;
}
.tampon-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.t-trait { fill: none; stroke: currentColor; stroke-width: 2; }
.t-epais { stroke-width: 5; }
.t-texte { fill: currentColor; font: 700 12.5px var(--f-texte); letter-spacing: .12em; }
.tampon-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; text-align: center; }
.tampon-note b { font: 700 clamp(52px, 17vw, 64px)/.9 var(--f-titre); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.tampon-etoiles { font-size: 13px; letter-spacing: .16em; margin-top: 5px; }
.etoile-part { background: linear-gradient(90deg, var(--gravure) 80%, rgba(42, 91, 114, .25) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tampon-nb { font: 700 11.5px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.tampon-legende { font-size: 15px; color: var(--gris); text-align: center; max-width: 26ch; }
.tampon-legende b { color: var(--mousse); font-weight: 700; font-variant-numeric: lining-nums; }

/* un avis en très grand */
.avis-geant { margin: 0; }
.avis-geant blockquote { margin-top: 12px; }
.geant { font: italic 500 clamp(36px, 9.6vw, 66px)/1.04 var(--f-titre); letter-spacing: -.01em; color: var(--foret); text-wrap: pretty; }
.geant em { color: var(--mahot-fonce); }
.geant-suite { margin-top: 16px; font-size: 17px; color: var(--gris); max-width: 52ch; }
.avis-geant figcaption { margin-top: 14px; display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--mousse); }
.avis-geant figcaption::before { content: ""; width: 26px; height: 1.5px; background: var(--mahot); }

/* les étiquettes d'herbier, chacune tenue par un morceau de papier collant */
.avis-glisser { margin-top: 34px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--gravure); }
.avis-glisser::after { content: "→"; color: var(--mahot); font-size: 18px; }
.etiquettes-h { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; margin: 6px -18px 0; padding: 24px 18px 16px; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.etiquettes-h::-webkit-scrollbar { display: none; }
.etiquettes-h:focus-visible { outline-offset: -4px; }
.eh { position: relative; flex: 0 0 min(76vw, 290px); scroll-snap-align: start; padding: 16px 18px 18px; background: #FFFEF8; border: 1px solid rgba(42, 91, 114, .4); outline: 1px solid rgba(42, 91, 114, .16); outline-offset: -6px; box-shadow: 0 1px 1px rgba(16, 41, 31, .08), 0 14px 22px -16px rgba(16, 41, 31, .45); rotate: var(--r, 0deg); }
.eh::before { content: ""; position: absolute; top: -12px; left: var(--x, 50%); width: 84px; height: 22px; margin-left: -42px; background: rgba(245, 174, 130, .62); rotate: var(--rt, -3deg); box-shadow: 0 1px 2px rgba(16, 41, 31, .1); }
.eh:nth-child(3n + 2)::before { background: rgba(207, 221, 228, .85); --rt: 4deg; --x: 30%; }
.eh:nth-child(3n)::before { background: rgba(246, 221, 227, .9); --rt: -5deg; --x: 68%; }
.eh:nth-child(odd) { --r: -.7deg; }
.eh:nth-child(even) { --r: .8deg; }
.eh-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid rgba(42, 91, 114, .3); font: 700 11.5px/1.2 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--gravure); }
.eh-tete span { color: var(--or); font-size: 13px; letter-spacing: .08em; }
.eh blockquote { font: italic 500 19.5px/1.34 var(--f-titre); color: var(--encre); }
.eh cite { margin-top: 12px; padding-top: 9px; border-top: 1px dashed rgba(42, 91, 114, .35); font: 700 12.5px/1.2 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--mousse); }
.eh-court blockquote { font-size: 28px; line-height: 1.12; color: var(--foret); }

@media (min-width: 900px) {
  .feuille-herbier { padding: 64px 60px 72px; }
  .feuille-herbier::before { inset: 14px; }
  .avis-fougere { top: -40px; right: -30px; width: 340px; opacity: .22; }
  .herbier-haut { grid-template-columns: 290px minmax(0, 1fr); gap: 64px; align-items: center; }
  .tampon { width: 250px; }
  .tampon-note b { font-size: 72px; }
  .avis-glisser { display: none; }
  .etiquettes-h { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 26px; align-items: start; overflow: visible; margin: 64px 0 0; padding: 0; }
  .eh { min-width: 0; }
  .eh-1 { grid-column: 1 / span 5; --r: -.8deg; }
  .eh-2 { grid-column: 6 / span 3; margin-top: 52px; --r: 1.8deg; }
  .eh-3 { grid-column: 9 / span 4; margin-top: 10px; --r: -.5deg; }
  .eh-4 { grid-column: 1 / span 4; --r: 1.1deg; }
  .eh-5 { grid-column: 5 / span 4; margin-top: 18px; --r: -1.3deg; }
  .eh-6 { grid-column: 9 / span 4; --r: .7deg; }
  .eh-7 { grid-column: 2 / span 4; --r: -1.8deg; }
  .eh-8 { grid-column: 7 / span 5; margin-top: 8px; --r: .6deg; }
  .eh blockquote { font-size: 20.5px; }
  .eh-court blockquote { font-size: 30px; }
}

/* ───────── Une table ───────── */
.table { padding: clamp(64px, 9vw, 120px) 0; background: var(--gravure); color: var(--papier); }
.table .chapo-clair { color: var(--gravure-clair); }
.table-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.grand-tel { display: inline-block; margin-top: 26px; font: 600 clamp(34px, 4.5vw, 54px)/1 var(--f-titre); letter-spacing: -.02em; color: var(--papier); text-decoration: none; }
.grand-tel:hover { color: var(--peche-clair); }
.table-note { margin-top: 10px; font-size: 15px; color: var(--gravure-clair); }
.resa { background: var(--papier); color: var(--encre); border-radius: 24px; padding: clamp(20px, 3vw, 30px); display: grid; gap: 20px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6); }
.resa-etiquette { margin: 0; font: 700 12.5px/1.3 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.resa-titre { margin: 0; font: 600 clamp(24px, 2.6vw, 32px)/1.15 var(--f-titre); letter-spacing: -.01em; }
.resa .grand-tel { margin-top: 0; color: var(--foret); }
.resa .grand-tel:hover { color: var(--mahot); }
.resa-apercu { margin: 0; font-size: 15px; color: var(--gris); line-height: 1.5; }
.resa-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.resa-boutons .bouton { flex: 1 1 180px; min-height: 56px; }

/* ───────── Horaires et accès ───────── */
.acces { padding: clamp(64px, 9vw, 120px) 0; background: var(--papier); }
.acces-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.horaires { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 16px; }
.horaires th, .horaires td { padding: 12px 0; border-bottom: 1px solid var(--filet); text-align: left; }
.horaires th { font-weight: 600; width: 38%; }
.horaires td { color: var(--gris); white-space: nowrap; }
.horaires tr.ferme td { color: #9AA39D; }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--mousse); font-weight: 700; }
.horaires tr.aujourdhui.ferme td { color: var(--gris); }
.horaires tr.aujourdhui th::after { content: "aujourd'hui"; margin-left: 8px; font: 600 10.5px/1 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--mousse-pale); color: var(--mousse); vertical-align: middle; }
.acces-note { margin-top: 16px; font-size: 15px; color: var(--gris); }
.adresse { margin-top: 24px; font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--f-titre); }
.acces-texte { margin-top: 14px; color: var(--gris); }
.pratique { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pratique li { padding: 8px 14px; border-radius: 999px; background: var(--mousse-pale); color: var(--foret); font: 600 14px/1 var(--f-texte); }

/* ───────── Pied et barre ───────── */
.pied { padding: 40px 0 calc(110px + env(safe-area-inset-bottom)); background: var(--papier-2); }
.pied-grille { display: grid; gap: 12px; }
.marque-pied { font: 700 20px/1 var(--f-titre); }
.pied-apercu { font-size: 14px; color: var(--gris); max-width: 70ch; }
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 10px var(--gouttiere); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: rgba(245, 240, 230, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--filet); transform: translateY(110%); transition: transform .4s var(--courbe); }
.barre.visible { transform: none; }
.barre a { min-height: 52px; display: grid; place-items: center; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 16px; }
.barre-tel { background: var(--foret); color: var(--papier); }
.barre-sms { background: var(--mahot); color: #fff; }

/* ───────── Apparitions et titres mot par mot ───────── */
.js .apparait { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--retard, 0s), transform .7s var(--retard, 0s) var(--courbe); }
.js .apparait.vu { opacity: 1; transform: none; }
.js [data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-mots] .mot > span { display: inline-block; transform: translateY(110%); transition: transform .8s calc(var(--i) * .06s) var(--courbe); }
.js [data-mots].vu .mot > span { transform: none; }
.remarque-compte, .anneau figcaption b, .note-chiffre b, .grand-tel, .plat-num, .adresse { font-variant-numeric: lining-nums tabular-nums; }

/* ───────── Téléphone ───────── */
@media (max-width: 1000px) {
  .formule-grille, .remarques-grille { grid-template-columns: 1fr 1fr; }
  .table-grille, .acces-grille { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .heros { padding-top: calc(76px + env(safe-area-inset-top)); padding-bottom: 40px; }
  .heros-grille { display: grid; grid-template-columns: 1fr; gap: 22px; }
  .heros-texte { display: contents; }
  .heros-sur { order: 1; }
  .heros-titre { order: 2; }
  .planche { order: 3; }
  .heros-suite { order: 4; }
  .heros-chapo { margin-top: 0; }
  .actions .bouton { flex: 1 1 100%; }
  .barre { display: grid; }
  .legende { font-size: 14px; }
  .legende i { width: 18px; }
}
@media (max-width: 480px) {
  .formule-grille, .remarques-grille { grid-template-columns: 1fr; }
  .plats { grid-auto-columns: 82%; }
  .horaires th { width: 36%; }
  .horaires td { font-size: 15px; }
  .horaires tr.aujourdhui th::after { display: block; width: max-content; margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .apparait, .heros-sur, .heros-suite > *, .legende, .herbier .assiette, .herbier .assiette-bord, .herbier .feuille, .herbier .phyllode, .herbier .petale, .herbier .coeur { opacity: 1; transform: none; transition: none; }
  .herbier .trait, .icone .trait { stroke-dashoffset: 0; transition: none; }
  .anneau-arc { transition: none; }
  .js [data-mots] .mot > span { transform: none; transition: none; }
  .barre { transition: none; }
}

/* Les bandes qui glissent au doigt laissent passer le défilement vertical de la page. */
.plats { touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }