/* ══════════════════════════════════════════════════════════════════════════
   Maison Ermine — feuille de style
   1. Polices et variables   2. Base   3. Éléments communes (boutons, titres…)
   4. En-tête et menu        5. Pied de page   6. Animations
   7. Pages : accueil, carte, histoire, galerie, réservation, contact, autres
   8. Adaptations écrans     9. Moins d'animations
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Polices et variables ─────────────────────────────────────────────── */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
/* Polices de secours calées sur les vraies, pour éviter que la page « saute » au chargement */
@font-face { font-family: "Serif secours"; src: local("Georgia"); size-adjust: 88%; ascent-override: 98%; }
@font-face { font-family: "Sans secours"; src: local("Arial"); size-adjust: 97%; }

:root {
  --farine: #F3ECDF;
  --farine-2: #E9DFCB;
  --farine-3: #DDCFB5;
  --sarrasin: #211913;
  --sarrasin-2: #2C221B;
  --encre: #2B211A;
  --brun: #67523F;
  --caramel: #A85A22;
  --caramel-f: #8B4517;
  --beurre: #E8C27A;
  --embruns: #2D4A52;
  --creme: #F1E7D6;
  --creme-2: #C7B8A2;
  --brique: #A2341E;
  --ligne: rgb(43 33 26 / .16);
  --ligne-forte: rgb(43 33 26 / .38);
  --ligne-claire: rgb(241 231 214 / .18);

  --serif: "Instrument Serif", "Serif secours", Georgia, serif;
  --sans: "Instrument Sans", "Sans secours", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.75, 0, .2, 1);

  --gout: clamp(16px, 4.2vw, 64px);
  --max: 1360px;
  --entete-h: 76px;
}

/* ── 2. Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 24px); }
html:has(.sommaire) { scroll-padding-top: calc(var(--entete-h) + 84px); }
body {
  margin: 0;
  background: var(--farine);
  color: var(--encre);
  font: 400 1.0625rem/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Grain de papier, très léger, sur toute la page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .1 0 0 0 0 .07 0 0 0 -1.1 .62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--caramel); outline-offset: 3px; }
.section--sombre :focus-visible, .pied :focus-visible, .mm :focus-visible, .hero :focus-visible, .resa__cote :focus-visible, .visio :focus-visible { outline-color: var(--beurre); }
::selection { background: var(--beurre); color: var(--sarrasin); }

.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--sarrasin); color: var(--creme); padding: .8rem 1.2rem; text-decoration: none; }
.evitement:focus { top: 1rem; }

.enveloppe { width: min(100% - 2 * var(--gout), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(5rem, 10vw, 9.5rem); position: relative; }
.section--dore { background: var(--farine-2); }
.section--sombre { background: var(--sarrasin); color: var(--creme); }

/* ── 3. Éléments communs ─────────────────────────────────────────────────── */
.sprite { position: absolute; }
.i { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }

.titre-xl, .titre-l, .tete-page__titre, .hero__titre, .h-hero__titre, .resa__titre {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.025em;
  hyphens: manual;
}
.titre-xl { font-size: clamp(2.9rem, 7vw, 6.8rem); line-height: .92; }
.titre-l { font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: .95; }
h1 em, h2 em, .maison__manifeste em, .h-phrase__t em { font-style: italic; color: var(--caramel); }
.section--sombre h2 em, .hero em, .h-hero em, .bolee em, .resa__cote em, .mm em, .appel--sombre em, .contact__kenavo em { color: var(--beurre); }

.surtitre { font: 600 .72rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brun); margin: 0 0 1.4rem; }
.surtitre--clair { color: var(--creme-2); }

.chap { display: flex; align-items: center; gap: .9rem; margin: 0 0 2.2rem; font: 600 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brun); }
.chap__n { font: italic 400 1.25rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--caramel); }
.chap__trait { width: 52px; height: 1px; background: currentColor; opacity: .45; transform-origin: left; }
.chap--clair { color: var(--creme-2); }
.chap--clair .chap__n { color: var(--beurre); }

.legende { font-size: .74rem; letter-spacing: .03em; color: var(--brun); margin: .7rem 0 0; }
.legende--clair { color: var(--creme-2); }

.lettrine::first-letter { float: left; font: 400 4.4em/.78 var(--serif); padding: .06em .1em 0 0; color: var(--caramel); }

/* « À compléter » et « exemple » : toujours visibles, jamais confondus avec une vraie information */
.ac {
  display: inline-block;
  vertical-align: .12em;
  font: 600 .64rem/1.25 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--caramel-f);
  background: rgb(168 90 34 / .09);
  border: 1px solid rgb(168 90 34 / .38);
  padding: .3em .6em;
  white-space: nowrap;
  font-style: normal;
}
.ac::before { content: "[ "; opacity: .6; }
.ac::after { content: " ]"; opacity: .6; }
.section--sombre .ac, .hero .ac, .pied .ac, .mm .ac, .resa__cote .ac, .h-hero .ac, .bolee .ac { color: var(--beurre); background: rgb(232 194 122 / .08); border-color: rgb(232 194 122 / .4); }
.ex {
  display: inline-block;
  vertical-align: .15em;
  margin-left: .25em;
  font: 600 .6rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--embruns);
  border-bottom: 1px dotted currentColor;
  padding-bottom: .15em;
  font-style: normal;
  white-space: nowrap;
}
.section--sombre .ex, .hero .ex, .pied .ex, .resa__cote .ex, .h-hero .ex { color: #9CC0C8; }

.avis-demo { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; line-height: 1.5; color: var(--embruns); background: rgb(45 74 82 / .07); border-left: 2px solid var(--embruns); padding: .85rem 1.1rem; margin: 0 0 1.2rem; }
.avis-demo .i { width: .8rem; height: 1.1rem; margin-top: .15rem; }

/* Photos : cadre, teinte commune légèrement réchauffée, secours si l'image ne charge pas */
.ph { position: relative; overflow: hidden; background: var(--farine-3); }
.ph img, .hero__cadre img, .cat__img img, .vedettes__img img, .geste__img img { width: 100%; height: 100%; object-fit: cover; }
img { filter: saturate(.93) sepia(.05); }
.ph--ko, .img-ko { background: var(--farine-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28' width='20' height='28'%3E%3Cg fill='%23A85A22' fill-opacity='.35'%3E%3Ccircle cx='10' cy='3' r='2.6'/%3E%3Ccircle cx='4.4' cy='7.2' r='2.4'/%3E%3Ccircle cx='15.6' cy='7.2' r='2.4'/%3E%3Cpath d='M10 7.5c1.3 4.6 1.9 8.6 3.9 14L17.4 27l-4.6-2.6L10 28l-2.8-3.6L2.6 27l3.5-5.5c2-5.4 2.6-9.4 3.9-14Z'/%3E%3C/g%3E%3C/svg%3E") center / 22px no-repeat; }
.img-ko { opacity: 1 !important; visibility: visible; color: transparent; }

/* Boutons : un fond qui monte, un texte qui roule */
.btn {
  --fond: var(--caramel); --texte: #FFF7EC; --bord: var(--caramel);
  --fond-survol: var(--sarrasin); --texte-survol: var(--creme);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1.05rem 1.6rem;
  font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte); background: var(--fond); border: 1px solid var(--bord);
  text-decoration: none; cursor: pointer;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fond-survol); transform: translateY(101%); transition: transform .6s var(--ease); }
.btn:hover, .btn:focus-visible { color: var(--texte-survol); border-color: var(--fond-survol); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn .i { width: 1.15em; height: 1.15em; transition: transform .5s var(--ease); }
.btn:hover .i { transform: translateX(4px); }
/* Hauteur 1.6em : les accents des capitales (É) ne sont pas rognés */
.btn__t { display: inline-flex; flex-direction: column; height: 1.6em; line-height: 1.6; margin-block: -.2em; overflow: hidden; }
.btn__t::before { content: ""; margin-top: 0; transition: margin-top .55s var(--ease); }
.btn__t::after { content: attr(data-t); }
.btn:hover .btn__t::before, .btn:focus-visible .btn__t::before { margin-top: -1.6em; }
.btn--contour { --fond: transparent; --texte: var(--encre); --bord: var(--ligne-forte); }
.btn--clair { --texte: var(--creme); --bord: rgb(241 231 214 / .45); --fond-survol: var(--creme); --texte-survol: var(--sarrasin); }
.hero .btn--plein, .section--sombre .btn--plein, .resa__cote .btn--plein { --fond-survol: var(--creme); --texte-survol: var(--sarrasin); }
.btn--petit { padding: .78rem 1.15rem; }
.btn--grand { padding: 1.25rem 2rem; }
.btn[disabled] { opacity: .6; cursor: wait; }

/* Lien souligné : le trait s'efface puis se redessine */
.lien-trait {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 600 .78rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding-bottom: .4rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.lien-trait .i { width: 1.15em; height: 1.15em; transition: transform .5s var(--ease); }
.lien-trait:hover { animation: trait .8s var(--ease) both; color: var(--caramel); }
.lien-trait:hover .i { transform: translateX(5px); }
.lien-trait--clair:hover, .section--sombre .lien-trait:hover { color: var(--beurre); }
@keyframes trait { 0% { background-size: 100% 1px; background-position: 100% 100%; } 45% { background-size: 0 1px; background-position: 100% 100%; } 46% { background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }

.prix { font: 600 1rem/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prix--vide { color: var(--brun); font-weight: 500; }

/* Bandeau de démonstration */
.demo { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 34px; padding: .4rem var(--gout); background: var(--embruns); color: #E4EEF0; font-size: .74rem; letter-spacing: .02em; text-align: center; }
.demo .i { width: .6rem; height: .85rem; opacity: .8; }

/* ── 4. En-tête ──────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50;
  height: var(--entete-h);
  color: var(--encre);
  background: rgb(243 236 223 / .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: transform .55s var(--ease), background-color .45s ease, color .45s ease, border-color .45s ease;
}
.entete.est-defile { border-bottom-color: var(--ligne); }
.entete--sombre:not(.est-defile) { background: transparent; color: var(--creme); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Sans JavaScript, l'en-tête ne sait pas qu'on a défilé : il garde un fond sombre lisible partout */
html:not(.js-ok) .entete--sombre { background: var(--sarrasin); }
.entete.est-cache { transform: translateY(-100%); }
.entete.menu-ouvert { background: transparent; color: var(--creme); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
/* Les pages à grande image sombre passent sous l'en-tête */
.entete--sombre ~ main { margin-top: calc(var(--entete-h) * -1); }

.entete__in { width: min(100% - 2 * var(--gout), 1480px); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 2rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.logo__mark { width: 14px; height: 20px; fill: var(--caramel); transition: transform .7s var(--ease); }
.entete--sombre:not(.est-defile) .logo__mark, .menu-ouvert .logo__mark, .pied .logo__mark { fill: var(--beurre); }
.logo:hover .logo__mark { transform: rotate(-8deg) translateY(-2px); }
.logo__nom { font: 400 1.7rem/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.logo__nom em { font-style: italic; }

.nav ul { display: flex; gap: clamp(1.2rem, 2.2vw, 2.4rem); }
.nav__lien { position: relative; display: block; padding: .5rem 0; font-size: .92rem; font-weight: 500; text-decoration: none; }
.nav__lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.nav__lien:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__lien[aria-current="page"]::after { transform: scaleX(1); }
.nav__lien[aria-current="page"]::before { content: ""; position: absolute; left: 50%; top: -.15rem; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--caramel); }
.entete--sombre:not(.est-defile) .nav__lien[aria-current="page"]::before { background: var(--beurre); }
.entete__resa[aria-current="page"] { --fond: var(--sarrasin); --bord: var(--sarrasin); }

.burger { display: none; align-items: center; gap: .75rem; padding: .6rem 0 .6rem .6rem; background: none; border: 0; font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.burger__txt { display: flex; flex-direction: column; height: 1.1em; line-height: 1.1; overflow: hidden; }
.burger__txt > span { transition: transform .5s var(--ease); }
.burger[aria-expanded="true"] .burger__txt > span { transform: translateY(-100%); }
.burger__traits { position: relative; width: 26px; height: 10px; }
.burger__traits span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.burger__traits span:first-child { top: 0; }
.burger__traits span:last-child { top: 8.5px; }
.burger[aria-expanded="true"] .burger__traits span:first-child { top: 4.25px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__traits span:last-child { top: 4.25px; transform: rotate(-45deg); }

/* Menu mobile plein écran */
.mm {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--entete-h) + 3vh) var(--gout) calc(2rem + env(safe-area-inset-bottom));
  background: var(--sarrasin); color: var(--creme);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-io);
}
.mm.est-ouvert { clip-path: inset(0); }
.mm[hidden] { display: none; }
.mm__nav li { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .7s var(--ease); transition-delay: 0s; }
.mm.est-ouvert .mm__nav li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 55ms + 200ms); }
.mm__nav a { display: flex; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--ligne-claire); text-decoration: none; }
.mm__n { font: 600 .7rem/1 var(--sans); letter-spacing: .1em; color: var(--beurre); min-width: 1.6rem; }
.mm__t { font: 400 clamp(2.3rem, 9vw, 3.6rem)/1.05 var(--serif); letter-spacing: -.02em; transition: transform .5s var(--ease); }
.mm__nav a:hover .mm__t { transform: translateX(.5rem); }
.mm__nav a[aria-current="page"] .mm__t { font-style: italic; color: var(--beurre); }
.mm__pied { display: grid; gap: .8rem; padding-top: 2rem; font-size: .92rem; color: var(--creme-2); }
.mm__info { display: flex; align-items: center; gap: .7rem; margin: 0; text-decoration: none; }
.mm__info .i { color: var(--beurre); }
html.menu-bloque { overflow: hidden; }

/* ── 5. Bandeau final et pied de page ────────────────────────────────────── */
.appel { padding-block: clamp(6rem, 12vw, 11rem); text-align: center; border-top: 1px solid var(--ligne); }
.appel__titre { margin-bottom: 2.6rem; }
.appel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2.2rem; }

.pied { position: relative; overflow: hidden; background: var(--sarrasin); color: var(--creme-2); padding-top: clamp(4rem, 8vw, 6.5rem); font-size: .92rem; }
.pied__in { width: min(100% - 2 * var(--gout), var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1.5fr .8fr 1.1fr 1.3fr 1fr; gap: 3rem 2.5rem; }
.pied .logo { color: var(--creme); }
.pied__accroche { margin-top: 1.2rem; max-width: 28ch; font: italic 400 1.25rem/1.35 var(--serif); color: var(--creme-2); }
.pied__t { font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--beurre); margin-bottom: 1.3rem; }
.pied__col li { margin-bottom: .55rem; }
.pied a { text-decoration: none; transition: color .3s; }
.pied a:hover { color: var(--beurre); }
.pied__col a { color: var(--creme); }
.pied__reseaux a, .pied__off { display: inline-flex; align-items: baseline; gap: .55rem; }
.pied__reseaux .i { position: relative; top: .15em; }
.pied__bas { width: min(100% - 2 * var(--gout), var(--max)); margin: clamp(3rem, 6vw, 5rem) auto 0; padding: 1.4rem 0; border-top: 1px solid var(--ligne-claire); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .8rem; }
.pied__bas p { margin: 0; }
.pied__bas a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(241 231 214 / .3); }
.pied__kenavo { font: italic 400 1rem/1 var(--serif); color: var(--beurre); }
.pied__geant { margin: 0 0 -.16em; font: 400 19.6vw/1 var(--serif); letter-spacing: -.035em; white-space: nowrap; text-align: center; color: var(--sarrasin-2); user-select: none; }

.horaires { width: 100%; border-collapse: collapse; }
.horaires th, .horaires td { padding: .8rem 0; border-bottom: 1px solid var(--ligne); text-align: left; font-weight: 400; vertical-align: baseline; }
.horaires td { text-align: right; font-variant-numeric: tabular-nums; }
.horaires--pied th, .horaires--pied td { padding: .32rem 0; border-color: var(--ligne-claire); font-size: .84rem; }
.horaires--pied .ac { font-size: .56rem; padding: .2em .45em; }
.horaires--grand { margin-top: 2.5rem; }
.horaires--grand th { font: 400 1.55rem/1.1 var(--serif); padding-block: 1rem; }
.horaires .ferme { color: var(--brun); font-style: italic; }
.horaires tr.est-aujourdhui th { color: var(--caramel); }
.horaires tr.est-aujourdhui th::after { content: "aujourd'hui"; margin-left: .7rem; vertical-align: .3em; font: 600 .58rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--caramel); }
.horaires--pied tr.est-aujourdhui th, .horaires--pied tr.est-aujourdhui th::after { color: var(--beurre); }

/* ── 6. Animations d'apparition (actives seulement si html.anim) ─────────── */
.anim [data-reveal]:not([data-reveal="rideau"]):not([data-reveal="mots"]) { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.anim [data-reveal].vu:not([data-reveal="rideau"]):not([data-reveal="mots"]) { opacity: 1; transform: none; }
/* Le masque est posé sur l'enfant : un élément entièrement masqué ne serait jamais « vu » par l'observateur */
.anim [data-reveal="rideau"] > :first-child { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--ease-io); }
.anim [data-reveal="rideau"] img { scale: 1.18; transition: scale 1.8s var(--ease); }
.anim [data-reveal="rideau"].vu > :first-child { clip-path: inset(0); }
.anim [data-reveal="rideau"].vu img { scale: 1; }
.anim [data-reveal="mots"] .mot { opacity: .14; transition: opacity .7s ease; transition-delay: calc(var(--i) * 32ms); }
.anim [data-reveal="mots"].vu .mot { opacity: 1; }
.anim .chap .chap__trait { transform: scaleX(0); transition: transform 1s var(--ease) .2s; }
.anim .chap.vu .chap__trait { transform: none; }

[data-lignes] .l { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
[data-lignes] .l > span { display: block; }
.anim [data-lignes] .l > span { transform: translateY(108%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i) * 110ms + 60ms); }
.anim [data-lignes].vu .l > span { transform: none; }

/* Parallaxe douce : uniquement là où le navigateur sait l'animer au défilement (aucun JavaScript) */
@supports (animation-timeline: view()) {
  .anim [data-parallax] img { scale: 1.16; animation: parallaxe linear both; animation-timeline: view(); animation-range: cover; }
  .anim [data-vitesse] { animation: derive linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes parallaxe { from { translate: 0 -7%; } to { translate: 0 7%; } }
  @keyframes derive { from { translate: 0 calc(var(--v, 0) * -1%); } to { translate: 0 calc(var(--v, 0) * 1%); } }
}

/* Transitions entre les pages (navigateurs compatibles) : la nouvelle page monte comme un rideau */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .entete { view-transition-name: entete; }
  ::view-transition-group(root) { animation-duration: .75s; }
  ::view-transition-old(root) { animation: vt-sortie .7s var(--ease-io) both; }
  ::view-transition-new(root) { animation: vt-entree .75s var(--ease-io) both; }
  ::view-transition-group(entete) { animation-duration: .4s; }
  /* Filtrage de la galerie : seules les photos bougent, pas la page */
  html.vt-filtre::view-transition-old(root), html.vt-filtre::view-transition-new(root) { animation: none; }
  html.vt-filtre::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease); }
  @keyframes vt-sortie { to { opacity: .35; transform: translateY(-6vh) scale(.98); } }
  @keyframes vt-entree { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
}

/* Navigateurs sans transitions de page : la page entre en fondu, et sort en fondu au clic */
.anim.sans-vt main { animation: page-entree .7s var(--ease) both; }
.sans-vt.sortie main, .sans-vt.sortie .appel, .sans-vt.sortie .pied { opacity: 0; transform: translateY(-14px); transition: opacity .28s ease, transform .28s ease; }
@keyframes page-entree { from { opacity: 0; transform: translateY(18px); } }

/* ── 7a. Accueil ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding-top: calc(var(--entete-h) + 3vh);
  background: var(--sarrasin); color: var(--creme);
  overflow: hidden;
}
.hero__grille { width: min(100% - 2 * var(--gout), var(--max)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); align-items: end; }
.hero__texte { grid-column: 1 / 9; grid-row: 1; position: relative; z-index: 2; padding-bottom: 5vh; }
.hero__sur { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.hero__sep { width: 34px; height: 1px; background: currentColor; opacity: .5; }
.hero__titre { font-size: clamp(4.4rem, 12.6vw, 13.2rem); line-height: .82; letter-spacing: -.035em; margin: 0 0 .32em; }
.hero__titre .l:nth-child(2) { padding-left: .9em; }
.hero__accroche { max-width: 30ch; font: italic 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.3 var(--serif); color: var(--creme-2); margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__photo { grid-column: 8 / 13; grid-row: 1; margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 5vh; }
.hero__cadre { height: min(70vh, 780px); min-height: 380px; overflow: hidden; background: var(--sarrasin-2); }
.hero__infos { width: min(100% - 2 * var(--gout), var(--max)); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ligne-claire); }
.hero__infos li { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.5rem 1.5rem 0; font-size: .92rem; }
.hero__infos li + li { padding-left: 1.5rem; border-left: 1px solid var(--ligne-claire); }
.hero__k { font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--beurre); }
.hero__defiler { position: absolute; right: max(6px, calc(var(--gout) / 2 - 7px)); top: 50%; display: flex; flex-direction: column; align-items: center; gap: .8rem; font: 600 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--creme-2); writing-mode: vertical-rl; }
.hero__fil { width: 1px; height: 64px; background: rgb(241 231 214 / .2); position: relative; overflow: hidden; }
.hero__fil::after { content: ""; position: absolute; inset: 0; background: var(--beurre); animation: fil 2.4s var(--ease-io) infinite; }
@keyframes fil { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* Entrée de l'accueil (au chargement) */
.anim .hero__cadre { animation: rideau-haut 1.5s var(--ease-io) .25s both; }
.anim .hero__cadre img { animation: dezoom 2.4s var(--ease) .25s both; }
.anim .hero__sur, .anim .hero__accroche, .anim .hero__actions, .anim .hero__photo figcaption, .anim .hero__infos li { animation: monte 1s var(--ease) both; }
.anim .hero__sur { animation-delay: .1s; }
.anim .hero__accroche { animation-delay: .55s; }
.anim .hero__actions { animation-delay: .7s; }
.anim .hero__photo figcaption { animation-delay: 1.3s; }
.anim .hero__infos li:nth-child(1) { animation-delay: .9s; }
.anim .hero__infos li:nth-child(2) { animation-delay: 1s; }
.anim .hero__infos li:nth-child(3) { animation-delay: 1.1s; }
@keyframes rideau-haut { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes dezoom { from { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.maison__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); }
.maison__grille > .chap { grid-column: 1 / -1; }
.maison__manifeste { grid-column: 1 / 12; font: 400 clamp(2rem, 4.3vw, 4.1rem)/1.08 var(--serif); letter-spacing: -.015em; margin-bottom: clamp(3rem, 7vw, 6rem); }
.maison__photo { grid-column: 2 / 6; margin: 0; }
.ph--portrait { aspect-ratio: 4 / 5; }
.maison__texte { grid-column: 7 / 12; align-self: end; max-width: 46ch; }
.maison__texte .lien-trait { margin-top: 1rem; }

.vedettes__tete { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.vedettes__tete > .chap { grid-column: 1 / -1; }
.vedettes__tete > h2 { grid-column: 1 / 9; }
.vedettes__note { grid-column: 9 / 13; color: var(--brun); font-size: .92rem; margin: 0; }
.vedettes__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: start; }
.vedettes__liste { grid-column: 1 / 8; border-bottom: 1px solid var(--ligne-forte); }
.vedette__lien { display: grid; grid-template-columns: 3.2rem 1fr auto auto; align-items: center; gap: 1.4rem; padding: 1.7rem 0; border-top: 1px solid var(--ligne-forte); text-decoration: none; }
.vedette__n { font: italic 400 1.3rem/1 var(--serif); color: var(--caramel); }
.vedette__corps { display: grid; gap: .3rem; transition: transform .6s var(--ease); }
.vedette__cat { font: 600 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brun); }
.vedette__nom { font: 400 clamp(1.9rem, 3.2vw, 2.9rem)/1 var(--serif); letter-spacing: -.015em; transition: color .4s; }
.vedette__ing { font-size: .86rem; color: var(--brun); }
.vedette__mini { display: none; }
.vedette__fleche { width: 1.4rem; height: 1.4rem; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .6s var(--ease); color: var(--caramel); }
.vedette__lien:hover .vedette__corps, .vedette__lien:focus-visible .vedette__corps, .vedette__lien.est-actif .vedette__corps { transform: translateX(.8rem); }
.vedette__lien:hover .vedette__nom, .vedette__lien.est-actif .vedette__nom { color: var(--caramel); font-style: italic; }
.vedette__lien:hover .vedette__fleche, .vedette__lien.est-actif .vedette__fleche { opacity: 1; transform: none; }
.vedettes__apercu { grid-column: 9 / 13; position: sticky; top: calc(var(--entete-h) + 6vh); aspect-ratio: 4 / 5; margin: 0; }
.vedettes__img { position: absolute; inset: 0 0 2rem; overflow: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-io), opacity 0s .9s; }
.vedettes__img.est-actif { opacity: 1; clip-path: inset(0); transition: clip-path .9s var(--ease-io), opacity 0s; z-index: 1; }
.vedettes__img img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.vedettes__img.est-actif img { transform: none; }
.vedettes__leg { position: absolute; bottom: 0; left: 0; }
.vedettes__tout { margin-top: 2.6rem; }

.geste__tete { margin-bottom: clamp(3rem, 6vw, 5rem); }
.geste__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; }
.geste__visuel { grid-column: 1 / 7; position: sticky; top: calc(var(--entete-h) + 5vh); height: min(76vh, 760px); align-self: start; }
.geste__cadre { position: relative; height: 100%; overflow: hidden; background: var(--sarrasin-2); }
.geste__img { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity 1s ease, transform 1.6s var(--ease); }
.geste__img.est-actif { opacity: 1; transform: none; }
.geste__compteur { position: absolute; left: 0; bottom: 0; z-index: 2; padding: .8rem 1.1rem; background: var(--sarrasin); font: italic 400 1.1rem/1 var(--serif); color: var(--creme-2); }
.geste__compteur span { color: var(--beurre); }
.geste__etapes { grid-column: 8 / 13; }
.etape { min-height: min(76vh, 760px); display: flex; flex-direction: column; justify-content: center; padding-block: 3rem; border-top: 1px solid var(--ligne-claire); transition: opacity .6s ease; }
.etape:first-child { border-top: 0; }
.anim .etape:not(.est-actif) { opacity: .32; }
.etape__img { display: none; }
.etape__n { font: italic 400 1.4rem/1 var(--serif); color: var(--beurre); margin-bottom: 1.2rem; }
.etape__t { font: 400 clamp(2.3rem, 4vw, 3.8rem)/1 var(--serif); letter-spacing: -.02em; margin-bottom: 1.4rem; }
.etape p { color: var(--creme-2); max-width: 40ch; font-size: 1.05rem; }
.etape em { color: var(--beurre); }
.geste__note { margin-top: 3rem; max-width: 60ch; }

.bolee { position: relative; min-height: 92vh; display: grid; align-items: end; overflow: hidden; background: var(--sarrasin); color: var(--creme); }
.bolee__img { position: absolute; inset: 0; overflow: hidden; }
.bolee__img img { width: 100%; height: 100%; object-fit: cover; }
.bolee__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(33 25 19 / .88) 0%, rgb(33 25 19 / .35) 45%, rgb(33 25 19 / .05) 75%); }
.bolee__texte { position: relative; padding-block: 14vh 12vh; }
.bolee__texte p { max-width: 38ch; color: var(--creme-2); font-size: 1.05rem; }
.bolee__texte h2 { margin-bottom: 1.6rem; }
.bolee__leg { position: absolute; right: var(--gout); bottom: 1.2rem; margin: 0; }

.salle__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2rem; align-items: start; }
.salle__texte { grid-column: 1 / 6; grid-row: 1; }
.salle__texte h2 { margin-bottom: 2rem; }
.salle__texte .lien-trait { margin-top: .6rem; }
.salle__grille figure { margin: 0; }
.salle__a { grid-column: 7 / 11; grid-row: 1 / 3; }
.salle__a .ph { aspect-ratio: 3 / 4; }
.salle__b { grid-column: 11 / 13; grid-row: 2; margin-top: -40% !important; }
.salle__b .ph { aspect-ratio: 3 / 4; }
.salle__c { grid-column: 2 / 6; grid-row: 2; margin-top: 2rem !important; }
.salle__c .ph { aspect-ratio: 4 / 3; }
.salle__leg { grid-column: 7 / 13; grid-row: 3; }

.pratique__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.pratique__bloc { border-top: 1px solid var(--encre); padding-top: 1.6rem; }
.pratique__i { width: 1.6rem; height: 1.6rem; color: var(--caramel); margin-bottom: 1.4rem; }
.pratique__t { font: 400 2.1rem/1 var(--serif); margin-bottom: 1rem; }
.pratique__v { font-size: 1.05rem; }
.pratique__tel { font: 400 1.9rem/1.1 var(--serif); text-decoration: none; }
.pratique__h { font-size: .9rem; margin-bottom: 1rem; }
.pratique__h li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .32rem 0; border-bottom: 1px solid var(--ligne); }
.pratique__h .ac { font-size: .56rem; }

/* ── 7b. En-têtes des pages intérieures ──────────────────────────────────── */
.tete-page { padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5rem); }
.tete-page__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: end; }
.tete-page__grille > .surtitre { grid-column: 1 / -1; }
.tete-page__titre { grid-column: 1 / 8; font-size: clamp(3.6rem, 10vw, 10rem); line-height: .86; letter-spacing: -.035em; }
.tete-page__titre--m { font-size: clamp(3rem, 7vw, 6.4rem); margin-bottom: 1.5rem; }
.tete-page__intro { grid-column: 8 / 13; padding-bottom: .6rem; }
.tete-page__intro > p:first-child { font-size: 1.1rem; }

/* ── 7c. La carte ────────────────────────────────────────────────────────── */
.carte__allergenes { font-size: .9rem; color: var(--brun); }
.sommaire {
  position: sticky; top: var(--entete-h); z-index: 40;
  background: rgb(243 236 223 / .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--ligne);
  transition: top .55s var(--ease);
}
.entete-cache .sommaire { top: 0; }
.sommaire__in { position: relative; width: min(100% - 2 * var(--gout), var(--max)); margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.sommaire__in::-webkit-scrollbar { display: none; }
.sommaire ul { display: flex; gap: clamp(1.4rem, 3.5vw, 3.2rem); width: max-content; }
.sommaire a { display: flex; align-items: baseline; gap: .45rem; padding: 1.15rem 0; font-size: .95rem; font-weight: 500; color: var(--brun); text-decoration: none; white-space: nowrap; transition: color .3s; }
.sommaire a:hover, .sommaire a.est-actif { color: var(--encre); }
.sommaire__n { font: italic 400 1.05rem/1 var(--serif); color: var(--caramel); }
.sommaire__repere { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--l, 0); transform: translateX(var(--x, 0)); background: var(--caramel); transition: transform .6s var(--ease), width .6s var(--ease); }

.cat { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 7rem); padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--ligne-forte); }
.cat:first-child { border-top: 0; }
.cat__cote { position: sticky; top: calc(var(--entete-h) + 88px); align-self: start; }
.cat__num { font: italic 400 1.5rem/1 var(--serif); color: var(--caramel); margin-bottom: 1rem; }
.cat__titre { font: 400 clamp(2.6rem, 4.6vw, 4.4rem)/.95 var(--serif); letter-spacing: -.025em; margin-bottom: 1.2rem; }
.cat__intro { color: var(--brun); max-width: 34ch; }
.cat__cadre { position: relative; aspect-ratio: 4 / 5; max-width: 400px; margin-top: 2.2rem; }
.cat__img { position: absolute; inset: 0 0 1.8rem; overflow: hidden; opacity: 0; transition: opacity .7s ease; }
.cat__img.est-actif { opacity: 1; }
.cat__img img { transform: scale(1.06); transition: transform 1.4s var(--ease); }
.cat__img.est-actif img { transform: none; }
.cat__leg { position: absolute; left: 0; bottom: 0; }

.plat { position: relative; display: flex; gap: 1.2rem; padding: 1.7rem 0; border-bottom: 1px solid var(--ligne); }
.plat:first-child { padding-top: .4rem; }
.plat::before { content: ""; position: absolute; left: -1.4rem; top: 2.15rem; width: 6px; height: 6px; border-radius: 50%; background: var(--caramel); transform: scale(0); transition: transform .5s var(--ease); }
.plat:first-child::before { top: .85rem; }
.plat:hover::before { transform: none; }
.plat__corps { flex: 1; min-width: 0; transition: transform .6s var(--ease); }
.plat:hover .plat__corps { transform: translateX(.5rem); }
.plat__tete { display: flex; align-items: baseline; gap: .8rem; }
.plat__nom { font: 400 clamp(1.55rem, 2.2vw, 1.95rem)/1.1 var(--serif); letter-spacing: -.01em; transition: color .4s; }
.plat:hover .plat__nom { color: var(--caramel); }
.plat__pts { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--ligne-forte); transform: translateY(-.35em); }
.plat__desc { margin: .4rem 0 0; color: var(--brun); }
.plat__ing { margin: .55rem 0 0; font: 600 .7rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--caramel-f); }
.plat__mini { display: none; }

.cat--formules, .cat--supplements { grid-template-columns: 5fr 7fr; }
.cat--formules { grid-template-columns: 1fr; }
.cat--formules .cat__cote { position: static; max-width: 60ch; }
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.formule { position: relative; text-align: center; padding: 2.8rem 1.6rem 2.4rem; border: 1px solid var(--encre); outline: 1px solid var(--ligne-forte); outline-offset: -8px; background: var(--farine); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.formule:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgb(33 25 19 / .45); }
.formule__orn .i { width: .8rem; height: 1.1rem; margin: 0 auto 1rem; color: var(--caramel); }
.formule__nom { font: 400 2.1rem/1 var(--serif); margin-bottom: 1.4rem; }
.formule__contenu { margin: 0 auto 1.2rem; }
.formule__contenu li { padding: .35rem 0; }
.formule__contenu li + li::before { content: "·"; display: block; color: var(--caramel); line-height: .6; margin-bottom: .35rem; }
.formule__cond { font-size: .82rem; color: var(--brun); }
.formule__prix { margin: 1.4rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--ligne); }
.formule__prix .prix { font: 400 2rem/1 var(--serif); }

.boissons { display: grid; gap: 2.8rem; }
.boissons__t { font: italic 400 1.6rem/1 var(--serif); color: var(--caramel); margin-bottom: .6rem; }
.boisson, .supp { display: flex; align-items: baseline; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--ligne); }
.boisson__nom { font: 400 1.4rem/1.2 var(--serif); }
.boisson__det { font: 500 .78rem/1 var(--sans); color: var(--brun); margin-left: .3rem; }
.boissons__note { font-size: .86rem; color: var(--brun); margin: 1rem 0 0; }
.supps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.supp span:first-child { font: 400 1.35rem/1.2 var(--serif); }
.carte__fin { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; padding: 3rem 0 0; border-top: 1px solid var(--ligne-forte); font-size: .88rem; color: var(--brun); text-align: center; }
.carte__fin .i { width: .6rem; height: .9rem; color: var(--caramel); }

/* ── 7d. Notre histoire ──────────────────────────────────────────────────── */
.h-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--sarrasin); color: var(--creme); }
.h-hero__img { position: absolute; inset: 0; overflow: hidden; }
.h-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.h-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(33 25 19 / .9) 0%, rgb(33 25 19 / .3) 50%, rgb(33 25 19 / .35) 100%); }
.anim .h-hero__img { animation: rideau-haut 1.4s var(--ease-io) both; }
.h-hero__texte { position: relative; padding-block: 30vh 13vh; }
.h-hero__titre { font-size: clamp(3.4rem, 9vw, 9.4rem); line-height: .86; letter-spacing: -.035em; max-width: 12ch; }
.h-hero__leg { position: absolute; right: var(--gout); bottom: 1.4rem; margin: 0; }

.h-debuts__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: start; }
.h-debuts__grille > .chap { grid-column: 1 / -1; }
.h-debuts__grille > h2 { grid-column: 1 / 6; }
.h-debuts__texte { grid-column: 7 / 13; }
.a-ecrire { padding: 2rem 2.2rem; border: 1px solid var(--ligne-forte); outline: 1px solid var(--ligne); outline-offset: 6px; background: rgb(233 223 203 / .5); }
.a-ecrire__t { display: flex; align-items: center; gap: .6rem; font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--caramel-f); margin-bottom: 1.4rem; }
.a-ecrire__t .i { width: .6rem; height: .85rem; }
.a-ecrire li { font: italic 400 1.45rem/1.25 var(--serif); padding: .55rem 0; border-bottom: 1px solid var(--ligne); }
.a-ecrire li:last-child { border-bottom: 0; }
.a-ecrire__ac { margin: 1.2rem 0 0; }
.section--sombre .a-ecrire { background: transparent; border-color: var(--ligne-claire); }

.h-sarrasin__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: center; }
.h-sarrasin__photo { grid-column: 1 / 7; margin: 0; }
.ph--haute { aspect-ratio: 4 / 5; }
.h-sarrasin__texte { grid-column: 8 / 13; }
.h-sarrasin__texte h2 { margin-bottom: 2rem; }
.h-sarrasin__texte p { color: var(--creme-2); font-size: 1.06rem; max-width: 44ch; }
.h-sarrasin__ac { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--ligne-claire); color: var(--creme) !important; }

.h-phrase { padding-block: clamp(6rem, 14vw, 12rem); text-align: center; border-bottom: 1px solid var(--ligne); }
.h-phrase__t { font: 400 clamp(2.2rem, 5.2vw, 5rem)/1.06 var(--serif); letter-spacing: -.02em; max-width: 22ch; margin-inline: auto; }
.h-phrase__ex { margin-top: 1.5rem; }

.h-esprit__deux { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin: 3.5rem 0 clamp(4rem, 8vw, 6rem); }
.h-esprit__t { font: 600 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brun); margin-bottom: 1.2rem; }
.valeurs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--encre); }
.valeur { padding: 2.2rem 2.5rem 0 0; }
.valeur + .valeur { padding-left: 2.5rem; border-left: 1px solid var(--ligne); }
.valeur__n { display: block; font: italic 400 1.4rem/1 var(--serif); color: var(--caramel); margin-bottom: 1.2rem; }
.valeur__t { font: 400 2.4rem/1 var(--serif); margin-bottom: 1rem; }
.valeur p { color: var(--brun); }

.h-produits__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 1rem; align-items: start; }
.h-produits__texte { grid-column: 1 / 6; grid-row: 1 / 3; }
.h-produits__texte h2 { margin-bottom: 1.8rem; }
.h-produits__texte > p { color: var(--brun); max-width: 42ch; }
.h-produits__grille figure { margin: 0; }
.h-produits__a { grid-column: 7 / 12; grid-row: 1; }
.h-produits__a .ph { aspect-ratio: 4 / 3; }
.h-produits__b { grid-column: 10 / 13; grid-row: 2; margin-top: -18% !important; position: relative; z-index: 1; }
.h-produits__b .ph { aspect-ratio: 1; outline: 10px solid var(--farine-2); }
.h-produits__leg { grid-column: 7 / 10; grid-row: 2; }
.registre { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.registre th, .registre td { text-align: left; padding: .95rem 0; border-bottom: 1px solid var(--ligne-forte); vertical-align: baseline; }
.registre thead th { font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brun); padding-bottom: .7rem; }
.registre tbody th { font: 400 1.35rem/1.15 var(--serif); padding-right: 1.5rem; }
.registre td { text-align: right; }

.h-ambiance { padding-bottom: clamp(5rem, 10vw, 8rem); }
.defile { overflow-x: auto; scrollbar-width: none; margin-top: clamp(2rem, 5vw, 4rem); scroll-snap-type: x mandatory; }
.defile::-webkit-scrollbar { display: none; }
.defile__piste { display: flex; gap: clamp(1rem, 2vw, 1.8rem); width: max-content; padding-inline: var(--gout); }
.defile__item { margin: 0; width: clamp(250px, 32vw, 500px); scroll-snap-align: center; }
.defile__item:nth-child(even) { margin-top: 4rem; }
.defile__item .ph { aspect-ratio: 4 / 5; }
@supports (animation-timeline: view()) {
  .anim .defile { overflow: hidden; scroll-snap-type: none; }
  .anim .defile__piste { animation: glisse linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }
  @keyframes glisse { from { transform: translateX(0); } to { transform: translateX(calc(100vw - 100%)); } }
}
.h-ambiance__fin { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--ligne); }
.h-ambiance__fin > p { margin: 0; }
.h-ambiance__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }

/* ── 7e. Galerie ─────────────────────────────────────────────────────────── */
.galerie { padding-bottom: clamp(5rem, 10vw, 8rem); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ligne); }
.filtre { display: inline-flex; align-items: baseline; gap: .45rem; padding: .7rem 1.1rem; border: 1px solid var(--ligne-forte); background: transparent; font-size: .88rem; font-weight: 500; transition: background-color .35s, color .35s, border-color .35s; }
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--sarrasin); border-color: var(--sarrasin); color: var(--creme); }
.filtre__n { font: italic 400 .95rem/1 var(--serif); opacity: .65; }
.mosaique { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(100px, 10.5vw, 180px); grid-auto-flow: dense; gap: clamp(8px, 1.1vw, 16px); margin-top: 2.5rem; }
/* Largeurs toujours paires (2 ou 4 colonnes sur 6) : les tuiles s'emboîtent sans laisser de trou */
.tuile--g { grid-column: span 4; grid-row: span 4; }
.tuile--p { grid-column: span 2; grid-row: span 4; }
.tuile--l { grid-column: span 4; grid-row: span 3; }
.tuile--c { grid-column: span 2; grid-row: span 3; }
.tuile[hidden] { display: none; }
.tuile__lien { position: relative; display: block; height: 100%; overflow: hidden; background: var(--farine-3); }
.tuile__lien img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease), filter .6s; }
.tuile__lien:hover img, .tuile__lien:focus-visible img { transform: scale(1.06); }
.tuile__lien::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(33 25 19 / .75), transparent 55%); opacity: 0; transition: opacity .5s; }
.tuile__lien:hover::after, .tuile__lien:focus-visible::after { opacity: 1; }
.tuile__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .25rem; padding: 1.1rem 1.2rem; color: var(--creme); opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .6s var(--ease); }
.tuile__lien:hover .tuile__info, .tuile__lien:focus-visible .tuile__info { opacity: 1; transform: none; }
.tuile__cat { font: 600 .62rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--beurre); }
.tuile__leg { font: italic 400 1.3rem/1.15 var(--serif); }
.tuile__plus { position: absolute; top: .9rem; right: .9rem; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; color: var(--creme); border: 1px solid rgb(241 231 214 / .6); background: rgb(33 25 19 / .25); opacity: 0; transform: rotate(-90deg) scale(.8); transition: opacity .4s, transform .6s var(--ease); }
.tuile__lien:hover .tuile__plus, .tuile__lien:focus-visible .tuile__plus { opacity: 1; transform: none; }
.anim .tuile[data-reveal] { transition-delay: calc(var(--d, 0) * 70ms); }

/* Visionneuse */
.visio { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(22 16 12 / .97); color: var(--creme); opacity: 0; transition: opacity .4s ease; }
.visio.est-ouvert { opacity: 1; }
.visio::backdrop { background: rgb(22 16 12 / .7); }
.visio__in { position: relative; height: 100%; display: grid; place-items: center; padding: 4.5rem 6rem 3rem; }
.visio__fig { margin: 0; display: grid; justify-items: center; gap: 1rem; max-width: 100%; }
.visio__cadre { display: grid; place-items: center; }
.visio__img { max-width: min(100%, 1400px); max-height: calc(100dvh - 11rem); width: auto; height: auto; object-fit: contain; opacity: 0; transform: scale(.97); transition: opacity .45s ease, transform .7s var(--ease); }
.visio__img.est-pret { opacity: 1; transform: none; }
.visio__leg { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .4rem 1rem; text-align: center; font: italic 400 1.3rem/1.2 var(--serif); }
.visio__cat { font: 600 .62rem/1 var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--beurre); }
.visio__ill { font: 500 .72rem/1 var(--sans); font-style: normal; color: var(--creme-2); }
.visio__n { position: absolute; top: 1.6rem; left: 1.6rem; margin: 0; font: italic 400 1.2rem/1 var(--serif); color: var(--creme-2); }
.visio__n span:first-child { color: var(--beurre); }
.visio__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; background: transparent; border: 1px solid var(--ligne-claire); color: var(--creme); transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.visio__btn:hover { background: var(--creme); color: var(--sarrasin); border-color: var(--creme); }
.visio__btn .i { width: 1.3rem; height: 1.3rem; }
.visio__prec { left: 1.4rem; top: 50%; translate: 0 -50%; }
.visio__suiv { right: 1.4rem; top: 50%; translate: 0 -50%; }
.visio__fermer { top: 1.2rem; right: 1.4rem; }
.visio__fermer:hover { transform: rotate(90deg); }

/* ── 7f. Réservation ─────────────────────────────────────────────────────── */
.resa { display: grid; grid-template-columns: 5fr 7fr; min-height: calc(100svh - var(--entete-h)); }
.resa__cote { background: var(--sarrasin); color: var(--creme); }
.resa__cote-in { position: sticky; top: var(--entete-h); padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4.5rem); }
.resa__titre { font-size: clamp(3rem, 5.6vw, 5.8rem); line-height: .9; margin-bottom: 2.4rem; }
.resa__important { display: flex; gap: .9rem; padding: 1.2rem 1.3rem; border: 1px solid var(--ligne-claire); font-size: .95rem; color: var(--creme-2); }
.resa__important strong { color: var(--creme); }
.resa__important .i { width: 1.3rem; height: 1.3rem; color: var(--beurre); margin-top: .1rem; }
.resa__tel { margin-top: 2.4rem; }
.resa__k { font: 600 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--beurre); margin-bottom: .8rem; }
.resa__num { display: inline-flex; align-items: center; gap: .8rem; font: 400 clamp(1.9rem, 3vw, 2.6rem)/1.1 var(--serif); text-decoration: none; margin: 0; }
.resa__num .i { width: 1.6rem; height: 1.6rem; color: var(--beurre); }
a.resa__num:hover { color: var(--beurre); }
.resa__num--vide { font-size: 1.4rem; flex-wrap: wrap; }
.resa__groupe { margin-top: .8rem; font-size: .9rem; color: var(--creme-2); }
.resa__photo { margin: 2.6rem 0 0; }
.resa__photo .ph { aspect-ratio: 16 / 10; }

.resa__form-zone { padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 6rem); max-width: 860px; }
.form__resume { padding: 1rem 1.2rem; margin-bottom: 2rem; border-left: 3px solid var(--brique); background: rgb(162 52 30 / .07); color: var(--brique); font-size: .95rem; }
.form__resume a { font-weight: 600; }
.form__bloc { border: 0; padding: 0; margin: 0 0 3rem; min-width: 0; }
.form__leg { display: flex; align-items: center; gap: .9rem; padding: 0; margin-bottom: 1.8rem; font: 400 2rem/1.1 var(--serif); }
.form__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ligne-forte); border-radius: 50%; font: 600 .75rem/1 var(--sans); color: var(--caramel); flex-shrink: 0; }
.form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.champ { position: relative; margin: 0 0 1.6rem; border: 0; padding: 0; min-width: 0; }
.champ__label { display: block; padding: 0; margin-bottom: .55rem; font: 600 .7rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brun); }
.champ__opt { font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: .78rem; margin-left: .3rem; }
.champ__input { width: 100%; padding: .8rem 0; font-size: 1.08rem; background: transparent; border: 0; border-bottom: 1px solid var(--ligne-forte); border-radius: 0; transition: border-color .3s, box-shadow .3s; }
.champ__input:focus { outline: none; border-color: var(--caramel); box-shadow: 0 1px 0 var(--caramel); }
.champ__input:focus-visible { outline: none; }
textarea.champ__input { min-height: 7.5rem; padding: .9rem 1rem; border: 1px solid var(--ligne-forte); resize: vertical; line-height: 1.5; }
textarea.champ__input:focus { box-shadow: 0 0 0 1px var(--caramel); }
.champ__input::placeholder { color: rgb(103 82 63 / .65); }
input[type="date"].champ__input { min-height: 3.05rem; }
.champ__input[aria-invalid="true"] { border-color: var(--brique); box-shadow: 0 1px 0 var(--brique); }
.champ__aide { margin: .45rem 0 0; font-size: .8rem; color: var(--brun); }
.champ__err { margin: .45rem 0 0; font-size: .84rem; font-weight: 500; color: var(--brique); }
.champ__err:empty { display: none; }
.champ.est-erreur { animation: secoue .4s ease; }
.champ.est-ok > .champ__label::after, .champ.est-ok > legend::after { content: " ✓"; color: var(--embruns); letter-spacing: 0; }
@keyframes secoue { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.compteur { display: inline-flex; align-items: stretch; border: 1px solid var(--ligne-forte); }
.compteur__btn { display: grid; place-items: center; width: 52px; background: transparent; border: 0; transition: background-color .3s, color .3s; }
.compteur__btn:hover:not(:disabled) { background: var(--sarrasin); color: var(--creme); }
.compteur__btn:disabled { opacity: .3; cursor: not-allowed; }
.compteur__btn .i { width: 1.1rem; height: 1.1rem; }
.compteur__val { width: 4.2rem; padding: .55rem 0; text-align: center; font: 400 2rem/1 var(--serif); background: transparent; border: 0; border-inline: 1px solid var(--ligne-forte); -moz-appearance: textfield; appearance: textfield; }
.compteur__val::-webkit-outer-spin-button, .compteur__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur__val.bump { animation: bump .35s var(--ease); }
@keyframes bump { 40% { transform: scale(1.18); } }

.creneaux { display: flex; flex-wrap: wrap; gap: .5rem; }
.creneau { position: relative; }
.creneau input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.creneau span { display: block; padding: .7rem 1rem; border: 1px solid var(--ligne-forte); font-variant-numeric: tabular-nums; font-weight: 500; transition: background-color .3s, color .3s, border-color .3s; }
.creneau input:hover + span { border-color: var(--encre); }
.creneau input:checked + span { background: var(--sarrasin); border-color: var(--sarrasin); color: var(--creme); }
.creneau input:focus-visible + span { outline: 2px solid var(--caramel); outline-offset: 2px; }
.creneau input:disabled + span { opacity: .35; text-decoration: line-through; }
.creneaux-vide { font-size: .9rem; color: var(--brun); margin: 0; }

.case { display: flex; gap: .9rem; align-items: flex-start; font-size: .92rem; cursor: pointer; position: relative; }
.case input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.case__box { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: .1rem; border: 1px solid var(--ligne-forte); color: transparent; transition: background-color .3s, border-color .3s, color .3s; }
.case__box .i { width: 14px; height: 14px; }
.case input:checked + .case__box { background: var(--caramel); border-color: var(--caramel); color: #fff; }
.case input:focus-visible + .case__box { outline: 2px solid var(--caramel); outline-offset: 3px; }
.case input[aria-invalid="true"] + .case__box { border-color: var(--brique); }

.form__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding-top: 2rem; border-top: 1px solid var(--ligne); }
.form__rappel { margin: 0; font-size: .88rem; color: var(--brun); }

.recu { text-align: center; padding: 3.5rem 2rem; border: 1px solid var(--encre); outline: 1px solid var(--ligne-forte); outline-offset: -9px; }
.recu:focus { outline: 1px solid var(--ligne-forte); }
.anim .recu:not([hidden]) { animation: monte .9s var(--ease) both; }
.recu__orn .i { width: 1rem; height: 1.4rem; margin: 0 auto 1rem; color: var(--caramel); }
.recu__t { font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--serif); margin-bottom: 1.2rem; }
.recu__txt { max-width: 46ch; margin: 0 auto 2rem; color: var(--brun); }
.recu__dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1.5rem; max-width: 440px; margin: 0 auto 2.4rem; text-align: left; }
.recu__dl dt, .recu__dl dd { padding: .6rem 0; border-bottom: 1px solid var(--ligne); margin: 0; }
.recu__dl dt { font: 600 .68rem/1.8 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brun); }

/* ── 7g. Contact ─────────────────────────────────────────────────────────── */
.statut { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; }
.statut::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--embruns); box-shadow: 0 0 0 0 rgb(45 74 82 / .5); animation: pouls 2s infinite; }
.statut.est-ferme::before { background: var(--brique); animation: none; }
@keyframes pouls { 70% { box-shadow: 0 0 0 9px rgb(45 74 82 / 0); } 100% { box-shadow: 0 0 0 0 rgb(45 74 82 / 0); } }

.contact { padding-top: 0; }
.contact__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: start; }
.contact__coords { grid-column: 1 / 6; }
.contact__plan { grid-column: 7 / 13; position: sticky; top: calc(var(--entete-h) + 2rem); }
.coord { padding: 1.7rem 0; border-top: 1px solid var(--ligne-forte); }
.coord__k { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brun); }
.coord__k .i { width: 1.1rem; height: 1.1rem; color: var(--caramel); }
.coord__adresse { font: 400 clamp(2rem, 3.4vw, 3rem)/1.05 var(--serif); letter-spacing: -.015em; margin-bottom: 1.2rem; }
.coord__v { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 var(--serif); }
.coord__v a { text-decoration: none; transition: color .3s; overflow-wrap: anywhere; }
.coord__v a:hover { color: var(--caramel); }
.coord__v--vide { font-size: 1rem; }
.coord__reseaux { display: flex; flex-wrap: wrap; gap: .8rem 2rem; }
.copier { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .75rem; background: transparent; border: 1px solid var(--ligne-forte); font: 600 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.copier:hover { background: var(--sarrasin); color: var(--creme); }
.copier .i { width: .95rem; height: .95rem; }
.copier__b { display: none; }
.copier.est-copie .copier__a { display: none; }
.copier.est-copie .copier__b { display: block; color: var(--embruns); }
.copier.est-copie:hover .copier__b { color: var(--beurre); }

/* Pas de hauteur minimale avec des proportions fixes : le navigateur élargirait le cadre */
.plan { position: relative; height: clamp(360px, 46vw, 620px); overflow: hidden; background: var(--farine-2); border: 1px solid var(--ligne-forte); }
.plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: sepia(.25) saturate(.85); }
.plan__voile { position: absolute; inset: 0; display: grid; place-content: center; gap: 1.2rem; padding: 2rem; text-align: center; }
.plan__voile p { max-width: 36ch; margin: 0; color: var(--brun); }
.plan__dessin { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--brun); opacity: .55; }
.plan__pin { position: absolute; left: 50%; top: 46%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--farine); border: 1px solid var(--ligne-forte); }
.plan__pin::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--caramel); animation: onde 2.6s var(--ease) infinite; }
.plan__pin .i { width: 18px; height: 26px; color: var(--caramel); }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.plan__txt { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; margin: 0; padding: 1rem 1.2rem; background: var(--farine); border: 1px solid var(--ligne); font-size: .9rem; }

.contact__bas-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 7rem); }
.contact__note { margin-top: 1.2rem; font-size: .88rem; color: var(--brun); }
.acces { margin: 2.5rem 0 0; }
.acces__ligne { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 1rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--ligne-forte); }
.acces dt { font: 400 1.45rem/1.15 var(--serif); }
.acces dd { margin: 0; }

.contact__photo { position: relative; height: 72vh; min-height: 420px; overflow: hidden; display: grid; align-items: end; background: var(--sarrasin); color: var(--creme); }
.contact__photo-img { position: absolute; inset: 0; overflow: hidden; }
.contact__photo-img img { width: 100%; height: 100%; object-fit: cover; }
.contact__photo-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(33 25 19 / .75), rgb(33 25 19 / 0) 60%); }
.contact__kenavo { position: relative; margin-bottom: 8vh; font: 400 clamp(3.2rem, 9vw, 9rem)/.88 var(--serif); letter-spacing: -.035em; }
.contact__kenavo em { display: block; font-style: italic; padding-left: .8em; }

/* ── 7h. Mentions légales, 404 ───────────────────────────────────────────── */
.tete-page--simple { padding-bottom: 0; }
.legal { padding-top: 2rem; }
.legal__grille { max-width: 780px; }
.legal h2 { font: 400 2.1rem/1.1 var(--serif); margin: 3rem 0 1rem; }
.legal section:first-child h2 { margin-top: 0; }
.legal p { color: var(--brun); line-height: 1.75; }
.legal__credits { columns: 2; column-gap: 2rem; margin-bottom: 1.5rem; font-size: .92rem; }
.legal__credits li { padding: .3rem 0; break-inside: avoid; }
.legal__credits a { text-underline-offset: .2em; text-decoration-color: var(--ligne-forte); }
.legal__credits a:hover { color: var(--caramel); }

.p404 { padding-block: clamp(5rem, 12vw, 10rem); }
.p404__n { display: flex; align-items: center; gap: .1em; margin-bottom: 1rem; font: 400 clamp(6rem, 18vw, 14rem)/1 var(--serif); color: var(--caramel); }
.p404__n .i { width: .32em; height: .45em; }
.p404 p { max-width: 44ch; color: var(--brun); }
.p404__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2rem; }

/* ── 8. Adaptations écrans ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .entete__in { gap: 1.1rem; }
  .pied__in { grid-template-columns: repeat(3, 1fr); }
  .pied__marque { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --entete-h: 66px; }
  .logo__nom { font-size: 1.45rem; }

  /* Accueil : le titre, puis la photo, puis l'accroche */
  .hero { padding-top: calc(var(--entete-h) + 2rem); }
  .hero__grille { display: flex; flex-direction: column; align-items: stretch; }
  .hero__texte { display: contents; }
  .hero__sur { order: 1; }
  .hero__titre { order: 2; font-size: clamp(4rem, 19vw, 9rem); margin-bottom: .35em; }
  .hero__photo { order: 3; padding: 0; margin-left: 12%; }
  .hero__cadre { height: auto; min-height: 0; aspect-ratio: 4 / 4.4; }
  .hero__accroche { order: 4; margin-top: 2rem; }
  .hero__actions { order: 5; margin-bottom: 2.5rem; }
  .hero__infos { grid-template-columns: 1fr; }
  .hero__infos li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; text-align: right; }
  .hero__infos li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--ligne-claire); }
  .hero__k { text-align: left; }
  .hero__defiler { display: none; }

  .maison__grille { display: block; }
  .maison__photo { width: 72%; margin: 0 0 2.5rem auto; }

  .vedettes__tete { display: block; }
  .vedettes__note { margin-top: 1.2rem; }
  .vedettes__grille { display: block; }
  .vedettes__apercu { display: none; }
  .vedette__lien { grid-template-columns: 2.2rem 1fr auto; gap: 1rem; padding: 1.3rem 0; }
  .vedette__mini { display: block; grid-column: 3; grid-row: 1 / 3; width: 76px; height: 92px; overflow: hidden; }
  .vedette__mini img { width: 100%; height: 100%; object-fit: cover; }
  .vedette__lien .prix { grid-column: 2; }
  .vedette__fleche { display: none; }
  .vedette__lien:hover .vedette__corps { transform: none; }

  .geste__grille { display: block; }
  .geste__visuel { display: none; }
  .etape { min-height: 0; padding-block: 2.5rem; }
  .anim .etape:not(.est-actif) { opacity: 1; }
  .etape__img { display: block; aspect-ratio: 4 / 3; margin-bottom: 1.8rem; }

  .bolee { min-height: 80svh; }

  .salle__grille { grid-template-columns: repeat(6, 1fr); }
  .salle__texte { grid-column: 1 / -1; margin-bottom: 2rem; }
  .salle__a { grid-column: 1 / 5; grid-row: 2 / 4; }
  .salle__b { grid-column: 4 / 7; grid-row: 4; margin-top: -25% !important; }
  .salle__c { grid-column: 5 / 7; grid-row: 2; margin-top: 30% !important; }
  .salle__c .ph { aspect-ratio: 3 / 4; }
  .salle__leg { grid-column: 1 / -1; grid-row: 5; }

  .pratique__grille { grid-template-columns: 1fr; }

  .tete-page__grille { display: block; }
  .tete-page__intro { margin-top: 2rem; }

  .cat { grid-template-columns: 1fr; gap: 1.5rem; }
  .cat__cote { position: static; }
  .cat__cadre { display: none; }
  .plat__mini { display: block; flex-shrink: 0; width: 72px; height: 86px; order: 2; }
  .plat:hover .plat__corps { transform: none; }
  .plat::before { display: none; }
  .formules { grid-template-columns: 1fr; max-width: 520px; }

  .h-debuts__grille, .h-sarrasin__grille, .h-produits__grille, .contact__grille { display: block; }
  .h-debuts__grille > h2 { margin-bottom: 2rem; }
  .h-sarrasin__photo { margin-bottom: 3rem; }
  .h-esprit__deux { grid-template-columns: 1fr; }
  .valeurs { grid-template-columns: 1fr; }
  .valeur, .valeur + .valeur { padding: 1.8rem 0; border-left: 0; border-bottom: 1px solid var(--ligne); }
  .h-produits__a { margin-top: 3rem !important; }
  .h-produits__b { width: 52%; margin: -22% 0 0 auto !important; }
  .h-produits__leg { margin-top: 1rem; }

  .mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 30vw; }
  .tuile--g { grid-column: span 2; grid-row: span 3; }
  .tuile--p { grid-column: span 1; grid-row: span 2; }
  .tuile--l { grid-column: span 2; grid-row: span 2; }
  .tuile--c { grid-column: span 1; grid-row: span 2; }
  .tuile__info, .tuile__plus { display: none; }
  .tuile__lien::after { display: none; }

  .visio__in { padding: 4rem 1rem 6.5rem; }
  .visio__img { max-height: calc(100dvh - 13rem); }
  .visio__prec, .visio__suiv { top: auto; bottom: 1.2rem; translate: none; }
  .visio__prec { left: auto; right: calc(1.2rem + 60px); }
  .visio__suiv { right: 1.2rem; }
  .visio__n { top: auto; bottom: 2.1rem; left: 1.2rem; }

  .resa { grid-template-columns: 1fr; }
  .resa__cote-in { position: static; }
  .resa__photo { display: none; }

  .contact__plan { position: static; margin-top: 2.5rem; }
  .contact__bas-grille { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .demo__plus { display: none; }
  .entete__resa { padding: .7rem .9rem; letter-spacing: .1em; }
  .burger__txt { display: none; }
  .hero__titre .l:nth-child(2) { padding-left: .5em; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__photo { margin-left: 8%; }
  .form__duo { grid-template-columns: 1fr; }
  .supps { grid-template-columns: 1fr; }
  .pied__in { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .pied__bas { flex-direction: column; }
  .acces__ligne { grid-template-columns: 1fr; gap: .3rem; }
  .legal__credits { columns: 1; }
  .registre tbody th { font-size: 1.15rem; }
  .registre td { text-align: left; }
  .registre th, .registre td { display: block; border: 0; padding: .2rem 0; }
  .registre tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--ligne-forte); }
  .registre thead { display: none; }
  .defile__item:nth-child(even) { margin-top: 2rem; }
  .salle__b { margin-top: -15% !important; }
  .plat__nom { font-size: 1.45rem; }
  .recu { padding: 2.5rem 1.2rem; }
  .recu__dl { grid-template-columns: 1fr; }
  .recu__dl dt { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 400px) {
  .logo__nom { font-size: 1.28rem; }
  .logo__mark { display: none; }
  .pied__in { grid-template-columns: 1fr; }
}

/* ── 9. Moins d'animations : tout s'affiche directement ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .hero__fil::after, .plan__pin::before, .statut::before { animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}