/* ============================================================
   LA PISCINE — structural + motion CSS
   ------------------------------------------------------------
   The :root block below is your BRAND CHARTER. These are the only
   values you (or Claude) should change to reskin the whole site —
   colours, fonts, spacing, accent.
   Everything under "STRUCTURAL CSS" drives layout, sections, and
   motion. You normally never touch it.
   ============================================================ */

:root {
  /* ---- Backgrounds (warm cream + deep lagoon green — La Travola-inspired) ---- */
  --bg:          #f7efdd;   /* page base — warm cream */
  --bg-2:        #f1e7d1;   /* +1 step deeper (alternating bands) */
  --bg-3:        #e9dcc1;   /* +2 steps (image fallback) */
  --green:       #0e3b33;   /* deep lagoon green — rich sections / hero */
  --green-deep:  #0a2c26;   /* darkest green */
  --ink:         #0e3b33;   /* DARK bands now use the deep green */

  /* ---- Text (on cream) ---- */
  --fg:          #1c2f29;   /* deep green-black — primary text */
  --fg-soft:     #5b6b63;   /* secondary text (green-grey) */
  --muted:       #5f6b63;   /* libelles, legendes — 4,58:1 sur creme (WCAG AA) */

  /* ---- On-dark helpers (text over green bands / hero) ---- */
  --cream:       #f7efdd;   /* light text on dark bands */
  --cream-soft:  rgba(247, 239, 221, 0.66);

  /* ---- Accent + lines ---- */
  --accent:      #a55027;   /* terracotta de marque, assombri : 4,55:1 sur creme et
                                sous le texte creme des boutons (WCAG AA) */
  --mat:         #fffdf7;   /* photo mat — near-white, must read CLEARLY against --bg/--bg-2 */
  --mat-ring:    rgba(28, 47, 41, 0.08); /* hairline around the mat card */
  --accent-soft: rgba(200, 97, 47, 0.14);
  --blue:        #3693c6;   /* bleu du logo : reserve au filet du cadrage de la salle */
  --line:        rgba(28, 47, 41, 0.14); /* hairline dividers (dark on cream) */
  --line-cream:  rgba(247, 239, 221, 0.22); /* hairline on green */

  /* ---- Layout ---- */
  --maxw:        1240px;
  --pad:         clamp(22px, 5vw, 80px);
  --radius:      22px;       /* modern soft cards */

  /* ---- Motion + type ---- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --font-script: "Grand Hotel", "Brush Script MT", cursive;                /* script monoline, calque sur le wordmark du logo */
  --display:     "Jost", "Futura", "Century Gothic", sans-serif;           /* geometrique, calque sur l'arc « BAIGNADES ~ GASTRONOMIQUES » du logo */
  --sans:        "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* grotesk UI / body */
}

/* ============================================================
   STRUCTURAL CSS — drives the engine. Rarely needs editing.
   ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Accessibility: visible keyboard focus + anchor offset under the fixed nav */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
[id] { scroll-margin-top: 96px; }

/* Skip-to-content link (appears on keyboard focus) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--accent); color: var(--cream);
  padding: 10px 18px; border-radius: 0 0 8px 8px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; transition: top .25s var(--ease); }
.skip-link:focus { top: 0; }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; }
em { font-style: italic; }

/* ---- Shared bits ---------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
.eyebrow--light { color: var(--fg-soft); }
.eyebrow--center { text-align: center; }

.lede   { font-size: clamp(16px, 1.4vw, 19px); color: var(--fg-soft); max-width: 46ch; margin: 26px 0 0; line-height: 1.75; }
.meta   { font-size: 14px; color: var(--muted); letter-spacing: 0.02em; margin: 20px 0 0; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--light { color: var(--cream); border: 1px solid rgba(247,239,221,0.55); background: rgba(247,239,221,0.06); }
.btn--light:hover { background: var(--cream); color: var(--green); transform: translateY(-2px); }
.btn--solid { margin-top: 8px; }
.btn--solid:hover { transform: translateY(-2px); }


/* ---- Nav ------------------------------------------------------------ */
.nav {
  position: fixed; inset: var(--annonce-h, 0px) 0 auto 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav__brand {
  font-family: var(--sans); font-weight: 500;
  font-size: 16px; letter-spacing: 0.42em; padding-left: 0.42em;
  color: var(--fg);
}
.nav__links { display: flex; gap: 38px; }
.nav__links a {
  font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-soft); position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width .4s var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { width: 100%; }
.nav__cta {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg); border: 1px solid rgba(245,244,242,0.4);
  padding: 11px 22px; border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.nav__cta:hover { background: var(--fg); color: var(--ink); transform: translateY(-1px); }

@keyframes cuePulse { 0%,100% { opacity: .35; transform: scaleY(.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ============================================================
   EDITORIAL (image + text)
   ============================================================ */
.editorial { padding: clamp(90px, 13vh, 180px) var(--pad); background: var(--bg); }
.editorial--reverse { background: var(--bg-2); }
.editorial__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 6vw, 90px); align-items: center;
}
.editorial--reverse .editorial__media { order: 2; }
.editorial--reverse .editorial__text { order: 1; }
.editorial__text { max-width: 480px; }
.editorial__title { font-size: clamp(38px, 5.2vw, 76px); }
.editorial__title em { color: var(--accent); }

/* .frame ships with a visual fallback so an un-replaced placeholder never reads as a
   bare black rectangle. Replace the editorial images at GUIDE step 4 bis. */
.frame {
  margin: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7);
  position: relative; aspect-ratio: 16 / 9; background: var(--bg-3);
  background-image: repeating-linear-gradient(45deg, rgba(245,244,242,0.018) 0 14px, transparent 14px 28px);
}
.frame::after {
  content: "Image à venir"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); opacity: 0.5; pointer-events: none;
}
.frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
/* Variante verticale : pour les photos portrait (ex. photo d'équipe) qu'un cadre 16:9 rognerait mal */
.frame--portrait { aspect-ratio: 4 / 5; }
.editorial__media:hover .frame img { transform: scale(1.04); }

/* ============================================================
   FULL-BLEED IMAGE SECTIONS
   ============================================================ */
.bleed { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.bleed--tall { min-height: 100vh; }
.bleed__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 🔴 Text over a photo is ALWAYS cream — never var(--fg). --fg is the dark
   ink used on cream sections; using it here (a leftover from the original
   dark theme) made these titles invisible on bright photos. */
.bleed__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,44,38,0.92) 0%, rgba(10,44,38,0.68) 34%, rgba(10,44,38,0.28) 62%, rgba(10,44,38,0.10) 100%),
    linear-gradient(to right, rgba(10,44,38,0.68) 0%, rgba(10,44,38,0.24) 48%, rgba(10,44,38,0) 78%);
}
.bleed__content { position: relative; z-index: 2; max-width: 640px; padding: 0 var(--pad); }
.bleed__content--low { align-self: flex-end; padding-bottom: clamp(60px, 12vh, 120px); }
.bleed__title { font-size: clamp(40px, 6vw, 92px); color: var(--cream); text-shadow: 0 2px 30px rgba(10,44,38,0.55); }
.bleed__title em { color: var(--cream); }
.bleed__copy { font-size: clamp(16px, 1.4vw, 19px); color: rgba(247,239,221,0.92); max-width: 46ch; margin: 24px 0 36px; line-height: 1.75; text-shadow: 0 1px 20px rgba(10,44,38,0.75), 0 1px 4px rgba(10,44,38,0.5); }

/* ============================================================
   AMENITIES / FEATURE LIST
   ============================================================ */
.amenities { background: var(--bg-2); padding: clamp(90px, 14vh, 180px) var(--pad); }
.amenities__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start;
}
.amenities__head { position: sticky; top: 120px; }
.amenities__title { font-size: clamp(34px, 4.4vw, 64px); color: var(--fg); }
.amenities__title em { color: var(--accent); }
.amenities__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 56px);
}
.amenity {
  display: flex; gap: 20px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.amenity__index { font-family: var(--display); font-size: 15px; color: var(--accent); letter-spacing: 0.04em; flex: 0 0 auto; min-width: 26px; }
.amenity__text { font-size: clamp(15px, 1.15vw, 17px); color: var(--fg-soft); line-height: 1.5; }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--ink); padding: clamp(70px, 11vh, 130px) var(--pad); }
.stats__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 60px);
}
.stat { text-align: left; border-left: 1px solid var(--line); padding-left: 26px; }
.stat__num { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(46px, 5.5vw, 76px); line-height: 1; color: var(--fg); }
.stat__unit { font-size: 0.42em; color: var(--accent); letter-spacing: 0.02em; }
.stat__label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { background: var(--bg); padding: clamp(110px, 18vh, 220px) var(--pad); }
.manifesto__inner { max-width: 940px; margin: 0 auto; text-align: center; }
.manifesto__title { font-size: clamp(40px, 6.5vw, 104px); color: var(--fg); }
.manifesto__title em { color: var(--accent); }
.manifesto__copy { font-family: var(--display); font-style: italic; font-size: clamp(19px, 2.2vw, 30px); color: var(--fg-soft); margin: 34px auto 0; max-width: 56ch; line-height: 1.5; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--bg-2); padding: clamp(90px, 14vh, 180px) var(--pad); }
.contact__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center;
}
.contact__title { font-size: clamp(34px, 4.6vw, 64px); color: var(--fg); margin-top: 8px; }
.contact__copy { color: var(--fg-soft); max-width: 42ch; margin: 26px 0 0; }
.contact__details { display: flex; flex-direction: column; gap: 4px; }
.contact__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease);
}
.contact__row:not(.contact__row--static):hover { padding-left: 10px; }
.contact__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.contact__value { font-family: var(--display); font-size: clamp(18px, 1.8vw, 24px); color: var(--fg); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); padding: clamp(60px, 9vh, 110px) var(--pad) 40px; }
.footer__tagline { font-family: var(--display); font-style: italic; font-size: 18px; color: var(--muted); margin: 14px 0 0; }
.footer__base { max-width: var(--maxw); margin: 32px auto 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__legal { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   MOTION LAYER (subtle, premium micro-interactions)
   All disabled under prefers-reduced-motion (media query at end).
   ============================================================ */

/* Masked line-by-line reveal for section titles (built in JS) */
.ml-reveal .ml-line {
  overflow: hidden;
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
}
.ml-reveal .ml-line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
  transition-delay: var(--ml-delay, 0s);
  will-change: transform;
}
.ml-reveal.is-shown .ml-line__inner { transform: translateY(0); }

/* Eyebrows above masked titles: gentle clip-up + fade */
.ml-eyebrow {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 0.7s var(--ease), opacity 0.7s var(--ease);
}
.ml-eyebrow.is-shown { clip-path: inset(0 0 0 0); opacity: 1; }

/* Animated counters (stats) */

/* Parallax media (full-bleed images). JS sets --py (px). */
.bleed__img {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
}

/* CTA / button press feedback */
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }
.nav__cta:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }
.btn--light:active { transform: scale(0.98); }

/* Intro load reveal (nav) */
body.intro-ready .nav { opacity: 0; transform: translateY(-12px); }
body.intro-ready.is-loaded .nav {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .editorial__inner, .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .editorial--reverse .editorial__media { order: 1; }
  .editorial--reverse .editorial__text { order: 2; }
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .amenities__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .amenities__head { position: static; }
  .amenities__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .stats__inner { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; text-align: center; align-items: center; gap: 8px; }
  .nav__cta { padding: 8px 14px; font-size: 9px; letter-spacing: 0.14em; }
  .nav__burger { margin-left: 12px; }
  .page-hero { min-height: 72vh; }
}

/* ============================================================
   GALLERY — l'album (real photos grid)
   ============================================================ */
.gallery { background: var(--bg-2); padding: clamp(90px, 13vh, 180px) var(--pad); }
.gallery__head { max-width: var(--maxw); margin: 0 auto clamp(40px, 6vw, 72px); }
.gallery__title { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.04; margin: 0.18em 0 0; }
.gallery__title em { color: var(--accent); font-style: italic; }
.gallery__lede { color: var(--fg-soft); max-width: 46ch; margin: 18px 0 0; }
.gallery__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.gallery__item { margin: 0; overflow: hidden; border-radius: 4px; position: relative; aspect-ratio: 4 / 5; background: var(--bg-3); box-shadow: 0 30px 70px -42px rgba(0,0,0,0.7); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 820px) { .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gallery__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } }

/* ============================================================
   LIGHT THEME ADAPTATIONS (cream + terracotta DA)
   Sections that sit on the dark espresso band (--ink) keep light
   text; the nav adapts between "over hero" (light) and "solid" (dark).
   ============================================================ */
/* Stats & footer on the dark espresso band → light text */
.stats .stat__num { color: var(--cream); }
.stats .stat__label { color: var(--cream-soft); }
.stats .stat { border-left-color: rgba(250, 244, 234, 0.20); }
.footer .footer__tagline, .footer .footer__legal { color: var(--cream-soft); }

/* Nav — cream glass when scrolled (home) or solid (interior pages).
   Background/blur/border come from the CODEX rule further down (the
   winning declaration); this just keeps the height reduction on scroll. */
.nav.is-scrolled, .nav--solid {
  padding-top: 16px; padding-bottom: 16px;
}
/* Over the dark hero video, nav text stays light until scrolled */
.nav--over-hero .nav__brand { color: var(--cream); }
.nav--over-hero .nav__links a { color: var(--cream-soft); }
.nav--over-hero .nav__links a:hover { color: var(--cream); }
.nav--over-hero .nav__cta { color: var(--cream); border-color: rgba(250, 244, 234, 0.5); }
.nav--over-hero .nav__cta:hover { background: var(--cream); color: var(--ink); }
/* Once scrolled onto cream — or on interior solid nav — switch to dark ink */
.nav--over-hero.is-scrolled .nav__brand,
.nav--solid .nav__brand { color: var(--fg); }
.nav--over-hero.is-scrolled .nav__links a,
.nav--solid .nav__links a { color: var(--fg-soft); }
.nav--over-hero.is-scrolled .nav__links a:hover,
.nav--solid .nav__links a:hover { color: var(--fg); }
.nav--over-hero.is-scrolled .nav__cta,
.nav--solid .nav__cta { color: var(--accent); border-color: var(--accent); }
.nav--over-hero.is-scrolled .nav__cta:hover,
.nav--solid .nav__cta:hover { background: var(--accent); color: var(--cream); }
.nav--solid .nav__cta { background: transparent; }

/* Brand logo in the nav (replaces the text wordmark) */
.nav__brand--logo { padding-left: 0; display: flex; align-items: center; }
.nav__logo { height: clamp(44px, 5vw, 54px); width: auto; display: block; transition: filter .4s var(--ease), height .5s var(--ease); }
.nav--over-hero .nav__logo { filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45)); }
.nav--over-hero.is-scrolled .nav__logo, .nav--solid .nav__logo { filter: none; }
.nav.is-scrolled .nav__logo { height: clamp(40px, 4.4vw, 48px); }

/* Current page marker */
.nav__links a.is-current::after { width: 100%; }

/* Hamburger (mobile) — pure CSS toggle, no JS */
.nav__burger { display: none; }
.nav__burger span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--cream); transition: background .3s var(--ease); }
.nav--over-hero.is-scrolled .nav__burger span,
.nav--solid .nav__burger span { background: var(--fg); }
@media (max-width: 980px) {
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-width: 44px; min-height: 44px; margin-left: 4px;
    cursor: pointer; z-index: 160; order: 3;
  }
  .nav__links {
    position: fixed; inset: 0 0 auto 0; top: 0;
    flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 104px var(--pad) 40px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    transform: translateY(-106%); transition: transform .55s var(--ease);
    box-shadow: 0 36px 70px -34px rgba(0,0,0,0.4);
  }
  .nav__links a {
    color: var(--fg) !important; font-family: var(--display);
    font-size: clamp(22px, 5vw, 30px); letter-spacing: 0; padding: 14px 0;
    width: 100%; border-bottom: 1px solid var(--line);
  }
  .nav__links a::after { display: none; }
  .nav__links a.is-current { color: var(--accent) !important; }
  .nav__toggle:checked ~ .nav__links { transform: translateY(0); }
  .nav__cta { padding: 9px 16px; font-size: 10px; min-height: 44px; display: inline-flex; align-items: center; }
  /* burger turns into an X when open. Le bouton est un conteneur flex : les
     marges des traits ne fusionnent pas, 12px separent leurs centres
     (2px de trait + 5px + 5px). Decaler de 12px les fait se croiser au milieu. */
  .nav__toggle:checked ~ .nav__burger span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
  .nav__toggle:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
  .nav__toggle:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }
  .nav__burger span { transition: transform .35s var(--ease), opacity .25s var(--ease), background .3s var(--ease); }
}

/* Interior pages: a hero band + offset so content clears the fixed nav */
.page-hero {
  position: relative; min-height: 64vh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--ink);
}
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,15,12,0.82) 0%, rgba(20,15,12,0.28) 45%, rgba(20,15,12,0.12) 100%); }
.page-hero__content { position: relative; z-index: 2; max-width: var(--maxw); width: 100%;
  margin: 0 auto; padding: 0 var(--pad) clamp(46px, 8vh, 92px); }
.page-hero__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.page-hero__title { font-size: clamp(46px, 7vw, 104px); line-height: 0.96; color: var(--cream); text-shadow: 0 2px 40px rgba(0,0,0,0.45); }
.page-hero__title em { color: var(--cream); }
.page-hero__lede { font-family: var(--display); font-style: italic; font-size: clamp(18px, 2vw, 26px); color: var(--cream-soft); margin: 22px 0 0; max-width: 44ch; }

/* ============================================================
   MODERN LAYER (2025 refresh) — rounded cards, arrow buttons,
   softer shadows. Warm terracotta DA throughout.
   ============================================================ */
body { font-weight: 400; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* Rounded image cards + soft lift */
.frame, .gallery__item, .bleed { border-radius: var(--radius); }
.bleed { overflow: hidden; }
.editorial__media .frame { box-shadow:
  0 0 0 1px rgba(28, 47, 41, 0.04),
  0 2px 6px rgba(28, 47, 41, 0.06),
  0 50px 100px -55px rgba(42, 33, 28, 0.5); }
.gallery__item { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.gallery__item:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(28,47,41,0.05), 0 4px 10px rgba(28,47,41,0.07), 0 44px 80px -44px rgba(42,33,28,0.42); }

/* Buttons — pill with trailing arrow that nudges on hover */
.btn { font-weight: 600; }
.btn--solid::after, .btn--light::after, .btn--ghost::after { content: "→"; font-size: 14px; margin-left: 2px; transition: transform .35s var(--ease); }
.btn--solid:hover::after, .btn--light:hover::after, .btn--ghost:hover::after { transform: translateX(5px); }
/* Ghost button for light (cream) backgrounds */
.btn--ghost { color: var(--fg); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--accent); color: var(--cream); border-color: var(--accent); transform: translateY(-2px); }
.nav__cta { font-weight: 600; }


/* Brand logo in the manifesto (cream background — the blue mark reads clean) */
.manifesto__logo { display: block; width: clamp(132px, 17vw, 196px); height: auto; margin: 0 auto clamp(24px, 4vw, 40px); }

/* Section header lockup (modern, used on inner pages) */
.section-head { max-width: var(--maxw); margin: 0 auto clamp(38px, 5vw, 64px); }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head__title { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 5vw, 72px); line-height: 1.02; color: var(--fg); }
.section-head__title em { color: var(--accent); }
.section-head__lede { color: var(--fg-soft); max-width: 52ch; margin: 22px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; }

/* Centered CTA section on the dark band (e.g. evenements.html "Parlons-en") */
.section--center { text-align: center; }
.section--center .section__inner { max-width: 760px; }
.section--center .section-head__lede { margin-left: auto; margin-right: auto; }
.section--center .btn-row { justify-content: center; }
.section--ink .section-head__title { color: var(--cream); }
.section--ink .section-head__lede { color: var(--cream-soft); }

/* Generic content section + utilities (inner pages) */
.section { padding: clamp(72px, 11vh, 156px) var(--pad); background: var(--bg); }
.section--alt { background: var(--bg-2); }
.section--ink { background: var(--ink); }
.section__inner { max-width: var(--maxw); margin: 0 auto; }
.btn-row { margin-top: clamp(32px, 5vw, 54px); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.note { font-size: 13px; color: var(--muted); margin-top: 26px; letter-spacing: 0.02em; }

/* Split (text + media) */
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(36px, 6vw, 92px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 50px 100px -55px rgba(42,33,28,0.5); }
/* evenements.html: the container goes from 4:5 to 16:10 at ≤820px — a big
   enough ratio swing that a plain center crop trims into the ceiling lamps
   rather than the tables, which are the actual subject. Bias down toward them. */
.split--reverse .split__media img { object-position: 50% 68%; }
.split__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.split__media:hover img { transform: scale(1.04); }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } .split--reverse .split__media { order: 0; } .split__media { aspect-ratio: 16/10; } }

/* Media row (rounded cards) */
.media-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(34px, 5vw, 60px); }
.media-row figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.media-row img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.media-row figure:hover img { transform: scale(1.05); }
@media (max-width: 680px) { .media-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Menu list */
.menu-group { margin-top: clamp(40px, 6vw, 76px); }
.menu-group:first-child { margin-top: 0; }
.menu-group__title { font-family: var(--display); font-style: italic; font-size: clamp(28px, 3.4vw, 46px); color: var(--accent); margin: 0 0 6px; }
.menu-group__note { font-family: var(--display); font-style: italic; font-size: 15px; color: var(--fg-soft); margin: 0 0 18px; max-width: 60ch; }
/* 16:9 plutôt que 21:9 : les photos Instagram (4:5 ou 3:2) y perdent
   beaucoup moins de matière au recadrage. */
.menu-group__banner { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; margin: 4px 0 clamp(26px, 3.5vw, 44px); box-shadow: 0 44px 90px -58px rgba(28, 47, 41, 0.45); }
.menu-group__banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.menu-group__banner:hover img { transform: scale(1.04); }
@media (max-width: 600px) { .menu-group__banner { aspect-ratio: 16 / 10; } }
.menu-group__items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 84px); }
@media (max-width: 760px) { .menu-group__items { grid-template-columns: minmax(0, 1fr); } }
.menu-item { padding: 17px 0; border-bottom: 1px solid var(--line); }
.menu-item__top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.menu-item__name { font-family: var(--display); font-size: clamp(17px, 1.5vw, 21px); color: var(--fg); line-height: 1.2; }
.menu-item__price { font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); color: var(--accent); white-space: nowrap; }
.menu-item__desc { font-size: 13.5px; color: var(--fg-soft); margin-top: 5px; line-height: 1.5; max-width: 48ch; }

/* Contact rows on light pages reuse .contact__row; add a map button area */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) clamp(32px, 5vw, 70px); }
@media (max-width: 680px) { .info-grid { grid-template-columns: minmax(0, 1fr); } }
.info-block .info-block__k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.info-block .info-block__v { font-family: var(--display); font-size: clamp(19px, 1.8vw, 25px); color: var(--fg); line-height: 1.35; }
.info-block a.info-block__v { transition: color .3s var(--ease); }
.info-block a.info-block__v:hover { color: var(--accent); }

/* ============================================================
   FOOTER (modern, multi-column, with social links)
   ============================================================ */
.footer__top {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: clamp(36px, 5vw, 80px);
  padding-bottom: clamp(40px, 6vh, 64px); border-bottom: 1px solid rgba(250, 244, 234, 0.16);
}
.footer__logo { height: clamp(78px, 9vw, 96px); width: auto; display: block; margin-bottom: 18px; }
.footer__brandcol .footer__tagline { margin: 0 0 24px; max-width: 32ch; }
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__coltitle { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.footer__col a, .footer__col span { color: var(--cream-soft); font-size: 15px; line-height: 1.4; transition: color .3s var(--ease); }
.footer__col a:hover { color: var(--cream); }
@media (max-width: 760px) { .footer__top { grid-template-columns: minmax(0, 1fr); gap: 38px; } }

/* ============================================================
   LA TRAVOLA-INSPIRED LANGUAGE — deep-green hero, giant script,
   circular outlined buttons, editorial CTA band.
   ============================================================ */

/* Circular outlined button (signature) */
.btn-circle {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: clamp(128px, 13vw, 164px); height: clamp(128px, 13vw, 164px);
  border-radius: 50%; border: 1px solid currentColor; padding: 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; line-height: 1.45;
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
/* Filled terracotta circle — the primary, high-visibility CTA */
.btn-circle--fill { color: var(--cream); background: var(--accent); border-color: var(--accent); box-shadow: 0 22px 48px -20px rgba(200,97,47,0.6); }
.btn-circle--fill:hover { border-color: #ad4d27; transform: scale(1.06); }

/* Underline-style text link (secondary action) */
.link-underline { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; position: relative; padding-bottom: 6px; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; opacity: .4; transition: opacity .3s var(--ease); }
.link-underline:hover::after { opacity: 1; }

/* ---- HERO (full-bleed image + deep-green wash + giant script) ---- */
.hero { position: relative; min-height: 100vh; background: var(--green); color: var(--cream); overflow: hidden; display: flex; align-items: flex-end; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Homepage hero photo: the pool sits left-of-centre in the source shot, so a
   default 50% 50% crop hides it almost entirely on narrow (mobile) viewports
   where object-fit:cover trims the sides hardest — bias the crop toward it. */
#hero .hero__img { object-position: 24% 46%; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,44,38,0.94) 0%, rgba(12,52,45,0.55) 42%, rgba(12,52,45,0.34) 100%),
    radial-gradient(120% 90% at 82% 4%, rgba(200,97,47,0.20), transparent 55%); }
.hero__inner { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 0 var(--pad) clamp(60px, 11vh, 120px); }
.hero__eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-soft); margin: 0 0 14px; }
.hero__script { font-family: var(--font-script); font-weight: 400; color: var(--cream); line-height: 0.84;
  font-size: clamp(86px, 17vw, 238px); margin: 0; text-shadow: 0 14px 60px rgba(0,0,0,0.35); }
.hero__sub { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.8vw, 40px); color: var(--cream); margin: 6px 0 0; max-width: 22ch; line-height: 1.06; }
.hero__sub em { color: var(--accent); font-style: italic; }
.hero__lede { color: var(--cream-soft); max-width: 48ch; margin: 22px 0 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75; text-shadow: 0 1px 18px rgba(0,0,0,0.4); }
.hero__actions { display: flex; gap: 26px; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.hero__cue { position: absolute; right: var(--pad); bottom: 26px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-soft); }
.hero__cue-line { width: 1px; height: 46px; background: linear-gradient(var(--cream-soft), transparent); animation: cuePulse 2.4s var(--ease) infinite; }
@media (max-width: 600px) { .hero__cue { display: none; } }

/* ---- CTA band (pre-footer rupture, green) ---- */
.cta-band { background: var(--green); color: var(--cream); text-align: center; padding: clamp(96px, 17vh, 220px) var(--pad); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(100% 120% at 50% 100%, rgba(200,97,47,0.16), transparent 60%); }
.cta-band__inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.cta-band__eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.cta-band__script { font-family: var(--font-script); font-size: clamp(58px, 11vw, 156px); line-height: 0.88; margin: 0; color: var(--cream); }
.cta-band__sub { color: var(--cream-soft); max-width: 48ch; margin: 22px auto clamp(34px, 5vw, 48px); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; }
.cta-band__actions { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ============================================================
   CODEX FINISHING PASS — premium polish, no layout rewrite
   ============================================================ */
:root {
  --shadow-soft: 0 28px 70px -48px rgba(28, 47, 41, 0.55);
  --shadow-lift: 0 42px 92px -58px rgba(28, 47, 41, 0.72);
  /* Anneau de focus clavier. L'ancien, un terracotta a 28 % d'opacite, ne
     ressortait qu'a 1,37:1 sur le creme : invisible en pratique, alors que
     la WCAG 2.2 demande 3:1 pour un indicateur de focus. Double anneau :
     creme a l'interieur, terracotta plein a l'exterieur, donc visible
     aussi bien sur fond clair que sur fond sombre. */
  --focus-ring: 0 0 0 2px var(--cream), 0 0 0 5px var(--accent);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(200, 97, 47, 0.08), transparent 34rem),
    linear-gradient(180deg, var(--bg), #f2e7cf 48%, var(--bg));
}

a:focus-visible,
button:focus-visible,
label:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 999px;
}

.nav {
  isolation: isolate;
}

/* No floating pill. Clean transparent nav over the hero (light text +
   shadow carry it), and a full-width cream glass bar once scrolled. */
.nav::before { display: none; }

.nav.is-scrolled,
.nav--solid {
  background: rgba(247, 239, 221, 0.88);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 981px) {
  .nav {
    display: grid;
    grid-template-columns: 170px minmax(520px, 1fr) 170px;
    align-items: center;
    gap: 22px;
    padding: 18px clamp(34px, 4.6vw, 78px);
  }

  .nav__brand--logo {
    justify-self: start;
    align-self: center;
  }

  .nav__logo {
    height: 58px;
  }

  .nav__links {
    justify-self: center;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 3vw, 44px);
  }

  .nav__cta {
    justify-self: end;
    align-self: center;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  .nav.is-scrolled .nav__links,
  .nav--solid .nav__links { background: none; box-shadow: none; }
}

.nav__links a {
  font-weight: 600;
}

.nav--over-hero .nav__links a {
  color: rgba(247, 239, 221, 0.78);
  text-shadow: 0 1px 14px rgba(10, 44, 38, 0.36);
}

.nav--over-hero .nav__links a:hover,
.nav--over-hero .nav__links a.is-current {
  color: var(--cream) !important;
}

.nav__links a {
  transition: color .28s var(--ease), opacity .28s var(--ease);
}

.nav__links a.is-current {
  color: var(--accent) !important;
}

.nav--over-hero.is-scrolled .nav__links a.is-current,
.nav--solid .nav__links a.is-current {
  color: var(--fg) !important;
}

.nav__cta,
.btn,
.btn-circle,
.link-underline {
  will-change: transform;
}

.nav__cta,
.nav--over-hero .nav__cta,
.nav--over-hero.is-scrolled .nav__cta,
.nav--solid .nav__cta {
  color: var(--cream);
  background: linear-gradient(135deg, #d46b34, var(--accent));
  border-color: rgba(247, 239, 221, 0.34);
  box-shadow: 0 14px 34px -22px rgba(10, 44, 38, 0.75), 0 0 0 1px rgba(247, 239, 221, 0.12) inset;
}

.nav__cta:hover,
.nav--over-hero .nav__cta:hover,
.nav--over-hero.is-scrolled .nav__cta:hover,
.nav--solid .nav__cta:hover {
  color: var(--cream);
  background: linear-gradient(135deg, #e1773f, #ad4d27);
  transform: translateY(-2px);
}

.btn--solid {
  color: var(--cream);
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow: 0 18px 38px -26px rgba(10, 44, 38, 0.72);
}

.btn--solid:hover {
  color: var(--cream);
  background: linear-gradient(135deg, var(--accent), #ad4d27);
}

.btn-circle--fill {
  background: linear-gradient(145deg, #d96d36, #b55229);
  border: 1px solid rgba(247, 239, 221, 0.34);
  box-shadow: 0 26px 64px -28px rgba(10, 44, 38, 0.85), 0 0 0 1px rgba(247, 239, 221, 0.12) inset;
  text-shadow: 0 1px 10px rgba(10, 44, 38, 0.30);
}

.btn-circle--fill:hover {
  background: linear-gradient(145deg, #e1773f, #9f4322);
}

.hero__actions .link-underline,
.cta-band__actions .link-underline {
  color: var(--cream);
  padding: 12px 18px;
  border: 1px solid rgba(247, 239, 221, 0.30);
  border-radius: 999px;
  background: rgba(10, 44, 38, 0.24);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 12px rgba(10, 44, 38, 0.38);
}

.hero__actions .link-underline::after,
.cta-band__actions .link-underline::after {
  left: 18px;
  right: 18px;
  width: auto;
  opacity: 0.72;
}

.cta-band__eyebrow {
  color: #f0a06d;
}

.cta-band__script {
  color: #fff8e8;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.42);
}

.cta-band__sub {
  color: rgba(255, 248, 232, 0.86);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

.btn--ghost {
  background: rgba(247, 239, 221, 0.42);
  backdrop-filter: blur(10px);
}

.hero__img,
.page-hero__img,
.bleed__img {
  filter: saturate(1.04) contrast(1.03);
}

.hero__scrim {
  background:
    linear-gradient(to top, rgba(10,44,38,0.86) 0%, rgba(10,44,38,0.34) 38%, rgba(10,44,38,0) 70%),
    linear-gradient(to right, rgba(10,44,38,0.60) 0%, rgba(10,44,38,0.14) 42%, transparent 68%),
    radial-gradient(80% 70% at 82% 6%, rgba(200,97,47,0.12), transparent 60%);
}

.hero__inner {
  max-width: 1320px;
}

.hero__eyebrow,
.page-hero__eyebrow,
.eyebrow {
  text-wrap: balance;
}

.hero__lede,
.page-hero__lede,
.section-head__lede,
.lede,
.contact__copy {
  text-wrap: pretty;
}

.hero__script {
  letter-spacing: -0.035em;
}

.hero__actions,
.cta-band__actions,
.btn-row {
  row-gap: 18px;
}

.page-hero {
  min-height: clamp(560px, 72vh, 760px);
}

.page-hero:not(:has(.page-hero__img)) {
  background:
    radial-gradient(circle at 78% 24%, rgba(200, 97, 47, 0.22), transparent 34rem),
    linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
}

.page-hero__scrim {
  background:
    linear-gradient(to top, rgba(10,44,38,0.88) 0%, rgba(10,44,38,0.36) 48%, rgba(10,44,38,0.16) 100%),
    radial-gradient(90% 80% at 80% 8%, rgba(200,97,47,0.20), transparent 56%);
}

.frame,
.split__media,
.media-row figure,
.menu-group__banner,
.gallery__item {
  box-shadow: var(--shadow-soft);
}

.frame img,
.split__media img,
.media-row img,
.menu-group__banner img,
.gallery__item img {
  backface-visibility: hidden;
}

/* ============================================================
   FRAMED PHOTO CARDS — "contours" inspired by Fixa / Mobbin-style
   site previews: the photo sits inset within a soft mat card
   instead of running edge-to-edge (measured off fixaplan.com:
   24px outer radius, 40px padding — scaled here for our grids).
   Hero / full-bleed images are untouched on purpose — those stay
   immersive, per earlier feedback on the homepage hero.
   ============================================================ */
.frame,
.split__media,
.menu-group__banner {
  background: var(--mat);
  border: 1px solid var(--mat-ring);
  border-radius: 30px;
  padding: clamp(18px, 3vw, 36px);
  box-sizing: border-box;
}

.gallery__item,
.media-row figure {
  background: var(--mat);
  border: 1px solid var(--mat-ring);
  border-radius: 24px;
  padding: clamp(10px, 1.7vw, 18px);
  box-sizing: border-box;
}

.frame img,
.split__media img,
.menu-group__banner img {
  border-radius: 16px;
}

.gallery__item img,
.media-row img {
  border-radius: 14px;
}

.frame::after {
  inset: clamp(18px, 3vw, 36px);
  border-radius: 18px;
}

/* The mat card lifts off the page — otherwise the inset reads as a mistake.
   Ombre en trois couches (motif releve sur Airbnb, site hospitalite pilote par
   la photo) : un liseré de contact, une ombre proche, une ombre large. Une seule
   couche large donne un carton qui flotte ; trois couches donnent un objet posé.
   Teinte sur le vert de la charte, jamais du noir pur. */
.frame,
.split__media,
.menu-group__banner,
.gallery__item,
.media-row figure {
  box-shadow:
    0 0 0 1px rgba(28, 47, 41, 0.04),
    0 2px 6px rgba(28, 47, 41, 0.06),
    0 24px 60px -40px rgba(28, 47, 41, 0.45);
}

/* Les vignettes de media-row agrandissaient la photo au survol mais la carte
   elle-meme ne bougeait pas, alors que .gallery__item se souleve : meme type
   de carte, deux comportements. Aligne sur la galerie. */
.media-row figure {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.media-row figure:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(28, 47, 41, 0.05),
    0 4px 10px rgba(28, 47, 41, 0.07),
    0 44px 80px -44px rgba(42, 33, 28, 0.42);
}

.menu-group {
  padding-top: clamp(10px, 1.6vw, 22px);
}

.menu-group__title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.menu-group__title::after {
  content: "";
  width: clamp(48px, 8vw, 110px);
  height: 1px;
  background: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.menu-item {
  position: relative;
  border-bottom-color: rgba(28, 47, 41, 0.12);
  transition: padding-left .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}

.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 99px;
  background: var(--accent);
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}

.menu-item:hover {
  padding-left: 16px;
  border-color: rgba(200, 97, 47, 0.34);
}

.menu-item:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.info-block,
.contact__row {
  border-bottom-color: rgba(28, 47, 41, 0.12);
}

.info-block {
  padding: 4px 0 24px;
}

.gallery__grid,
.media-row {
  align-items: stretch;
}

.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 80% at 10% 0%, rgba(200, 97, 47, 0.10), transparent 58%);
}

.footer__top,
.footer__base {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  .nav::before,
  .nav--over-hero::before,
  .nav.is-scrolled::before,
  .nav--solid::before { inset: 9px 14px; }
  .nav__links {
    min-height: 100dvh;
    justify-content: center;
  }
  .amenities__head { position: static; }
}

@media (max-width: 720px) {
  :root { --pad: clamp(18px, 6vw, 28px); }
  .hero { min-height: 100svh; }
  .hero__inner { padding-top: 104px; padding-bottom: clamp(42px, 9vh, 74px); }
  .hero__script { font-size: clamp(82px, 28vw, 132px); }
  .hero__sub { font-size: clamp(23px, 8vw, 34px); }
  .hero__actions { align-items: flex-start; }
  .btn-circle { width: 118px; height: 118px; font-size: 10px; }
  .stats__inner { gap: 18px; }
  .stat { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line-cream); }
  .amenities__list { grid-template-columns: minmax(0, 1fr); }
  .contact__row { flex-direction: column; gap: 6px; }
  .menu-item:hover { padding-left: 0; }
  .menu-item::before { display: none; }
  .page-hero { min-height: 72svh; }
  .page-hero__content { padding-bottom: 44px; }
}

@media (max-width: 520px) {
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .nav__logo { height: 42px; }
  .nav__cta { max-width: 122px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cream) !important; }
  .gallery__grid,
  .media-row { gap: 10px; }
  .footer__base { align-items: flex-start; text-align: left; }
}

/* ============================================================
   BOOKING — embedded TheFork reservation widget
   Same booking engine as the restaurant's current site, so guests
   land in the flow they already know.
   ============================================================ */
.booking {
  background: var(--mat);
  border: 1px solid var(--mat-ring);
  border-radius: 26px;
  padding: clamp(10px, 1.6vw, 18px);
  box-shadow: 0 30px 70px -46px rgba(28, 47, 41, 0.45);
  max-width: 760px;
}
.booking__frame {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  border-radius: 16px;
  background: #fff;
}
@media (max-width: 600px) {
  .booking__frame { height: 700px; }
}
.booking__fallback {
  font-size: 14px;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 760px;
}
.booking__fallback a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   NOTICE — practical info the guest must not miss
   (e.g. pool access is booked with Pacific Club, not the restaurant)
   ============================================================ */
.notice {
  margin: clamp(26px, 3.5vw, 38px) 0 0;
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--mat);
  border: 1px solid var(--mat-ring);
  border-left: 3px solid var(--accent);
  border-radius: 18px;
  box-shadow: 0 20px 50px -40px rgba(28, 47, 41, 0.4);
  max-width: 52ch;
}
.notice__title {
  font-family: var(--display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.25;
  color: var(--fg);
  margin: 0 0 10px;
}
.notice__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-soft);
  margin: 0;
}
.notice__text strong { color: var(--fg); font-weight: 600; }
.notice__specs {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(22px, 3vw, 40px);
}
.notice__specs li { display: flex; flex-direction: column; gap: 3px; }
.notice__k {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.notice__v {
  font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--accent);
}

/* ============================================================
   HERO LEGIBILITY & CLEARANCE (final pass)
   Fixes two real defects seen on wide/short screens:
   1. Le script (Grand Hotel) a de hautes hampes et line-height < 1, donc ses
      glyphs overflowed their box and collided with the nav. Capping
      the size against viewport HEIGHT (not just width) prevents it.
   2. Body copy sat on the bright pool with too little contrast.
   ============================================================ */
.hero__script {
  font-size: min(clamp(76px, 15vw, 210px), 20vh);
  line-height: 0.92;
}

.hero__inner {
  padding-top: clamp(112px, 15vh, 168px);
}

/* A soft "text well" so the copy always sits on a calm ground,
   whatever the photo does behind it. */
.hero__scrim {
  background:
    linear-gradient(to top, rgba(10,44,38,0.90) 0%, rgba(10,44,38,0.62) 30%, rgba(10,44,38,0.24) 58%, rgba(10,44,38,0.06) 100%),
    linear-gradient(to right, rgba(10,44,38,0.72) 0%, rgba(10,44,38,0.30) 46%, rgba(10,44,38,0) 76%),
    radial-gradient(70% 60% at 84% 6%, rgba(200,97,47,0.14), transparent 62%);
}

.hero__sub {
  text-shadow: 0 2px 26px rgba(10,44,38,0.55);
}

.hero__lede {
  color: rgba(247, 239, 221, 0.94);
  text-shadow: 0 1px 18px rgba(10,44,38,0.72), 0 1px 4px rgba(10,44,38,0.45);
}

@media (max-width: 820px) {
  .hero__script { font-size: min(clamp(72px, 22vw, 132px), 18vh); }
  .hero__inner { padding-top: clamp(104px, 13vh, 130px); }
}

/* ============================================================
   MOBILE POLISH — confort tactile & lisibilité
   Cibles : 44px minimum pour tout ce qui se tape au doigt
   (recommandation d'accessibilité), et libellés relevés.
   ============================================================ */
@media (max-width: 820px) {
  /* Zones tactiles : liens de navigation et pied de page */
  .nav__links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer__col a,
  .contact__row,
  .info-block a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Libellés : 10–11px devient illisible sur un téléphone */
  .eyebrow,
  .hero__eyebrow,
  .page-hero__eyebrow,
  .stat__label,
  .info-block__k,
  .notice__k,
  .footer__coltitle { font-size: 12px; }
  .footer__legal { font-size: 13px; }

  /* Le module de réservation respire mieux sans son cadre sur petit écran */
  .booking { padding: 6px; border-radius: 18px; }
}

@media (max-width: 520px) {
  /* Boutons pleine largeur : plus faciles à viser au pouce */
  .btn-row .btn,
  .hero__actions .link-underline { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ml-reveal .ml-line { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .ml-reveal .ml-line__inner { transform: none !important; transition: none !important; }
  .ml-eyebrow { clip-path: none !important; opacity: 1 !important; transition: none !important; }
  .bleed__img { transform: none !important; will-change: auto; }
  .btn:active, .nav__cta:active, .btn--light:active { transform: none !important; }
  .gallery__item:hover, .media-row figure:hover { transform: none !important; }
  body.intro-ready .nav { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   TAGLIST — remplace les enumerations separees par des points
   mediants (« a · b · c »), qui lisent comme du remplissage.
   Puces en pastilles : meme langage que les boutons pilule.
   ============================================================ */
.taglist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 24px 0 0;
  padding: 0;
}
.taglist li {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--fg-soft);
  background: rgba(255, 253, 247, 0.62);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
}

/* ============================================================
   ICONES : Phosphor (licence MIT), inserees au build par le
   shortcode {% icon "nom" %} (voir eleventy.config.js).
   Une seule famille, un seul trait, pour tout le site.
   ============================================================ */
.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }

/* ============================================================
   MESSAGES IMPORTANTS : src/_data/infos.json (modifiable dans /admin)
   Remplace l'ancien bandeau de mots decoratif : cette place, juste
   sous l'ouverture, porte maintenant une information utile.
   Fond : la terracotta de la charte, assombrie pour que le texte
   creme atteigne le contraste AA (3,5:1 sur la terracotta pure,
   5,1:1 ici). Elle suit la couleur d'accent choisie dans /admin.
   ============================================================ */
.infos {
  background: #a44a25;
  color: var(--cream);
  padding: clamp(52px, 8vh, 88px) var(--pad);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .infos { background: color-mix(in srgb, var(--accent) 82%, #000); }
}
.infos :focus-visible { outline-color: var(--cream); }
.infos__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.infos__title {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  color: var(--cream);
  text-wrap: balance;
}
.infos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(26px, 3vw, 44px);
}
.infos__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid rgba(247, 239, 221, 0.3);
}
.infos__icon .icon { display: block; width: 30px; height: 30px; }
.infos__name {
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  margin: 2px 0 8px;
}
.infos__text {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
  color: rgba(247, 239, 221, 0.94);
}
.infos__link {
  display: inline-block;
  padding: 12px 0;
  margin-top: -2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(247, 239, 221, 0.5);
  transition: text-decoration-color .3s var(--ease);
}
.infos__link::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .3s var(--ease); }
.infos__link:hover { text-decoration-color: var(--cream); }
.infos__link:hover::after { transform: translateX(4px); }

/* Version compacte, posee dans une page (Reservation : juste avant le module) */
.infos--inline {
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: 26px;
  margin: clamp(32px, 4vw, 52px) 0 clamp(24px, 3vw, 36px);
  max-width: 760px; /* meme colonne que le module de reservation juste dessous */
}
.infos--inline .infos__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.infos--inline .infos__title { font-size: clamp(24px, 2.4vw, 32px); }

@media (max-width: 860px) {
  .infos__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .infos__item {
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(247, 239, 221, 0.3);
  }
}

/* ============================================================
   BOUTONS RESEAUX SOCIAUX : pastilles avec libelle.
   Les anciens ronds « icone seule » ne disaient pas ou ils menaient.
   Le meme bouton sert sur fond creme (contact, menu mobile) et,
   avec .social--on-dark, sur fond vert (pied de page).
   ============================================================ */
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 20px 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.social-btn .icon { width: 20px; height: 20px; }
.social-btn:hover { background: var(--fg); border-color: var(--fg); color: var(--cream); transform: translateY(-2px); }
.social-btn:active { transform: translateY(0) scale(0.98); }

.social--on-dark .social-btn { color: var(--cream); border-color: rgba(247, 239, 221, 0.32); }
.social--on-dark .social-btn:hover { background: var(--cream); border-color: var(--cream); color: var(--green); }
.footer__brandcol .social { margin-top: 4px; }

/* Bouton principal « Suivre » de la bande Instagram */
.social-btn--solid { background: var(--green); border-color: var(--green); color: var(--cream); }
.social-btn--solid:hover { background: var(--fg); border-color: var(--fg); color: var(--cream); }

/* Menu mobile : les reseaux en bas du panneau, masques sur ordinateur */
.nav__social { display: none; }
@media (max-width: 980px) {
  .nav__links .nav__social { display: flex; margin-top: 26px; }
  .nav__links .nav__social .social-btn {
    display: inline-flex;
    width: auto;
    padding: 10px 20px 10px 16px;
    border: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
  }
  /* Le panneau impose un texte fonce (!important) : survol clair, sinon le
     libelle disparaitrait sur un fond fonce. */
  .nav__links .nav__social .social-btn:hover { background: var(--bg-2); border-color: var(--fg); }
  /* Panneau ouvert : fond creme, donc jamais de texte creme ni de halo.
     Sur l'accueil, le lien courant « Accueil » sortait creme sur creme
     (regle de la nav posee sur la photo), donc invisible. */
  .nav__toggle:checked ~ .nav__links a { text-shadow: none; }
  .nav__toggle:checked ~ .nav__links a.is-current { color: var(--accent) !important; }
  /* Meme cause pour la croix de fermeture : creme sur creme en haut de page. */
  .nav__toggle:checked ~ .nav__burger span { background: var(--fg); }
}

/* Page Contact */
.contact-social {
  margin-top: clamp(30px, 4vw, 46px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.contact-social__label {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  color: var(--fg-soft);
}
a.notice__v:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   MANIFESTE + PHOTO DE LA SALLE, cadree comme sur le site actuel
   du restaurant : un bloc d'enduit terracotta (leur propre texture,
   texture-terracotta.jpg) et un filet bleu decale, du bleu du logo.
   Regle de forme : angles quasi vifs (4px) sur les trois pieces,
   volontairement, pour que le filet decale reste net. C'est une
   citation de leur identite, pas une carte photo de plus.
   ============================================================ */
.manifesto--split .manifesto__inner {
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
  text-align: left;
}
.manifesto--split .manifesto__logo { width: clamp(110px, 11vw, 148px); margin: 0 0 clamp(20px, 3vw, 32px); }
.manifesto--split .manifesto__title { font-size: clamp(40px, 5.2vw, 80px); line-height: 1.08; }
.manifesto--split .manifesto__copy { margin: 28px 0 0; font-size: clamp(18px, 1.7vw, 24px); max-width: 46ch; }

.framed {
  position: relative;
  isolation: isolate;
  margin: 0 7% 9% 4%;
}
.framed picture,
.framed img { display: block; width: 100%; }
.framed img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(28, 47, 41, 0.04),
    0 2px 6px rgba(28, 47, 41, 0.06),
    0 30px 70px -44px rgba(28, 47, 41, 0.5);
}
.framed::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -4%;
  top: 7%;
  bottom: 19%;
  width: 11%;
  background: #c67b54 url("assets/img/texture-terracotta.jpg") center / cover;
  border-radius: 4px;
  box-shadow: 0 14px 30px -20px rgba(42, 33, 28, 0.55);
}
.framed::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 20%;
  top: 13%;
  right: -7%;
  bottom: -7%;
  border: 2px solid var(--blue);
  border-radius: 4px;
  pointer-events: none;
}
@media (max-width: 860px) {
  .manifesto--split .manifesto__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .framed { max-width: 460px; }
}

/* ============================================================
   BANDE INSTAGRAM : src/_data/instagram.json (modifiable dans /admin)
   Les photos viennent du compte du restaurant (480 a 1080 px) :
   petites tuiles, donc nettes meme sur ecran retina.
   Mobile : une rangee qui defile au doigt, sans tuile orpheline.
   ============================================================ */
.insta { background: var(--bg); padding: clamp(84px, 12vh, 150px) var(--pad); }
.insta__inner { max-width: var(--maxw); margin: 0 auto; }
.insta__title { font-size: clamp(32px, 4.2vw, 58px); color: var(--fg); }
.insta__lede { color: var(--fg-soft); max-width: 46ch; margin: 18px 0 0; }
.insta__grid {
  list-style: none;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}
.insta__item a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-3);
  box-shadow:
    0 0 0 1px rgba(28, 47, 41, 0.04),
    0 2px 6px rgba(28, 47, 41, 0.06),
    0 20px 44px -34px rgba(28, 47, 41, 0.5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.insta__item picture,
.insta__item img { display: block; width: 100%; height: 100%; }
.insta__item img { object-fit: cover; transition: transform 1.2s var(--ease); }
.insta__item a:hover { transform: translateY(-4px); }
.insta__item a:hover img { transform: scale(1.05); }
.insta .social-btn--solid { margin-top: clamp(30px, 4vw, 46px); }

@media (max-width: 820px) {
  .insta__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    margin-inline: calc(var(--pad) * -1);
    padding: 4px var(--pad) 10px;
    scrollbar-width: none;
  }
  .insta__grid::-webkit-scrollbar { display: none; }
  .insta__item { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .social-btn:hover, .social-btn:active,
  .insta__item a:hover, .insta__item a:hover img,
  .infos__link:hover::after { transform: none !important; }
}

/* ============================================================
   PASSE PREMIUM : boutons d'action et bandeau de fin.
   Retire le vernis ajoute par la passe « CODEX » : degrades
   brillants, halos, pastille en verre depoli qui gardait en plus
   un soulignement a l'interieur. A la place : couleurs pleines,
   un seul filet fin par element, la typographie de la charte.
   ============================================================ */

/* ---- Bouton rond « tampon » : terracotta pleine + filet creme interieur ---- */
.btn-circle {
  position: relative;
  width: clamp(124px, 11vw, 148px);
  height: clamp(124px, 11vw, 148px);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
}
.btn-circle--fill,
.btn-circle--fill:hover {
  background: var(--accent);
  border: 0;
  color: var(--cream);
  text-shadow: none;
  box-shadow: 0 18px 40px -26px rgba(10, 44, 38, 0.75);
  transform: none;
}
.btn-circle--fill::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(247, 239, 221, 0.5);
  pointer-events: none;
  transition: inset .45s var(--ease), border-color .45s var(--ease);
}
.btn-circle--fill:hover { background: #b3552a; }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .btn-circle--fill:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
}
/* Au survol, le filet se resserre : un retour tactile discret, sans zoom */
.btn-circle--fill:hover::before { inset: 11px; border-color: rgba(247, 239, 221, 0.85); }
.btn-circle--fill:active { transform: scale(0.98); }

/* ---- Bouton « Réserver » de la navigation : meme terracotta pleine ---- */
.nav__cta,
.nav--over-hero .nav__cta,
.nav--over-hero.is-scrolled .nav__cta,
.nav--solid .nav__cta {
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 10px 24px -18px rgba(10, 44, 38, 0.7);
}
.nav__cta:hover,
.nav--over-hero .nav__cta:hover,
.nav--over-hero.is-scrolled .nav__cta:hover,
.nav--solid .nav__cta:hover { background: #b3552a; }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .nav__cta:hover,
  .nav--over-hero .nav__cta:hover,
  .nav--over-hero.is-scrolled .nav__cta:hover,
  .nav--solid .nav__cta:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
}

/* ---- Lien secondaire (« Voir la carte ») : un seul filet, plus de pastille ---- */
.hero__actions .link-underline,
.cta-band__actions .link-underline {
  padding: 6px 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
}
.hero__actions .link-underline::after,
.cta-band__actions .link-underline::after {
  left: 0;
  right: auto;
  width: 100%;
  opacity: 0.5;
}
.hero__actions .link-underline:hover::after,
.cta-band__actions .link-underline:hover::after { opacity: 1; }

/* ---- Ouverture : un voile en haut de la photo, sous la navigation ----
   Le logo et les liens se posaient sur le feuillage clair, peu lisibles.
   Le halo terracotta en haut a droite est retire (pas de lueur decorative). */
.hero__scrim {
  background:
    linear-gradient(to bottom, rgba(10, 44, 38, 0.55) 0%, rgba(10, 44, 38, 0) 22%),
    linear-gradient(to top, rgba(10, 44, 38, 0.86) 0%, rgba(10, 44, 38, 0.34) 38%, rgba(10, 44, 38, 0) 70%),
    linear-gradient(to right, rgba(10, 44, 38, 0.60) 0%, rgba(10, 44, 38, 0.14) 42%, transparent 68%);
}

/* ---- Hero video : la salle un midi ----
   L'image fixe (meme plan que la 1re image de la video) est dessous ; la video
   la recouvre en fondu des qu'elle joue. Les deux sont composees au centre :
   pas de decalage de cadrage entre ordinateur et telephone. */
#hero .hero__img { object-position: 50% 50%; filter: none; } /* meme rendu que la video : pas de saut de couleur au fondu */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero.is-playing .hero__video { opacity: 1; }
/* Le terracotta de marque tombe a ~2,3:1 sur le voile vert (et se confond avec
   la banquette) : meme teinte, eclaircie, pour la ligne en italique. */
.hero--video .hero__sub em { color: #f2ae84; }

.hero__toggle {
  position: absolute;
  z-index: 3;
  right: var(--pad);
  bottom: clamp(26px, 4vh, 44px);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(247, 239, 221, 0.42);
  border-radius: 50%;
  background: rgba(10, 44, 38, 0.3);
  color: var(--cream);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.hero__toggle[hidden] { display: none; }
.hero__toggle .icon { width: 18px; height: 18px; }
.hero__toggle-play,
.hero__toggle.is-paused .hero__toggle-pause { display: none; }
.hero__toggle.is-paused .hero__toggle-play { display: inline-flex; }
.hero__toggle-pause { display: inline-flex; }
.hero__toggle:hover { background: rgba(10, 44, 38, 0.55); border-color: var(--cream); }
/* Le site remplace le contour par un halo terracotta a 28 % pour les boutons
   (button:focus-visible) : invisible sur la video sombre. Contour creme net. */
.hero__toggle:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; box-shadow: none; }

/* Mention de transparence : la scene est une illustration generee par IA
   (AI Act, art. 50 : signalement des qu'elle est vue). Discrete, lisible. */
.hero__ai-note {
  position: absolute;
  z-index: 3;
  right: calc(var(--pad) + 60px);
  bottom: clamp(26px, 4vh, 44px);
  height: 44px;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(247, 239, 221, 0.82);
  pointer-events: none;
}
@media (max-width: 820px) {
  .hero__ai-note { right: var(--pad); bottom: 10px; height: auto; }
}
/* Telephone : en haut a droite, sous la navigation, loin des boutons d'action */
@media (max-width: 820px) {
  .hero__toggle { top: calc(96px + var(--annonce-h, 0px)); bottom: auto; } /* sous la nav, meme quand le bandeau d'annonce la decale */
}
/* Telephone : les visages de la video verticale sont au milieu de l'ecran.
   Le bloc de texte se resserre en bas pour ne pas les recouvrir : le
   paragraphe (repris juste apres dans la page) est masque, le tampon et le
   lien « Voir la carte » passent sur une seule ligne. */
@media (max-width: 600px) {
  .hero--video .hero__inner { padding-bottom: clamp(28px, 5vh, 44px); }
  .hero--video .hero__lede { display: none; }
  .hero--video .hero__sub { margin-top: 2px; }
  .hero--video .hero__actions { flex-wrap: nowrap; align-items: center; gap: 22px; margin-top: 22px; }
  .hero--video .hero__actions .link-underline { width: auto; }
  .hero--video .btn-circle { width: 108px; height: 108px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ---- Chiffres cles : un chiffre ne se coupe jamais ----
   Les colonnes prennent la largeur de leur contenu (« Mediterranee » en prend
   beaucoup) : sans ceci, « 100 % » se cassait avant le signe %. Verifie de
   1440 a 375 px, rien ne deborde. */
.stat__num { white-space: nowrap; }

/* ---- Logo : version creme sur la photo, version bleue sur la barre creme ----
   Le logo bleu se perdait dans le feuillage de l'ouverture. Les deux fichiers
   ont exactement la meme geometrie (logo-cream.png est une recoloration de
   logo.png) : le fondu enchaine ne fait aucun saut. */
.nav__brand--logo { position: relative; }
.nav__brand--logo .nav__logo { transition: opacity .4s var(--ease), filter .4s var(--ease), height .5s var(--ease); }
.nav__logo--light {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.nav--over-hero:not(.is-scrolled) .nav__logo--light { opacity: 1; }
.nav--over-hero:not(.is-scrolled) .nav__logo:not(.nav__logo--light) { opacity: 0; }

/* ---- Bandeau de fin : une vraie photo en duotone vert, pas un aplat vide ---- */
.cta-band {
  isolation: isolate;
  padding: clamp(96px, 15vh, 180px) var(--pad);
}
.cta-band__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  filter: saturate(0.85);
}
.cta-band::before {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 44, 38, 0.80) 0%, rgba(10, 44, 38, 0.86) 55%, rgba(10, 44, 38, 0.94) 100%),
    radial-gradient(80% 90% at 50% 105%, rgba(200, 97, 47, 0.20), transparent 62%);
}
.cta-band__script,
.cta-band__sub { text-shadow: none; }
.cta-band__sub { color: rgba(247, 239, 221, 0.86); }
.cta-band__actions { gap: clamp(26px, 4vw, 52px); }

/* Telephone : libelle + numero dans la police des titres, separes du tampon par un filet */
.cta-phone {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0 6px clamp(26px, 4vw, 52px);
  border-left: 1px solid rgba(247, 239, 221, 0.28);
  color: var(--cream);
  text-align: left;
}
.cta-phone__label {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.2;
  color: rgba(247, 239, 221, 0.72);
}
.cta-phone__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.3vw, 31px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  padding-bottom: 7px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 34% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.cta-phone:hover .cta-phone__num,
.cta-phone:focus-visible .cta-phone__num { background-size: 100% 1px; }
.cta-band :focus-visible { outline-color: var(--cream); }

@media (max-width: 560px) {
  .cta-band__actions { flex-direction: column; gap: 30px; }
  .cta-phone {
    align-items: center;
    text-align: center;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(247, 239, 221, 0.28);
  }
  .cta-phone__num { background-position: 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-circle--fill::before,
  .cta-phone__num { transition: none; }
}

/* ------------------------------------------------------------------
   Pages legales (mentions legales, confidentialite)
   Colonne de lecture etroite, sur le fond creme du site.
   ------------------------------------------------------------------ */
.section--pad-top { padding-top: calc(var(--nav-h, 84px) + 56px); }

.legal { max-width: 720px; }
.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 44px 0 12px;
}
.legal p,
.legal li { color: var(--ink); opacity: 0.86; line-height: 1.75; margin: 0 0 14px; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal__lede { font-size: 1.08rem; opacity: 1; }
.legal__update {
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.55; margin: 10px 0 8px;
}
.legal__list { margin: 0 0 14px; padding-left: 1.1rem; }
.legal__list li { margin-bottom: 10px; }
.legal__dl { display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: 6px 20px; margin: 0; }
.legal__dl dt { font-weight: 600; color: var(--ink); opacity: 0.72; }
.legal__dl dd { margin: 0; color: var(--ink); opacity: 0.9; }
@media (max-width: 620px) {
  .legal__dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal__dl dd { margin-bottom: 12px; }
}

.footer__legal--links { display: flex; gap: 8px; align-items: center; }
.footer__legal--links a { color: inherit; text-decoration: none; opacity: 0.85; }
.footer__legal--links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------
   FAQ — <details> natif : accessible au clavier, sans JavaScript,
   et le texte des reponses reste dans le HTML pour les moteurs.
   ------------------------------------------------------------------ */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item {
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  padding: 4px 0;
}
.faq__item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.faq__q {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 44px 20px 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  font-weight: 500; line-height: 1.45; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 13px; height: 13px; margin-top: -7px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transform-origin: center;
  transition: transform 0.25s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__q:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
.faq__r { padding: 0 44px 22px 0; }
.faq__r p { margin: 0; color: var(--ink); opacity: 0.82; line-height: 1.75; }
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}

/* ------------------------------------------------------------------
   Contraste du hero sur mobile (WCAG 1.4.3)
   Mesure avant correctif, en 375 px : sous-titre a 2,80:1 (minimum 4,5:1)
   et titre a 1,13:1 sur les zones claires de la video (minimum 3:1).
   La video etant lumineuse et changeante, on ne peut pas compter sur
   l'image : le voile doit garantir le fond a lui seul.
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(10, 44, 38, 0.58) 0%, rgba(10, 44, 38, 0) 20%),
      linear-gradient(to top,
        rgba(10, 44, 38, 0.95) 0%,
        rgba(10, 44, 38, 0.90) 32%,
        rgba(10, 44, 38, 0.74) 52%,
        rgba(10, 44, 38, 0.44) 72%,
        rgba(10, 44, 38, 0.16) 100%);
  }
  .page-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(10, 44, 38, 0.58) 0%, rgba(10, 44, 38, 0) 20%),
      linear-gradient(to top,
        rgba(10, 44, 38, 0.93) 0%,
        rgba(10, 44, 38, 0.86) 34%,
        rgba(10, 44, 38, 0.66) 56%,
        rgba(10, 44, 38, 0.34) 76%,
        rgba(10, 44, 38, 0.12) 100%);
  }
  /* Le texte porte aussi son propre appui, pour les images tres lumineuses. */
  .hero__script,
  .page-hero__title { text-shadow: 0 2px 30px rgba(10, 44, 38, 0.6); }
  .hero__lede,
  .page-hero__lede { text-shadow: 0 1px 18px rgba(10, 44, 38, 0.7); }
}

/* ------------------------------------------------------------------
   Surtitre des pages interieures : il etait en terracotta par-dessus
   une photo, mesure a 1,53:1. Sur une image, aucune teinte de marque
   ne tient : on passe au creme, comme le surtitre de l'accueil.
   ------------------------------------------------------------------ */
.page-hero__eyebrow {
  color: var(--cream);
  text-shadow: 0 1px 16px rgba(10, 44, 38, 0.75);
}

/* ------------------------------------------------------------------
   Terracotta sur fond sombre
   Le terracotta assombri pour etre lisible sur creme (4,86:1) devient
   au contraire illisible sur le vert profond : 2,38:1 mesures sur
   .stat__unit et sur les italiques des sections sombres. Sur ces fonds
   il faut donc la variante claire.
   ------------------------------------------------------------------ */
:root { --accent-light: #e08a5a; }   /* 4,70:1 sur le vert #0e3b33 */

.stats .stat__unit,
.section--ink em,
.section--ink .section-head__title em,
.footer__coltitle,
.cta-band__eyebrow,
.cta-band em,
.bleed__title em,
.hero__sub em { color: var(--accent-light); }

/* ------------------------------------------------------------------
   Ecrans tres etroits — telephones pliants fermes
   Un Galaxy Fold de premiere generation fait 280 px de large, soit
   265 px utiles une fois la barre de defilement deduite. A cette
   largeur, un libelle en majuscules espacees suffisait a faire deborder
   une colonne de grille. Les grilles sont corrigees plus haut ; ici on
   resserre les marges et on autorise les mots longs a se couper.
   ------------------------------------------------------------------ */
@media (max-width: 400px) {
  :root { --pad: 14px; }
  .stat { padding-left: 16px; }
  .stat__label { letter-spacing: 0.08em; }
  .legal__dl { grid-template-columns: minmax(0, 1fr); }
}

/* Une adresse e-mail ou une URL ne doit jamais elargir son conteneur. */
body { overflow-wrap: break-word; }
.info-block__v,
.contact__value,
.legal a,
.footer__col a { overflow-wrap: anywhere; }

/* Le chiffre des statistiques est en white-space: nowrap et son plancher de
   taille (46 px) suffisait a lui seul a mesurer 274 px : plus large que les
   265 px utiles d'un pliant ferme. On abaisse le plancher sous 400 px. */
@media (max-width: 400px) {
  .stat__num { font-size: clamp(30px, 11vw, 46px); }
  .split__media { padding-left: 0; padding-right: 0; }
}

/* Un bouton dont le libelle est une adresse e-mail : .btn est un conteneur
   flex, or un element flex a min-width: auto et se plancher sur sa largeur
   min-content. « privatisationlapiscine@gmail.com » ne pouvait donc pas se
   couper et debordait de 46 px sur un pliant ferme. Seul « anywhere » agit
   sur la largeur min-content ; « break-word » ne l'affecte pas. */
.btn { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 400px) {
  .btn { padding-left: 18px; padding-right: 18px; }
  .btn-row { width: 100%; }
}

/* Zones tactiles. La WCAG 2.2 (critere 2.5.8) demande 24x24 px minimum ;
   les recommandations mobiles visent 44 px. Les liens legaux du pied de page
   ne faisaient que 21 px de haut, et « Voir la carte » 35 px. On agrandit la
   surface cliquable sans deplacer le texte. */
.footer__legal--links a { padding: 11px 2px; margin: -11px 0; }
.link-underline { display: inline-block; padding-top: 5px; padding-bottom: 5px; }

/* ------------------------------------------------------------------
   Bandeau d'annonce
   Fin, fixe tout en haut, au-dessus de la navigation. La navigation est
   decalee via --annonce-h, mise a jour par le script : rien ne se
   chevauche, et a la fermeture tout remonte sans saut.
   ------------------------------------------------------------------ */
.annonce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--pad);
  background: var(--ink);
  color: var(--cream);
  font-size: 13px; line-height: 1.45;
}
.annonce__texte {
  margin: 0; flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  justify-content: center;
}
.annonce__etiquette {
  flex: 0 0 auto;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--accent-light);
}
.annonce__lien,
.annonce__plus {
  color: var(--cream); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; white-space: nowrap;
}
.annonce__lien { font-weight: 600; }
.annonce__plus { opacity: 0.75; }
.annonce__lien:hover, .annonce__plus:hover { text-decoration-thickness: 2px; opacity: 1; }
.annonce__fermer {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; margin: -6px -4px -6px 0;
  background: none; border: 0; cursor: pointer;
  color: var(--cream); opacity: 0.6; border-radius: 50%;
}
.annonce__fermer:hover { opacity: 1; background: rgba(250, 244, 234, 0.12); }
.annonce__fermer:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; opacity: 1; }
.annonce[hidden] { display: none; }

/* Les ancres doivent s'arreter sous le bandeau et sous la navigation. */
[id] { scroll-margin-top: calc(96px + var(--annonce-h, 0px)); }

@media (max-width: 720px) {
  .annonce { font-size: 12px; padding: 8px var(--pad); align-items: flex-start; }
  .annonce__texte { justify-content: flex-start; text-align: left; }
  .annonce__plus { display: none; }
}
@media (max-width: 400px) {
  .annonce__lien { white-space: normal; }
}

/* Avis en tete de page : la note sur les variations de la carte etait reléguée
   tout en bas (91 % de la hauteur), donc invisible. Le restaurant la met en
   evidence sur son site : elle evite qu'un client se deplace pour un plat
   qui n'est plus a la carte. */
.avis {
  max-width: var(--maxw);
  margin: 0 auto clamp(34px, 5vw, 54px);
  padding: 16px clamp(18px, 3vw, 26px);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.65;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .avis { background: rgba(165, 80, 39, 0.08); }
}
.avis strong {
  display: block;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 5px;
}

/* Sur les petits ecrans, le bandeau doit rester une bande, pas un bloc :
   l'etiquette disparait et le texte se resserre. */
@media (max-width: 560px) {
  .annonce { padding: 7px var(--pad); gap: 6px; }
  .annonce__etiquette { display: none; }
  .annonce__texte { gap: 2px 8px; font-size: 11.5px; }
}

/* ------------------------------------------------------------------
   Photo animée
   La photo reste la base : elle s'affiche tout de suite, elle sert de
   vignette aux moteurs, et elle reste seule si le visiteur a demandé
   moins d'animations ou l'économie de données. La vidéo se superpose en
   fondu quand elle joue vraiment, jamais avant.
   ------------------------------------------------------------------ */
.pa { position: relative; overflow: hidden; }
.pa > picture,
.pa__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pa__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s var(--ease, ease);
  pointer-events: none;
}
.pa.is-playing .pa__video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pa__video { display: none; }
}

/* Video d'ambiance dans un grand hero de page : meme principe que les photos
   animees, la photographie reste dessous et sert de vignette aux moteurs. */
.page-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s var(--ease, ease);
  pointer-events: none;
}
.page-hero.is-playing .page-hero__video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .page-hero__video { display: none; } }

/* ============================================================
   EDITORIAL : la photo prend toujours la grande colonne
   ------------------------------------------------------------
   .editorial__inner donnait 1.15fr a la PREMIERE colonne. En version
   normale c'est la photo, mais en version inversee (« Le soleil dans
   l'assiette ») la premiere colonne porte le texte : la photo heritait de
   la petite colonne et tombait a ~390 px de large sur un ecran de 1440.
   La proportion suit donc le media. Le texte reste plafonne. Le titre est
   calibre pour tenir sur les deux lignes voulues par le <br /> du balisage
   (sinon « rien que pour vous. » repasse a la ligne et touche le paragraphe).
   ============================================================ */
@media (min-width: 981px) {
  .editorial__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .editorial--reverse .editorial__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .editorial__media { max-width: 720px; width: 100%; }
  .editorial--reverse .editorial__media { margin-left: auto; }
  .editorial__text { max-width: 600px; }
  .editorial__title { font-size: clamp(38px, 4.2vw, 60px); margin-bottom: 34px; } /* > 26px du .lede, sinon les marges fusionnent */
}

/* ============================================================
   PHOTOS SANS PASSE-PARTOUT (demande client du 22/09)
   Le cadre blanc autour des photos est retire partout : la photo
   va jusqu'au bord de sa carte. Les photos editoriales reprennent
   le cadrage du manifeste (.framed) : bloc terracotta a gauche,
   filet bleu decale. Le bandeau de reservation et les encadres
   de texte gardent leur fond, ce ne sont pas des photos.
   ============================================================ */
.frame,
.split__media,
.menu-group__banner,
.gallery__item,
.media-row figure {
  background: var(--bg-3);
  border: 0;
  padding: 0;
  border-radius: 4px;
}
.frame img,
.split__media img,
.menu-group__banner img,
.gallery__item img,
.media-row img { border-radius: 0; }
.frame::after { inset: 0; border-radius: 0; }

.editorial__media { position: relative; isolation: isolate; padding: 0 4% 5% 3%; box-sizing: border-box; }
.editorial__media::before {
  content: ""; position: absolute; z-index: 4;
  left: 0; top: 8%; bottom: 24%; width: 8%;
  background: #c67b54 url("assets/img/texture-terracotta.jpg") center / cover;
  border-radius: 4px;
  box-shadow: 0 14px 30px -20px rgba(42, 33, 28, 0.55);
}
.editorial__media::after {
  content: ""; position: absolute; z-index: 5;
  left: 20%; top: 12%; right: 0; bottom: 0;
  border: 2px solid var(--blue); border-radius: 4px;
  pointer-events: none;
}

/* « Le soleil dans l'assiette » : la photo prend la place, au format 3:2
   (plus haute qu'un 16:9) et deborde la largeur de contenu habituelle. */
.editorial--reverse .frame { aspect-ratio: 3 / 2; }
@media (min-width: 981px) {
  .editorial--reverse .editorial__inner { max-width: 1440px; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .editorial--reverse .editorial__media { max-width: none; }
  .editorial--reverse .editorial__title { font-size: clamp(38px, 3.6vw, 54px); }
}

/* Bandeau d'annonce : pictogramme d'alerte jaune, garde sur telephone
   (l'etiquette « À savoir » y est masquee faute de place). */
.annonce__icone { flex: 0 0 auto; align-self: center; display: inline-flex; color: #ffc93c; }
.annonce__icone svg { display: block; width: 18px; height: 18px; }
@media (max-width: 560px) { .annonce__icone svg { width: 16px; height: 16px; } }