/* ============================================================
   Souki Lodges & Spa — Composants partagés
   Styles de la nav, de l'overlay de menu et du footer.
   Couleurs : exclusivement les variables de tokens.css.
   ============================================================ */

/* Verrou de défilement quand l'overlay est ouvert */
.no-scroll { overflow: hidden; }

/* Petit séparateur point utilisé dans les listes inline */
.dot { margin: 0 .5em; opacity: .4; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1rem, 3vw, 3rem);
  color: var(--calcaire);            /* défaut : clair (au-dessus d'une section sombre) */
  background: transparent;           /* transparente en permanence — jamais de fond */
  isolation: isolate;
  /* Couleur adaptative ; entrée douce mais suffisamment rapide pour rendre
     la réservation accessible dès le premier regard. */
  transition:
    color .5s var(--ease),
    opacity 1.05s var(--ease),
    transform 1.05s var(--ease);
}

/* Couleur du contenu selon la section qui passe derrière (via IntersectionObserver) */
.nav.is-dark  { color: var(--calcaire); }   /* section sombre  -> texte clair */
.nav.is-light { color: var(--ink); }        /* section claire  -> texte encre */

/* Sur le contenu, la navigation ne doit jamais se confondre avec la prose. */
.nav.is-scrolled.is-light {
  background: color-mix(in srgb, var(--calcaire) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  /* PAS d'ombre portée : le fond et le filet suffisent à détacher la
     barre de la prose. Le site n'en a nulle part — règle du projet,
     pas préférence. Voir ETAT-DU-PROJET.md. */
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
}
.nav.is-scrolled.is-light .nav__logo,
.nav.is-scrolled.is-light .nav__icon,
.nav.is-scrolled.is-light .nav__menu,
.nav.is-scrolled.is-light .lang-switch { opacity: 1; }
.nav.is-scrolled.is-light .nav__menu,
.nav.is-scrolled.is-light .nav__links a { font-weight: 400; }
.nav.is-scrolled.is-dark::before { opacity: .72; }

/* Entrée en scène (home) : invisible + légèrement descendue au chargement,
   puis remonte de 12px vers 0 pendant le fondu long. */
.nav.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* Logo : emblème seul (currentColor), lien vers l'accueil */
.nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  opacity: .95;
  transition: opacity .4s var(--ease);
}
.nav__logo:hover { opacity: 1; }
.nav__logo .embleme {
  height: 46px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.nav__right {
  display: flex;
  align-items: center;
  /* Coefficient volontairement bas et plancher serré : avec des rubriques
     40 % plus grandes, c'est en bas de plage (1020-1150 px) que la barre se
     joue. L'espacement se resserre là où la place manque et se détend sur
     les grands écrans, plutôt que l'inverse. */
  gap: clamp(.7rem, .2rem + .8vw, 2rem);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, .1rem + .7vw, 1.5rem);
  list-style: none;
}
.nav__links a {
  position: relative;
  display: inline-block;
  padding: 10px 0;                   /* zone de clic élargie, invisible */
  color: inherit;
  text-decoration: none;
  font-size: var(--t-nav);
  letter-spacing: .025em;
  white-space: nowrap;               /* chaque rubrique sur une seule ligne */
  opacity: .9;
  /* Couleur de l'accent au survol : laiton sur fond clair, argile (plus clair,
     contraste suffisant) sur fond sombre — voir .nav.is-dark / .is-light. */
  --accent: var(--laiton);
  transition: opacity .3s var(--ease), color .3s var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible { opacity: 1; color: var(--accent); }

/* Souligné : se dessine de la gauche au survol, permanent sur la page active */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;                       /* ~6px sous le texte, dans le padding */
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }
/* Page active : texte + souligné permanents, sans animation */
.nav__links a[aria-current="page"] { opacity: 1; color: var(--accent); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transition: none; }

/* Accent selon le fond traversé (lisibilité garantie dans les deux cas) */
.nav.is-dark  .nav__links a { --accent: var(--argile); }
.nav.is-light .nav__links a { --accent: var(--laiton); }

/* Sur fond sombre, la barre repose sur une image en mouvement : le ciel et
   la terrasse y passent par des zones très claires où un Jost Light à 90 %
   d'opacité se dissout. On y gagne une graisse (Light -> Regular), l'opacité
   pleine, et une ombre large et très diffuse — 12 px de flou pour 35 % de
   noir : elle ne se voit pas comme une ombre, elle empêche seulement le
   texte de se confondre avec le fond. Rien ne change sur fond clair. */
.nav.is-dark .nav__links a,
.nav.is-dark .nav__menu,
.nav.is-dark .lang-switch,
.nav.is-dark .nav__gift-label {
  font-weight: 400;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.nav.is-dark .nav__links a { opacity: 1; }

/* Relevé sur la première image du film : sous la barre, le hero ouvre sur un
   ciel clair. Le texte calcaire y tombait à 1,59:1 en médiane et 1,03:1 dans
   les zones les plus lumineuses — très loin des 4,5:1 exigés. Ni la graisse
   ni l'ombre ne rattrapent cela : contre un ciel à 238 de luminance, aucun
   traitement du texte ne suffit.
   D'où ce voile — un dégradé qui s'éteint avant le bas de la barre, pas un
   fond. La barre reste sans arête et sans couleur propre ; seule la partie
   haute de l'image est assombrie, là où le texte se pose. */
.nav.is-dark::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  z-index: -1;
  pointer-events: none;
  /* Densité calée par la mesure, pas à l'œil : contre un ciel à 238 de
     luminance, il faut retirer environ 58 % de lumière pour que le calcaire
     repasse au-dessus de 4,5:1. Le dégradé n'est dense que sur la bande où
     le texte se pose, puis s'éteint vite — l'image reprend la main dès le
     tiers supérieur. */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .60) 0%,
    rgba(0, 0, 0, .52) 26%,
    rgba(0, 0, 0, .24) 58%,
    rgba(0, 0, 0, 0) 100%);
  transition: opacity .5s var(--ease);
}
/* Les icônes ne portent pas de texte : c'est leur tracé qu'il faut détacher. */
.nav.is-dark .nav__icon svg,
.nav.is-dark .nav__logo .embleme,
.nav.is-dark .nav__menu-bars i {
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .35));
}

/* Sélecteur de langue */
.lang-switch {
  display: flex;
  align-items: center;
  gap: .4em;
  font-size: var(--t-petit);
  letter-spacing: .12em;
}
.lang-switch__opt {
  color: inherit;
  text-decoration: none;
  opacity: .5;
  transition: opacity .4s var(--ease);
}
.lang-switch__opt.is-active,
.lang-switch__opt:hover { opacity: 1; }
.lang-switch__sep { opacity: .3; }
/* Langue non encore disponible : présente, lisible, mais visiblement inerte. */
.lang-switch__opt.is-disabled {
  opacity: .34;
  cursor: default;
  pointer-events: none;
}

/* Bouton Menu (mot + deux barres) */
.nav__menu {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .2em 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-interface);
  font-size: var(--t-nav);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nav__menu-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.nav__menu-bars i {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: width .4s var(--ease);
}
.nav__menu:hover .nav__menu-bars i:last-child { width: 13px; }

/* ------------------------------------------------------------
   Actions : icône téléphone · icône cadeau (-> « Offrir ») · Réserver
   ------------------------------------------------------------ */
.nav__actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* Duo d'icônes filet fin — suivent la couleur de la barre (currentColor) */
.nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 34px;
  color: inherit;
  text-decoration: none;
  opacity: .78;
  transition: opacity .4s var(--ease);
}
.nav__icon:hover { opacity: 1; }
.nav__icon svg { display: block; }

/* Cadeau : le mot « Offrir » se révèle au survol (desktop) */
.nav__gift { gap: 0; }
.nav__gift-label {
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    max-width .4s var(--ease),
    opacity .4s var(--ease),
    transform .4s var(--ease);
}
@media (hover: hover) {
  .nav__gift:hover .nav__gift-label,
  .nav__gift:focus-visible .nav__gift-label {
    max-width: 5em;
    opacity: 1;
    transform: none;
    margin-left: .5em;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
  padding: .72em 1.35em;
  border: 1px solid transparent;
  border-radius: 1px;
  font-family: var(--font-interface);
  font-weight: 400;
  font-size: var(--t-petit);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background .5s var(--ease),
    color .5s var(--ease),
    border-color .5s var(--ease);
}

/* Réserver — priorité n°1 : plein laiton, dans les deux états de la barre */
.btn--solid {
  background: var(--laiton);
  border-color: var(--laiton);
  color: var(--calcaire);
}
.btn--solid:hover {
  background: color-mix(in srgb, var(--laiton) 82%, black);   /* léger assombrissement */
  border-color: color-mix(in srgb, var(--laiton) 82%, black);
}

/* Bouton contour générique (hors nav — l'ancien « Coffrets » de la barre a disparu) */
.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}
.btn--ghost:hover {
  background: var(--argile);
  border-color: var(--argile);
  color: var(--nuit);
}

/* ============================================================
   OVERLAY DE MENU
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--nuit);
  color: var(--calcaire);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Couche média (images/vidéos révélées au survol) --- */
.overlay__media {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* au-dessus du fond nuit, sous le voile */
  overflow: hidden;
  pointer-events: none;
}
.overlay__media-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s var(--ease);   /* fondu doux */
}
.overlay__media-item.is-active { opacity: .5; }   /* révélation ~0.5 */
.overlay__media-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Cadrages éditoriaux du menu : les sujets restent visibles sous le voile,
   même sur les écrans très larges. */
.overlay__media-item[data-href="lodges.html"] .overlay__media-el,
.overlay__media-item[data-href="offres.html"] .overlay__media-el { object-position: center 58%; }
.overlay__media-item[data-href="experiences.html"] .overlay__media-el { object-position: center 46%; }
.overlay__media-item[data-href="la-maison.html"] .overlay__media-el { object-position: center 34%; }
.overlay__media-item[data-href="contact.html"] .overlay__media-el { object-position: center 42%; }

/* --- Voile dégradé posé sur l'image : garantit la lisibilité des mots --- */
.overlay__veil {
  position: absolute;
  inset: 0;
  z-index: 1;                 /* sur l'image, sous le contenu */
  pointer-events: none;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--nuit) 92%, transparent) 0%,   /* opaque à gauche */
    color-mix(in srgb, var(--nuit) 45%, transparent) 100%  /* plus transparent à droite */
  );
}

/* Contenu (barre + colonnes) au-dessus de l'image et du voile */
.overlay__bar,
.overlay__inner { position: relative; z-index: 2; }

.overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.2rem, 4vw, 3rem);
}
/* Logo complet (souki-blanc.svg) sur le fond nuit de l'overlay */
.overlay__logo-img {
  height: clamp(56px, 8vw, 76px);
  width: auto;
  display: block;
}
.overlay__close {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .35rem;
  gap: .6em;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-interface);
  font-size: var(--t-petit);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
  transition: opacity .4s var(--ease);
}
.overlay__close:hover { opacity: 1; }
.overlay__close-x { display: inline-flex; align-items: center; }

.overlay__inner {
  flex: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-content: center;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}

/* Liens de menu en grand */
.overlay__nav {
  display: flex;
  flex-direction: column;
  gap: .2em;
}
.overlay__nav a {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.14;
  text-decoration: none;
  color: color-mix(in srgb, var(--calcaire) 60%, var(--nuit));
  transition: color .45s var(--ease), transform .45s var(--ease);
}
/* Survol : le lien passe en argile (laiton clair, lisible sur le nuit) et se décale */
.overlay__nav a:hover,
.overlay__nav a:focus-visible {
  color: var(--argile);
  transform: translateX(12px);
}
/* Page active dans l'overlay : même accent, sans décalage */
.overlay__nav a[aria-current="page"] { color: var(--argile); }

/* Colonne « La maison » */
.overlay__aside {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-self: center;
  font-size: var(--t-petit);
}
.overlay__block { display: flex; flex-direction: column; gap: .5rem; }
.overlay__aside .eyebrow { color: var(--laiton); }
.overlay__address { font-style: normal; line-height: 1.7; }
.overlay__contact a,
.overlay__socials a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.overlay__contact a:hover,
.overlay__socials a:hover {
  color: var(--souki-clair);
  border-bottom-color: currentColor;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  z-index: 2;
  background: var(--calcaire);
  color: var(--ink);
  /* pas de filet : les sections précédentes se fondent dans le calcaire */
  /* Retrait haut ramené de 5rem à 4rem : 80 px à 65. Le pied porte déjà
     251 px d'air pour 263 de contenu, et il pèse 26 % d'une page légale. */
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.footer__top,
.footer__bottom {
  max-width: var(--contenu);
  margin-inline: auto;
}
/* Emblème de la maison près de la marque */
.footer__embleme { display: block; margin-bottom: .9rem; color: var(--foret); }
.footer__embleme .embleme { height: 30px; width: auto; display: block; }
.footer__logo {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: var(--t-chapo);
  letter-spacing: .36em;
  text-transform: uppercase;
}
.footer__tagline {
  font-size: var(--t-petit);
  margin-top: 1rem;
  max-width: 34ch;
  color: color-mix(in srgb, var(--ink) 75%, var(--calcaire));
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer__col h3 {
  font-family: var(--font-interface);
  font-weight: 400;
  font-size: var(--t-surtitre);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 1rem;
}
.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6em;
}
.footer__col a {
  color: inherit;
  text-decoration: none;
  font-size: var(--t-petit);
  opacity: .85;
  transition: opacity .4s var(--ease), color .4s var(--ease);
}
.footer__col a:hover { opacity: 1; color: var(--souki); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  color: color-mix(in srgb, var(--ink) 65%, var(--calcaire));
}
.footer__bottom a {
  color: inherit;
  text-decoration: none;
  transition: color .4s var(--ease);
}
.footer__bottom a:hover { color: var(--souki); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* --- Bascule nav desktop / mobile à 1020px --- */
/* Seuil du menu déroulé. Relevé de 1020 à 1180 px lors de la passe
   d'agrandissement : avec des rubriques à ~18,5 px, les six entrées + FR/EN +
   les icônes + Réserver réclament 1083 px à 1020 px de fenêtre — le bouton
   sortait du champ. Plutôt que de rapetisser les rubriques, la barre passe au
   menu déroulé un cran plus tôt ; l'overlay porte déjà toutes les entrées. */
@media (min-width: 1180px) {
  .nav__menu { display: none; }               /* pas de « Menu » sur desktop */
}
@media (max-width: 1179px) {
  .nav__links { display: none; }              /* rubriques dans l'overlay */
  .nav .lang-switch { display: none; }        /* FR/EN reste dans l'overlay */
  .nav__gift-label { display: none; }         /* tactile : icône seule */
  .nav__logo,
  .nav__menu {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .nav__icon { min-width: 44px; min-height: 44px; }   /* zone de tap confortable */
}

/* Sur mobile étroit, compacter pour tout garder visible */
@media (max-width: 560px) {
  .nav { gap: .5rem; }
  .nav__right { gap: .4rem; }
  .nav__actions { gap: 0; }
  .btn { padding: .58em .9em; letter-spacing: .08em; }
  .nav__logo .embleme { height: 38px; }   /* emblème seul, un peu réduit sur mobile */
  .nav__menu { letter-spacing: .12em; gap: .45em; }
  .nav__menu-bars i { width: 18px; }
  .nav__icon { min-width: 44px; min-height: 44px; }
}

/* --- Overlay / footer --- */
@media (max-width: 820px) {
  .overlay__inner { grid-template-columns: 1fr; align-content: start; gap: 2.5rem; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
/* Appareils sans survol (mobile/tactile) : pas de révélation d'image,
   l'overlay reste sur son fond nuit uni — plus propre que d'imposer une image. */
@media (hover: none) {
  .overlay__media,
  .overlay__veil { display: none; }
}
/* Sous 360 px, le bloc de droite réclamait 276 px pour 260 disponibles : le
   bouton Réserver sortait du cadre. */
/* Le mot MENU cède sa place au seul pictogramme sur tout le petit mobile.
   Le seuil est à 400 px et non 360 : à 375 px — iPhone SE de 2ᵉ et 3ᵉ
   génération, très répandu — la barre ne gardait qu'UN pixel de marge, ce
   qui la faisait déborder à la moindre retouche du libellé, des icônes ou
   de l'échelle typographique. Ce retrait rend 64 px et porte la marge à 65.
   Le mot est sorti du flux SANS être retiré du nom accessible du bouton :
   `display: none` priverait les lecteurs d'écran de son intitulé, le bouton
   n'ayant pas d'aria-label. Le bouton RÉSERVER garde son libellé entier et
   les deux icônes de contact direct restent en place. */
@media (max-width: 400px) {
  .nav__menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .nav { padding-inline: .9rem; }
  .nav__right { gap: .3rem; }
  .nav__menu { letter-spacing: .08em; gap: .35em; }
  .nav__icon { min-width: 38px; }
  .nav .btn--solid { padding: .75em 1em; letter-spacing: .1em; }
  .nav__logo .embleme { height: 30px; }
}

/* 320 px — iPhone SE de première génération.
   À cette largeur la barre ne gardait que 7 px de marge pour un seuil de
   24 (controle-nav.py). Le déficit n'est pas propre à une page : besoin
   de 313 px partout, réparti en 28 de retraits, 44 de logo, 8 de
   gouttière et 232,5 pour le bloc de droite.

   Ce qu'on NE touche pas : `.nav__icon { min-width: 38px }`, posé plus
   haut à ≤360 px pour agrandir la cible tactile — la rétrécir pour
   gagner 16 px échangerait un contrôle vert contre un défaut
   d'accessibilité. Aucun élément n'est retiré non plus : le téléphone et
   la boutique restent atteignables d'un doigt.

   On resserre donc seulement les espaces, et uniquement ici : à 360 px
   et au-dessus, rien ne bouge. */
@media (max-width: 340px) {
  .nav { padding-inline: .55rem; gap: .4rem; }
  .nav__right { gap: .1rem; }
  .nav .btn--solid { padding: .75em .62em; letter-spacing: .08em; }
  .nav__logo .embleme { height: 27px; }
}

@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}

/* ============================================================
   ACCESSIBILITÉ — mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nav,
  .overlay,
  .overlay__nav a,
  .overlay__media-item,
  .nav__menu-bars i {
    transition-duration: .01ms !important;
  }
  .nav.is-hidden {                            /* pas d'entrée en fondu ni montée */
    opacity: 1 !important;
    transform: none !important;
  }
  .overlay__nav a:hover { transform: none; }  /* pas de décalage */
  /* Overlay sobre : aucune image révélée (le JS ne l'active pas non plus) */
  .overlay__media-item { opacity: 0 !important; }
}

/* ============================================================
   LIENS — un seul endroit pour tout le site
   Ces règles vivaient dans home.css, que seules les pages d'accueil
   chargent : sur les 7 pages intérieures, .link retombait donc sur le
   style par défaut du navigateur (bleu souligné). Elles appartiennent
   ici, où toutes les pages les voient.
   ============================================================ */

/* Filet de sécurité : aucun lien du site ne doit jamais afficher le bleu
   souligné du navigateur. Tout lien reçoit ensuite son style explicite. */
a { color: inherit; text-decoration: none; }

/* --- Lien fléché : appels à l'action autonomes (Découvrir, maillage) --- */
.link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-interface);
  font-size: var(--t-petit);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: color .4s var(--ease);
}
.link::after {
  content: '→';
  display: inline-block;
  transition: transform .4s var(--ease);
}
.link:hover { color: var(--souki); }
.link:hover::after { transform: translateX(5px); }

/* --- Lien dans le corps du texte ---
   Même esprit que les rubriques de la barre de navigation : pas de
   soulignement au repos, un filet fin qui se dessine au survol. */
.inline-link {
  color: var(--laiton);
  text-decoration: none;
  position: relative;
  /* le filet suit la ligne de base, y compris sur un lien qui passe à la ligne */
  background-image: linear-gradient(var(--laiton), var(--laiton));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .55s var(--ease), color .4s var(--ease);
}
.inline-link:hover,
.inline-link:focus-visible { background-size: 100% 1px; }

/* Sur les fonds sombres, l'accent s'éclaircit — même logique que la nav. */
.pband .inline-link,
.phero .inline-link,
.resa .inline-link,
.moments .inline-link,
.jour .inline-link,
.footer .inline-link,
[data-nav="dark"] .inline-link {
  color: var(--argile);
  background-image: linear-gradient(var(--argile), var(--argile));
}

/* Accessibilité clavier : le filet est visible sans survol. */
.inline-link:focus-visible,
.link:focus-visible {
  outline: 2px solid var(--argile);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ============================================================
   Bande de réassurance — « Ils parlent de Souki »
   Au-dessus du pied de page, sur toutes les pages.

   Parti pris : les logos doivent paraître IMPRIMÉS sur la page.
   Donc aucune carte, aucun contour, aucune ombre, aucun fond propre,
   aucun carrousel. Le fond est celui du site, l'espace fait le reste.

   Chaque logo porte sa mention : un logo seul dit qu'on a parlé de
   nous, un logo qualifié dit quoi. C'est la différence entre une
   barre de presse et une barre de réassurance.
   ============================================================ */
.presse-bar {
  /* L'air de la bande, en une seule valeur : elle sert au retrait haut et bas
     ET à l'espace sous le surtitre, qui doivent rester égaux — les trois
     appels restent solidaires quelle que soit la valeur.

     Elle POINTE sur --sec-y au lieu de porter la sienne. Avant, la bande
     nuit de l'accueil suivait --sec-y et les onze bandes calcaire des pieds
     de page gardaient clamp(3rem, 7vh, 4.5rem) : deux valeurs pour deux
     barres qui se ressemblent. La divergence disparaît par construction. */
  /* 50 % de --sec-y : la bande verte était trop haute pour son contenu.
     DÉCOUPLÉE DÉLIBÉRÉMENT — mais calculée depuis --sec-y, non figée, pour
     que les deux restent solidaires si le rythme vertical bouge un jour.
     Ne pas réaligner sur --sec-y par harmonisation. */
  --presse-air: calc(var(--sec-y) * .5);
  background: var(--calcaire);
  border-top: 1px solid var(--line);
  padding: var(--presse-air) var(--gouttiere);
  text-align: center;
}
.presse-bar__titre {
  color: color-mix(in srgb, var(--ink) 42%, var(--calcaire));
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

/* Desktop : une seule ligne, centrée, espacement généreux. */
.presse-bar__piste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  max-width: 74rem;
  margin: 0 auto;
}

.presse-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  /* Aucun fond, aucun cadre : seul le retrait donne une cible tactile. */
  padding: .4rem .2rem;
  /* Seule l'échelle est portée par le lien ; l'atténuation est appliquée à la
     marque, jamais à la mention — voir plus bas. */
  transform: scale(1);
  transition: transform .3s var(--ease);
}
.presse-bar__item:hover,
.presse-bar__item:focus-visible { transform: scale(1.02); }

/* ── Les cinq distinctions sur une ligne dès 1000 px ────────────────
   Elles passaient en grille 2×2 dès que la somme des libellés dépassait
   la largeur : `flex-wrap: wrap` + une gouttière à 7vw. Décision : une
   ligne, les quatre côte à côte, à toutes les largeurs sauf mobile.
   NE PAS REPASSER EN GRILLE par harmonisation.

   « Hôtel & Lodge Awards » est le libellé le plus long : c'est lui qui
   contraint. Il garde `white-space: nowrap`, jamais coupé. Pour qu'il
   tienne à 768 px, la gouttière et le corps du nom descendent — ils
   remontent ensuite à l'échelle d'origine au-delà de 1200 px. */
@media (min-width: 768px) and (max-width: 999px) {
  .presse-bar__piste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem 1rem;
  }
}

@media (min-width: 1000px) {
  .presse-bar__piste {
    flex-wrap: nowrap;
    /* Les quatre items occupent TOUTE la largeur de la bande au lieu de se
       grouper au centre : c'est l'espacement qui porte la respiration. */
    justify-content: space-between;
    /* La gouttière n'est plus qu'un minimum — space-between distribue le
       reste. Remontée autant que la place le permet. */
    /* Ce n'est qu'un MINIMUM : au-delà de 900 px c'est space-between qui
       gouverne, et l'écart réel monte à 146 px à 1440 et 188 à 1920. Le
       baisser ne resserre donc que la zone où la place manque vraiment —
       à 768 px, 4vw laissaient 38 px de débord dans la piste. */
    gap: clamp(1rem, 2vw, 9rem);
    /* 74rem regroupaient les quatre au centre d'une bande bien plus large. */
    max-width: 92rem;
  }
  .presse-bar__nom {
    /* Corps réduit à 768 px pour dégager de l'espacement, comme demandé :
       c'est le blanc entre les items qu'on veut gagner, pas la gouttière. */
    font-size: clamp(.88rem, .20rem + 1.05vw, 1.65rem);
  }
  /* L'interlettre de .22em ajoutait près de 20 % à la longueur de la
     mention : elle se resserre là où la place manque. */
  .presse-bar__mention {
    letter-spacing: clamp(.06em, -.04em + .26vw, .22em);
    /* La mention tient sur UNE ligne, comme le nom : chaque distinction
       fait exactement deux lignes, nom au-dessus, mention en dessous. */
    white-space: nowrap;
  }
}



/* La marque occupe une hauteur FIXE : c'est elle qui aligne les logos entre
   eux, quelle que soit leur proportion. Le logo se cale au fond de cette
   boîte, les mentions se retrouvent donc sur une même ligne. */
.presse-bar__marque {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  opacity: .4;
  transition: opacity .3s var(--ease);
}
.presse-bar__item:hover .presse-bar__marque,
.presse-bar__item:focus-visible .presse-bar__marque { opacity: 1; }
.presse-bar__logo {
  /* --h vient de `poids` : la hauteur perçue, ajustée logo par logo.
     La largeur suit — aucune déformation possible. */
  height: var(--h, 38px);
  width: auto;
  max-width: 190px;
  object-fit: contain;
  /* Monochrome vert Souki fortement désaturé, jamais du gris pur. */
  filter: grayscale(1) brightness(.55) sepia(.18) hue-rotate(58deg);
}
/* Repli quand le fichier n'est pas encore déposé. */
.presse-bar__nom {
  font-family: var(--font-editorial);
  font-size: var(--t-chapo);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--foret);
  white-space: nowrap;
}

/* La mention : le détail qui qualifie. Minuscule, très espacée, laiton
   atténué — lisible sans jamais concurrencer le logo. */
.presse-bar__mention {
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.3;
  /* Laiton assombri d'encre plutôt qu'éclairci de fond : 4,8:1 sur calcaire,
     au-dessus du seuil AA de 4,5:1 exigé par une taille de 0,62 rem.
     Atténuer cette ligne comme le logo la ramenait à 1,34:1 — illisible. */
  color: color-mix(in srgb, var(--laiton) 50%, var(--ink));
  text-wrap: balance;
}

/* Le focus clavier doit rester franc : sans cela, la bande devient un trou
   noir pour qui navigue au clavier. */
.presse-bar__item:focus-visible {
  outline: 1px solid var(--laiton);
  outline-offset: 8px;
}

/* ============================================================
   VARIANTE NUIT — la barre remontée en haut de l'accueil
   Bande pleine largeur sur vert nuit, entre deux sections claires.
   Le rythme voulu est clair → sombre → clair, sans dégradé de
   jonction : la coupure est franche, c'est elle qui fait respirer.
   ============================================================ */
.presse-bar--nuit {
  background: var(--nuit);
  /* Temps de respiration, pas bandeau technique : la hauteur est généreuse. */
  /* Transition sombre → clair : l'air doit y être au moins égal au rythme
     standard, le changement de fond supprimant tout effet de continuité. */
  padding-block: var(--presse-air);
}
/* Le filet de séparation n'a plus lieu d'être : le changement de fond
   sépare à lui seul. */
.presse-bar--nuit::before { display: none; }
.presse-bar--nuit .presse-bar__titre {
  /* 58 % donnait 4,49:1, juste sous le seuil AA pour un surtitre de cette
     taille. 64 % passe à 5,05:1 sans le rendre bavard. */
  color: color-mix(in srgb, var(--calcaire) 64%, transparent);
}
/* Les marques passent en clair. Le pochoir se remplit de calcaire, le repli
   typographique en hérite : les deux états — nom en toutes lettres
   aujourd'hui, logo déposé demain — se tiennent au même niveau. */
/* .6 place le texte à 4,71:1, tout juste au-dessus du seuil ; .62 laisse une
   marge sans quitter la fourchette d'atténuation voulue. */
.presse-bar--nuit .presse-bar__marque { opacity: .78; }
.presse-bar--nuit .presse-bar__item:hover .presse-bar__marque,
.presse-bar--nuit .presse-bar__item:focus-visible .presse-bar__marque { opacity: 1; }
.presse-bar--nuit .presse-bar__logo {
  background: transparent;
  filter: grayscale(1) brightness(0) invert(93%) sepia(8%) saturate(280%) hue-rotate(350deg) brightness(104%);
}
.presse-bar--nuit .presse-bar__nom  { color: var(--calcaire); }
/* Argile et non laiton : sur le vert nuit, le laiton tombait sous le seuil —
   déjà mesuré lors du traitement de la barre de navigation. */
.presse-bar--nuit .presse-bar__mention { color: var(--argile); }


/* Mobile : deux lignes de deux. Jamais de défilement horizontal. */
@media (max-width: 720px) {
  /* `1fr 1fr` en dur imposait deux colonnes même à 320 px, où chaque nom
     réclame 143 px pour une colonne de 130 : le contenu sortait de 17 px et
     entraînait tout le document en défilement horizontal. `auto-fit` avec un
     minimum réel replie de lui-même sur une colonne quand la place manque. */
  .presse-bar__piste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: clamp(1.8rem, 5vh, 2.8rem) 1.5rem;
    max-width: 26rem;
  }
  .presse-bar__logo { max-width: 100%; }
  .presse-bar__nom { line-height: 1.1; }
  /* .22em d'interlettre sur une mention de 13 px ajoutent 25 px de largeur :
     de quoi faire déborder une colonne étroite. */
  .presse-bar__mention { letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  .presse-bar__item { transition: opacity .3s linear; }
  .presse-bar__item:hover,
  .presse-bar__item:focus-visible { transform: none; }
}
}

/* Portrait des fondateurs inséré dans un bloc centré (accueil « Bienvenue »,
   clôture de La Maison). Format contenu, jamais pleine largeur : les fichiers
   livrés ne font que 800×1200. */
.intro__portrait,
.signature__image {
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  max-width: 340px;
}
.intro__portrait img,
.signature__image img {
  width: 100%;
  height: auto;
  display: block;
}
/* Sur la bande sombre de clôture, l'image se détache d'un filet discret. */
.signature__image { max-width: 300px; }
.signature__image img {
  border: 1px solid color-mix(in srgb, var(--argile) 30%, transparent);
}

/* ═════════════════════════════════════════════════════════════════
   BLOC « SUITE NATURELLE » — fin des six pages éditoriales
   Remplace .pnext, supprimé : une liste de liens répétée en pied de
   page, en double du menu et du pied lui-même. Ici, une seule suite,
   choisie, avec son visuel et sa phrase.
   Branché sur les tokens du site plutôt que sur ceux de la maquette :
   --nuit, --laiton, --ease. Sans quoi le bloc dériverait le jour où la
   palette bougerait, et deux verts nuit coexisteraient sur une page.
   ═════════════════════════════════════════════════════════════════ */
.suite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-top: 150px;
  border-top: 1px solid color-mix(in srgb, var(--nuit) 14%, transparent);
}
.suite--inverse .suite__media { order: 2; }
.suite--inverse .suite__corps { order: 1; }

.suite__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--nuit);
}
.suite__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
  display: block;
  filter: saturate(.88) contrast(1.035) brightness(.96) sepia(.025);
  transform: scale(1.025);
  transition: transform 2.4s var(--ease);
}
/* Placeholder — les six visuels ne sont pas encore fournis. À remplacer
   par une <img> quand ils le seront ; voir les commentaires EMPLACEMENT. */
.suite__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Dégradé d'attente, repris tel quel de la maquette : valeurs littérales
     assumées — il n'a pas vocation à survivre à l'arrivée des six visuels. */
  background:
    radial-gradient(120% 90% at 25% 20%, rgba(201, 167, 137, .42) 0%, transparent 58%),
    radial-gradient(100% 80% at 80% 85%, rgba(110, 115, 99, .55) 0%, transparent 62%),
    linear-gradient(160deg, #3A4136 0%, #2C322A 55%, #232821 100%);
  transform: scale(1.04);
  transition: transform 2.4s var(--ease);
}
.suite:hover .suite__media::after { transform: scale(1); }
.suite__media--image::after {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--nuit) 16%, transparent),
    transparent 48%);
  transform: none;
}
.suite:hover .suite__media--image img { transform: scale(1); }

.suite__corps { padding: 0 clamp(32px, 6vw, 96px); }

.suite__oeil {
  display: block;
  font-family: var(--font-interface);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 34px;
}
.suite__oeil::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  background: var(--laiton);
  opacity: .5;
  margin-top: 16px;
}

.suite__titre {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: .005em;
  margin-bottom: 26px;
  color: var(--nuit);
}

.suite__ligne {
  font-family: var(--font-interface);
  font-size: 17px;
  line-height: 1.72;
  max-width: 38ch;
  color: color-mix(in srgb, var(--nuit) 72%, transparent);
  margin-bottom: 40px;
  /* Le bloc est une accroche, pas de la prose courante : ni justification
     ni césure, contrairement au texte des sections. */
  text-align: left;
  hyphens: none;
}

.suite__lien {
  position: relative;
  display: inline-block;
  font-family: var(--font-interface);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nuit);
  text-decoration: none;
  padding-bottom: 9px;
}
.suite__lien::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--nuit) 20%, transparent);
}
.suite__lien::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--laiton) 88%, var(--nuit));  /* ≈ #9A7E54 de la maquette */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease);
}
.suite__lien:hover::after,
.suite__lien:focus-visible::after { transform: scaleX(1); }
.suite__lien:focus-visible { outline: 1px solid var(--laiton); outline-offset: 8px; }

/* Révélation en cascade, posée par l'IntersectionObserver de components.js */
.suite .suite__oeil,
.suite .suite__titre,
.suite .suite__ligne,
.suite .suite__lien,
.suite .suite__media {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
.suite.vu .suite__media { opacity: 1; transform: none; }
.suite.vu .suite__oeil  { opacity: 1; transform: none; transition-delay: .14s; }
.suite.vu .suite__titre { opacity: 1; transform: none; transition-delay: .24s; }
.suite.vu .suite__ligne { opacity: 1; transform: none; transition-delay: .34s; }
.suite.vu .suite__lien  { opacity: 1; transform: none; transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  .suite .suite__oeil, .suite .suite__titre, .suite .suite__ligne,
  .suite .suite__lien, .suite .suite__media {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .suite__media::after { transition: none; }
}

@media (max-width: 860px) {
  .suite { grid-template-columns: 1fr; margin-top: 100px; }
  .suite--inverse .suite__media { order: 1; }
  .suite--inverse .suite__corps { order: 2; }
  .suite__media { aspect-ratio: 3 / 2; }
  .suite__corps { padding: 52px 8vw 0; }
  .suite__oeil { margin-bottom: 26px; }
  .suite__titre { margin-bottom: 20px; }
  .suite__ligne { margin-bottom: 34px; }
}

/* ═════════════════════════════════════════════════════════════════
   BANDE D'APPEL — composition « Axe »
   Remplace .pband et .resa sur huit pages. Un seul axe central : le
   filet, l'œil, le titre, le paragraphe, le bouton et la mention sont
   centrés sur le même point. L'ancienne composition centrait le titre
   mais laissait le paragraphe sur sa propre mesure — deux axes pour un
   seul bloc, c'était son défaut principal. Ne pas le réintroduire.
   `.pband` survit pour la seule la-maison, dont la bande est un mot de
   fin signé et non un appel à l'action.
   ═════════════════════════════════════════════════════════════════ */
.appel {
  position: relative;
  overflow: hidden;
  background: var(--nuit);
  color: var(--calcaire);
  padding: clamp(78px, 9vw, 118px) 6vw clamp(82px, 9vw, 124px);
  text-align: center;
}

.appel__fond {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}
/* Le média de experiences est un film, pas une image de fond : même
   place, même voile, mais il se cadre lui-même. */
.appel__fond video,
.appel__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholders d'attente. Valeurs littérales assumées, reprises de la
   maquette : ils disparaissent avec les vraies photographies. */
.fond--sejourner {
  background:
    radial-gradient(110% 85% at 70% 20%, rgba(201, 167, 137, .34) 0%, transparent 62%),
    linear-gradient(155deg, #4A5943 0%, #33402F 55%, #232B21 100%);
}
.fond--composer {
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(201, 167, 137, .28) 0%, transparent 60%),
    linear-gradient(150deg, #41503D 0%, #2E3A2C 60%, #222B21 100%);
}
.fond--contact {
  background:
    radial-gradient(115% 88% at 52% 18%, rgba(201, 167, 137, .30) 0%, transparent 61%),
    linear-gradient(162deg, #45543E 0%, #303C2D 58%, #212A20 100%);
}

/* Voile en deux temps. Le dégradé vertical creuse le haut et ferme la
   bande sur --nuit par le bas ; le plancher uniforme de 22 % est ce qui
   tient sous une photographie claire — un ciel de midi passe sous le
   dégradé seul. NE PAS RETIRER le plancher : c'est lui qui garantit le
   contraste du texte, pas le dégradé. */
.appel__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(46, 58, 44, .62) 0%,
    rgba(46, 58, 44, .76) 42%,
    rgba(46, 58, 44, .94) 86%,
    var(--nuit) 100%);
}
.appel__voile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(46, 58, 44, .22);
}

.appel__contenu {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
}

/* Filet vertical : il pose l'axe, et c'est le seul ornement de la bande. */
.appel__axe {
  display: block;
  width: 1px;
  height: clamp(32px, 4vw, 48px);
  margin: 0 auto clamp(22px, 2.4vw, 30px);
  background: linear-gradient(to bottom, transparent, var(--laiton));
  opacity: .65;
}

.appel__oeil {
  display: block;
  font-family: var(--font-interface);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: clamp(18px, 2vw, 26px);
}

.appel__titre {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: clamp(46px, 7.4vw, 92px);
  line-height: 1.03;
  letter-spacing: .004em;
  margin-bottom: clamp(22px, 2.5vw, 32px);
  text-shadow: 0 1px 34px rgba(34, 43, 33, .34);
}

.appel__texte {
  font-family: var(--font-interface);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.78;
  max-width: 48em;
  margin: 0 auto clamp(32px, 3.5vw, 44px);
  color: rgba(238, 234, 225, .86);
  /* Le paragraphe est centré, donc ni justifié ni coupé : la
     justification de typo.css ne doit pas le rattraper. */
  text-align: center;
  hyphens: none;
}
.appel__texte a {
  color: var(--argile);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 167, 137, .34);
  padding-bottom: 2px;
  transition: border-color .7s var(--ease);
}
.appel__texte a:hover,
.appel__texte a:focus-visible { border-bottom-color: var(--argile); }

/* Bouton en contour, rempli par le bas au survol. Aucun pavé plein sur
   cette bande : sur photographie, un aplat de laiton fait tache. */
.appel__bouton {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 20px 46px;
  border: 1px solid var(--laiton);
  font-family: var(--font-interface);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--calcaire);
  text-decoration: none;
  transition: color .8s var(--ease);
}
.appel__bouton::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--laiton);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .8s var(--ease);
}
.appel__bouton span { position: relative; z-index: 1; }
.appel__bouton:hover::before,
.appel__bouton:focus-visible::before { transform: scaleY(1); }
.appel__bouton:hover,
.appel__bouton:focus-visible { color: var(--nuit); }
.appel__bouton:focus-visible { outline: 1px solid var(--argile); outline-offset: 7px; }

.appel__mention {
  margin-top: clamp(30px, 3.2vw, 42px);
  font-family: var(--font-interface);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.9;
  /* .72 et non .5 comme la maquette : sur le placeholder le plus clair, .5
     donnait 3,20:1 — sous le seuil AA de 4,5 pour un texte de 11 px. À .72,
     4,84:1. L'œil en laiton reste sous AA, écart assumé et documenté. */
  color: rgba(238, 234, 225, .72);
}

/* Révélation en cascade, posée par l'observateur de components.js */
.appel__axe, .appel__oeil, .appel__titre,
.appel__texte, .appel__bouton, .appel__mention {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.appel.vu .appel__axe     { opacity: .65; transform: none; }
.appel.vu .appel__oeil    { opacity: 1; transform: none; transition-delay: .14s; }
.appel.vu .appel__titre   { opacity: 1; transform: none; transition-delay: .26s; }
.appel.vu .appel__texte   { opacity: 1; transform: none; transition-delay: .38s; }
.appel.vu .appel__bouton  { opacity: 1; transform: none; transition-delay: .50s; }
.appel.vu .appel__mention { opacity: 1; transform: none; transition-delay: .62s; }

@media (prefers-reduced-motion: reduce) {
  .appel__axe, .appel__oeil, .appel__titre,
  .appel__texte, .appel__bouton, .appel__mention {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .appel__axe { opacity: .65 !important; }
  .appel__fond { transform: none; }
}

@media (max-width: 700px) {
  .appel { padding: 72px 8vw 76px; }
  .appel__bouton { padding: 18px 34px; letter-spacing: .2em; }
  /* Deux lignes sont acceptées sur téléphone : aucune mention de 90
     signes en capitales ne tient sur une ligne de 360 px. On resserre
     l'interlettrage plutôt que de raccourcir le texte. */
  .appel__mention { letter-spacing: .12em; }
}

/* ═════════════════════════════════════════════════════════════════
   LE MOT DE SORTIE
   Trois états du même dispositif, choisis à l'exécution : ordinateur,
   téléphone aux heures d'ouverture, téléphone hors des heures. Le
   vocabulaire est celui de la composition Axe des bandes d'appel —
   filet vertical, œil en laiton, titre en Cormorant, bouton en
   contour rempli par le bas. La maquette en reprenait les noms de
   classes ; son `<style>` n'ayant pas été transmis, le CSS est dérivé
   de cette parenté plutôt qu'inventé.
   AUCUNE OMBRE PORTÉE. AUCUNE URGENCE : ni compte à rebours, ni
   pourcentage, ni « dernière chance ». Voir ETAT-DU-PROJET.md.
   ═════════════════════════════════════════════════════════════════ */
.sortie {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gouttiere);
  background: color-mix(in srgb, var(--nuit) 72%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility 0s linear .7s;
}
.sortie.vu {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s var(--ease), visibility 0s;
}

.sortie__boite {
  position: relative;
  width: min(30rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(2.6rem, 6vw, 3.6rem) clamp(1.8rem, 5vw, 3rem) clamp(2.2rem, 5vw, 3rem);
  background: var(--calcaire);
  color: var(--ink);
  text-align: center;
  transform: translateY(14px);
  transition: transform .8s var(--ease);
}
.sortie.vu .sortie__boite { transform: none; }

.sortie .fermer {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
  transition: opacity .5s var(--ease);
}
.sortie .fermer:hover,
.sortie .fermer:focus-visible { opacity: 1; }
.sortie .fermer:focus-visible { outline: 1px solid var(--laiton); outline-offset: 3px; }

/* Le filet vertical, comme sur les bandes d'appel : il pose l'axe. */
.sortie__axe {
  display: block;
  width: 1px;
  height: clamp(28px, 5vw, 40px);
  margin: 0 auto clamp(20px, 3vw, 28px);
  background: linear-gradient(to bottom, transparent, var(--laiton));
  opacity: .65;
}

.sortie__oeil {
  display: block;
  font-family: var(--font-interface);
  /* L'œil reste en pixels fixes : c'est un repère, pas de la lecture. */
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 1.1rem;
}

.sortie__titre {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: clamp(30px, 5.4vw, 40px);
  line-height: 1.1;
  color: var(--foret);
  margin-bottom: 1rem;
}

.sortie__txt {
  font-family: var(--font-interface);
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: var(--interligne);
  max-width: 34ch;
  margin: 0 auto clamp(1.6rem, 4vw, 2.1rem);
  /* Texte court et centré : ni justification ni césure. */
  text-align: center;
  hyphens: none;
}

/* Le numéro EST le bouton sur téléphone : Cormorant, chiffres
   elzéviriens, assez grand pour être visé du pouce. */
.sortie .numero {
  display: block;
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: 36px;
  font-feature-settings: 'onum' 1, 'liga' 1, 'kern' 1;
  letter-spacing: .01em;
  color: var(--foret);
  text-decoration: none;
  margin-bottom: clamp(1.3rem, 3vw, 1.7rem);
}
.sortie .numero:focus-visible { outline: 1px solid var(--laiton); outline-offset: 6px; }

/* Bouton en contour, rempli par le bas — jamais de pavé plein. */
.sortie .bouton {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 17px 38px;
  border: 1px solid var(--laiton);
  font-family: var(--font-interface);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color .8s var(--ease);
}
.sortie .bouton::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--laiton);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .8s var(--ease);
}
.sortie .bouton span { position: relative; z-index: 1; }
.sortie .bouton:hover::before,
.sortie .bouton:focus-visible::before { transform: scaleY(1); }
.sortie .bouton:hover,
.sortie .bouton:focus-visible { color: var(--calcaire); }
.sortie .bouton:focus-visible { outline: 1px solid var(--laiton); outline-offset: 6px; }

.sortie .second {
  display: block;
  margin-top: 1.15rem;
  font-family: var(--font-interface);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  padding-bottom: 3px;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.sortie .second:hover,
.sortie .second:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--laiton);
}
.sortie .second:focus-visible { outline: 1px solid var(--laiton); outline-offset: 5px; }

/* Hors des heures : on annonce quand on décroche, sans numéro. */
.sortie .horaire {
  display: block;
  margin-top: 1.15rem;
  font-family: var(--font-interface);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}

.sortie__signature {
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 17px;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  /* Opacité seule : aucune translation. */
  .sortie { transition: opacity .4s linear, visibility 0s linear .4s; }
  .sortie.vu { transition: opacity .4s linear, visibility 0s; }
  .sortie__boite { transform: none; transition: none; }
  .sortie .bouton, .sortie .bouton::before,
  .sortie .second, .sortie .fermer { transition: none; }
}

@media (max-width: 400px) {
  .sortie__boite { padding-inline: 1.4rem; }
  .sortie .bouton { padding: 16px 26px; letter-spacing: .18em; }
}

/* ============================================================
   Newsletter Brevo — une invitation discrète depuis le footer.
   Aucun script tiers n'est chargé : les données ne quittent la page
   qu'au moment où le visiteur valide lui-même le formulaire.
   ============================================================ */
.footer__newsletter {
  margin-top: 1.4rem;
  padding: 0 0 .35rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: transparent;
  color: inherit;
  font: 400 11px/1.4 var(--font-interface);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .4s ease, opacity .4s ease;
}
.footer__newsletter:hover { border-color: currentColor; }
.footer__newsletter:focus-visible { outline: 1px solid var(--laiton); outline-offset: 6px; }

.newsletter {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.newsletter.est-ouvert {
  visibility: visible;
  opacity: 1;
  transition: opacity .45s ease, visibility 0s;
}
.newsletter__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: color-mix(in srgb, var(--foret) 82%, transparent);
  cursor: default;
}
.newsletter__carte {
  position: relative;
  width: min(100%, 680px);
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 6vw, 4.8rem) clamp(2.2rem, 6vw, 4.2rem);
  overflow: hidden;
  background: var(--calcaire);
  box-shadow: 0 28px 90px rgba(18, 29, 24, .22);
  transform: translateY(18px);
  transition: transform .65s var(--ease);
}
.newsletter.est-ouvert .newsletter__carte { transform: translateY(0); }
.newsletter__carte::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 6vw, 4.8rem);
  width: 1px;
  height: clamp(1.25rem, 4vw, 2.8rem);
  background: var(--laiton);
}
.newsletter__fermer {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.newsletter__fermer::before,
.newsletter__fermer::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 10px;
  width: 22px;
  height: 1px;
  background: var(--ink);
}
.newsletter__fermer::before { transform: rotate(45deg); }
.newsletter__fermer::after { transform: rotate(-45deg); }
.newsletter__fermer:focus-visible { outline: 1px solid var(--laiton); }
.newsletter__oeil {
  margin: 0 0 1.1rem;
  color: var(--laiton);
  font: 400 10px/1.4 var(--font-interface);
  letter-spacing: .27em;
  text-transform: uppercase;
}
.newsletter__titre {
  max-width: 11ch;
  margin: 0;
  color: var(--foret);
  font: 300 clamp(39px, 6vw, 64px)/.98 var(--font-editorial);
  letter-spacing: -.025em;
}
.newsletter__texte {
  max-width: 49ch;
  margin: 1.35rem 0 2.15rem;
  color: color-mix(in srgb, var(--ink) 77%, transparent);
  font: 350 clamp(15px, 1.3vw, 17px)/1.75 var(--font-interface);
}
.newsletter__form { display: grid; gap: 1.15rem; }
.newsletter__email span {
  display: block;
  margin-bottom: .5rem;
  color: var(--ink);
  font: 400 10px/1.4 var(--font-interface);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.newsletter__email input {
  display: block;
  width: 100%;
  padding: .9rem 0 .75rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 350 18px/1.4 var(--font-interface);
  outline: 0;
  transition: border-color .35s ease;
}
.newsletter__email input:focus { border-color: var(--laiton); }
.newsletter__email input::placeholder { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.newsletter__consent {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: .7rem;
  align-items: start;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font: 350 11.5px/1.55 var(--font-interface);
}
.newsletter__consent input { accent-color: var(--foret); margin-top: 2px; }
.newsletter__consent a { color: inherit; text-underline-offset: 3px; }
.newsletter__envoyer {
  justify-self: start;
  margin-top: .35rem;
  padding: 15px 27px;
  border: 1px solid var(--foret);
  background: var(--foret);
  color: var(--calcaire);
  font: 400 10.5px/1.3 var(--font-interface);
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s ease, color .35s ease;
}
.newsletter__envoyer:hover { background: transparent; color: var(--foret); }
.newsletter__envoyer:focus-visible { outline: 1px solid var(--laiton); outline-offset: 5px; }
.newsletter__piege,
.newsletter__reponse { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.newsletter__succes {
  display: none;
  max-width: 42ch;
  margin: 2rem 0 0;
  color: var(--foret);
  font: 350 17px/1.7 var(--font-interface);
}
.newsletter__succes.est-visible { display: block; }
body.newsletter-ouverte { overflow: hidden; }

@media (max-width: 600px) {
  .newsletter { padding: .65rem; place-items: end center; }
  .newsletter__carte { width: 100%; padding-top: 3.5rem; }
  .newsletter__titre { font-size: clamp(38px, 13vw, 52px); }
}

@media (prefers-reduced-motion: reduce) {
  .newsletter, .newsletter__carte { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   FILM COMPLET — surimpression ouverte par « Voir le film »
   Calquée sur l'overlay du menu et sur le mot de sortie :
   fond --nuit à 94 %, fermeture par Échap / croix / clic-fond,
   focus piégé puis rendu. Aucune ombre portée.
   ═══════════════════════════════════════════════════════════ */
.film {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.2rem, 5vw, 3.5rem);
  background: color-mix(in srgb, var(--nuit) 94%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.film.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s var(--ease), visibility 0s linear 0s;
}

.film__cadre {
  width: min(100%, 96rem);
  /* Le film est en 16/9 : la boîte le suit, sans jamais dépasser la
     hauteur utile — sinon les contrôles natifs sortent de l'écran. */
  aspect-ratio: 16 / 9;
  max-height: 100%;
}
.film__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  border-radius: var(--rayon-media);
}

.film__fermer {
  position: absolute;
  top: clamp(1rem, 3vw, 2.2rem);
  right: clamp(1rem, 3vw, 2.2rem);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid color-mix(in srgb, var(--calcaire) 26%, transparent);
  border-radius: 50%;
  color: var(--calcaire);
  cursor: pointer;
  transition: border-color .5s var(--ease), color .5s var(--ease);
}
.film__fermer:hover,
.film__fermer:focus-visible { border-color: var(--laiton); color: var(--argile); }
.film__fermer:focus-visible { outline: 1px solid var(--argile); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .film { transition: opacity .01s linear, visibility 0s linear; }
  .film__fermer { transition: none; }
}