/* ==========================================================================
   Hôtel du Parc — site public
   Reprend les jetons de app.css ; ajoute l'en-tête transparent, les
   bandeaux immersifs et les sections alternées des maquettes.
   ========================================================================== */

body.site-public { background: var(--creme); }

.contenu-large { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.contenu-etroit { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   En-tête
   ========================================================================== */

.barre-utile {
  background: rgba(11, 46, 35, .92);
  color: rgba(244, 247, 245, .9);
  font-size: .82rem;
}

.barre-utile .contenu-large {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  height: 38px;
}

.barre-utile a { color: rgba(244, 247, 245, .9); }
.barre-utile a:hover { color: #fff; }
.barre-utile .langues a.actif { color: var(--or); font-weight: 600; }

/* En-tête clair : le logo est dessiné pour du blanc, et c'est ce qui laisse
   l'orange dominer la page plutôt que le vert. Ce dernier reste présent sur
   la barre du dessus et au pied de page, où il sert d'ancrage. */
.entete-site {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: var(--ombre-sm);
}

.entete-site .contenu-large {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}

.logo-site {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--vert-profond);
  flex-shrink: 0;
}
.logo-site:hover { color: var(--soleil); }
.logo-site img { width: 52px; height: auto; flex-shrink: 0; }
.logo-site .nom {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.15;
}
.logo-site .sous-nom {
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.nav-site {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
  flex-wrap: wrap;
}

/* `:not(.btn)` n'est pas un ornement : un sélecteur `.nav-site a` l'emporte
   sur `.btn-reserver`, et le bouton de réservation héritait du gris du menu
   sur son fond bleu — illisible, alors que la règle du bouton demandait bien
   du blanc. */
.nav-site a:not(.btn) {
  padding: .5rem .7rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--texte-doux);
  border-radius: var(--r-xs);
  white-space: nowrap;
  position: relative;
}
.nav-site a:not(.btn):hover { color: var(--soleil); background: var(--creme-fonce); }

.nav-site a.actif:not(.btn) { color: var(--soleil); font-weight: 600; }
.nav-site a.actif:not(.btn)::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .2rem;
  height: 2px;
  background: var(--soleil);
  border-radius: 2px;
}

.bouton-menu-site {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--vert-profond);
  font-size: 1.5rem;
  padding: .25rem .5rem;
}

/* ==========================================================================
   Bandeau d'ouverture
   ========================================================================== */

.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  color: #fff;
  /* Deux couches. Dessus, un voile sombre qui garde le titre lisible quelle
     que soit la photo. Dessous, `--photo` — posée en style par le gabarit
     quand la page a un bandeau — et à défaut le couchant du logo, pour
     qu'une page sans photo reste présentable. */
  background:
    linear-gradient(100deg, rgba(32, 18, 9, .86) 0%, rgba(45, 26, 13, .54) 50%, rgba(45, 26, 13, .18) 100%),
    var(--photo, linear-gradient(135deg, #A8430F 0%, #C9551C 45%, #F8B420 100%));
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: .5rem;
  line-height: 1.05;
}

.hero .accroche {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .9);
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero .activites {
  font-size: 1.05rem;
  color: var(--or);
  letter-spacing: .04em;
  margin-bottom: 1.2rem;
}

.hero .filet {
  width: 64px;
  height: 2px;
  background: var(--soleil);
  margin: 1.4rem 0;
}

/* Bandeau à plusieurs photos : elles se relaient en fondu, sous le même
   voile que le bandeau fixe. Le contenu passe au-dessus. */
.hero-diapos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-diapo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(32, 18, 9, .86) 0%, rgba(45, 26, 13, .54) 50%, rgba(45, 26, 13, .18) 100%),
    var(--photo, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.4s ease, transform 7s ease-out;
}
.hero-diapo.active {
  opacity: 1;
  transform: scale(1);
}
.hero-diapos ~ .contenu-large {
  position: relative;
  z-index: 1;
}
.hero-points {
  position: absolute;
  right: 1.5rem;
  bottom: 1.2rem;
  z-index: 2;
  display: flex;
  gap: .5rem;
}
.hero-points button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .3s ease;
}
.hero-points button[aria-current="true"] { background: #fff; }
.hero-points button:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hero-diapo { transition: none; transform: none; }
}

/* Bandeau court des pages intérieures. */
.hero-page {
  min-height: 340px;
  padding: 4rem 0 3rem;
}
.hero-page h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

.fil-ariane {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .75);
  margin-top: 1.5rem;
}
.fil-ariane a { color: rgba(255, 255, 255, .75); }
.fil-ariane a:hover { color: #fff; }

/* ==========================================================================
   Barre de recherche de disponibilité
   ========================================================================== */

/* Le nombre de champs varie : quand une seule formule est vendue en ligne,
   le sélecteur disparaît. Une grille à nombre de colonnes figé laissait
   alors une piste vide. En flex, les champs se partagent la place quel
   qu'en soit le nombre, et passent à la ligne sur un écran étroit. */
.barre-recherche {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-lg);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
}

.barre-recherche .champ { flex: 1 1 150px; min-width: 0; }
.barre-recherche .btn { flex: 0 0 auto; }

/* Chevauche le bandeau, comme sur la maquette d'accueil. */
.barre-recherche.flottante {
  margin-top: -48px;
  position: relative;
  z-index: 10;
}

.barre-recherche .champ { margin-bottom: 0; }
.barre-recherche label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.barre-recherche .bi { color: var(--soleil); }

/* ==========================================================================
   Bandeau de promotion — une saison à remise en cours
   ========================================================================== */

.bandeau-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .6rem 16px;
  background: var(--soleil);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition);
}
.bandeau-promo:hover { background: var(--soleil-fonce); color: #fff; }
.bandeau-promo .bi-tag-fill { flex-shrink: 0; }

.bandeau-promo-action {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .6rem;
  font-size: .82rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .bandeau-promo { font-size: .82rem; }
}

/* ==========================================================================
   Sélecteur d'occupants

   Sans JavaScript, les champs natifs restent affichés tels quels et le
   formulaire fonctionne : c'est le script qui pose `.occupants--js` et
   remplace la saisie par des compteurs. Un visiteur dont le script n'a pas
   chargé peut toujours réserver.
   ========================================================================== */

.occupants { position: relative; flex: 1 1 190px; min-width: 0; }

/* Sans script, les deux champs natifs portent déjà leurs propres
   intitulés ; celui-ci ferait doublon. Sélecteur renforcé pour passer
   devant `.barre-recherche label`. */
.barre-recherche .occupants-etiquette { display: none; }
.barre-recherche .occupants--js .occupants-etiquette { display: flex; margin-bottom: .3rem; }

/* Le repli sans script : les deux champs natifs, l'un sous l'autre. */
.occupants-natif { display: flex; flex-direction: column; gap: .5rem; }
.occupants--js .occupants-natif {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.occupants-declencheur {
  display: none;
  width: 100%;
  text-align: left;
  padding: .5rem .75rem;
  font: inherit;
  font-size: .9rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--transition);
}
.occupants--js .occupants-declencheur { display: flex; align-items: center; gap: .5rem; }
.occupants-declencheur:hover,
.occupants-declencheur[aria-expanded="true"] { border-color: var(--soleil); }
.occupants-declencheur .bi-chevron-down { margin-left: auto; font-size: .75rem; }

.occupants-panneau {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + .4rem);
  left: 0;
  min-width: 270px;
  padding: .9rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  box-shadow: var(--ombre-lg);
}
.occupants--js .occupants-panneau.ouvert { display: block; }

/* À droite de l'écran, le panneau sortirait du cadre. */
@media (min-width: 641px) {
  .occupants-panneau.vers-gauche { left: auto; right: 0; }
}

.occupants-ligne {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem 0;
}
.occupants-ligne + .occupants-ligne { border-top: 1px solid var(--bordure); }
.occupants-ligne .intitule { flex: 1; font-size: .88rem; }
.occupants-ligne .intitule small {
  display: block;
  color: var(--texte-faible);
  font-size: .74rem;
}

.occupants-compteur { display: flex; align-items: center; gap: .6rem; }
.occupants-compteur button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--soleil);
  background: var(--surface);
  border: 1px solid var(--soleil);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition);
}
.occupants-compteur button:hover:not(:disabled) {
  color: #fff;
  background: var(--soleil);
}
.occupants-compteur button:disabled {
  color: var(--texte-faible);
  border-color: var(--bordure);
  cursor: not-allowed;
}
.occupants-compteur .valeur {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.occupants-ages { margin-top: .5rem; }
.occupants-ages:empty { margin-top: 0; }
.occupants-age {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .45rem;
}
.occupants-age label { flex: 1; font-size: .82rem; text-transform: none; letter-spacing: 0; }
.occupants-age select { flex: 0 0 auto; width: auto; padding: .3rem .5rem; font-size: .85rem; }

.occupants-note {
  margin: .6rem 0 0;
  font-size: .76rem;
  color: var(--texte-faible);
}

/* ==========================================================================
   Emplacements photo
   ========================================================================== */

.visuel-cadre {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.visuel-cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Crédit d'une photo sous licence libre. Discret, mais toujours lisible :
   c'est la contrepartie de la licence. */
.visuel-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
  padding: .2rem .5rem;
  font-size: .64rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .92);
  background: rgba(11, 46, 35, .62);
  border-radius: var(--r-xs) 0 0 0;
  backdrop-filter: blur(3px);
}
.visuel-credit a { color: inherit; text-decoration: none; }
.visuel-credit a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Carte de situation
   ========================================================================== */

.cadre-carte {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
  background: var(--sable);
}

.cadre-carte iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 4.5rem 0; }
.section-creme { background: var(--creme-fonce); }
.section-blanche { background: var(--surface); }
/* Bandeau d'appel : c'est ici que l'orange prend toute la largeur. */
.section-sombre {
  background: linear-gradient(135deg, #A8430F 0%, #C9551C 55%, #E8702F 100%);
  color: #fff;
}
.section-sombre h2, .section-sombre h3 { color: #fff; }
.section-sombre p { color: rgba(255, 255, 255, .88); }
.section-sombre .sur-titre { color: var(--or); }

.section-entete { text-align: center; max-width: 620px; margin: 0 auto 3rem; }
.section-entete h2 { margin-bottom: .8rem; }
.section-entete p { color: var(--texte-doux); font-size: 1rem; }

/* ==========================================================================
   Cartes de contenu
   ========================================================================== */

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
}

.carte-contenu {
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--ombre-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.carte-contenu:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }

.carte-visuel {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--sable), var(--sable-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soleil);
  font-size: 2rem;
  position: relative;
  overflow: hidden;
}
.carte-visuel img { width: 100%; height: 100%; object-fit: cover; }

.carte-contenu-corps { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.carte-contenu-corps h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.carte-contenu-corps p { color: var(--texte-doux); font-size: .9rem; flex: 1; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--soleil);
  margin-top: 1rem;
}
.lien-fleche .bi { transition: transform var(--transition); }
.lien-fleche:hover .bi { transform: translateX(4px); }

/* ==========================================================================
   Cartes de chambre
   ========================================================================== */

.carte-chambre { display: flex; flex-direction: column; height: 100%; }

.carte-chambre .equipements {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  font-size: .78rem;
  color: var(--texte-doux);
  margin-top: .75rem;
}
.carte-chambre .equipements span { display: inline-flex; align-items: center; gap: .3rem; }
.carte-chambre .equipements .bi { color: var(--soleil-vif); }

.prix-a-partir {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--vert-profond);
  line-height: 1;
}
.prix-a-partir small {
  font-family: var(--police-texte);
  font-size: .72rem;
  font-weight: 400;
  color: var(--texte-faible);
  display: block;
  margin-top: .2rem;
}

/* ==========================================================================
   Valeurs et engagements
   ========================================================================== */

.grille-valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.valeur { text-align: center; }
.valeur .rond {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--soleil);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1.1rem;
}
.valeur h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.valeur p { font-size: .88rem; color: var(--texte-doux); }

.engagement { display: flex; gap: 1.1rem; margin-bottom: 1.75rem; }
.engagement .rond {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--soleil);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.engagement h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.engagement p { font-size: .88rem; color: var(--texte-doux); margin: 0; }

/* ==========================================================================
   Galerie
   ========================================================================== */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.galerie figure {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sable);
  position: relative;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.galerie figure:hover img { transform: scale(1.05); }

.galerie figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: .8rem;
  background: linear-gradient(transparent, rgba(11, 46, 35, .85));
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
}

/* Emplacement d'image en attente des photos de l'établissement. */
.visuel-attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 100%;
  color: var(--soleil);
  background: repeating-linear-gradient(45deg, #F5E8CC, #F5E8CC 12px, #EBD9B4 12px, #EBD9B4 24px);
  font-size: .78rem;
  text-align: center;
  padding: 1rem;
}
.visuel-attente .bi { font-size: 1.8rem; opacity: .5; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.pied-site {
  background: var(--vert-profond);
  color: rgba(244, 247, 245, .78);
  padding: 3.5rem 0 0;
  font-size: .88rem;
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.pied-site h4 {
  color: #fff;
  font-family: var(--police-texte);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.pied-site a { color: rgba(244, 247, 245, .78); display: block; padding: .28rem 0; }
.pied-site a:hover { color: var(--or); }

.pied-contact { display: flex; gap: .65rem; padding: .3rem 0; align-items: flex-start; }
.pied-contact .bi { color: var(--or); margin-top: .2rem; flex-shrink: 0; }

.pied-reseaux-titre {
  margin-top: 1.25rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, .55);
}
.reseaux { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.reseaux a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.reseaux a:hover { background: var(--soleil); color: var(--vert-profond); }

.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(244, 247, 245, .55);
}
.pied-bas a { display: inline; padding: 0; }

/* ==========================================================================
   Tunnel de réservation
   ========================================================================== */

.etapes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.etape { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--texte-faible); }
.etape .numero {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--bordure);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .82rem;
  flex-shrink: 0;
}
.etape.active { color: var(--vert-profond); font-weight: 600; }
.etape.active .numero { background: var(--soleil); border-color: var(--soleil); color: #fff; }
.etape.faite .numero { background: var(--succes); border-color: var(--succes); color: #fff; }
.etape-lien { width: 36px; height: 1.5px; background: var(--bordure); }

.recapitulatif { position: sticky; top: 100px; }

.ligne-prix {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  font-size: .88rem;
}
.ligne-prix .libelle { color: var(--texte-doux); }
.ligne-prix.total {
  border-top: 1px solid var(--bordure);
  margin-top: .6rem;
  padding-top: .9rem;
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vert-profond);
}

.resultat-categorie {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--bordure-douce);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 1.25rem;
  align-items: center;
}
.resultat-categorie.complet { opacity: .6; }
.resultat-visuel { aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--sable); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .nav-site { display: none; }
  .nav-site.ouverte {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    padding: .75rem;
    box-shadow: var(--ombre-lg);
  }
  .nav-site.ouverte a { padding: .8rem 1rem; }
  .bouton-menu-site { display: block; }
  .entete-site { position: relative; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .barre-recherche .champ { flex-basis: 45%; }
  .barre-recherche.flottante { margin-top: -24px; }
  .resultat-categorie { grid-template-columns: 1fr; }
  .recapitulatif { position: static; }
}

@media (max-width: 640px) {
  .contenu-large, .contenu-etroit { padding: 0 16px; }
  .section { padding: 3rem 0; }
  .hero { min-height: 440px; padding: 3.5rem 0; }
  /* La barre est en flex : `grid-template-columns` n'y faisait rien. */
  .barre-recherche { flex-direction: column; align-items: stretch; }
  .barre-recherche .champ, .occupants { flex-basis: auto; }
  .occupants-panneau { min-width: 0; width: 100%; }
  .pied-grille { grid-template-columns: 1fr; gap: 1.75rem; }
  .barre-utile .contenu-large { justify-content: center; gap: 1rem; }
}

/* Options proposées au moment de réserver : navette, acompte. */
.option-sejour {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .75rem .9rem;
  margin-bottom: .6rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  background: var(--creme);
  transition: all var(--transition);
}
.option-sejour:hover { border-color: var(--bleu); }
.option-sejour:has(input:checked) {
  border-color: var(--bleu);
  background: #EEF4FC;
}
.option-sejour label { font-size: .88rem; cursor: pointer; }
.option-sejour input { margin-top: .2rem; flex-shrink: 0; }

/* Le libellé d'une option porte quatre informations : ce que c'est, ce que
   ça coûte pour CE séjour, une précision, et la règle de gratuité. */
.option-sejour label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.option-nom { font-weight: 600; }
.option-prix { font-weight: 600; color: var(--soleil); white-space: nowrap; }
.option-prix.offerte { color: var(--vert-moyen); }
.option-detail,
.option-condition {
  flex-basis: 100%;
  font-size: .8rem;
  color: var(--texte-doux);
}
.option-condition { color: var(--vert-moyen); }
.option-condition .bi { color: inherit; }

/* ==========================================================================
   Régler son acompte en ligne
   ========================================================================== */

.cadre-paiement {
  margin: 1.75rem 0;
  padding: 1.35rem 1.5rem;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--vert-moyen);
  border-radius: var(--r-md);
}

.paiement-entete {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}
.paiement-entete .bi { font-size: 1.6rem; color: var(--vert-moyen); }
.paiement-montant {
  font-family: var(--police-titre, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vert-profond);
  line-height: 1.2;
}

.paiement-reference {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  padding: .6rem .85rem;
  margin-bottom: 1rem;
  font-size: .82rem;
  background: var(--creme);
  border-radius: var(--r-sm);
  color: var(--texte-doux);
}
.paiement-reference strong {
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--texte);
}

.paiement-moyens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .7rem;
}
.paiement-moyens > * { min-width: 0; }

.paiement-moyen {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  font-weight: 600;
  font-size: .92rem;
  color: #fff;
  text-decoration: none;
  background: var(--vert-profond);
  border-radius: var(--r-sm);
  transition: background var(--transition);
}
.paiement-moyen:hover { background: var(--vert-nuit); color: #fff; }
.paiement-moyen .bi { font-size: 1.1rem; }
.paiement-moyen .petite { margin-left: auto; font-size: .78rem; opacity: .7; }

.paiement-consigne {
  margin: .9rem 0 0;
  font-size: .86rem;
  color: var(--texte-doux);
}
.paiement-note {
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--texte-faible);
}

/* ==========================================================================
   Bandeau d'accès — proximité de l'aéroport et de la mer
   ========================================================================== */

.bandeau-acces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-sm);
}
.bandeau-acces > * { min-width: 0; }

.acces-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
}
.acces-item .bi {
  font-size: 1.6rem;
  color: var(--soleil);
  flex-shrink: 0;
}
.acces-item strong { display: block; font-size: .95rem; }
.acces-item span { font-size: .82rem; color: var(--texte-doux); }

/* ==========================================================================
   Retour de paiement
   ========================================================================== */

/* La pastille qui porte l'icône d'état. Elle existait dans le gabarit
   depuis l'origine, sans une ligne de style : l'icône s'affichait à la
   taille du texte courant, au milieu d'une page qui annonce un paiement
   abouti ou perdu. */
.icone-retour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  font-size: 2rem;
  background: var(--sable);
  color: var(--vert-profond);
}
.icone-retour.attente { background: var(--attente-fond); color: #B45309; }
.icone-retour.erreur { background: var(--erreur-fond); color: var(--erreur); }

/* L'acompte : la seule ligne du bloc qui fait baisser le prix. Encadré
   et teinté pour ne pas passer pour une option de plus. */
.option-sejour.option-mise-en-avant {
  border: 2px solid var(--vert-moyen);
  background: var(--sable);
  border-radius: var(--r-sm);
  padding: .8rem .9rem;
  margin-bottom: 1rem;
}
.option-sejour.option-mise-en-avant .option-nom strong {
  color: var(--vert-profond);
  font-weight: 700;
}

/* ==========================================================================
   Bouton WhatsApp flottant
   ========================================================================== */

/* Le vert de WhatsApp, et non celui de la marque : c'est à sa couleur
   qu'on reconnaît le bouton avant même d'en lire l'icône. */
.bouton-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 1.75rem;
  box-shadow: var(--ombre-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bouton-whatsapp:hover,
.bouton-whatsapp:focus-visible {
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 14px 34px rgba(15, 61, 46, .22);
}
.bouton-whatsapp:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bouton-whatsapp { transition: none; }
  .bouton-whatsapp:hover { transform: none; }
}

/* ==========================================================================
   Choix de la pension, sur la page de réservation
   ========================================================================== */

.choix-pension {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
}
.choix-pension > * { min-width: 0; }
.choix-pension-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 1rem;
  border: 2px solid var(--bordure);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--texte);
  transition: border-color var(--transition), background var(--transition);
}
.choix-pension-item:hover { border-color: var(--vert-moyen); color: var(--texte); }
.choix-pension-item.choisi {
  border-color: var(--vert-profond);
  background: var(--sable);
}
.choix-pension-nom { font-weight: 600; }
.choix-pension-prix {
  margin-top: .35rem;
  font-family: var(--police-titre);
  font-size: 1.35rem;
  color: var(--vert-profond);
  font-variant-numeric: tabular-nums;
}
.choix-pension-detail { font-size: .78rem; color: var(--texte-faible); }

/* L'offre d'acompte : ce qu'elle fait gagner se lit avant le bouton. */
.cadre-paiement-offre { border: 2px solid var(--vert-moyen); }
.paiement-comparaison {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  margin: .6rem 0 .2rem;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.paiement-comparaison s { color: var(--texte-faible); }
.paiement-comparaison strong { color: var(--vert-profond); }

/* « ou » entre deux moyens de paiement : un mot centré entre deux filets. */
.separateur-ou {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .25rem 0 1rem;
  color: var(--texte-faible);
  font-size: .85rem;
  text-transform: lowercase;
}
.separateur-ou::before,
.separateur-ou::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--bordure);
}

/* La catégorie en vitrine, quand l'hôtel n'en vend qu'une. */
.vitrine-categorie {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.vitrine-categorie > * { min-width: 0; }
.vitrine-visuel {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--creme-fonce);
}
.vitrine-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine-texte h2 { margin-bottom: .4rem; }
.accroche-vitrine {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  color: var(--vert-profond);
  margin-bottom: .75rem;
}
.vitrine-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  list-style: none;
  padding: 1rem 0;
  margin: 1rem 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
}
.vitrine-chiffres li { display: flex; flex-direction: column; }
.vitrine-chiffres strong {
  font-family: var(--police-titre);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--vert-profond);
  font-variant-numeric: tabular-nums;
}
.vitrine-chiffres span { font-size: .78rem; color: var(--texte-faible); margin-top: .25rem; }
@media (max-width: 991px) {
  .vitrine-categorie { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* Les chambres, une à une. */
.grille-chambres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.fiche-chambre {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--ombre-md);
}
.fiche-chambre-visuel {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--creme-fonce);
}
.fiche-chambre-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fiche-chambre-visuel .visuel-attente { height: 100%; }
.fiche-chambre-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--vert-profond);
  font-size: .75rem;
  font-weight: 600;
}
.fiche-chambre-vignettes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px 3px 0;
}
.fiche-chambre-vignettes > * { min-width: 0; }
.fiche-chambre-vignettes a { display: block; aspect-ratio: 1; overflow: hidden; }
.fiche-chambre-vignettes img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.fiche-chambre-vignettes a:hover img { opacity: .8; }
.fiche-chambre-corps {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1.2rem 1.25rem;
  flex: 1;
}
.fiche-chambre-corps h3 { margin: 0; font-size: 1.3rem; }
.fiche-chambre-meta { margin: 0; font-size: .8rem; color: var(--texte-faible); }
.fiche-chambre-texte { margin: 0; font-size: .92rem; color: var(--texte-doux); }
.fiche-chambre-corps .btn { align-self: flex-start; margin-top: auto; }
.fiche-chambre-corps .mt-auto { margin-top: auto; width: 100%; }
.fiche-chambre-corps .mt-auto .btn { align-self: stretch; margin-top: 0; }
.fiche-chambre-prix {
  margin: .25rem 0 .75rem;
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--vert-profond);
  line-height: 1.1;
}
.fiche-chambre-prix small {
  display: block;
  font-family: var(--police-texte);
  font-size: .72rem;
  font-weight: 400;
  color: var(--texte-faible);
}

/* Le choix de la chambre, sous la catégorie ouverte dans les résultats. */
.choix-chambres {
  margin: -.25rem 0 2.5rem;
  padding: 1.75rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--creme-fonce);
  scroll-margin-top: 90px;
}
@media (max-width: 575px) {
  .choix-chambres { padding: 1.25rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fiche-chambre-vignettes img { transition: none; }
}

/* Le plat du jour : la photo, puis ce qu'on sert et à quel prix. */
.plat-du-jour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--ombre-md);
}
.plat-du-jour > * { min-width: 0; }
.plat-du-jour:not(:has(.plat-du-jour-photo)) { grid-template-columns: minmax(0, 1fr); }
.plat-du-jour-photo { display: block; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.plat-du-jour-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plat-du-jour-texte h2 { margin: .25rem 0 .5rem; }
.plat-du-jour-prix {
  font-family: var(--police-titre);
  font-size: 1.6rem;
  color: var(--vert-profond);
  margin: 0 0 1rem;
}
@media (max-width: 767px) {
  .plat-du-jour { grid-template-columns: minmax(0, 1fr); }
}

/* Les vidéos d'une page — séminaires et team building. */
.grille-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1.75rem;
}
.video-carte { margin: 0; }
.video-carte video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: #0b1a13;
  object-fit: contain;
  box-shadow: var(--ombre-md);
}
.video-carte figcaption {
  margin-top: .6rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--texte);
}

/* Menu et cocktails du jour, l'un sous l'autre. */
.du-jour { display: flex; flex-direction: column; gap: 1.5rem; }

/* Le menu du jour : une carte de restaurant, rubrique par rubrique. */
.menu-du-jour {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 2rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--ombre-md);
}
.menu-du-jour-entete { text-align: center; }
.menu-du-jour-entete h2 { margin: .25rem 0 0; }
.menu-du-jour-rubriques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.5rem 2.5rem;
}
.menu-du-jour-rubriques > * { min-width: 0; }
.menu-du-jour-rubriques h3 {
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--soleil);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soleil);
}
.menu-du-jour-rubriques ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.menu-du-jour-rubriques li { display: flex; gap: .75rem; align-items: flex-start; }
.menu-du-jour-ligne { flex: 1; min-width: 0; }
.menu-du-jour-nom {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--vert-profond);
}
.menu-du-jour-nom > span:first-child { flex: 0 1 auto; min-width: 0; }
/* Les points de conduite entre le plat et son prix, comme sur une ardoise. */
.menu-du-jour-points {
  flex: 1 1 1rem;
  min-width: .75rem;
  border-bottom: 1px dotted var(--texte-faible);
  transform: translateY(-.3em);
}
.menu-du-jour-prix {
  white-space: nowrap;
  font-family: var(--police-texte);
  font-size: .92rem;
  color: var(--texte);
}
.menu-du-jour-ligne p { margin: .2rem 0 0; font-size: .85rem; color: var(--texte-doux); font-style: italic; }
.menu-du-jour-vignette { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.menu-du-jour-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 575px) {
  .menu-du-jour { padding: 1.25rem; }
}

/* Les menus du restaurant, en images. */
.grille-menus-public {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.grille-menus-public figure { margin: 0; }
.grille-menus-public img {
  width: 100%;
  border-radius: var(--r-sm);
  box-shadow: var(--ombre-md);
  display: block;
}
.grille-menus-public figcaption { margin-top: .5rem; font-weight: 600; text-align: center; }


/* ==========================================================================
   Formules Day Use
   ========================================================================== */

.grille-formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
}
.formule-day-use {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.75rem;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-md);
}
.formule-entete h3 { margin: .15rem 0 .5rem; font-size: 1.75rem; }
.formule-etiquette {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soleil);
}
.formule-pastilles { display: flex; flex-wrap: wrap; gap: .4rem; }
.formule-prix { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; }
.formule-prix-case {
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  background: var(--soleil);
  color: #fff;
  text-align: center;
}
.formule-prix-case span {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .9;
}
.formule-prix-case strong {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(1.2rem, 4.2vw, 1.6rem);
  line-height: 1.15;
}
@media (max-width: 575px) {
  .formule-day-use { padding: 1.25rem; }
  .formule-prix-case { padding: .7rem .5rem; }
}
/* Une formule qui comprend la visite du parc n'a pas de case « parc ». */
form:has(.choix-formule input[data-parc-compris]:checked) .case-parc { display: none; }
.formule-prix-case small { display: block; font-size: .75rem; opacity: .9; }
.formule-inclusions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: .5rem .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.formule-inclusions li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  color: var(--texte);
}
.formule-inclusions .bi {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sable);
  color: var(--soleil);
  font-size: .95rem;
}
.formule-texte { margin: 0; color: var(--texte-doux); font-size: .95rem; }
/* Ces grilles ne portent pas le préfixe « grille- » : leurs enfants
   déclarent eux-mêmes qu'ils peuvent rétrécir, sinon la page déborde. */
.formule-prix > *,
.formule-inclusions > *,
.choix-formules > * { min-width: 0; }
.formule-day-use .btn { align-self: flex-start; }

/* Le choix de la formule, dans le formulaire. */
fieldset.champ { border: 0; padding: 0; min-width: 0; }
.choix-formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.choix-formules .choix-formule {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 0;
  padding: .85rem 1rem;
  border: 1.5px solid var(--bordure-douce);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--texte);
  font-size: .95rem;
  cursor: pointer;
}
.choix-formules .choix-formule:has(input:checked) {
  border-color: var(--soleil);
  background: #FFF8F2;
}
.choix-formules .choix-formule input { margin-top: .3rem; accent-color: var(--soleil); }
.choix-formules .choix-formule strong { display: block; }
.choix-formules .choix-formule small { display: block; color: var(--texte-doux); font-size: .8rem; }