/* ============================================================
   LA LAGUNE — feuille de style unique
   Réceptions et restaurant de bord de mer, presqu'île du Gaou.

   L'identité vient du logo fourni par le restaurant : une encre
   marine sur un fond crème, et une vague en deux traits. Le sable
   de la page en découle, et le laiton — la couleur des réceptions
   plutôt que celle des tables du midi — sert de second registre.

   Les animations sont toutes portées par une classe posée en
   JavaScript et neutralisées sous prefers-reduced-motion.
   ============================================================ */

/* ---------- Polices servies avec le site ----------
   Fraunces pour les titres, Karla pour le texte courant, toutes
   deux en version variable et sous licence SIL Open Font 1.1.
   Elles sont rapatriées par outils/polices.sh : appeler Google
   Fonts enverrait l'adresse IP de chaque visiteur à un tiers, ce
   que les mentions légales de la page affirment ne pas faire. */
@font-face {
  font-family: 'Titres'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/titres-latin.woff2') format('woff2');
  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: 'Titres'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/titres-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Texte'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/texte-latin.woff2') format('woff2');
  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: 'Texte'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/texte-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ---------- */
:root {
  --marine: #0E335C;         /* l'encre du logo */
  --marine-nuit: #08223E;    /* aplats sombres */
  --marine-clair: #2A5585;   /* liens sur fond clair */
  --sable: #F6F1E7;          /* fond de page */
  --sable-clair: #FBF8F2;
  --creme: #F3EDE1;          /* texte et logo sur fond marine */
  --laiton: #82632B;         /* le second registre, en taille de texte */
  --laiton-filet: #B08D4F;   /* le même, réservé aux traits et aux aplats */
  --laiton-clair: #D3B37A;   /* sur fond marine, et fond des boutons d'appel */
  --encre: #1B2A3A;
  --gris: #55606E;
  --filet: #E2D9C7;
  --filet-sombre: #234670;

  --titres: 'Titres', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --texte: 'Texte', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --marge: clamp(1.25rem, 5vw, 4.5rem);
  --large: 1220px;
  --lent: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
.entete-logo img, .accueil-marque img, .pied-logo { height: auto; }

a { color: var(--marine-clair); text-underline-offset: 3px; }
a:hover { color: var(--laiton); }

:focus-visible { outline: 2px solid var(--laiton-filet); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--titres);
  font-weight: 500;
  color: var(--marine);
  line-height: 1.08;
  margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 110;
  letter-spacing: -0.012em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
h2 + p, h2 + .chapo, h3 + p, h3 + .chapo { margin-top: 1.3rem; }

.pour-lecteurs {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saut {
  position: absolute; left: 0; top: 0; transform: translateY(-120%);
  background: var(--marine); color: var(--creme); padding: 0.6rem 1rem;
  z-index: 100; text-decoration: none;
}
.saut:focus { transform: translateY(0); }

/* ---------- Trames ---------- */
.dedans {
  width: min(100% - 2 * var(--marge), var(--large));
  margin-inline: auto;
}

.section { padding: clamp(4.5rem, 10vw, 9rem) 0; }
.section--large { padding-bottom: clamp(3rem, 6vw, 5rem); }
.section + .section { padding-top: 0; }
.section--sombre + .section, .bande + .section { padding-top: clamp(4.5rem, 10vw, 9rem); }

/* Surtitre : un numéro de chapitre en laiton, un filet, puis le mot. */
.surtitre {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--texte);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--laiton);
  margin: 0 0 1.6rem;
}
.surtitre i {
  font-family: var(--titres); font-style: normal; font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.02em;
  font-variation-settings: 'opsz' 20;
}
.surtitre i::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: clamp(28px, 4vw, 56px); height: 1px; margin-left: 0.9rem;
  background: var(--laiton-filet);
}

h2 { font-size: clamp(2.15rem, 5.1vw, 3.75rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); }

.chapo {
  font-size: clamp(1.075rem, 1.45vw, 1.25rem);
  color: var(--gris);
  max-width: 46ch;
}

/* ---------- Boutons ---------- */
.bouton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--texte); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 1px solid var(--marine);
  background: transparent; color: var(--marine);
  text-decoration: none; cursor: pointer;
  transition: color 0.35s var(--lent), border-color 0.35s var(--lent);
}
/* Le fond des boutons se remplit par la gauche plutôt que de s'allumer. */
.bouton::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--marine);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--lent);
}
.bouton > * { position: relative; }
.bouton:hover::before, .bouton:focus-visible::before { transform: scaleX(1); }
.bouton:hover, .bouton:focus-visible { color: var(--creme); }

.bouton--or {
  border-color: var(--laiton-clair); background: var(--laiton-clair); color: var(--marine);
}
.bouton--or::before { background: var(--marine); }
.bouton--or:hover, .bouton--or:focus-visible { color: var(--laiton-clair); border-color: var(--marine); }

.bouton--clair { border-color: rgba(243, 237, 225, 0.55); color: var(--creme); }
.bouton--clair::before { background: var(--creme); }
.bouton--clair:hover, .bouton--clair:focus-visible { color: var(--marine); border-color: var(--creme); }

.bouton--vide { border-color: var(--laiton-filet); color: var(--laiton); }
.bouton--vide::before { background: var(--laiton); }
.bouton--vide:hover, .bouton--vide:focus-visible { color: var(--sable-clair); border-color: var(--laiton); }

.bouton--mince { padding: 0.7rem 1.15rem; font-size: 0.75rem; letter-spacing: 0.1em; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.15rem var(--marge);
  transition: background-color 0.4s var(--lent), box-shadow 0.4s, padding 0.4s var(--lent),
              transform 0.45s var(--lent);
}
.entete::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 22, 40, 0.72), rgba(6, 22, 40, 0.28) 62%, rgba(6, 22, 40, 0));
  transition: opacity 0.4s;
}
.entete.defile {
  background: rgba(246, 241, 231, 0.94);
  box-shadow: 0 1px 0 var(--filet);
  padding-block: 0.75rem;
  backdrop-filter: blur(8px);
}
.entete.defile::before { opacity: 0; }
/* L'en-tête s'efface quand on descend, revient dès qu'on remonte : sur une
   page longue, il rend l'écran au contenu sans se faire chercher. */
.entete.cachee { transform: translateY(-105%); }

.entete-logo { display: block; line-height: 0; }
.entete-logo img { width: clamp(120px, 14vw, 164px); }
.entete .logo-creme { display: block; }
.entete .logo-marine { display: none; }
.entete.defile .logo-creme { display: none; }
.entete.defile .logo-marine { display: block; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav a {
  position: relative;
  color: var(--creme); text-decoration: none;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding-block: 0.4rem;
}
.nav a:not(.bouton)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--lent);
}
.nav a:not(.bouton):hover::after { transform: scaleX(1); transform-origin: left; }
.entete.defile .nav a { color: var(--marine); }
.nav .bouton { color: var(--creme); border-color: rgba(243, 237, 225, 0.55); }
.nav .bouton::before { background: var(--creme); }
.nav .bouton:hover { color: var(--marine); }
.entete.defile .nav .bouton { color: var(--marine); border-color: var(--marine); }
.entete.defile .nav .bouton::before { background: var(--marine); }
.entete.defile .nav .bouton:hover { color: var(--creme); }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--creme);
  position: relative; z-index: 45;
}
.entete.defile .burger { color: var(--marine); }
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 24px; height: 1px;
  background: currentColor; transition: transform 0.3s var(--lent), opacity 0.3s;
}
.burger span { margin-inline: auto; }
.burger span::before { transform: translateY(-7px); }
.burger span::after { transform: translateY(6px); }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: rotate(45deg); }
.burger[aria-expanded='true'] span::after { transform: rotate(-45deg) translateY(-1px); }

/* ---------- Accueil ---------- */
.accueil {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-items: end;
  padding: 9rem 0 clamp(4rem, 9vw, 7rem);
  color: var(--creme);
}
.diapo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.diapo .vue {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.diapo .vue.est-active { opacity: 1; }
.diapo picture, .diapo img { width: 100%; height: 100%; display: block; }
.diapo img { object-fit: cover; object-position: center 55%; }
/* Le plan se resserre lentement pendant qu'on lit : douze secondes pour
   quatre pour cent, c'est-à-dire un mouvement qu'on ne voit pas passer. */
.diapo .vue.est-active img { animation: respire 14s ease-out forwards; }
@keyframes respire { from { transform: scale(1.06); } to { transform: scale(1); } }

.accueil::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 22, 40, 0.9) 0%, rgba(6, 22, 40, 0.42) 45%, rgba(6, 22, 40, 0.2) 100%),
    linear-gradient(to right, rgba(6, 22, 40, 0.55) 0%, rgba(6, 22, 40, 0.15) 46%, rgba(6, 22, 40, 0) 72%);
}

.accueil-lieu {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(243, 237, 225, 0.85); margin: 0 0 1.6rem; overflow: hidden;
}
.accueil-marque { margin: 0 0 1.9rem; }
.accueil-marque img { width: min(430px, 76vw); }
.accueil-phrase {
  font-family: var(--titres);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.06; font-weight: 400;
  font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 96;
  letter-spacing: -0.015em;
  margin: 0 0 1.6rem; color: var(--creme);
}
.accueil-service {
  color: rgba(243, 237, 225, 0.88);
  max-width: 42ch; margin: 0 0 2.4rem;
}
.accueil-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Le trait qui invite à descendre, et se répète doucement. */
.descendre {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  width: 44px; height: 74px; display: grid; place-items: start center;
}
.descendre-trait {
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, rgba(243, 237, 225, 0) 0%, rgba(243, 237, 225, 0.9) 100%);
  transform-origin: top;
  animation: glisse 2.6s var(--lent) infinite;
}
@keyframes glisse {
  0% { transform: scaleY(0); opacity: 0; }
  35% { opacity: 1; }
  70% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Deux colonnes ---------- */
.duo { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 0.9fr; }
  .duo--inverse > :first-child { order: 2; }
  .duo--tete { grid-template-columns: 1fr 0.72fr; align-items: end; }
}

/* Une photographie et son filet de laiton, décalé derrière elle. */
.visuel { position: relative; margin: 0; }
.visuel-filet {
  position: absolute; inset: 26px -26px -26px 26px;
  border: 1px solid var(--laiton-filet); opacity: 0.55;
  pointer-events: none;
}
.visuel .cadre { display: block; overflow: hidden; position: relative; }
.visuel img { width: 100%; height: auto; }
@media (min-width: 900px) { .visuel--decale { margin-bottom: 1.5rem; } }

/* ---------- Réceptions ---------- */
.occasions {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.occasions li {
  border: 1px solid var(--filet);
  padding: 0.45rem 1rem;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--laiton); background: var(--sable-clair);
}

.formules {
  display: grid; gap: clamp(2.5rem, 4vw, 3.5rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--filet);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) { .formules { grid-template-columns: repeat(3, 1fr); } }

.formule { display: flex; flex-direction: column; }
.formule-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--laiton-filet);
}
.formule h3 { font-size: clamp(1.25rem, 1.7vw, 1.45rem); }
.formule-prix { margin: 0; text-align: right; white-space: nowrap; }
.formule-prix b {
  display: block;
  font-family: var(--titres); font-weight: 500; font-size: 2.6rem; line-height: 0.9;
  color: var(--laiton); font-variation-settings: 'opsz' 60;
}
.formule-prix i {
  display: block; font-style: normal; margin-top: 0.35rem;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris);
}
.formule-note { margin: 1.1rem 0 1.6rem; color: var(--gris); font-size: 0.95rem; }

.plats { margin: 0 0 1.6rem; }
.plats dt {
  font-family: var(--titres); font-weight: 600; font-size: 1.02rem; color: var(--marine);
  font-variation-settings: 'opsz' 24; margin-top: 1rem;
}
.plats dt:first-child { margin-top: 0; }
.plats dd { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--gris); line-height: 1.55; }
.plats dt.ou {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--texte); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--laiton);
  margin-top: 0.9rem;
}
.plats dt.ou::after { content: ''; flex: 1; border-top: 1px solid var(--filet); }

.formule-pied {
  margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--filet);
  font-size: 0.86rem; color: var(--gris);
}

/* ---------- Privatisation ---------- */
.options {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
@media (min-width: 900px) { .options { grid-template-columns: 0.95fr 1fr; align-items: start; } }

.privatisation {
  background: var(--marine); color: rgba(243, 237, 225, 0.86);
  padding: clamp(2rem, 4vw, 3.2rem);
}
.privatisation h3 { color: var(--creme); }
.privatisation .chiffres { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: 1rem; }
.privatisation .chiffres li {
  display: flex; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--filet-sombre); padding-top: 1rem;
}
.privatisation .chiffres span {
  flex: 1; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243, 237, 225, 0.72);
}
.privatisation .chiffres b {
  font-family: var(--titres); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 500;
  color: var(--laiton-clair); font-variation-settings: 'opsz' 48;
}

.liste-options { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.liste-options li {
  border-bottom: 1px solid var(--filet);
  padding: 0.9rem 0;
  display: flex; align-items: baseline; gap: 1.5rem;
}
.liste-options b {
  font-family: var(--titres); font-weight: 600; font-size: 1rem; color: var(--marine);
  flex: none; min-width: 7.5rem; font-variation-settings: 'opsz' 24;
}
.liste-options span { color: var(--gris); font-size: 0.92rem; }

/* ---------- Formulaire ---------- */
.demande {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  background: var(--sable-clair);
  border: 1px solid var(--filet);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width: 980px) { .demande { grid-template-columns: 0.8fr 1fr; } }
.demande-tel { margin-top: 1.6rem; font-size: 0.95rem; color: var(--gris); }
.demande-tel a {
  font-family: var(--titres); font-size: 1.25rem; color: var(--marine);
  text-decoration: none; font-variation-settings: 'opsz' 32;
}

.champs { display: grid; gap: 1.2rem; align-content: start; }
@media (min-width: 620px) { .champs { grid-template-columns: 1fr 1fr; } }
.champ--large { grid-column: 1 / -1; }

.champ { display: grid; gap: 0.4rem; margin: 0; }
.champ label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gris);
}
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--filet);
  background: #FFF; color: var(--encre);
  border-radius: 0; width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--laiton-filet); outline: none;
  box-shadow: 0 0 0 2px rgba(176, 141, 79, 0.18);
}

.consentement {
  grid-column: 1 / -1; display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.86rem; color: var(--gris); margin: 0;
}
.consentement input { margin-top: 0.3rem; accent-color: var(--marine); }

.envoi {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
  margin: 0;
}
.envoi span { font-size: 0.88rem; color: var(--laiton); }
.abeille { position: absolute; left: -9999px; }

/* ---------- Bandes photographiques ---------- */
.bande { position: relative; overflow: hidden; }
.bande img {
  width: 100%; height: clamp(240px, 38vw, 480px); object-fit: cover;
  /* La bande dépasse en hauteur pour que le déplacement parallaxe ne
     découvre jamais le fond de page. */
  scale: 1.12;
}
.visuel--large { margin: clamp(3.5rem, 7vw, 6rem) 0 0; }
.visuel--large .visuel-filet { inset: 26px 26px -26px -26px; }

/* ---------- Section sombre ---------- */
.section--sombre {
  background: var(--marine-nuit); color: rgba(243, 237, 225, 0.86);
  padding-block: clamp(5rem, 11vw, 9.5rem);
}
.section--sombre h2, .section--sombre h3 { color: var(--creme); }
.section--sombre .chapo { color: rgba(243, 237, 225, 0.82); }
.section--sombre .surtitre { color: var(--laiton-clair); }
.section--sombre .surtitre i::after { background: var(--laiton-clair); opacity: 0.7; }
.section--sombre .visuel-filet { border-color: var(--laiton-clair); opacity: 0.5; }

.citation {
  margin: 2.8rem 0 0; padding-left: 1.6rem;
  border-left: 1px solid var(--laiton-clair);
  font-family: var(--titres);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.35;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 60;
  color: var(--creme);
}
.citation cite {
  display: block; margin-top: 1rem;
  font-family: var(--texte); font-style: normal;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--laiton-clair);
}

/* ---------- La carte ---------- */
.carte-tete { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .carte-tete { grid-template-columns: 1fr auto; } }
.carte-lien { margin: 0; }

.galerie-cadre { margin-top: clamp(2.5rem, 5vw, 4rem); }
.galerie {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 0.9rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--marge);
  scrollbar-width: none;
}
.galerie::-webkit-scrollbar { display: none; }
.galerie img {
  aspect-ratio: 1; object-fit: cover; scroll-snap-align: center;
  width: 100%; height: auto;
  filter: saturate(0.94);
  transition: filter 0.6s var(--lent), transform 0.9s var(--lent);
}
.galerie img:hover { filter: saturate(1.05); transform: scale(1.015); }

.galerie-jauge {
  width: min(100% - 2 * var(--marge), var(--large));
  margin: 1.4rem auto 0; height: 1px; background: var(--filet);
}
.galerie-jauge span {
  display: block; height: 1px; width: 20%;
  background: var(--laiton-filet);
  transform-origin: left;
}

/* ---------- Infos pratiques ---------- */
.infos { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .infos { grid-template-columns: 1fr 1fr; } }

.horaires { list-style: none; margin: 0; padding: 0; }
.horaires li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--filet);
  transition: background-color 0.4s;
}
.horaires li:first-child { border-top: 1px solid var(--filet); }
.horaires .jour {
  font-family: var(--titres); font-weight: 600; font-size: 1.02rem; color: var(--marine);
  min-width: 8.5rem; font-variation-settings: 'opsz' 24;
}
.horaires .service { color: var(--gris); margin-left: auto; text-align: right; }
.horaires .ferme { opacity: 0.7; }
.horaires li.aujourdhui { background: rgba(176, 141, 79, 0.09); }
.horaires li.aujourdhui .jour { color: var(--laiton); }

.note-horaires { font-size: 0.9rem; color: var(--gris); margin-top: 1.4rem; max-width: 44ch; }

.coordonnees { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.7rem; }
.coordonnees b {
  display: block; font-family: var(--texte); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--laiton);
  margin-bottom: 0.45rem;
}
.coordonnees a { color: var(--marine); text-decoration-color: var(--filet); }
.coordonnees .tel {
  font-family: var(--titres); font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 500;
  text-decoration: none; font-variation-settings: 'opsz' 48;
}

/* ---------- Pied de page ---------- */
.pied {
  background: var(--marine-nuit); color: rgba(243, 237, 225, 0.8);
  padding: clamp(4rem, 8vw, 6.5rem) 0 2.5rem;
  font-size: 0.95rem;
}
.pied-haut { display: grid; gap: 2.5rem; }
@media (min-width: 820px) { .pied-haut { grid-template-columns: 1.2fr 1fr 1fr; } }
.pied-logo { width: 190px; margin-bottom: 1.4rem; }
.pied h3 {
  color: var(--laiton-clair); font-size: 0.68rem; font-family: var(--texte); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem;
}
.pied a { color: var(--creme); text-decoration-color: rgba(243, 237, 225, 0.3); }
.pied a:hover { color: var(--laiton-clair); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.pied-bas {
  margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--filet-sombre);
  font-size: 0.8rem; color: rgba(243, 237, 225, 0.6);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center;
}

.mentions { margin-top: 1.8rem; }
.mentions summary {
  cursor: pointer; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243, 237, 225, 0.7);
}
.mentions summary::marker { color: var(--laiton-clair); }
.mentions[open] summary { color: var(--creme); margin-bottom: 1.4rem; }
.mentions-corps {
  font-size: 0.85rem; line-height: 1.7; color: rgba(243, 237, 225, 0.72);
  display: grid; gap: 1.5rem; max-width: 78ch;
}
.mentions-corps h4 {
  margin: 0 0 0.35rem; font-family: var(--texte); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--laiton-clair);
}
.a-completer {
  border-left: 1px solid var(--laiton-clair); padding-left: 0.85rem; color: var(--laiton-clair);
}

/* ============================================================
   Animations
   Une seule règle générale : rien ne bouge tant que la classe
   « vu » n'est pas posée, et tout est neutralisé plus bas sous
   prefers-reduced-motion.
   ============================================================ */

/* Apparition simple : le texte et les blocs montent d'un cheveu. */
.anim { opacity: 0; transform: translateY(26px); }
.anim.vu {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--lent), transform 0.9s var(--lent);
}

/* Les titres se lèvent derrière leur propre ligne de base. Le
   dépassement est masqué : d'où le padding qui rend leurs jambages. */
.titre { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.titre > span { display: block; transform: translateY(105%); }
.titre.vu > span { transform: none; transition: transform 1s var(--lent); }

/* Les photographies se découvrent par le bas, en se posant.
   C'est la figure entière qui porte la classe, jamais le cadre : un élément
   entièrement rogné par clip-path n'intersecte plus rien, et l'observateur
   posté dessus ne se déclencherait jamais. */
.cadre { clip-path: inset(0 0 100% 0); }
.visuel.vu .cadre { clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--lent); }
.cadre img { transform: scale(1.12); }
.visuel.vu .cadre img { transform: none; transition: transform 1.6s var(--lent); }

/* Le filet de laiton se trace après la photographie. */
.visuel-filet { transform: scale(0.94); opacity: 0; }
.visuel.vu .visuel-filet {
  transform: none; opacity: 0.55;
  transition: transform 1s var(--lent) 0.25s, opacity 1s 0.25s;
}

/* L'accueil se compose à l'ouverture, dans l'ordre de lecture. */
.accueil-lieu span, .accueil-marque img, .accueil-phrase, .accueil-service, .accueil-actions {
  opacity: 0; transform: translateY(22px);
}
.accueil-lieu span { display: block; }
.page-prete .accueil-lieu span,
.page-prete .accueil-marque img,
.page-prete .accueil-phrase,
.page-prete .accueil-service,
.page-prete .accueil-actions {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--lent), transform 1.1s var(--lent);
}
.page-prete .accueil-marque img { transition-delay: 0.12s; }
.page-prete .accueil-phrase { transition-delay: 0.26s; }
.page-prete .accueil-service { transition-delay: 0.38s; }
.page-prete .accueil-actions { transition-delay: 0.5s; }
.descendre { opacity: 0; transition: opacity 1s 1.1s; }
.page-prete .descendre { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .anim, .anim.vu,
  .accueil-lieu span, .accueil-marque img, .accueil-phrase, .accueil-service, .accueil-actions,
  .descendre, .visuel-filet {
    opacity: 1; transform: none; transition: none;
  }
  .visuel-filet { opacity: 0.55; }
  .titre > span { transform: none; transition: none; }
  .cadre, .visuel.vu .cadre { clip-path: none; transition: none; }
  .cadre img, .visuel.vu .cadre img { transform: none; transition: none; }
  .diapo .vue.est-active img { animation: none; }
  .descendre-trait { animation: none; }
  .bande img { scale: 1; }
  .entete { transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .reperes li { grid-template-columns: 1fr; gap: 0.2rem; }
  .accueil-marque img { width: min(300px, 68vw); }
  .liste-options li { flex-direction: column; gap: 0.2rem; }
  .liste-options b { min-width: 0; }
}

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 40;
    background: var(--marine-nuit);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 1.9rem; margin: 0;
    transform: translateX(100%);
    transition: transform 0.5s var(--lent);
  }
  .nav.ouvert { transform: none; }
  .nav a, .entete.defile .nav a { color: var(--creme); font-size: 1.05rem; }
  .nav .bouton, .entete.defile .nav .bouton {
    color: var(--marine); background: var(--laiton-clair); border-color: var(--laiton-clair);
  }
  .entete .burger[aria-expanded='true'] { color: var(--creme); }
  /* Menu ouvert : le logo repasse au-dessus du panneau, en crème. Sans
     :has(), il disparaît simplement derrière — le menu reste utilisable. */
  .entete:has(.nav.ouvert) .entete-logo { position: relative; z-index: 45; }
  .entete:has(.nav.ouvert) .logo-creme { display: block; }
  .entete:has(.nav.ouvert) .logo-marine { display: none; }
  .entete.cachee { transform: none; }
}

/* Les repères de la section « Le lieu » */
.reperes { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; gap: 1rem; }
.reperes li {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline;
  border-top: 1px solid var(--filet); padding-top: 1rem;
}
.reperes b {
  font-family: var(--titres); font-weight: 600; font-size: 0.98rem;
  color: var(--laiton); font-variation-settings: 'opsz' 24;
}
.reperes span { color: var(--gris); }