/* Feuille de style des pages statiques (/tour-des-yoles/ et
   /entreprises-et-collectivites/). Volontairement autonome : ces pages ne chargent
   ni React ni le bundle de l'accueil, pour rester lisibles sans JavaScript et pour
   qu'aucune modification ici ne puisse affecter la page d'accueil.
   Les valeurs reprennent celles de src/styles.css. */

:root {
  color-scheme: light;
  --lagoon-950: #07273a;
  --lagoon-900: #0d3f58;
  --lagoon-700: #147ea1;
  --lagoon-500: #28b6ce;
  --sand-100: #fff7ea;
  --sand-200: #f4e3c5;
  --white: #ffffff;
  --ink: #10212e;
  --muted: rgba(16, 33, 46, 0.72);
  --coral: #ff7f5f;
  --sun: #ffc857;
  --shadow: 0 24px 60px rgba(2, 14, 22, 0.14);
  --radius-lg: 24px;
  --radius-md: 18px;
  /* Colonne de lecture volontairement étroite pour le corps de texte,
     et bandeau large pour la navigation et le pied de page. */
  --container: min(880px, calc(100vw - 32px));
  --container-wide: min(1120px, calc(100vw - 32px));
}

@font-face {
  font-family: 'The Oyster Bar';
  src: url('/Fonts/The%20Oyster%20Bar.otf') format('opentype');
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: #f7fbfe;
}

body {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(40, 182, 206, 0.18), transparent 32%),
    radial-gradient(circle at top right, rgba(255, 127, 95, 0.14), transparent 26%),
    linear-gradient(180deg, #f7fbfe 0%, #fdf4e8 52%, #fffaf2 100%);
}

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

/* ---------- Navigation ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(16, 33, 46, 0.08);
}

.site-nav-inner {
  width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.site-nav-brand {
  flex-shrink: 0;
  font-family: 'The Oyster Bar', 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--lagoon-950);
  text-decoration: none;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.site-nav-links a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  color: rgba(16, 33, 46, 0.74);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}

.site-nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav-links a:hover,
.site-nav-links a:focus-visible,
.site-nav-links a[aria-current='page'] {
  color: var(--lagoon-950);
}

.site-nav-links a:hover::after,
.site-nav-links a:focus-visible::after,
.site-nav-links a[aria-current='page']::after {
  transform: scaleX(1);
}

.site-nav-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--lagoon-950);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 200ms ease, transform 160ms ease;
}

.site-nav-cta:hover {
  background: var(--lagoon-700);
  transform: translateY(-1px);
}

/* ---------- En-tête de page ---------- */

.page-hero {
  width: var(--container);
  margin: 0 auto;
  padding: 56px 0 8px;
}

.breadcrumb {
  margin: 0 0 26px;
  font-size: 0.86rem;
  color: rgba(16, 33, 46, 0.55);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  margin: 0;
  font-size: 0.86rem;
}

.breadcrumb li + li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: 2px;
  background: rgba(16, 33, 46, 0.28);
}

.breadcrumb a {
  color: var(--lagoon-700);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.page-kicker {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lagoon-700);
}

h1 {
  margin: 0 0 22px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  color: var(--lagoon-950);
}

.page-lede {
  max-width: 720px;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Corps ---------- */

.page-main {
  width: var(--container);
  margin: 0 auto;
  padding: 0 0 24px;
}

/* Le bandeau de chiffres chevauche le bas du hero : on redonne de l'air au corps de page. */
.lp-facts + .page-main {
  padding-top: 52px;
}

.lp-facts + .page-main > .page-lede {
  max-width: 760px;
  font-size: 1.24rem;
}

h2 {
  margin: 72px 0 18px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1;
  color: var(--lagoon-950);
}

h3 {
  margin: 34px 0 10px;
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.34;
  color: var(--lagoon-900);
}

p,
li {
  font-size: 1.06rem;
  line-height: 1.72;
}

p {
  margin: 0 0 20px;
  color: var(--muted);
}

main ul,
main ol {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
  color: var(--muted);
}

main li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 24px;
}

main li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.breadcrumb li::before,
.button-row li::before {
  content: none;
}

.breadcrumb li {
  padding-left: 0;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

a {
  color: var(--lagoon-700);
}

/* ---------- Blocs ---------- */

.panel {
  margin: 32px 0;
  padding: 30px 32px;
  border: 1px solid rgba(16, 33, 46, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
}

.panel h3:first-child {
  margin-top: 0;
}

.panel p:last-child,
.panel ul:last-child {
  margin-bottom: 0;
}

.note {
  margin: 28px 0;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 127, 95, 0.09);
}

.note p {
  margin: 0;
  color: var(--ink);
}

.table-wrap {
  margin: 30px 0;
  overflow-x: auto;
  border: 1px solid rgba(16, 33, 46, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

caption {
  padding: 18px 22px 14px;
  font-size: 0.86rem;
  color: rgba(16, 33, 46, 0.55);
  text-align: left;
}

th,
td {
  padding: 14px 22px;
  text-align: left;
  border-bottom: 1px solid rgba(16, 33, 46, 0.07);
}

thead th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lagoon-700);
}

tbody th {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--lagoon-950);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0;
}

.card {
  padding: 26px;
  border: 1px solid rgba(16, 33, 46, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 0 0 10px;
}

.card p:last-child {
  margin-bottom: 0;
}

/* ---------- FAQ en accordéon ---------- */

.faq-list {
  margin-top: 30px;
  border-top: 1px solid rgba(16, 33, 46, 0.1);
}

.faq-item {
  border-bottom: 1px solid rgba(16, 33, 46, 0.1);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item h3 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.42;
  color: var(--ink);
  transition: color 180ms ease;
}

.faq-item summary:hover h3 {
  color: var(--lagoon-700);
}

.faq-chevron {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(16, 33, 46, 0.14);
  transition: background-color 220ms ease, border-color 220ms ease;
}

.faq-chevron::before,
.faq-chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--lagoon-950);
  transform: translate(-50%, -50%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease;
}

.faq-chevron::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item summary:hover .faq-chevron {
  border-color: var(--lagoon-700);
  background: rgba(20, 126, 161, 0.08);
}

.faq-item[open] .faq-chevron {
  background: var(--lagoon-950);
  border-color: var(--lagoon-950);
}

.faq-item[open] .faq-chevron::before,
.faq-item[open] .faq-chevron::after {
  background: var(--white);
}

.faq-item[open] .faq-chevron::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  padding: 0 52px 24px 4px;
  animation: faq-open 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Appel à l'action ---------- */

.cta-band {
  margin: 72px 0 0;
  padding: 44px 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--lagoon-950) 0%, var(--lagoon-900) 55%, var(--lagoon-700) 100%);
  color: var(--white);
}

.cta-band h2 {
  margin: 0 0 14px;
  color: var(--white);
}

.cta-band p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.82);
}

.cta-band p:last-of-type {
  margin-bottom: 0;
}

.cta-band a {
  color: var(--sun);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.button-primary,
.button-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms ease;
}

.button-primary {
  background: var(--coral);
  color: #40160a;
}

.button-primary:hover {
  background: #ff9375;
  transform: translateY(-1px);
}

.button-ghost {
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: var(--white);
}

.button-ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Pied de page ---------- */

.page-footer {
  margin-top: 80px;
  padding: 48px 0 32px;
  background: var(--lagoon-950);
  color: rgba(255, 255, 255, 0.76);
}

.page-footer-inner {
  width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
}

.page-footer a {
  color: rgba(255, 255, 255, 0.84);
  text-decoration: none;
  transition: color 160ms ease;
}

.page-footer a:hover {
  color: var(--white);
}

.page-footer nav {
  display: grid;
  gap: 10px;
  font-size: 0.94rem;
}

.page-footer-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.page-footer-legal {
  width: var(--container-wide);
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Points de rupture ---------- */

@media (max-width: 1000px) {
  .site-nav-links {
    gap: 20px;
  }

  .site-nav-links a {
    font-size: 0.86rem;
  }
}

@media (max-width: 880px) {
  .site-nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 0;
    gap: 12px 20px;
  }

  .site-nav-links {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 22px;
    padding-bottom: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav-cta {
    margin-left: auto;
  }
}

@media (max-width: 700px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-hero {
    padding-top: 34px;
  }

  .page-lede {
    font-size: 1.08rem;
  }

  .panel,
  .cta-band {
    padding: 24px 22px;
  }

  h2 {
    margin-top: 52px;
  }

  .faq-item summary {
    gap: 12px;
    padding: 18px 2px;
  }

  .faq-item h3 {
    font-size: 1rem;
  }

  .faq-chevron {
    width: 30px;
    height: 30px;
  }

  .faq-answer {
    padding: 0 2px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer {
    animation: none;
  }

  .site-nav-links a::after,
  .button-primary,
  .button-ghost {
    transition: none;
  }
}

/* =========================================================================
   Composants de landing page : hero image, bandeau de chiffres, cartes
   photo, blocs scindés, étapes, galerie, logos partenaires.
   ========================================================================= */

.lp-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(78svh, 640px);
  padding: 88px 0 44px;
  overflow: hidden;
  background: var(--lagoon-950);
}

.lp-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.lp-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.lp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(7, 39, 58, 0.9) 0%, rgba(7, 39, 58, 0.62) 48%, rgba(7, 39, 58, 0.32) 100%),
    linear-gradient(180deg, rgba(7, 39, 58, 0.42) 0%, transparent 34%, rgba(7, 39, 58, 0.66) 100%);
}

.lp-hero-inner {
  width: var(--container-wide);
  margin: 0 auto;
}

.lp-hero .breadcrumb,
.lp-hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.72);
}

.lp-hero .breadcrumb li + li::before {
  background: rgba(255, 255, 255, 0.45);
}

.lp-hero .page-kicker {
  color: var(--sun);
}

.lp-hero h1 {
  max-width: 900px;
  color: var(--white);
}

.lp-hero .page-lede {
  max-width: 660px;
  color: rgba(255, 255, 255, 0.88);
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.lp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: var(--container-wide);
  margin: -1px auto 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(16, 33, 46, 0.1);
  box-shadow: var(--shadow);
}

.lp-fact {
  padding: 22px 24px;
  background: var(--white);
}

.lp-fact dt {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(16, 33, 46, 0.52);
}

.lp-fact dd {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--lagoon-950);
}

.lp-logos {
  margin: 44px 0 0;
}

.lp-logos-title {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(16, 33, 46, 0.45);
}

.lp-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
}

.lp-logos-row img {
  width: auto;
  height: 40px;
  object-fit: contain;
  filter: grayscale(0.85);
  opacity: 0.78;
  transition: filter 220ms ease, opacity 220ms ease;
}

.lp-logos-row img:hover {
  filter: none;
  opacity: 1;
}

.offer-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 34px 0 0;
}

.offer-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(16, 33, 46, 0.08);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.offer-card:hover {
  transform: translateY(-3px);
}

.offer-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lagoon-900);
}

.offer-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-card-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lagoon-950);
}

.offer-card-body {
  flex: 1;
  padding: 24px 26px 26px;
}

.offer-card-body h3 {
  margin: 0 0 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--lagoon-950);
}

.offer-card-body p:last-child {
  margin-bottom: 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 36px;
  align-items: center;
  margin: 34px 0;
}

.split.is-reversed .split-media {
  order: -1;
}

.split-media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}

.split-media.is-wide {
  aspect-ratio: 4 / 3;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-copy > :first-child {
  margin-top: 0;
}

.split-copy > :last-child {
  margin-bottom: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 34px 0;
}

.step {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(16, 33, 46, 0.08);
}

.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--lagoon-950);
  color: var(--white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}

.step h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.step p:last-child {
  margin-bottom: 0;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0;
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 4;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery figure:hover img {
  transform: scale(1.05);
}

figure.figure-wide {
  margin: 34px 0;
}

figure.figure-wide > div {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 21 / 9;
}

figure.figure-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

figure.figure-wide figcaption {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(16, 33, 46, 0.55);
}

.pull-quote {
  margin: 40px 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--coral);
}

.pull-quote p {
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--lagoon-950);
}

.lp-band {
  margin: 64px 0;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: rgba(20, 126, 161, 0.07);
}

.lp-band > :first-child {
  margin-top: 0;
}

.lp-band > :last-child {
  margin-bottom: 0;
}

.lp-band h2 {
  margin-top: 0;
}

/* ---------- Points de rupture ---------- */

@media (max-width: 1000px) {
  .lp-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .split,
  .offer-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .split.is-reversed .split-media {
    order: 0;
  }

  .split-media,
  .split-media.is-wide {
    aspect-ratio: 16 / 10;
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .lp-hero {
    min-height: auto;
    padding: 40px 0 36px;
  }

  .lp-hero-media img {
    object-position: center 28%;
  }

  .lp-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-fact {
    padding: 18px 20px;
  }

  .lp-band {
    margin: 44px 0;
    padding: 24px 22px;
  }

  .pull-quote {
    padding-left: 20px;
  }

  .pull-quote p {
    font-size: 1.14rem;
  }

  figure.figure-wide > div {
    aspect-ratio: 4 / 3;
  }

  .lp-logos-row img {
    height: 32px;
  }
}

/* ---------- Page de réservation ---------- */

.resa-selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(20, 126, 161, 0.1);
  font-size: 0.98rem;
  color: var(--lagoon-900);
}

.resa-selected strong {
  color: var(--lagoon-950);
}

/* En français seule l'initiale se capitalise : « jeudi 30 juillet », pas « Jeudi 30 Juillet ». */
.resa-selected strong::first-letter {
  text-transform: uppercase;
}

.resa-frame-card {
  margin: 40px 0 8px;
  padding: 12px;
  border: 1px solid rgba(16, 33, 46, 0.08);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}

.resa-frame-card iframe {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
  border-radius: var(--radius-md);
}

@media (max-width: 700px) {
  .resa-frame-card {
    padding: 6px;
  }

  .resa-frame-card iframe {
    min-height: 640px;
  }
}

/* Variante pour une photo quasi carrée : un cadrage 21/9 lui couperait les visages. */
figure.figure-wide--tall > div {
  aspect-ratio: 5 / 4;
}

figure.figure-wide--tall img {
  object-position: center 34%;
}

@media (max-width: 700px) {
  figure.figure-wide--tall > div {
    aspect-ratio: 4 / 5;
  }
}

/* =========================================================================
   Passe mobile — mêmes principes que src/styles.css : les minimums des clamp()
   sont calibrés desktop, donc sur 375 px on héritait d'un H1 à 43 px et de H2 à
   32 px. Plancher de lisibilité à 13 px et cibles tactiles à 44 px.
   ========================================================================= */

@media (max-width: 700px) {
  h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.5rem);
    margin-bottom: 18px;
  }

  h2 {
    font-size: 1.72rem;
    margin: 46px 0 14px;
  }

  h3 {
    font-size: 1.08rem;
    margin: 26px 0 8px;
  }

  .cta-band h2,
  .lp-band h3 {
    margin-top: 0;
  }

  /* Libellés : plancher de lisibilité */
  .page-kicker,
  .lp-fact dt,
  .page-footer-title,
  .lp-logos-title,
  thead th {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  .lp-fact dd {
    font-size: 1.5rem;
  }

  caption,
  figure.figure-wide figcaption,
  .page-footer-legal {
    font-size: 0.86rem;
  }

  /* Navigation : plus compacte, elle reste collée en haut mais mange moins d'écran */
  .site-nav-inner {
    gap: 8px 16px;
    padding: 9px 0;
  }

  .site-nav-brand {
    font-size: 1.24rem;
    padding: 10px 0;
  }

  .site-nav-links {
    gap: 18px;
    padding-bottom: 2px;
  }

  .site-nav-links a {
    padding: 8px 0;
    font-size: 0.88rem;
  }

  .site-nav-cta {
    height: 44px;
    padding: 0 18px;
  }

  /* Cibles tactiles à 44 px */
  .page-footer a,
  .page-footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .button-primary,
  .button-ghost {
    min-height: 48px;
  }

  /* Rythme vertical */
  .page-hero {
    padding-top: 28px;
  }

  .lp-facts + .page-main {
    padding-top: 36px;
  }

  .panel {
    padding: 22px 20px;
  }
}

@media (max-width: 400px) {
  h2 {
    font-size: 1.58rem;
  }
}

@media (max-width: 700px) {
  /* La barre collée en haut occupait 113 px, soit 14 % de l'écran en permanence, pour deux
     rangées. Sur mobile elle défile donc avec la page, et le bouton d'action est déporté en
     bas à droite : toujours accessible, à portée du pouce, sans rien voler à la lecture.
     Le backdrop-filter est retiré ici — il créait un bloc de référence qui aurait empêché
     le position:fixed du bouton de se caler sur la fenêtre. */
  .site-nav {
    position: static;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.94);
  }

  .site-nav-cta {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 45;
    height: 50px;
    padding: 0 22px;
    box-shadow: 0 14px 32px rgba(2, 14, 22, 0.3);
  }

  /* Sur la page de réservation, le bouton pointerait sur la page courante : inutile, et il
     recouvrirait le coin du formulaire. */
  .site-nav-cta[aria-current='page'] {
    display: none;
  }

  .site-nav-links {
    margin-right: auto;
  }
}

@media (max-width: 700px) {
  /* Barre de défilement masquée, remplacée par un dégradé sur le bord droit : on comprend
     qu'il reste des entrées sans qu'un rail gris traverse la navigation. */
  .site-nav-links {
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }

  .site-nav-links::-webkit-scrollbar {
    display: none;
  }
}