/*
 * SARL LA CROIX DU SUD — feuille de style unique.
 * Palette validée par le brief : beige sable, menu horizontal, logo centré.
 */

:root {
  --sable-50:  #FBF7F0;
  --sable-100: #F4EBDA;
  --sable-200: #EADCC0;
  --sable-300: #DDC79E;
  --sable-400: #C9A876;
  --terracotta-600: #A65324;
  --terracotta-700: #8C4419;
  --brun-900: #3B2E22;
  --brun-700: #5C4632;
  --blanc: #FFFFFF;
  --ligne: #DED0B4;
  --ombre: 0 10px 30px rgba(59, 46, 34, 0.12);

  --police-titres: Georgia, 'Times New Roman', serif;
  --police-texte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --largeur-max: 1240px;
  --rayon: 0.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--sable-50);
  color: var(--brun-900);
  font: 400 1.0625rem/1.65 var(--police-texte);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--police-titres);
  color: var(--brun-900);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
h1 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem); margin-top: 2.5rem; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); margin-top: 1.75rem; }
/* Pas de largeur de lecture imposée : le texte occupe la largeur du site
   (--largeur-max), comme demandé. Les blocs qui ont besoin d'une colonne plus
   courte la déclarent eux-mêmes. */
p { margin: 0 0 1.1rem; }

a { color: var(--terracotta-700); }
a:hover { color: var(--terracotta-600); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ------------------------- En-tête / navigation ------------------------ */

.entete {
  background: var(--sable-100);
  border-bottom: 1px solid var(--ligne);
  position: sticky;
  top: 0;
  z-index: 100;
}

.entete__barre { padding-block: 0.75rem; }

.nav-principale {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nav-principale__liste {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principale__liste--gauche { justify-content: flex-end; }
.nav-principale__liste--droite { justify-content: flex-start; align-items: center; }

.nav-principale__liste a {
  text-decoration: none;
  color: var(--brun-900);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
}
.nav-principale__liste a:hover,
.nav-principale__liste a.actif {
  color: var(--terracotta-700);
  border-bottom-color: var(--terracotta-600);
}

.entete__logo { display: block; justify-self: center; }
.entete__logo img { height: 3.5rem; width: auto; }

.nav-principale__bascule {
  display: none;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--sable-50);
  position: relative;
  cursor: pointer;
}
.nav-principale__bascule span[aria-hidden] {
  position: absolute; inset: 0; margin: auto;
  width: 1.25rem; height: 2px; background: var(--brun-900);
  box-shadow: 0 -6px var(--brun-900), 0 6px var(--brun-900);
}

.menu-mobile {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0.5rem;
  display: grid;
  gap: 0.25rem;
}
.menu-mobile a {
  display: block;
  padding: 0.65rem 0.25rem;
  text-decoration: none;
  color: var(--brun-900);
  font-weight: 600;
  border-bottom: 1px solid var(--ligne);
}

@media (max-width: 56rem) {
  .nav-principale__liste--gauche,
  .nav-principale__liste--droite { display: none; }
  .nav-principale { grid-template-columns: auto 1fr auto; }
  .entete__logo { justify-self: start; }
  .nav-principale__bascule { display: block; }
}

/* -------------------- Coordonnées masquées (dévoilées au clic) ------------ */
/* Ce bloc est volontairement placé AVANT « .bouton » et avant le pied de page :
   quand le bouton de dévoilement porte aussi une classe d'habillage
   (.bouton--clair, .pied__action…), c'est cette dernière qui doit gagner. On ne
   pose donc ici que ce qu'un <button> nu n'hérite pas. */
.devoiler { display: inline-flex; max-width: 100%; }
/* « color: inherit » compte : un <button> prend sinon le noir du navigateur, y
   compris quand il porte une classe de pastille sans couleur propre — le
   bouton « Appelez-nous » du pied s'écrivait en noir sur le brun foncé. Les
   classes d'habillage qui déclarent une couleur (.bouton--cta, .bouton--clair)
   sont définies plus bas et gardent la main. */
.devoiler__bouton { font-family: inherit; color: inherit; cursor: pointer; }

/* Variante nue : sélecteur d'égalité stricte, il ne s'applique donc qu'aux
   boutons sans classe d'habillage — au fil du texte des pages légales. */
.devoiler__bouton[class="devoiler__bouton"] {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--terracotta-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.devoiler__bouton[class="devoiler__bouton"]:hover { color: var(--brun-900); }

/* L'attribut « hidden » se contente de « display: none » dans la feuille du
   navigateur : n'importe quelle classe d'habillage qui déclare un display
   (.pied__action est en inline-flex) l'annulerait, et le numéro resterait
   visible. La coordonnée masquée doit gagner dans tous les cas. */
.devoiler__valeur[hidden] { display: none; }

/* ------------------------------- Boutons -------------------------------- */

.bouton {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
}
.bouton--cta {
  background: var(--terracotta-700);
  color: var(--blanc);
}
.bouton--cta:hover { background: var(--terracotta-600); color: var(--blanc); }
.bouton--discret {
  background: transparent;
  border-color: var(--brun-900);
  color: var(--brun-900);
}
.bouton--discret:hover { background: var(--sable-200); }

/* --------------------------------- Héros --------------------------------- */

.heros {
  position: relative;
  overflow: hidden;
  background: var(--sable-200);
}

.diaporama {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 42rem;
}
.diaporama__diapositive {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.diaporama__diapositive.est-active { opacity: 1; }
.diaporama__diapositive img { width: 100%; height: 100%; object-fit: cover; }

.diaporama__legende {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  background: rgba(59, 46, 34, 0.72);
  color: var(--blanc);
  padding: 0.4rem 0.9rem;
  border-radius: var(--rayon);
  font-size: 0.9rem;
}

.diaporama__puces {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  gap: 0.5rem;
}
.diaporama__puce {
  width: 0.65rem; height: 0.65rem;
  border-radius: 50%;
  border: 2px solid var(--blanc);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.diaporama__puce.est-active { background: var(--blanc); }

.heros__contenu {
  padding-block: 2.5rem;
  text-align: center;
}
.heros__contenu .sur-titre {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terracotta-700);
  font-weight: 700;
  font-size: 0.9rem;
}
.heros__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* -------------------------------- Sections -------------------------------- */

/* « .bloc » et non « section.bloc » : le sélecteur d'origine exigeait une
   balise <section>, si bien que le conteneur de la page Réservation, qui est un
   <div>, ne recevait aucun espacement vertical. Le formulaire se retrouvait
   collé au bandeau au-dessus et au pied de page en dessous.
   L'espacement est par ailleurs élargi : 2,5 rem tenaient à l'étroit entre deux
   grands blocs. */
.bloc { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.bloc--alterne { background: var(--sable-100); }

.grille-cartes {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 1.5rem;
}
.carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.carte img { aspect-ratio: 4 / 3; object-fit: cover; }
.carte__corps { padding: 1.25rem; }
.carte__corps h3 { margin-top: 0; }

.bandeau-cta {
  background: var(--brun-900);
  color: var(--sable-50);
  text-align: center;
  padding-block: 2.5rem;
}
.bandeau-cta h2 { color: var(--sable-50); margin-top: 0; }
.bandeau-cta p { margin-inline: auto; }

.liste-expressions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.liste-expressions li {
  background: var(--sable-200);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  color: var(--brun-700);
}

/* --------------------------------- Formulaires --------------------------------- */

.formulaire { max-width: 42rem; }
.formulaire fieldset {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin: 0 0 1.5rem;
}
.formulaire legend { font-weight: 700; padding-inline: 0.4rem; font-family: var(--police-titres); }

.champ { margin-bottom: 1.25rem; }
.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.champ .aide { display: block; font-size: 0.85rem; color: var(--brun-700); margin-top: 0.3rem; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--brun-700);
  border-radius: var(--rayon);
  font: inherit;
  background: var(--blanc);
  color: var(--brun-900);
}
.champ textarea { min-height: 7rem; resize: vertical; }

.choix-lieu { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.choix-lieu label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  border: 2px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 0.85rem;
  cursor: pointer;
  font-weight: 400;
}
.choix-lieu input:checked + span,
.choix-lieu input:focus-visible + span { color: var(--terracotta-700); }
.choix-lieu label:has(input:checked) { border-color: var(--terracotta-600); background: var(--sable-100); }

.champ--site-web { position: absolute; left: -9999px; }

.message-alerte {
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.message-alerte--succes { background: #EAF3E4; border-color: #6B9A5A; color: #33502A; }
.message-alerte--erreur { background: #F8E9E4; border-color: var(--terracotta-600); color: var(--terracotta-700); }

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

.pied-de-page {
  background: var(--sable-200);
  border-top: 1px solid var(--ligne);
  margin-top: 3rem;
}
.pied-de-page__grille {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-block: 2.5rem;
}
.pied-de-page h2 { font-size: 1.1rem; margin-top: 0; }
.pied-de-page address { font-style: normal; }
.pied-de-page__reseaux { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.pied-de-page__siret { font-size: 0.85rem; color: var(--brun-700); }

.pied-de-page__bas {
  border-top: 1px solid var(--ligne);
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.85rem;
}
.pied-de-page__liens-legaux { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }

/* --------------------------------- Page 404 --------------------------------- */

.page-404 {
  text-align: center;
  padding-block: 5rem;
}
.page-404__code {
  font-family: var(--police-titres);
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  color: var(--sable-400);
  margin: 0;
}

/* --------------------------------- Utilitaires --------------------------------- */

.centre { text-align: center; }
.marge-auto { margin-inline: auto; }
.image-bandeau { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.entete-reservation { margin-bottom: 1.5rem; }
.case-consentement { width: auto; display: inline-block; margin-right: 0.5rem; }

/* ==========================================================================
   Médaillon débordant, panneaux, séparateurs, galerie
   --------------------------------------------------------------------------
   Ajouts demandés au brief : le logo au milieu de la barre, en débordement,
   et chaque rubrique présentée en « titre et texte devant une photo » avec
   une bande séparatrice entre les sections.

   Tout est exprimé avec les variables sable/terracotta/brun déjà définies
   plus haut : aucune couleur nouvelle n'est introduite.
   ========================================================================== */

:root {
  --or: #C79A45;                 /* or du soleil du logo, pour les ornements */
  --voile: 8, 23, 20;            /* base du voile posé sur les photos */
  --medaillon: 148px;
  --medaillon-reduit: 96px;
  --transition-douce: 280ms cubic-bezier(.22, .61, .36, 1);
}

/* --- Le médaillon déborde de la barre ------------------------------------ */
/* L'en-tête ne doit surtout pas écrêter son contenu : c'est ce débordement
   qui fait tout l'effet. Le lien ne mesure que la hauteur de la barre, et
   son image, en absolu, dépasse librement en dessous — la barre garde donc
   sa hauteur quelle que soit la taille du médaillon. */
.entete { overflow: visible; }
.entete__barre { overflow: visible; }

.entete__logo {
  position: relative;
  display: block;
  width: var(--medaillon);
  height: 3.9rem;
  transition: width var(--transition-douce);
}
.entete__logo picture {
  position: absolute;
  top: 4px;
  left: 50%;
  display: block;
  width: var(--medaillon);
  transform: translateX(-50%);
  transition: width var(--transition-douce);
}
.entete__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(59, 46, 34, .3));
  transition: filter var(--transition-douce);
}

/* Au défilement, le médaillon se réduit pour libérer la lecture. */
.entete.est-defile .entete__logo,
.entete.est-defile .entete__logo picture { width: var(--medaillon-reduit); }
.entete.est-defile .entete__logo img {
  filter: drop-shadow(0 3px 10px rgba(59, 46, 34, .18));
}

/* --- Panneaux : titre et texte devant une photo -------------------------- */
.panneau {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--sable-50);
}
.panneau--court { min-height: clamp(17rem, 34vh, 23rem); }
/* Ces sections ne portent qu'un titre et un paragraphe : à 74 vh, le texte
   flottait au milieu d'un grand vide. La hauteur suit désormais le contenu,
   avec un plancher suffisant pour que la photo reste lisible. */
.panneau--moyen { min-height: clamp(20rem, 42vh, 28rem); }
.panneau--grand { min-height: clamp(26rem, 58vh, 36rem); }

.panneau__media { position: absolute; inset: 0; z-index: -2; }
.panneau__media img { width: 100%; height: 100%; object-fit: cover; }

/* Le voile garantit la lisibilité quelle que soit la photo, et il est orienté
   du côté où le texte se trouve. */
.panneau__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(var(--voile), .58) 0%, rgba(var(--voile), .38) 45%, rgba(var(--voile), .62) 100%);
}
.panneau--gauche .panneau__voile {
  background:
    linear-gradient(to right, rgba(var(--voile), .86) 0%, rgba(var(--voile), .56) 45%, rgba(var(--voile), .30) 100%),
    linear-gradient(rgba(var(--voile), .28), rgba(var(--voile), .40));
}
.panneau--droite .panneau__voile {
  background:
    linear-gradient(to left, rgba(var(--voile), .86) 0%, rgba(var(--voile), .56) 45%, rgba(var(--voile), .30) 100%),
    linear-gradient(rgba(var(--voile), .28), rgba(var(--voile), .40));
}
/* Les panneaux centrés posent leur texte au milieu de la photo : voile plus
   appuyé au centre, sinon le surtitre passe sous le seuil de lisibilité. */
.panneau--centre .panneau__voile {
  background:
    radial-gradient(120% 78% at 50% 52%,
      rgba(var(--voile), .76) 0%, rgba(var(--voile), .58) 45%, rgba(var(--voile), .44) 100%),
    linear-gradient(rgba(var(--voile), .52), rgba(var(--voile), .60));
}

.panneau__contenu {
  position: relative;
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 3rem);
}
.panneau__texte {
  max-width: none;
  /* Filet de sécurité : les photos du client comportent de larges zones très
     claires (nappes, store, faïence). Une ombre discrète garantit la
     lisibilité là où le voile ne suffit pas. */
  text-shadow: 0 1px 2px rgba(var(--voile), .5), 0 2px 18px rgba(var(--voile), .35);
}
.panneau--gauche .panneau__texte { margin-right: auto; }
.panneau--droite .panneau__texte { margin-left: auto; }
.panneau--centre .panneau__texte { margin-inline: auto; text-align: center; }

.panneau__titre {
  margin: 0;
  color: var(--sable-50);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  text-wrap: balance;
}
.panneau__paragraphe {
  max-width: none;
  margin: 1.3rem 0 0;
  color: rgba(251, 247, 240, .93);
  text-wrap: pretty;
}
.panneau--centre .panneau__paragraphe { margin-inline: auto; }

/* Le surtitre n'était stylé que dans « .heros__contenu » : ailleurs — dans les
   panneaux, les duos, les bandeaux de page — il retombait en paragraphe
   ordinaire, ce qui le noyait dans le texte. Règle générale, donc. */
.sur-titre {
  margin: 0 0 .6rem;
  color: var(--terracotta-700);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sur-titre--clair { color: var(--or); }
.sur-titre--centre { text-align: center; }

.panneau .actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}
.panneau--centre .actions { justify-content: center; }

/* Bouton fantôme, pour les panneaux où le fond est une photo. */
.bouton--fantome {
  border: 1px solid rgba(251, 247, 240, .55);
  background: transparent;
  color: var(--sable-50);
}
.bouton--fantome:hover,
.bouton--fantome:focus-visible {
  background: rgba(251, 247, 240, .14);
  border-color: var(--sable-50);
}

/* Apparition au défilement, activée seulement si JavaScript répond : sans lui,
   le texte reste visible. */
.js .panneau .panneau__texte {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.js .panneau.est-visible .panneau__texte { opacity: 1; transform: none; }

/* --- Séparateurs --------------------------------------------------------- */
.separateur {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.9rem, 2.5vw, 1.5rem);
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2rem, 5.5vh, 3.25rem) 1.5rem;
  color: var(--terracotta-600);
}
.separateur--phrase { padding-block: clamp(2.5rem, 7vh, 4rem); }

.separateur__filet { height: 1px; background: currentColor; opacity: .4; }
.separateur__filet:first-of-type { background: linear-gradient(to right, transparent, currentColor); }
.separateur__filet:last-of-type  { background: linear-gradient(to left, transparent, currentColor); }

.ornement { width: clamp(36px, 6vw, 50px); height: auto; color: var(--or); }

.separateur__texte {
  grid-column: 1 / -1;
  margin: .35rem 0 0;
  color: var(--brun-900);
  font-family: var(--police-titres);
  font-size: clamp(1.05rem, 2.3vw, 1.45rem);
  font-style: italic;
  text-align: center;
}

/* Bande sombre : respiration avant et après une section sur fond clair. */
.separateur--sombre {
  max-width: none;
  background: var(--brun-900);
  color: var(--or);
}
.separateur--sombre .separateur__texte { color: var(--sable-50); }

/* --- Galerie ------------------------------------------------------------- */
.section-claire {
  background: var(--sable-100);
  padding-block: clamp(3rem, 8vh, 5rem);
}
.titre-section {
  margin: .3rem 0 0;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  text-align: center;
}
.chapo {
  margin: 1rem auto 0;
  color: var(--brun-700);
  text-align: center;
}

/* Nombre de colonnes FIXE, 2 puis 4 — et non « auto-fill », qui donnait selon
   la largeur de la fenêtre 3, 4 ou 5 colonnes. Avec 16 photos, seuls 2 et 4
   remplissent la dernière ligne ; 3 ou 5 la laissaient incomplète, et c'est ce
   trou que l'on voyait en bas de la grille. */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, 1.2vw, .9rem);
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galerie__bouton {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--rayon);
  background: var(--sable-200);
  cursor: zoom-in;
}
.galerie__bouton img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}
.galerie__bouton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--voile), .45), transparent 55%);
  opacity: 0;
  transition: opacity var(--transition-douce);
}
.galerie__bouton:hover img,
.galerie__bouton:focus-visible img { transform: scale(1.05); }
.galerie__bouton:hover::after,
.galerie__bouton:focus-visible::after { opacity: 1; }

.galerie__loupe {
  position: absolute;
  right: .7rem; bottom: .7rem;
  z-index: 1;
  width: 2rem; height: 2rem;
  border: 1px solid rgba(251, 247, 240, .75);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-douce), transform var(--transition-douce);
}
.galerie__loupe::before,
.galerie__loupe::after { content: ""; position: absolute; background: var(--sable-50); }
.galerie__loupe::before { left: 50%; top: 28%; width: 1px; height: 44%; transform: translateX(-50%); }
.galerie__loupe::after  { top: 50%; left: 28%; height: 1px; width: 44%; transform: translateY(-50%); }
.galerie__bouton:hover .galerie__loupe,
.galerie__bouton:focus-visible .galerie__loupe { opacity: 1; transform: none; }

/* --- Visionneuse --------------------------------------------------------- */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3.5rem);
  background: rgba(var(--voile), .95);
}
.visionneuse[hidden] { display: none; }

.visionneuse__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  margin: 0;
}
.visionneuse__image {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--rayon);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.visionneuse__legende { color: rgba(251, 247, 240, .82); font-size: .9rem; text-align: center; }
.visionneuse__fermer {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(251, 247, 240, .4);
  border-radius: 50%;
  background: transparent;
  color: var(--sable-50);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.visionneuse__fermer:hover { background: rgba(251, 247, 240, .15); }

/* --- Adaptations mobiles ------------------------------------------------- */
@media (max-width: 900px) {
  :root { --medaillon: 112px; --medaillon-reduit: 82px; }
}
@media (max-width: 700px) {
  :root { --medaillon: 96px; --medaillon-reduit: 74px; }
  .panneau .actions { flex-direction: column; align-items: stretch; }
  .panneau__paragraphe { margin-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .panneau .panneau__texte { opacity: 1 !important; transform: none !important; }
}

@media print {
  .panneau { min-height: 0; color: #000; }
  .panneau__media, .panneau__voile, .visionneuse, .galerie__loupe { display: none !important; }
  .panneau__texte { text-shadow: none; }
  .panneau__titre, .panneau__paragraphe { color: #000; }
}

/* ==========================================================================
   Correctifs
   ========================================================================== */

/* Le menu mobile déclare « display: grid » plus haut : toute valeur de display
   posée par la feuille de style l'emporte sur l'attribut HTML « hidden », dont
   le display:none vient de la feuille du navigateur. Sans cette règle, le menu
   reste donc ouvert en permanence, y compris sur grand écran. */
.menu-mobile[hidden] { display: none; }

/* Les images du diaporama et des panneaux sont enveloppées dans <picture> pour
   servir une déclinaison par largeur d'écran. <picture> étant « inline » par
   défaut, il ne transmet pas la hauteur à l'image : le « height: 100% » de
   celle-ci se résolvait contre une hauteur nulle et la diapositive ne
   remplissait plus son cadre. */
.diaporama__diapositive picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Le diaporama déclare « aspect-ratio: 16/9 » et un « max-height ». Pour
   une boîte de bloc dont la largeur reste « auto », le navigateur applique le
   rapport APRÈS le bridage en hauteur et en déduit la largeur : le diaporama
   ne mesurait plus que 967 px de large sur un écran de 1440, laissant une
   bande de sable à droite. Fixer la largeur rend la hauteur dérivée — c'est
   elle que max-height doit brider, et object-fit recadre la photo. */
.diaporama { width: 100%; }

/* La barre est « sticky » : sans cette réserve, la cible d'une ancre
   (#galerie, #formulaire-reservation) arrive sous la barre et son titre est
   masqué. La valeur couvre la hauteur de barre plus le débordement du
   médaillon. */
html { scroll-padding-top: calc(3.9rem + 1.5rem); }

/* Le bouton « Réservation » de la barre est un lien de navigation avant d'être
   un bouton : « .nav-principale__liste a » (spécificité 0,2,1) l'emporte sur
   « .bouton--cta » (0,1,0) et lui imposait le brun du menu, illisible sur le
   fond terracotta. Idem pour « .actif » sur la page Réservation elle-même. */
.nav-principale__liste a.bouton--cta,
.nav-principale__liste a.bouton--cta:hover,
.nav-principale__liste a.bouton--cta.actif {
  color: var(--blanc);
  border-bottom-color: transparent;   /* pas de soulignement sur la pastille */
}

/* Même conflit de spécificité dans le menu mobile : « .menu-mobile a » (0,1,1)
   l'emporte sur le padding de « .bouton » (0,1,0) et réduisait la pastille à
   0,25 rem de marge intérieure. Correctif repris du PR #1. */
.menu-mobile a.bouton--cta {
  padding: 0.75rem 1.5rem;
  color: var(--blanc);
  border-bottom-color: transparent;
}

/* ==========================================================================
   Titre sur le diaporama, blocs « photo en face du texte », pied de page
   --------------------------------------------------------------------------
   Le pied de page et l'encart « Recherches associées » suivent le modèle en
   place sur le site « philippe-rouvelin », transposé sur la palette sable.
   ========================================================================== */

/* --- Le titre est posé SUR le diaporama --------------------------------- */
.heros--titre-dessus { position: relative; }

/* Voile de couleur : les cinq photos vont du plat très clair à la façade
   grise ; le texte blanc ne tiendrait sur aucune sans lui. Teinte brune
   plutôt que noire, pour rester dans la gamme sable du site. */
.heros__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(59, 46, 34, .90) 0%,
      rgba(59, 46, 34, .62) 45%,
      rgba(59, 46, 34, .34) 100%),
    linear-gradient(to right,
      rgba(59, 46, 34, .52) 0%,
      rgba(59, 46, 34, .18) 65%);
}

/* Le bloc couvre toute la hauteur du diaporama et centre son contenu
   verticalement : « inset: auto 0 0 » le collait au bas de la photo, ce qui
   n'était pas le milieu demandé. Le padding haut et bas est conservé — il
   garantit que le texte ne touche jamais les bords, même sur un diaporama
   court. */
.heros__superposition {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.75rem, 5vh, 3.5rem);
  color: var(--blanc);
  text-align: center;
  /* Le bloc recouvre désormais les puces du diaporama et sa légende : sans
     cela, elles deviendraient inatteignables. Seuls les boutons du hero
     reprennent la main sur le pointeur. */
  pointer-events: none;
}
.heros__superposition .conteneur { max-width: var(--largeur-max); }
.heros__actions { pointer-events: auto; }

.heros__titre {
  max-width: none;
  margin: 0;
  color: var(--blanc);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  text-wrap: balance;
  text-shadow: 0 2px 4px rgba(24, 18, 12, .5), 0 6px 28px rgba(24, 18, 12, .35);
}
.heros__accroche {
  max-width: none;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  text-shadow: 0 1px 3px rgba(24, 18, 12, .55);
}
.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.5rem;
  /* Le bloc du hero est centré : les boutons suivent. */
  justify-content: center;
}

/* Bouton clair, pour les fonds photo. */
.bouton--clair {
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .1);
  color: var(--blanc);
}
.bouton--clair:hover,
.bouton--clair:focus-visible {
  background: rgba(255, 255, 255, .22);
  border-color: var(--blanc);
  color: var(--blanc);
}

/* La légende de diapositive passerait sous le texte : on la remonte à droite,
   au-dessus des puces. */
.heros--titre-dessus .diaporama__legende {
  left: auto;
  right: 1rem;
  bottom: 3.25rem;
  z-index: 3;
}

@media (max-width: 700px) {
  /* Sur mobile, le titre sous la photo reste plus lisible qu'un texte long
     empilé sur une image de 260 px de haut. */
  .heros__superposition {
    position: static;
    background: var(--brun-900);
    padding-block: clamp(1.5rem, 6vw, 2.25rem);
    /* Hors superposition, le bloc n'a plus rien à laisser passer. */
    pointer-events: auto;
  }
  .heros__voile { display: none; }
  .heros--titre-dessus .diaporama__legende { bottom: 2.5rem; }
  .heros__actions { flex-direction: column; align-items: stretch; }
}

/* --- Blocs « photo en face du texte » ----------------------------------- */
.duo { padding-block: clamp(2.5rem, 7vw, 5rem); }
.duo:nth-of-type(even) { background: var(--sable-100); }

.duo__grille {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .duo__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  /* Photo à droite : on inverse l'ordre visuel sans toucher à l'ordre du
     document, pour que le lecteur d'écran garde titre puis photo. */
  .duo--photo-droite .duo__media { order: 2; }
}

.duo__media {
  position: relative;
  margin: 0;
}
.duo__media img {
  width: 100%;
  aspect-ratio: 9 / 7;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 18px 44px rgba(59, 46, 34, .18);
}

/* Petite étiquette posée sur la photo, comme dans la maquette de référence. */
.duo__badge {
  position: absolute;
  left: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  display: grid;
  gap: .1rem;
  padding: .7rem 1.1rem;
  border-radius: .75rem;
  background: var(--blanc);
  box-shadow: 0 10px 26px rgba(59, 46, 34, .22);
}
.duo__badge-titre {
  color: var(--terracotta-700);
  font-family: var(--police-titres);
  font-size: 1.05rem;
  line-height: 1.2;
}
.duo__badge-detail { color: var(--brun-700); font-size: .8rem; }

.duo__titre {
  margin: .3rem 0 0;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  text-wrap: balance;
}
.duo__texte > p { margin: 1rem 0 0; }
.duo__actions { margin-top: 1.75rem; }

/* --- Pied de page ------------------------------------------------------- */
.pied {
  background: var(--brun-900);
  color: #EADCC0;
  padding-top: clamp(2.5rem, 6vw, 4rem);
}
.pied__grille {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.pied__logo { width: 92px; height: auto; margin-bottom: .85rem; }
.pied__titre {
  margin: 0 0 .6rem;
  color: var(--blanc);
  font-size: 1.15rem;
}
.pied__adresse { font-style: normal; line-height: 1.9; overflow-wrap: anywhere; }
.pied__liste { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.pied__liste--adresses { display: grid; gap: .9rem; line-height: 1.6; }
.pied__liste--adresses strong { color: var(--blanc); }
.pied a { color: #EADCC0; }
.pied a:hover { color: var(--blanc); }
.pied__reseau { display: inline-block; margin-top: .8rem; font-weight: 600; }

.pied__actions { display: grid; gap: .5rem; justify-items: start; margin: .9rem 0 0; }
.pied__action {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow-wrap: anywhere;
}
.pied__action:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
}

/* --- Recherches associées (maillage interne) ---------------------------- */
.recherches {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.recherches__titre {
  margin: 0 0 1.25rem;
  color: #D9C49E;
  font-family: var(--police-texte);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}
.recherches__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recherches__lien {
  display: inline-block;
  padding: .5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: .88rem;
}
.recherches__lien:hover,
.recherches__lien:focus-visible {
  background: var(--terracotta-700);
  border-color: var(--terracotta-600);
  color: var(--blanc);
}

/* --- Ligne légale et signature de l'agence ------------------------------ */
.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  text-align: center;
  font-size: .86rem;
}
.pied__bas p { margin: 0 0 .35rem; }
.pied__bas p + p { color: #C2AD8B; font-size: .8rem; }

/* Dernière ligne : liens légaux d'un côté, signature de l'agence de l'autre,
   sur une seule ligne à la largeur du site. En dessous de 48 rem les deux
   blocs s'empilent et se centrent — les tenir côte à côte y produirait deux
   colonnes hachées. */
.pied__derniere-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.75rem;
}
@media (max-width: 48rem) {
  .pied__derniere-ligne { justify-content: center; text-align: center; }
}

.pied__legal-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .84rem;
}
.pied__legal-liste a { text-decoration: underline; }
.pied__legal-liste li + li::before {
  content: "·";
  margin-right: 1rem;
  color: rgba(234, 220, 192, .5);
}

.pied__signature-zone {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 1.1rem;
  background: rgba(0, 0, 0, .16);
}
.pied__signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin: 0;
  font-size: .84rem;
  color: #C2AD8B;
}
.pied__signature-lien {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #EADCC0;
}
.pied__signature-lien:hover { color: var(--blanc); }
.pied__signature-texte { text-decoration: underline; }
.pied__signature-lien:hover .pied__signature-texte { text-decoration-thickness: 2px; }
.pied__signature-logo { height: 26px; width: auto; }

/* --- Contenu rédactionnel (pages légales) ------------------------------- */
/* Largeur du site, pas de colonne de lecture étroite : c'est le choix
   demandé. Les listes d'informations passent en trois colonnes pour que la
   ligne reste courte malgré la largeur du bloc. */
.contenu-redactionnel { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.contenu-redactionnel .chapeau {
  font-size: 1.1rem;
  color: var(--brun-700);
}
@media (min-width: 62rem) {
  .liste-infos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contenu-redactionnel p { margin: 0 0 1em; }
.contenu-redactionnel .section { margin-top: clamp(2rem, 4vw, 3rem); }
.section__titre {
  margin: 0 0 .9rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.sous-titre {
  margin: 1.75rem 0 .6rem;
  font-family: var(--police-titres);
  font-size: 1.1rem;
}
.liste-infos { display: grid; gap: .9rem; margin: 0 0 1.15em; }
@media (min-width: 34rem) {
  .liste-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.liste-infos dt {
  margin-bottom: .15rem;
  color: var(--terracotta-700);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.liste-infos dd { margin: 0; overflow-wrap: anywhere; }
.liste-infos address { font-style: normal; }

/* Liste d'expressions posée sur une photo. */
.liste-expressions--clair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.liste-expressions--clair li {
  padding: .35rem .9rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--blanc);
  font-size: .84rem;
}

@media print {
  .recherches, .pied__signature-zone, .heros__voile { display: none !important; }
  .duo__media img { box-shadow: none; }
}

/* Le style de base souligne tous les liens ; dans le pied, cela transforme
   chaque colonne en bloc de texte souligné. On garde le soulignement là où il
   porte du sens : les pages légales et la signature de l'agence. */
.pied__liste a,
.pied__action,
.pied__reseau,
.recherches__lien { text-decoration: none; }
.pied__liste a:hover,
.pied__reseau:hover { text-decoration: underline; }

/* L'adresse e-mail est longue : sur deux lignes, un rayon de 999 px donne une
   pastille difforme. Un rayon fixe reste juste dans les deux cas. */
.pied__action { border-radius: 1.1rem; }

/* En dessous de 56 rem, la règle d'origine posait le médaillon à gauche et le
   bouton de menu à droite. Le brief demande le logo au milieu : on garde trois
   colonnes, le bouton dans la première, le médaillon centré dans la deuxième.
   La troisième reste vide et équilibre la première. */
@media (max-width: 56rem) {
  .nav-principale { grid-template-columns: 1fr auto 1fr; }
  .entete__logo { justify-self: center; }
  .nav-principale__bascule { grid-column: 1; grid-row: 1; justify-self: start; }
}

/* ==========================================================================
   Réglages de largeur, de hauteur et de pied de page
   ========================================================================== */

/* --- Pied de page : quatre colonnes horizontales ------------------------- */
/* En « auto-fit minmax(15rem) », les colonnes tombaient à ~250 px et chaque
   libellé se coupait en deux ou trois lignes. Des proportions explicites leur
   donnent la place de tenir sur une ligne. */
@media (min-width: 62rem) {
  .pied__grille {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }
}

/* Les deux adresses : nom, adresse et lien d'appel sur des lignes courtes,
   sans <br> forcé — c'est la grille qui gère le retour. */
.pied__liste--adresses > li {
  display: grid;
  gap: .15rem;
}
.pied__liste--adresses strong { color: var(--blanc); }
.pied__liste--adresses span { color: #D9C49E; font-size: .92rem; }
.pied__liste--adresses a { justify-self: start; font-weight: 600; }

/* Le bouton nu de dévoilement est teinté en terracotta, illisible sur le brun
   du pied : dans le pied, il prend la couleur et la graisse des liens du pied. */
.pied .devoiler { justify-self: start; }
.pied .devoiler__bouton[class="devoiler__bouton"] {
  color: #EADCC0;
  font-weight: 600;
}
.pied .devoiler__bouton[class="devoiler__bouton"]:hover { color: var(--blanc); }

/* Les deux liens de réseaux tenaient l'un sous l'autre en pleine largeur. */
.pied__bloc .pied__reseau { margin-right: 1.25rem; }

/* La ligne d'expressions du bas occupait deux lignes hachées : elle tient la
   largeur du site et se coupe proprement. */
.pied__bas p { max-width: none; }

/* --- Textes de panneau : la largeur du site, mais pas de ligne interminable */
/* Un paragraphe de 1240 px de large sur une seule ligne de texte serait
   illisible ; les panneaux centrés gardent donc une mesure raisonnable tout en
   partant des bords du conteneur pour le titre. */
.panneau--centre .panneau__paragraphe { max-width: 90ch; margin-inline: auto; }
.duo__texte p { max-width: none; }
.contenu-redactionnel p { max-width: 100ch; }

/* Boutons compacts, pour les mentions au fil du texte. */
.bouton--compact {
  padding: .45rem 1rem;
  font-size: .9rem;
  border-width: 1px;
}

/* --- Page Réservation ---------------------------------------------------- */
/* Le formulaire faisait 42 rem de large dans un conteneur de 1240 px : plus de
   la moitié de la largeur restait vide, et chaque champ occupait sa propre
   ligne. On exploite désormais la largeur du site — formulaire à gauche,
   informations pratiques à droite — et les champs se regroupent par ligne. */
.reservation__grille {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .reservation__grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.formulaire--large { max-width: none; }

/* auto-fit plutôt qu'un nombre fixe de colonnes : les champs se replient d'eux
   mêmes dès que la place manque, sans point de rupture à maintenir. */
.champs-ligne {
  display: grid;
  gap: 0 clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
/* Le nom mérite plus de place que la civilité, qui n'affiche que trois choix. */
@media (min-width: 40rem) {
  .champs-ligne--civilite { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
}
.champs-ligne .champ { margin-bottom: 1.1rem; }
.formulaire fieldset > .aide {
  margin: 0;
  font-size: .85rem;
  color: var(--brun-700);
}

.formulaire__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.champ--consentement { flex: 1 1 22rem; margin-bottom: 0; }
.champ--consentement label { font-weight: 400; }

.reservation__pratique {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--sable-100);
}
.reservation__pratique-titre { margin-top: 0; font-size: 1.25rem; }
.reservation__pratique-intro,
.reservation__pratique-note { font-size: .92rem; color: var(--brun-700); }
.reservation__pratique-note { margin-bottom: 0; }

.reservation__adresses {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}
/* Enfants DIRECTS : sans le « > », le filet séparateur et le padding
   s'appliquaient aussi aux <li> de la liste d'horaires imbriquée, qui se
   retrouvait découpée en trois blocs soulignés. */
.reservation__adresses > li {
  display: grid;
  justify-items: start;
  gap: .4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ligne);
}
.reservation__adresses address { font-style: normal; font-size: .92rem; }

/* --- Réseaux sociaux flottants ------------------------------------------- */
/* Collés au bord droit et centrés dans la fenêtre, pas dans la page : c'est
   « position: fixed » qui les fait rester au milieu pendant le défilement.
   Le décalage de la moitié de leur propre hauteur (translateY) est ce qui
   centre réellement le bloc — « top: 50% » seul poserait son bord supérieur
   au milieu.

   z-index 90 : sous la barre d'en-tête (100) et sous la visionneuse (200). Une
   pastille qui passerait par-dessus la photo agrandie serait une gêne. */
.reseaux-flottants {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
}

.reseaux-flottants__lien {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--blanc);
  text-decoration: none;
  transition: filter var(--transition-douce), width var(--transition-douce);
}
.reseaux-flottants__lien svg { width: 1.5rem; height: 1.5rem; }

/* Bleu Facebook et dégradé Instagram, dans le sens du dégradé de la marque :
   orange en bas à gauche, magenta puis violet vers le haut à droite. */
.reseaux-flottants__lien--facebook { background: #3B5998; }
.reseaux-flottants__lien--instagram {
  background: linear-gradient(45deg,
    #FCAF45 0%, #F77737 18%, #E1306C 52%, #C13584 74%, #833AB4 100%);
}

.reseaux-flottants__lien:hover,
.reseaux-flottants__lien:focus-visible {
  filter: brightness(1.12);
  width: 3.4rem;          /* la pastille avance légèrement vers la gauche */
}
/* Le contour de focus par défaut serait rogné par le bord de la fenêtre. */
.reseaux-flottants__lien:focus-visible { outline-offset: -3px; }

/* Sur petit écran, les pastilles rétrécissent — le client les veut visibles
   partout, donc pas question de les masquer — et le conteneur réserve la
   largeur correspondante à droite. Sans cette réserve, la barre recouvrait la
   fin de deux ou trois lignes du texte du hero, large de 390 px seulement.
   Le décalage du contenu centré est de 19 px : imperceptible, alors qu'un mot
   tronqué se voit. */
@media (max-width: 40rem) {
  .reseaux-flottants__lien { width: 2.4rem; height: 2.4rem; }
  .reseaux-flottants__lien svg { width: 1.15rem; height: 1.15rem; }
  .reseaux-flottants__lien:hover,
  .reseaux-flottants__lien:focus-visible { width: 2.7rem; }

  .conteneur { padding-right: calc(1.25rem + 2.4rem); }
}

@media print {
  .reseaux-flottants { display: none !important; }
}

/* --- Duo « énoncé » : une seule phrase, en grand ------------------------- */
/* Variante pour un bloc qui n'a ni surtitre ni paragraphe, seulement une phrase
   à mettre en face de la photo. Elle est agrandie et centrée verticalement pour
   occuper la colonne : à la taille de titre habituelle, elle laissait la moitié
   de la hauteur vide en regard de l'image. */
.duo--enonce .duo__texte { display: grid; align-content: center; }
/* La phrase est un paragraphe, pas un titre : elle reprend simplement la
   police et la taille des titres pour tenir la colonne. */
.duo--enonce .duo__texte > p {
  margin: 0;
  max-width: none;
  font-family: var(--police-titres);
  font-size: clamp(1.7rem, 1rem + 2.2vw, 2.9rem);
  line-height: 1.25;
  color: var(--brun-900);
  text-wrap: balance;
}

/* --- Horaires d'ouverture ------------------------------------------------ */
/* Listes sans puces : une puce par créneau alourdirait une information qui se
   lit d'un coup d'œil. */
.pied__horaires,
.reservation__horaires {
  margin: .35rem 0;
  padding: 0;
  list-style: none;
}
.pied__horaires li { color: #D9C49E; font-size: .88rem; line-height: 1.5; }
.reservation__horaires li { font-size: .9rem; color: var(--brun-700); line-height: 1.5; }