/* =============================================================================
   CANTINO — Metz
   Feuille de style unique. Ordre : tokens, base, texte, composants, pages,
   utilitaires, responsive.
   ============================================================================= */

/* ---------- 1. TOKENS ------------------------------------------------------ */
:root {
  /* Couleurs */
  --creme: #f3eee5;
  --creme-fonce: #ebe3d6;
  --pierre: #e0d7c7;
  --papier: #f8f5ef;
  --encre: #251c18;
  --encre-doux: #4a3b33;
  --encre-mate: #6b5b50;
  --terracotta: #a85f48;
  --terracotta-fonce: #8e4a34;
  --vin: #55201f;
  --trait: rgba(37, 28, 24, 0.16);
  --trait-clair: rgba(37, 28, 24, 0.09);

  /* Typographie */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rythme spatial */
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 11vw, 9rem);
  --largeur: 1280px;
  --largeur-texte: 34rem;

  /* Mouvement */
  --transition: 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-court: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --hauteur-header: 82px;
}

/* ---------- 2. BASE -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-header) + 1rem);
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain papier : très léger, fixe, non interactif. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.38;
  /* Pas de mix-blend-mode : le mode fusion contaminerait la visionneuse
     et les blocs sombres posés au-dessus. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
}

[hidden] { display: none !important; }

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

/* <picture> est un simple conteneur : sans hauteur explicite, le `height: 100%`
   des images à l'intérieur ne résout pas et object-fit ne recadre plus rien. */
.photo picture,
.hero__media picture,
.immersif__media picture,
.cloture__media picture,
.entete-page__media picture,
.mosaique picture { height: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--terracotta-fonce);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--terracotta); color: #fff; }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  background: var(--encre);
  color: var(--creme);
  padding: 0.9rem 1.4rem;
  font: 500 0.85rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ---------- 3. TYPOGRAPHIE ------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 1.6rem + 5.2vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 1.35rem + 3.3vw, 4rem); }
h3 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }

em, .italique { font-style: italic; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.surtitre {
  font: 500 0.72rem/1.4 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta-fonce);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.surtitre::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.6;
}
.surtitre--nu::before { display: none; }

.chapo {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.55;
  color: var(--encre-doux);
  max-width: var(--largeur-texte);
}

.texte { max-width: var(--largeur-texte); color: var(--encre-doux); }

.note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--encre-mate);
}

.legende {
  font: italic 400 0.88rem/1.5 var(--serif);
  color: var(--encre-mate);
  margin-top: 0.8rem;
}

.signature {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: 0.01em;
}

/* ---------- 4. MOTIF RYTHMIQUE (clin d'oeil batterie) ---------------------- */
/* • — • • —  : lu comme une mesure. Apparaît en cadence au scroll. */
.rythme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.6rem 0;
  color: var(--terracotta);
}
.rythme span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: opacity 340ms ease, transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rythme .point { width: 2px; border-radius: 50%; transform: scale(0.2); }
.rythme .trait { width: 22px; }
.est-visible .rythme span,
.rythme.est-visible span { opacity: 0.9; transform: none; }
.rythme span:nth-child(1) { transition-delay: 0ms; }
.rythme span:nth-child(2) { transition-delay: 110ms; }
.rythme span:nth-child(3) { transition-delay: 260ms; }
.rythme span:nth-child(4) { transition-delay: 340ms; }
.rythme span:nth-child(5) { transition-delay: 480ms; }
.rythme--centre { justify-content: center; }

/* ---------- 5. BOUTONS ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  font: 500 0.8rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition-court), color var(--transition-court),
    border-color var(--transition-court), transform var(--transition-court);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--plein {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
}
.btn--plein:hover { background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); }

.btn--contour {
  background: transparent;
  color: var(--encre);
  border-color: var(--trait);
}
.btn--contour:hover { border-color: var(--encre); background: rgba(37, 28, 24, 0.04); }

.btn--clair {
  background: transparent;
  color: var(--creme);
  border-color: rgba(243, 238, 229, 0.45);
}
.btn--clair:hover { background: rgba(243, 238, 229, 0.12); border-color: var(--creme); }

.btn--petit { min-height: 40px; padding: 0.6rem 1.1rem; font-size: 0.72rem; }

.boutons { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Lien souligné à l'animation discrète */
.lien {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.8rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-fonce);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition-court), gap var(--transition-court);
}
.lien:hover { color: var(--encre); gap: 0.85rem; }

/* ---------- 6. STRUCTURE ---------------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.enveloppe--large { max-width: 1560px; }

section { position: relative; }

.section { padding-block: var(--section); }
.section--pierre { background: var(--creme-fonce); }
.section--encre { background: var(--encre); color: var(--creme); }
.section--encre .texte,
.section--encre .chapo { color: rgba(243, 238, 229, 0.76); }
.section--encre .surtitre { color: #d99c80; }

.filet {
  height: 1px;
  background: var(--trait-clair);
  border: 0;
  margin: 0;
}

/* ---------- 7. EN-TÊTE ------------------------------------------------------ */
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  height: var(--hauteur-header);
  transition: height var(--transition-court), background var(--transition-court),
    box-shadow var(--transition-court), border-color var(--transition-court);
  border-bottom: 1px solid transparent;
}
.entete__interieur {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* En-tête posé sur un fond crème (accueil, galerie, pages sans photo pleine). */
.entete--fond { background: var(--creme); }

/* En-tête posé sur une photo : léger dégradé pour garder le texte lisible. */
.entete--clair::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 20, 17, 0.55), rgba(28, 20, 17, 0));
  pointer-events: none;
  transition: opacity var(--transition-court);
}
.entete--clair.entete--pose::before { opacity: 0; }

.marque {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: font-size var(--transition-court);
}

.entete--clair { color: var(--creme); }
.entete--clair .nav__lien { color: rgba(243, 238, 229, 0.85); }
.entete--clair .nav__lien:hover,
.entete--clair .nav__lien[aria-current="page"] { color: #fff; }
.entete--clair .burger span { background: var(--creme); }

.entete--pose {
  background: rgba(243, 238, 229, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--trait-clair);
  height: 66px;
  color: var(--encre);
}
.entete--pose .marque { font-size: 1.32rem; }
.entete--pose .nav__lien { color: var(--encre-doux); }
.entete--pose .nav__lien:hover,
.entete--pose .nav__lien[aria-current="page"] { color: var(--encre); }
.entete--pose .burger span { background: var(--encre); }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav__lien {
  position: relative;
  font: 500 0.76rem/1 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-doux);
  padding: 0.5rem 0;
  transition: color var(--transition-court);
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--transition-court);
}
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

.entete__actions { display: flex; align-items: center; gap: 0.75rem; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--encre);
  margin-inline: auto;
  transition: transform var(--transition-court), opacity var(--transition-court);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menu mobile plein écran */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--creme);
  padding: calc(var(--hauteur-header) + 2rem) var(--gouttiere) 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-court), transform var(--transition-court),
    visibility var(--transition-court);
}
.menu-mobile[data-ouvert="true"] { opacity: 1; visibility: visible; transform: none; }
.menu-mobile__nav { display: flex; flex-direction: column; gap: 0.25rem; }
.menu-mobile__lien {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  text-decoration: none;
  color: var(--encre);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--trait-clair);
  transition: color var(--transition-court), padding-left var(--transition-court);
}
.menu-mobile__lien[aria-current="page"] { color: var(--terracotta-fonce); }
.menu-mobile__lien:hover { color: var(--terracotta-fonce); padding-left: 0.5rem; }
.menu-mobile__pied { display: grid; gap: 1rem; }
.menu-mobile__pied .btn { width: 100%; }

/* CTA collant mobile */
.cta-collant {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 950;
  transform: translate(-50%, 130%);
  transition: transform var(--transition), opacity var(--transition);
  opacity: 0;
  box-shadow: 0 8px 24px rgba(37, 28, 24, 0.22);
  display: none;
}
.cta-collant[data-visible="true"] { transform: translate(-50%, 0); opacity: 1; }

/* ---------- 8. RÉVÉLATIONS -------------------------------------------------- */
.apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 780ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.apparait.est-visible { opacity: 1; transform: none; }
.apparait[data-delai="1"] { transition-delay: 90ms; }
.apparait[data-delai="2"] { transition-delay: 180ms; }
.apparait[data-delai="3"] { transition-delay: 270ms; }
.apparait[data-delai="4"] { transition-delay: 360ms; }

/* Voile qui se retire de l'image */
.revele { position: relative; overflow: hidden; }
.revele::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--creme);
  transform-origin: bottom center;
  transition: transform 1000ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 1;
}
.revele.est-visible::after { transform: scaleY(0); }
.revele img { transform: scale(1.06); transition: transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.revele.est-visible img { transform: none; }

/* ---------- 9. CADRES PHOTO ------------------------------------------------- */
.photo { position: relative; overflow: hidden; background: var(--pierre); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--portrait { aspect-ratio: 3 / 4; }
.photo--carre { aspect-ratio: 1 / 1; }
.photo--paysage { aspect-ratio: 4 / 3; }
.photo--large { aspect-ratio: 16 / 9; }
.photo--haute { aspect-ratio: 2 / 3; }

/* Petit cadre éditorial : filet intérieur discret */
.cadre::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(243, 238, 229, 0.28);
  pointer-events: none;
  z-index: 2;
}

/* ---------- 10. HERO ACCUEIL ------------------------------------------------ */
/* Les deux meilleures photos d'ambiance sont verticales : on leur laisse leur
   format plutôt que de les recadrer en bandeau, et le texte respire à côté. */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 88vh;
  padding-top: var(--hauteur-header);
  background: var(--creme);
}
.hero__panneau {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gouttiere) clamp(3rem, 6vw, 5rem);
  position: relative;
}
.hero__titre { margin-bottom: 1.5rem; }
.hero__titre em { color: var(--terracotta); }
.hero .chapo { margin-bottom: 2.2rem; }
.hero__media { position: relative; overflow: hidden; background: var(--pierre); min-height: 52vh; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__etiquette {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  font: 500 0.66rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(37, 28, 24, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.55rem 0.9rem;
  border-radius: 2px;
}

/* Ligne de repères sous le hero */
.reperes {
  border-top: 1px solid var(--trait-clair);
  border-bottom: 1px solid var(--trait-clair);
  background: var(--creme);
}
.reperes__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.reperes__item {
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(0.5rem, 2vw, 1.5rem);
  text-align: center;
  font: 500 0.74rem/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-doux);
  position: relative;
}
.reperes__item + .reperes__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: var(--trait);
}

/* ---------- 11. SECTIONS ÉDITORIALES --------------------------------------- */
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
.duo__texte { padding-block: clamp(0.5rem, 2vw, 1.5rem); }
.duo--inverse .duo__media { order: -1; }

@media (min-width: 900px) {
  .duo { grid-template-columns: 1.05fr 1fr; }
  .duo--inverse { grid-template-columns: 1fr 1.05fr; }
  .duo--inverse .duo__media { order: 0; }
  .duo--inverse .duo__texte { order: 1; }
}

/* Trois mots cadencés : Saison / Arrivage / Instinct */
.mots {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--trait-clair);
  list-style: none;
  padding-left: 0;
}
.mots li {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  color: var(--encre);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.mots li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terracotta);
  display: block;
  margin-left: -0.7rem;
}

/* Bloc immersif pleine largeur avec panneau posé dessus */
.immersif { position: relative; overflow: hidden; }
.immersif__media { position: relative; height: clamp(30rem, 76vh, 46rem); overflow: hidden; }
.immersif__media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: 50% 50%;
  will-change: transform;
}
.immersif__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(28, 20, 17, 0.66) 0%, rgba(28, 20, 17, 0.22) 55%, rgba(28, 20, 17, 0.05) 100%);
}
.immersif__contenu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  color: var(--creme);
}
.immersif__contenu .enveloppe { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.immersif__contenu h2 { color: #fff; }
.immersif__contenu p { color: rgba(243, 238, 229, 0.88); max-width: 30rem; }
.immersif__contenu .surtitre { color: #e8b79e; }

/* ---------- 12. BLOC MICHELIN ---------------------------------------------- */
.michelin { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .michelin { grid-template-columns: 1.15fr 1fr; } }

.compteur { display: flex; align-items: baseline; gap: 1.2rem; margin: 2rem 0 0.4rem; }
.compteur__nombre {
  font-family: var(--serif);
  font-size: clamp(5rem, 3rem + 11vw, 11rem);
  line-height: 0.8;
  color: var(--terracotta);
  letter-spacing: -0.04em;
}
.compteur__legende {
  font: 500 0.78rem/1.5 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-doux);
  max-width: 14rem;
}
.section--encre .compteur__legende { color: rgba(243, 238, 229, 0.75); }
.section--encre .compteur__nombre { color: #d98a63; }

.precision {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--terracotta);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--encre-doux);
  background: rgba(168, 95, 72, 0.06);
}
.section--encre .precision {
  color: rgba(243, 238, 229, 0.82);
  background: rgba(243, 238, 229, 0.05);
}

.chefs { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.chefs li {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--encre-doux);
}
.section--encre .chefs li { color: rgba(243, 238, 229, 0.86); }

/* ---------- 13. AVIS -------------------------------------------------------- */
.avis__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.avis__note { display: flex; align-items: baseline; gap: 0.7rem; }
.avis__note strong { font-family: var(--serif); font-size: 2.6rem; font-weight: 400; line-height: 1; }

.avis__grille {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.8rem;
}
@media (min-width: 720px) { .avis__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .avis__grille { grid-template-columns: repeat(3, 1fr); } }

.avis-carte {
  background: var(--papier);
  border: 1px solid var(--trait-clair);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.avis-carte__texte { font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; }
.avis-carte__auteur { font: 500 0.74rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-mate); }
.etoiles { color: var(--terracotta-fonce); letter-spacing: 0.18em; font-size: 0.9rem; }

.vide {
  border: 1px dashed var(--trait);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: rgba(248, 245, 239, 0.6);
  max-width: 46rem;
}
.vide p { color: var(--encre-doux); }

/* ---------- 14. MOSAÏQUE ACCUEIL ------------------------------------------- */
.mosaique {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(2, 1fr);
}
.mosaique a {
  display: block;
  overflow: hidden;
  position: relative;
  background: var(--pierre);
}
.mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mosaique a:hover img { transform: scale(1.03); }
@media (max-width: 859px) {
  .mosaique .m1 { grid-column: span 2; aspect-ratio: 4 / 3; }
  .mosaique .m2,
  .mosaique .m3 { aspect-ratio: 1 / 1; }
  .mosaique .m4,
  .mosaique .m5 { aspect-ratio: 3 / 4; }
}

@media (min-width: 860px) {
  .mosaique {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 17rem));
  }
  .mosaique .m1 { grid-column: 1 / 2; grid-row: 1 / 3; }
  .mosaique .m2 { grid-column: 2 / 4; grid-row: 1 / 2; }
  .mosaique .m3 { grid-column: 4 / 5; grid-row: 1 / 2; }
  .mosaique .m4 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .mosaique .m5 { grid-column: 3 / 5; grid-row: 2 / 3; }
}

/* ---------- 15. CLÔTURE ----------------------------------------------------- */
.cloture { position: relative; overflow: hidden; }
.cloture__media { position: absolute; inset: 0; }
.cloture__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cloture__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 20, 17, 0.5), rgba(28, 20, 17, 0.68));
}
.cloture__contenu {
  position: relative;
  z-index: 1;
  padding-block: clamp(5rem, 14vw, 9rem);
  color: var(--creme);
  text-align: center;
}
.cloture__contenu h2 { color: #fff; font-size: clamp(3rem, 2rem + 6vw, 6.5rem); }
.cloture__adresse {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.5;
  color: rgba(243, 238, 229, 0.88);
  margin: 1.4rem 0 2.4rem;
}
.cloture .boutons { justify-content: center; }

/* ---------- 16. PIED DE PAGE ------------------------------------------------ */
.pied {
  background: var(--encre);
  color: rgba(243, 238, 229, 0.74);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2rem;
  font-size: 0.94rem;
}
.pied a { color: inherit; text-decoration: none; transition: color var(--transition-court); }
.pied a:hover { color: #fff; }
.pied__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }

.pied__marque {
  font-family: var(--serif);
  font-size: 2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creme);
  line-height: 1;
  display: block;
  margin-bottom: 0.9rem;
}
.pied__titre {
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 238, 229, 0.5);
  margin-bottom: 1.2rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pied__bas {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(243, 238, 229, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(243, 238, 229, 0.55);
}

/* ---------- 17. HERO DE PAGE INTÉRIEURE ------------------------------------- */
.entete-page {
  position: relative;
  padding-top: calc(var(--hauteur-header) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}
.entete-page--photo { color: var(--creme); min-height: 62vh; display: flex; align-items: flex-end; }
.entete-page--photo .entete-page__media { position: absolute; inset: 0; }
.entete-page--photo .entete-page__media img { width: 100%; height: 100%; object-fit: cover; }
.entete-page--photo .entete-page__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 20, 17, 0.82) 0%, rgba(28, 20, 17, 0.38) 45%, rgba(28, 20, 17, 0.3) 100%);
}
.entete-page__contenu { position: relative; z-index: 1; width: 100%; }
.entete-page--photo h1 { color: #fff; }
.entete-page--photo .chapo { color: rgba(243, 238, 229, 0.88); }
.entete-page--photo .surtitre { color: #e8b79e; }

.fil {
  font: 500 0.7rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-mate);
  margin-bottom: 1.6rem;
}
.entete-page--photo .fil { color: rgba(243, 238, 229, 0.72); }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* ---------- 18. CHRONOLOGIE -------------------------------------------------- */
.chrono { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.chrono li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 2.5rem;
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--trait-clair);
}
.chrono li:last-child { border-bottom: 1px solid var(--trait-clair); }
@media (min-width: 700px) { .chrono li { grid-template-columns: 10rem 1fr; align-items: baseline; } }
.chrono__date {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  color: var(--terracotta);
  line-height: 1;
}
.chrono__titre { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin-bottom: 0.4rem; }
.chrono__texte { color: var(--encre-doux); max-width: 32rem; }

/* ---------- 19. ARCHIVES ---------------------------------------------------- */
.archives { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .archives { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.archive {
  background: var(--papier);
  padding: clamp(0.75rem, 1.6vw, 1rem);
  border: 1px solid var(--trait-clair);
  box-shadow: 0 1px 0 rgba(37, 28, 24, 0.04);
}
.archive .photo { background: #cfc5b4; }
.archive img { filter: saturate(0.62) contrast(0.95) sepia(0.14); }
.archive__pied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.85rem;
}
.archive__note { font: italic 400 0.95rem/1.4 var(--serif); color: var(--encre-doux); }
.archive__tampon {
  font: 500 0.62rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta-fonce);
  border: 1px solid currentColor;
  padding: 0.3rem 0.45rem;
  flex: none;
}

/* ---------- 20. CARTE (MENU) ------------------------------------------------- */
.carte-liste { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
/* Aucune proposition renseignée : on resserre la mise en page pour que la page
   reste tenue, au lieu d'aligner cinq grands blocs vides. */
.carte-liste--attente { gap: 0 clamp(2rem, 5vw, 4rem); }
@media (min-width: 760px) { .carte-liste--attente { grid-template-columns: repeat(2, 1fr); } }
.carte-liste--attente .carte-cat { padding-block: 1.4rem 1.6rem; }
.carte-liste--attente .carte-cat__titre { margin-bottom: 0.6rem; }
.carte-cat { border-top: 1px solid var(--trait); padding-top: 1.6rem; }
.carte-cat__titre { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.carte-cat__titre h3 { flex: none; }
.carte-cat__titre .ligne { flex: 1; height: 1px; background: var(--trait-clair); }
.carte-plats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; max-width: 46rem; }
.carte-plat { display: grid; gap: 0.25rem; }
.carte-plat__tete { display: flex; align-items: baseline; gap: 0.9rem; }
.carte-plat__nom { font-family: var(--serif); font-size: 1.35rem; }
.carte-plat__points { flex: 1; border-bottom: 1px dotted var(--trait); transform: translateY(-0.25rem); }
.carte-plat__prix { font: 500 0.95rem/1 var(--sans); color: var(--encre-doux); }
.carte-plat__desc { color: var(--encre-mate); font-size: 0.95rem; }
.carte-cat__vide { color: var(--encre-mate); font-style: italic; font-family: var(--serif); font-size: 1.15rem; }

/* ---------- 21. GALERIE ------------------------------------------------------ */
.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.filtre {
  min-height: 42px;
  padding: 0.6rem 1.15rem;
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font: 500 0.74rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-doux);
  cursor: pointer;
  transition: background var(--transition-court), color var(--transition-court), border-color var(--transition-court);
}
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--creme); }

.galerie { columns: 1; column-gap: clamp(0.75rem, 1.6vw, 1.25rem); }
@media (min-width: 620px) { .galerie { columns: 2; } }
@media (min-width: 1040px) { .galerie { columns: 3; } }

.galerie__item {
  break-inside: avoid;
  margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--pierre);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
}
.galerie__item img { width: 100%; height: auto; transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.galerie__item:hover img { transform: scale(1.03); }
.galerie__item[hidden] { display: none; }
.galerie__item.est-archive img { filter: saturate(0.62) contrast(0.95) sepia(0.14); }
.galerie__item .puce {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  z-index: 2;
  font: 500 0.6rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(243, 238, 229, 0.94);
  color: var(--encre);
  padding: 0.35rem 0.5rem;
}

/* Visionneuse */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(24, 18, 15, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.visionneuse[data-ouvert="true"] { opacity: 1; visibility: visible; }
.visionneuse figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 0.9rem; }
.visionneuse img { max-height: 78vh; width: auto; margin-inline: auto; object-fit: contain; }
.visionneuse figcaption {
  color: rgba(243, 238, 229, 0.78);
  font: italic 400 0.95rem/1.4 var(--serif);
  text-align: center;
}
.visionneuse__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: rgba(243, 238, 229, 0.1);
  border: 1px solid rgba(243, 238, 229, 0.28);
  color: var(--creme);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--transition-court);
}
.visionneuse__btn:hover { background: rgba(243, 238, 229, 0.22); }
.visionneuse__fermer { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.visionneuse__prec { left: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ---------- 22. CONTACT ------------------------------------------------------ */
.contact-grille { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .contact-grille { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.fiche { display: grid; gap: 2rem; }
.fiche__bloc { display: grid; gap: 0.4rem; }
.fiche__label {
  font: 500 0.7rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-mate);
}
.fiche__valeur { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.35; }
.fiche__valeur a { text-decoration: none; border-bottom: 1px solid var(--trait); transition: border-color var(--transition-court); }
.fiche__valeur a:hover { border-color: var(--encre); }

.plan {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pierre);
  border: 1px solid var(--trait-clair);
  overflow: hidden;
}
.plan iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.85) contrast(1.02); }

.horaires { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 30rem; }
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--trait-clair);
}
.horaires li:first-child { border-top: 1px solid var(--trait-clair); }
.horaires__jour { font-weight: 500; }
.horaires__service { color: var(--encre-doux); text-align: right; }
.horaires__ferme { color: var(--encre-mate); font-style: italic; }

/* ---------- 23. PAGE LÉGALE -------------------------------------------------- */
.legal { max-width: 48rem; }
.legal h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 3rem; margin-bottom: 1rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.2rem; margin-top: 1.8rem; margin-bottom: 0.6rem; }
.legal p, .legal li { color: var(--encre-doux); }
.legal ul { padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.legal a { color: var(--terracotta-fonce); }
.aremplir {
  display: inline-block;
  font: 500 0.7rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-fonce);
  background: rgba(168, 95, 72, 0.1);
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
}

/* ---------- 24. UTILITAIRES -------------------------------------------------- */
.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.limite { max-width: 52rem; }
.centre { text-align: center; }
.centre .surtitre { justify-content: center; }
.centre .chapo, .centre .texte { margin-inline: auto; }
.centre .boutons { justify-content: center; }
.pile { display: grid; gap: 1.4rem; }
.mt-l { margin-top: clamp(2rem, 5vw, 3.5rem); }
.mt-m { margin-top: clamp(1.5rem, 3vw, 2.2rem); }

/* ---------- 25. RESPONSIVE PRINCIPAL ----------------------------------------- */
@media (min-width: 1000px) {
  .hero { grid-template-columns: 1fr 1fr; min-height: 90vh; }
  .hero__media { min-height: auto; }
  .hero__panneau { padding-inline: clamp(2.5rem, 5vw, 5.5rem); }
  .plan { aspect-ratio: 3 / 4; }
}

@media (max-width: 999px) {
  .hero { min-height: 0; }
  .hero__media { order: -1; aspect-ratio: 4 / 5; max-height: 60vh; }
}

@media (max-width: 860px) {
  :root { --hauteur-header: 68px; }
  .nav { display: none; }
  .burger { display: flex; }

  /* En haut de page, RÉSERVER reste dans l'en-tête (accès immédiat).
     Dès que l'on défile, il laisse la place au bouton flottant : jamais les deux. */
  .entete__actions .btn {
    min-height: 40px;
    padding: 0.6rem 0.85rem;
    font-size: 0.68rem;
    letter-spacing: 0.09em;
  }
  body.a-defile .entete__actions .btn { display: none; }
  .cta-collant { display: inline-flex; }
  .reperes__liste { grid-template-columns: repeat(2, 1fr); }
  .reperes__item:nth-child(1)::before,
  .reperes__item:nth-child(3)::before { display: none; }
  .reperes__item:nth-child(3), .reperes__item:nth-child(4) { border-top: 1px solid var(--trait-clair); }
  .immersif__voile {
    background: linear-gradient(to top, rgba(28, 20, 17, 0.8) 0%, rgba(28, 20, 17, 0.34) 60%, rgba(28, 20, 17, 0.14) 100%);
  }
  .pied { padding-bottom: 5.5rem; }
}

@media (max-width: 480px) {
  .boutons .btn { width: 100%; }
  .compteur { flex-direction: column; gap: 0.6rem; align-items: flex-start; }
  .compteur__legende { max-width: 20rem; }
}

/* ---------- 26. MOUVEMENT RÉDUIT --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .apparait { opacity: 1; transform: none; }
  .revele::after { display: none; }
  .revele img { transform: none; }
  .rythme span { opacity: 0.9; transform: none; }
  .immersif__media img { height: 100%; transform: none; }
}

/* ---------- 27. IMPRESSION ---------------------------------------------------- */
@media print {
  .entete, .cta-collant, .menu-mobile, .visionneuse, .plan { display: none; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
}