/* =========================================================================
   La Badiane — Voiron
   Palette relevée au pixel dans le logo (anis étoilé) et dans les photos
   de la salle : anthracite de l'enseigne, or des graines de badiane,
   terracotta des fauteuils, pierre des murs.
   ========================================================================= */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin.woff2?v=2') format('woff2');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dmsans-latin.woff2?v=2') format('woff2');
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --creme: #f7f4ee;
  --creme-2: #efeae1;
  --papier: #ffffff;
  --encre: #221f1c;
  --encre-2: #46403b;
  --gris: #7b746c;
  --or: #a8813f;
  --or-clair: #d0b070;
  --terre: #b1552e;

  --bord: rgba(34, 31, 28, .13);
  --bord-clair: rgba(34, 31, 28, .07);
  --ombre: 0 1px 2px rgba(34, 31, 28, .05), 0 8px 28px -12px rgba(34, 31, 28, .16);

  --large: 1120px;
  --etroit: 720px;
  --rayon: 4px;
  --entete: 68px;
  --barre-basse: 66px;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --texte: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ----------------------------------------------------------------- reset */

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

/* Sans cette règle, un display:flex posé par une classe l'emporte sur
   l'attribut hidden et les blocs vides restent affichés. */
[hidden] { display: none !important; }

/* body seul ne suffit pas : le panneau du menu mobile est un position:fixed
   posé hors écran, il élargit la zone de mise en page et décale la barre
   d'appel fixe du bas hors de l'écran. */
html { overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
figure { margin: 0; }              /* sinon le navigateur applique 1em 40px */
ul, ol { margin: 0; padding: 0; list-style: none; }

/* height:auto est obligatoire dès qu'on pose width/height en attributs,
   sinon ils neutralisent les aspect-ratio CSS. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--or-clair); color: var(--encre); }

/* ----------------------------------------------------------------- socle */

.conteneur {
  width: min(100% - 2.5rem, var(--large));
  margin-inline: auto;
}
.conteneur--etroit { width: min(100% - 2.5rem, var(--etroit)); }

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--papier { background: var(--papier); }
.section--sombre { background: var(--encre); color: var(--creme); }

.saut { position: relative; top: calc(var(--entete) * -1 - 12px); display: block; height: 0; }

.surtitre {
  font-family: var(--texte);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .9rem;
}
.section--sombre .surtitre { color: var(--or-clair); }

.titre {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.titre em { font-style: italic; color: var(--or); }

.chapeau {
  max-width: 58ch;
  color: var(--encre-2);
  font-size: 1.06rem;
  margin-top: 1.1rem;
}
.section--sombre .chapeau { color: rgba(247, 244, 238, .78); }

.filet {
  width: 46px;
  height: 2px;
  background: var(--or);
  margin-top: 1.6rem;
}

/* ------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.bouton:active { transform: translateY(1px); }

.bouton--plein { background: var(--encre); color: var(--creme); }
.bouton--plein:hover { background: #000; }

.bouton--or { background: var(--or); color: #fff; }
.bouton--or:hover { background: #8f6c31; }

.bouton--ligne { border-color: var(--bord); color: var(--encre); }
.bouton--ligne:hover { border-color: var(--encre); background: rgba(34, 31, 28, .04); }

.section--sombre .bouton--ligne { border-color: rgba(247, 244, 238, .3); color: var(--creme); }
.section--sombre .bouton--ligne:hover { border-color: var(--creme); background: rgba(247, 244, 238, .08); }

/* ------------------------------------------------------------- en-tête */

/* Pas de backdrop-filter : un filtre sur l'en-tête en ferait le bloc
   conteneur de ses descendants position:fixed, et le panneau du menu
   mobile s'ancrerait sur l'en-tête au lieu de la fenêtre. */
.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--creme);
  border-bottom: 1px solid var(--bord-clair);
}
.entete__barre {
  height: var(--entete);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
}
.marque__logo { width: 34px; height: 34px; flex: none; }
.marque__nom {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.marque__sous {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  border-left: 1px solid var(--bord);
  padding-left: .7rem;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  padding: .5rem .62rem;
  border-radius: 999px;
  font-size: .9rem;
  white-space: nowrap;
  font-weight: 500;
  color: var(--encre-2);
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover { color: var(--encre); background: rgba(34, 31, 28, .05); }
.nav a[aria-current="page"] { color: var(--encre); box-shadow: inset 0 -2px 0 var(--or); border-radius: 0; }
.pied__liens a[aria-current="page"] { color: var(--or-clair); }

/* Le bouton d'appel vit HORS du <nav> : enfermé dans le burger, le numéro
   disparaît sur mobile, or c'est toute la conversion d'un restaurant. */
.entete__appel { flex: none; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  flex: none;
}
.burger__trait {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--encre);
  position: relative;
  transition: background-color .2s ease;
}
.burger__trait::before, .burger__trait::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: var(--encre);
  transition: transform .22s ease;
}
.burger__trait::before { top: -5.5px; }
.burger__trait::after { top: 5.5px; }
.burger[aria-expanded="true"] .burger__trait { background: transparent; }
.burger[aria-expanded="true"] .burger__trait::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait::after { transform: translateY(-5.5px) rotate(-45deg); }

.voile {
  position: fixed;
  inset: 0;
  background: rgba(34, 31, 28, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 70;
}
.voile.ouvert { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------- accueil */

.hero { position: relative; background: var(--creme); }
.hero__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.hero__titre {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.3rem, 6.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  max-width: 15ch;
}
.hero__titre .accent { font-style: italic; color: var(--or); }
.hero__chapeau {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-size: 1.1rem;
  color: var(--encre-2);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.badge-note {
  position: absolute;
  left: -12px;
  bottom: 22px;
  background: var(--papier);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon);
  padding: .8rem 1.05rem;
  box-shadow: var(--ombre);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.badge-note__note {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 500;
}
.badge-note__detail { font-size: .78rem; line-height: 1.3; color: var(--gris); }
.badge-note__etoiles { color: var(--or-clair); letter-spacing: .06em; font-size: .82rem; }

/* --------------------------------------------------------------- statut */

.statut {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .34rem .8rem .34rem .62rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: var(--papier);
  margin-bottom: 1.4rem;
}
.statut__point {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gris);
  flex: none;
}
.statut--ouvert .statut__point { background: #3f8a4d; }
.statut--bientot .statut__point { background: var(--or); }
.statut__texte { color: var(--encre-2); }

/* -------------------------------------------------------------- annonce */

.annonce {
  background: var(--encre);
  color: var(--creme);
  font-size: .93rem;
  text-align: center;
  padding: .7rem 1.25rem;
}
.annonce strong { color: var(--or-clair); font-weight: 600; }

/* ------------------------------------------------------------- histoire */

.histoire__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.histoire__texte p + p { margin-top: 1.05rem; }
.histoire__texte p { color: var(--encre-2); }
.histoire__signature {
  margin-top: 1.6rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--or);
}
.histoire__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--rayon);
}

/* ---------------------------------------------------------- engagements */

.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem 2.2rem;
  margin-top: 3rem;
}
.engagement__num {
  font-family: var(--display);
  font-size: .9rem;
  color: var(--or);
  letter-spacing: .1em;
  display: block;
  margin-bottom: .5rem;
}
.engagement h3 {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 500;
  margin-bottom: .35rem;
}
.engagement p { font-size: .95rem; color: var(--encre-2); }

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

.carte__onglets {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 2.4rem 0 2rem;
  border-bottom: 1px solid var(--bord-clair);
  padding-bottom: 1.1rem;
}
.onglet {
  padding: .5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  font-size: .92rem;
  font-weight: 500;
  color: var(--encre-2);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.onglet:hover { border-color: var(--encre); }
.onglet[aria-selected="true"] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--creme);
}

.carte__note {
  font-size: .9rem;
  color: var(--gris);
  max-width: 62ch;
  margin-bottom: 1.8rem;
}

.plats { display: grid; gap: 0; }

.plat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1.4rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--bord-clair);
}
.plat:last-child { border-bottom: 0; }
.plat__nom {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.3;
}
.plat__desc {
  grid-column: 1;
  font-size: .94rem;
  color: var(--gris);
  margin-top: .12rem;
}
.plat__prix {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--encre);
}
.plat__badges {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
}
.badge {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  color: var(--gris);
}
.badge--vegetarien { color: #4a7c3f; border-color: rgba(74, 124, 63, .35); background: rgba(74, 124, 63, .07); }
.badge--maison { color: var(--or); border-color: rgba(168, 129, 63, .35); background: rgba(168, 129, 63, .07); }

/* -------------------------------------------------------------- formules */

.formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  margin-top: 2.4rem;
}
.formule {
  background: var(--papier);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.section--papier .formule { background: var(--creme); }
.formule__prix {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--or);
  margin-bottom: .8rem;
}
.formule__nom {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
}
.formule__desc { font-size: .9rem; color: var(--gris); margin-top: .3rem; }

/* --------------------------------------------------------------- équipe */

.equipe__groupes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.equipe__groupe {
  border-top: 2px solid var(--or);
  padding-top: 1rem;
}
.equipe__label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* --or et non --or-clair : ce libellé est posé sur fond blanc, le doré
     clair y était à peine lisible */
  color: var(--or);
  margin-bottom: .6rem;
}
.equipe__personnes { display: grid; gap: .45rem; }
.equipe__personne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
}
.equipe__prenom { font-family: var(--display); font-size: 1.2rem; line-height: 1.35; }
.equipe__role {
  font-size: .82rem;
  color: var(--gris);
}

/* -------------------------------------------------------------- galerie */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-flow: dense;          /* sans lui, la grande tuile laisse des trous */
  gap: .7rem;
  margin-top: 2.6rem;
}
.galerie figure { overflow: hidden; border-radius: var(--rayon); background: var(--creme-2); }
.galerie img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.galerie figure:hover img { transform: scale(1.04); }
.galerie figure:first-child { grid-column: span 2; grid-row: span 2; }
.galerie figure:first-child img { aspect-ratio: 1 / 1; }

/* ----------------------------------------------------------- visite 360° */

.visite {
  position: relative;
  margin-top: 2.6rem;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--creme-2);
  aspect-ratio: 16 / 9;
}
@media (max-width: 700px) { .visite { aspect-ratio: 4 / 3; } }

.visite__invite { position: absolute; inset: 0; }
.visite__invite img { width: 100%; height: 100%; object-fit: cover; }
.visite__voile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(34, 31, 28, .12), rgba(34, 31, 28, .42));
}
.visite__voile .bouton { box-shadow: 0 6px 24px -8px rgba(34, 31, 28, .55); }

.visite__scene { position: absolute; inset: 0; background: var(--encre); }
.visite__scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;      /* sinon le geste de rotation fait défiler la page */
}
.visite__scene canvas:active { cursor: grabbing; }
.visite__scene canvas:focus-visible { outline: 2px solid var(--or-clair); outline-offset: -4px; }

.visite__aide {
  position: absolute;
  left: 50%;
  bottom: .9rem;
  transform: translateX(-50%);
  max-width: calc(100% - 5rem);
  text-align: center;
  font-size: .82rem;
  color: var(--creme);
  background: rgba(34, 31, 28, .55);
  padding: .35rem .9rem;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity .5s ease;
}
.visite__aide.efface { opacity: 0; }

.visite__fermer {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(34, 31, 28, .55);
  color: var(--creme);
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.visite__fermer:hover { background: rgba(34, 31, 28, .8); }

.visite__credit { margin-top: .8rem; font-size: .8rem; color: var(--gris); }

/* repli sans WebGL : le panorama défile horizontalement */
.visite--plat { aspect-ratio: auto; overflow-x: auto; overflow-y: hidden; }
.visite--plat .visite__scene { position: static; }
.visite--plat img.panorama-plat { height: clamp(220px, 42vw, 420px); max-width: none; width: auto; }

/* ------------------------------------------- privatisation : renvoi d'accueil */
/* Un simple appel à l'action : le détail est sur /privatisation. */

.renvoi {
  background: var(--encre);
  color: var(--creme);
  padding: clamp(2.4rem, 5vw, 3.4rem) 0;
}
.renvoi .surtitre { color: var(--or-clair); margin-bottom: .6rem; }
.renvoi__grille {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem 2.5rem;
}
.renvoi__texte { flex: 1 1 380px; min-width: 0; }
.renvoi__titre {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.renvoi__accroche {
  margin-top: .6rem;
  max-width: 54ch;
  color: rgba(247, 244, 238, .78);
}
.renvoi__bouton { flex: none; }
.renvoi__bouton svg { transition: transform .18s ease; }
.renvoi__bouton:hover svg { transform: translateX(3px); }

/* ------------------------------------------------- page /privatisation */

.page-privatisation { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.page-privatisation__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.page-privatisation__titre { font-size: clamp(2.1rem, 5.2vw, 3.2rem); }
.page-privatisation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}
.page-privatisation__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

/* fil d'Ariane discret */
.fil {
  font-size: .82rem;
  color: var(--gris);
  margin-bottom: 1.4rem;
}
.fil a { text-decoration: underline; text-underline-offset: 3px; }
.fil a:hover { color: var(--or); }

/* Les puces sont sur fond CLAIR (page Privatisation) : texte foncé.
   Elles repassent en clair si on les pose un jour sur une section sombre. */
.privatisation__points { margin-top: 1.8rem; display: grid; gap: .7rem; }
.privatisation__points li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .97rem;
  color: var(--encre-2);
}
.section--sombre .privatisation__points li { color: rgba(247, 244, 238, .82); }
.privatisation__points li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
  margin-top: .62rem;
}

/* ---------------------------------------------------------------- infos */

.infos__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 2.4rem;
  margin-top: 2.8rem;
}
.bloc-info h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--bord-clair);
}

/* Un <dl> ne peut pas contenir de <li> : chaque paire dt/dd vit dans un div. */
.horaires { display: grid; gap: .1rem; }
.horaires__ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .42rem 0;
  border-bottom: 1px dashed var(--bord-clair);
  font-size: .95rem;
}
.horaires__ligne:last-child { border-bottom: 0; }
.horaires__jour { font-weight: 500; }
.horaires__creneaux { color: var(--gris); text-align: right; }
.horaires__ligne--aujourdhui { color: var(--or); }
.horaires__ligne--aujourdhui .horaires__jour::after {
  content: ' • aujourd’hui';
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.horaires__ligne--aujourdhui .horaires__creneaux { color: var(--or); }
.horaires__ligne--ferme .horaires__creneaux { color: var(--gris); font-style: italic; }

.liste-puces { display: grid; gap: .42rem; }
.liste-puces li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--encre-2);
}
.liste-puces li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--or-clair);
  margin-top: .6rem;
}

.coordonnees { display: grid; gap: .9rem; }
.coordonnee { display: flex; gap: .8rem; align-items: flex-start; }
.coordonnee__icone { flex: none; color: var(--or); margin-top: .18rem; }
.coordonnee__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gris);
  display: block;
}
.coordonnee__valeur { font-size: 1rem; }
.coordonnee a:hover { color: var(--or); }

.carte-lieu {
  margin-top: 2.6rem;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--bord-clair);
  background: var(--creme-2);
  position: relative;
  aspect-ratio: 16 / 7;
}
.carte-lieu iframe { width: 100%; height: 100%; border: 0; display: block; }
/* La carte n'est chargée qu'au clic : sinon Google reçoit l'IP de chaque
   visiteur, ce qui contredirait nos propres mentions légales. */
.carte-lieu__invite {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: .9rem;
  text-align: center;
  padding: 1.5rem;
}
.carte-lieu__invite p { font-size: .9rem; color: var(--gris); max-width: 40ch; }

/* ----------------------------------------------------------------- avis */

.avis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  margin-top: 2.6rem;
}
.avis blockquote {
  background: var(--papier);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon);
  padding: 1.5rem 1.4rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
}
.avis cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--texte);
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ------------------------------------------------------------ pied */

.pied {
  background: var(--encre);
  color: rgba(247, 244, 238, .68);
  padding: 3.2rem 0 calc(2.4rem + var(--barre-basse));
  font-size: .92rem;
}
.pied__haut {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(247, 244, 238, .13);
}
.pied__marque {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--creme);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.pied__marque img { width: 30px; height: 30px; }
.pied a:hover { color: var(--or-clair); }
.pied__liens { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  justify-content: space-between;
  padding-top: 1.6rem;
  font-size: .84rem;
  color: rgba(247, 244, 238, .5);
}
.pied__reseaux { display: flex; gap: .6rem; }
.pied__reseaux a {
  width: 38px; height: 38px;
  border: 1px solid rgba(247, 244, 238, .2);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--creme);
  transition: border-color .18s ease, background-color .18s ease;
}
.pied__reseaux a:hover { border-color: var(--or-clair); background: rgba(208, 176, 112, .12); }

/* --------------------------------------------------- barre d'appel fixe */

.barre-appel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 65;
  display: none;
  gap: .55rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--creme);
  border-top: 1px solid var(--bord);
  max-width: 100vw;
}
.barre-appel .bouton {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: .8rem;
  font-size: .92rem;
}

/* ------------------------------------------------- révélation au défilement */
/* Conditionnée à html.js : si le script échoue, rien n'est masqué. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js .reveal.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------- mentions légales */

.page-texte { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.page-texte h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin-bottom: 1.6rem;
}
.page-texte h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.24rem;
  margin: 2.2rem 0 .6rem;
}
.page-texte p, .page-texte li { color: var(--encre-2); font-size: .98rem; }
.page-texte p + p { margin-top: .8rem; }
.page-texte ul { margin-top: .6rem; display: grid; gap: .35rem; }
.page-texte li { display: flex; gap: .6rem; }
.page-texte li::before { content: '—'; color: var(--or); flex: none; }
.page-texte a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }

.page-erreur { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 4rem 0; }
.page-erreur__code {
  font-family: var(--display);
  font-size: clamp(4rem, 16vw, 8rem);
  line-height: 1;
  color: var(--or-clair);
}

/* ============================================================ RESPONSIVE */

@media (min-width: 860px) {
  .hero__grille { grid-template-columns: 1.05fr .95fr; }
  .histoire__grille { grid-template-columns: 1.15fr .85fr; }
  .page-privatisation__grille { grid-template-columns: 1.1fr .9fr; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 900px) {
  /* « Restaurant à Voiron » pousse le burger hors de l'écran sur mobile. */
  .marque__sous { display: none; }
}

@media (max-width: 859px) {
  .burger { display: inline-flex; }

  .nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 80;
    width: min(84vw, 320px);
    height: 100dvh;
    background: var(--creme);
    border-left: 1px solid var(--bord);
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: calc(var(--entete) + 1.2rem) 1.2rem 2rem;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    overflow-y: auto;
  }
  .nav.ouvert { transform: none; }
  .nav a {
    padding: .85rem .8rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--bord-clair);
    border-radius: 0;
  }
  .nav a:last-child { border-bottom: 0; }

  .barre-appel { display: flex; }
  body { padding-bottom: 0; }

  .badge-note { left: 0; bottom: -14px; }
  .galerie figure:first-child { grid-column: span 2; grid-row: span 1; }
  .galerie figure:first-child img { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  /* Marque + numéro complet + burger ne tiennent pas sur 375 px :
     le bouton d'appel de l'en-tête devient un rond, le numéro reste
     lisible dans la barre fixe du bas et dans les infos pratiques. */
  .entete__appel .bouton { padding: 0; width: 42px; height: 42px; border-radius: 999px; }
  .entete__appel .bouton span { display: none; }

  .marque__nom { font-size: 1.14rem; }
  .plat { grid-template-columns: 1fr auto; }
  .galerie { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

@media (max-width: 380px) {
  body { font-size: 16px; }
  .conteneur { width: min(100% - 1.8rem, var(--large)); }
  .barre-appel .bouton { font-size: .86rem; }
}

@media print {
  .entete, .barre-appel, .voile, .carte-lieu, .pied__reseaux { display: none !important; }
  body { background: #fff; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}