/* blocks.css — build auto. NE PAS éditer. */

/* ===== activites-cards ===== */
/**
 * ============================================================================
 * ACTIVITES-CARDS — "La beauté des Alpilles" : cartes portrait à fond photo.
 * Défaut = titre blanc en bas. Survol = voile sombre + fin liseré blanc +
 * titre + texte + bouton doré (frame v4). Variables du design system.
 * ============================================================================
 */
.activites-cards {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Intro alignée à gauche (frame v4). */
.activites-cards__intro {
  text-align: left;
  margin: 0 0 var(--space-5);
}

.activites-cards__title {
  color: inherit;
  margin: 0 0 var(--space-1);
}

.activites-cards__subtitle {
  color: inherit;
  margin: 0;
}

.activites-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* Carte = photo portrait cliquable/survolable. */
.activites-cards__card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  outline-offset: 3px;
}

.activites-cards__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titre par défaut : blanc, en bas, sur un léger dégradé pour la lisibilité. */
.activites-cards__label-default {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  color: var(--color-blanc);
  text-transform: uppercase;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-noir) 60%, transparent), transparent);
  transition: opacity 0.3s ease;
}

/* Voile de survol : sombre, avec fin liseré blanc en retrait. */
.activites-cards__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: var(--space-2);
  background-color: color-mix(in srgb, var(--color-noir) 62%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.activites-cards__frame {
  flex: 1;
  border: 1px solid color-mix(in srgb, var(--color-blanc) 70%, transparent);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-blanc);
}

.activites-cards__frame .activites-cards__label {
  margin: 0;
  color: var(--color-blanc);
  text-transform: uppercase;
}

.activites-cards__texte {
  margin: 0;
  color: var(--color-blanc);
}

.activites-cards__bouton {
  align-self: flex-start;
  text-decoration: none;
  color: var(--color-blanc);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Révélation au survol / focus clavier : voile visible, titre par défaut masqué. */
.activites-cards__card:hover .activites-cards__overlay,
.activites-cards__card:focus-within .activites-cards__overlay {
  opacity: 1;
}

.activites-cards__card:hover .activites-cards__label-default,
.activites-cards__card:focus-within .activites-cards__label-default {
  opacity: 0;
}

@media (max-width: 1023px) {
  .activites-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .activites-cards__grid {
    grid-template-columns: 1fr;
  }
}

/* Appareils tactiles (pas de survol) : le voile reste visible en permanence
   pour rendre texte et bouton accessibles au doigt. */
@media (hover: none) {
  .activites-cards__overlay {
    opacity: 1;
  }
  .activites-cards__label-default {
    opacity: 0;
  }
}

/* ===== bouton-pill-cta ===== */
/**
 * ============================================================================
 * BOUTON-PILL-CTA — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * ============================================================================
 */
.bouton-pill-cta {
  display: flex;
  justify-content: center;
  padding: var(--space-4) var(--space-2);
}

/* Bande de fond (ex. beige) : le bouton se fond dans la bande des points forts
   juste au-dessus (même crème), sans espace blanc intercalaire. */
.bouton-pill-cta.bg-pierre-clair,
.bouton-pill-cta.bg-blanc,
.bouton-pill-cta.bg-gris-section {
  padding-top: 0;
  padding-bottom: var(--space-6);
}

.bouton-pill-cta__btn {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-blanc);
}

/* ===== confort-carrousel ===== */
/**
 * ============================================================================
 * CONFORT-CARROUSEL — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * ============================================================================
 */
.confort-carrousel {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.confort-carrousel__title {
  text-align: left;
  margin: 0 0 var(--space-5);
}

/* Carrousel : piste défilante entre 2 flèches. */
.confort-carrousel__carousel {
  position: relative;
}

.confort-carrousel__track {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* espace haut/bas pour absorber le décalage en quinconce des cartes. */
  padding: var(--space-5) 0;
  scrollbar-width: none;
}

.confort-carrousel__track::-webkit-scrollbar {
  display: none;
}

/* ~3,5 cartes visibles (la 4e est coupée → invite au défilement, comme la
   maquette) ; les suivantes défilent. */
.confort-carrousel__card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 2.5 * var(--space-3)) / 3.5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Quinconce (frame v4) : cartes IMPAIRES = texte AU-DESSUS de l'image ;
   cartes PAIRES = image au-dessus, texte dessous. Le décalage vertical des
   images naît naturellement de la hauteur du bloc légende (pas de marge). */
.confort-carrousel__card--bas {
  flex-direction: column;
}

.confort-carrousel__card--haut {
  flex-direction: column-reverse;
}

.confort-carrousel__image {
  width: 100%;
  aspect-ratio: 9 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.confort-carrousel__card-legende {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Flèches de navigation : fins chevrons sans pastille (frame v4). */
.confort-carrousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-noir);
  font-size: 3.5rem;
  line-height: 1;
  cursor: pointer;
}

.confort-carrousel__arrow--prev {
  left: calc(-1 * var(--space-5));
}

.confort-carrousel__arrow--next {
  right: calc(-1 * var(--space-5));
}

.confort-carrousel__arrow[hidden] {
  display: none;
}

.confort-carrousel__card-titre {
  margin: 0;
  font-weight: var(--font-weight-h4);
}

.confort-carrousel__card-texte {
  margin: 0;
  color: var(--color-gris-texte-secondaire);
}

.confort-carrousel__card-lien {
  color: var(--color-noir);
  text-decoration: underline;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 1023px) {
  .confort-carrousel__card {
    flex-basis: calc((100% - var(--space-3)) / 2);
  }
}

@media (max-width: 767px) {
  .confort-carrousel__card {
    flex-basis: 82%;
  }
  .confort-carrousel__card--haut {
    margin-top: var(--space-4);
  }
}

/* ---- Mobile ---------------------------------------------------------------
   En desktop, les flèches sont posées HORS du carrousel (décalages négatifs) :
   il y a la marge pour. Sur un téléphone cette marge n'existe pas, et la flèche
   « suivant » se retrouvait à 24px HORS de l'écran. Étant en position absolue
   et hors de tout conteneur à débordement masqué, elle élargissait le DOCUMENT
   ENTIER — ce qui décalait l'en-tête et le bandeau vers la gauche et donnait
   l'impression que le header dépassait. On les ramène à l'intérieur. */
@media (max-width: 767px) {
  .confort-carrousel__arrow--prev {
    left: 0;
  }

  .confort-carrousel__arrow--next {
    right: 0;
  }

  .confort-carrousel__arrow {
    font-size: 2.5rem;
  }
}

/* ===== contact-form ===== */
/**
 * ============================================================================
 * CONTACT-FORM — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * Habillage éditorial uniquement : le formulaire réel est un module
 * applicatif branché dans .contact-form__module.
 * ============================================================================
 */
.contact-form {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.contact-form__title {
  margin: 0 0 var(--space-2);
}

.contact-form__intro {
  max-width: 60rem;
  margin: 0 0 var(--space-5);
  color: var(--color-gris-texte-secondaire);
}

/* Formulaire large, aligné à gauche (frame v4). */
.contact-form__form {
  max-width: 72rem;
  margin: 0;
}

/* Bouton d'envoi : doré, aligné à gauche (~largeur d'une colonne), pas pleine
   largeur (frame v4). */
.contact-form__bouton {
  display: block;
  width: 100%;
  max-width: 30rem;
  text-align: center;
  text-decoration: none;
  color: var(--color-blanc);
  border: none;
  cursor: pointer;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-form__bouton:disabled { opacity: 0.6; cursor: default; }

/* ===== disponibilites ===== */
/**
 * ============================================================================
 * DISPONIBILITES — Module de réservation FONCTIONNEL (calendrier + formulaire),
 * fidèle à la maquette Figma v4. Aucune couleur/police/taille en dur : tout
 * référence les variables du design system. Interactions : reservation.js.
 * ============================================================================
 */
.disponibilites {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.disponibilites__title {
  text-align: center;
  margin: 0 0 var(--space-2);
}

.disponibilites__texte-aide {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--space-4);
  color: var(--color-gris-texte-secondaire);
}

.disponibilites__module {
  color: inherit;
}

/* --- Grille 2 colonnes : calendrier | formulaire (frame v4). --- */
.disponibilites__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
}

.disponibilites__selecteur-mas {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

/* Sélecteur de mas : encadré pleine largeur avec chevron à droite (frame v4). */
.disponibilites__select {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-small);
  width: 100%;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-blanc);
  color: var(--color-noir);
  cursor: pointer;
  /* chevron dessiné en CSS (pas d'image externe) */
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-noir) 50%),
    linear-gradient(135deg, var(--color-noir) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% - 2px),
    calc(100% - 1rem) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* --- Calendrier --- */
.resa-calendar {
  background-color: var(--color-blanc);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.resa-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.resa-calendar__title {
  margin: 0;
  text-align: center;
  flex: 1;
}

.resa-calendar__nav {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-taupe);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.resa-calendar__nav:hover { background-color: var(--color-gris-section); }
.resa-calendar__nav:disabled { opacity: 0.3; cursor: default; }

.resa-calendar__weekdays,
.resa-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.resa-calendar__weekdays {
  margin-bottom: 0.25rem;
  color: var(--color-gris-texte-secondaire);
  text-align: center;
}

.resa-calendar__day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-small);
  color: var(--color-noir);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.resa-calendar__day--empty { visibility: hidden; cursor: default; }

.resa-calendar__day--past {
  color: var(--color-gris-texte-secondaire);
  opacity: 0.4;
  cursor: default;
}

/* Indisponible : réservation confirmée / date bloquée — carré taupe plein. */
.resa-calendar__day--indispo {
  background-color: var(--color-statut-reserve);
  color: var(--color-blanc);
  cursor: default;
}

/* Demandée : réservation en attente de validation — carré au liseré doré,
   fond translucide, mais toujours sélectionnable par un autre visiteur. */
.resa-calendar__day--demandee {
  box-shadow: inset 0 0 0 2px var(--color-statut-reserve);
  background-color: color-mix(in srgb, var(--color-statut-reserve) 20%, transparent);
}

/* Survol d'une date encore libre.
   Le :not() n'est pas décoratif, il corrige un défaut de spécificité : une
   classe + une pseudo-classe (0,2,0) l'emportent sur la seule classe
   `--selected` (0,1,0), quel que soit l'ordre des règles. Comme le curseur
   reste sur la date qu'on vient de cliquer, le fond retombait en gris clair
   pendant que `color: blanc` (hérité de --selected, que ce survol ne
   redéfinit pas) restait actif : chiffre blanc sur fond blanc cassé, case
   d'apparence non sélectionnée. Le visiteur en concluait que le calendrier
   ne réagissait pas — alors que sa date était bien enregistrée. */
.resa-calendar__day--libre:hover:not(.resa-calendar__day--selected):not(.resa-calendar__day--in-range) {
  background-color: var(--color-gris-section);
}

/* Sélection de séjour (du → au). */
.resa-calendar__day--selected {
  background-color: var(--color-taupe);
  color: var(--color-blanc);
}

.resa-calendar__day--in-range { background-color: var(--color-pierre-clair); }

/* --- Légende + horaires --- */
.disponibilites__legende {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.disponibilites__legende-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.disponibilites__puce {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  display: inline-block;
}

.disponibilites__puce--libre { background-color: var(--color-noir); }
.disponibilites__puce--indisponible { background-color: var(--color-statut-reserve); }
.disponibilites__puce--demande {
  background-color: color-mix(in srgb, var(--color-statut-reserve) 20%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-statut-reserve);
}

.disponibilites__horaires {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-1);
  color: var(--color-gris-texte-secondaire);
}

/* --- Formulaire --- */
.resa-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.resa-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--space-2);
}

.resa-form__field label {
  color: var(--color-gris-texte-secondaire);
}

.resa-form__input {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-small);
  padding: var(--space-1) var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-blanc);
  color: var(--color-noir);
  width: 100%;
}

/* Champs DU / AU : vrai sélecteur de date (date picker natif), avec l'icône
   calendrier teintée en doré comme la maquette. */
.resa-form__input--date {
  cursor: pointer;
  accent-color: var(--color-dore-cta);
}

.resa-form__input--date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
  /* teinte l'icône native en doré (--color-dore-cta) */
  filter: invert(72%) sepia(28%) saturate(716%) hue-rotate(348deg) brightness(95%) contrast(88%);
}

.resa-form__input:focus {
  outline: none;
  border-color: var(--color-taupe);
}

.resa-form__input--error { border-color: var(--color-statut-reserve); }

.resa-form__textarea { resize: vertical; min-height: 5rem; }

/* Honeypot anti-spam : hors écran, jamais visible ni focusable au clavier normal. */
.resa-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.resa-form__hint {
  color: var(--color-gris-texte-secondaire);
  opacity: 0.8;
}

.disponibilites__acompte {
  max-width: 36rem;
  margin: 0 0 var(--space-3);
  color: var(--color-gris-texte-secondaire);
}

.disponibilites__bouton {
  display: inline-flex;
  text-decoration: none;
  color: var(--color-blanc);
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.disponibilites__bouton:disabled { opacity: 0.6; cursor: default; }

.resa-form__message {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

.resa-form__message--ok {
  background-color: var(--color-gris-section);
  color: var(--color-olivier, #4a5a3a);
}

.resa-form__message--error {
  background-color: var(--color-gris-section);
  color: var(--color-statut-reserve);
}

/* --- Responsive : empilement --- */
@media (max-width: 900px) {
  .disponibilites__grille,
  .resa-form__row {
    grid-template-columns: 1fr;
  }
}

/* ---- Consentements RGPD (CDC §4.4) ---------------------------------------
   Deux cases obligatoires sous le formulaire. Volontairement discrètes : la
   maquette ne les prévoit pas, elles ne doivent pas concurrencer le bouton
   d'envoi. Alignement en grille pour que le texte qui passe à la ligne reste
   aligné sur lui-même et non sous la case. */
.resa-form__consentements {
  margin: var(--space-3) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.resa-form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  cursor: pointer;
  color: var(--color-gris-texte-secondaire);
}

.resa-form__check input[type="checkbox"] {
  width: 1em;
  height: 1em;
  margin: 0.15em 0 0;
  accent-color: var(--color-taupe);
  flex: none;
}

.resa-form__check a {
  color: inherit;
  text-decoration: underline;
}

.resa-form__check a:hover { color: var(--color-noir); }

/* Case obligatoire non cochée après tentative d'envoi. */
.resa-form__check--error { color: var(--color-noir); }
.resa-form__check--error input[type="checkbox"] { outline: 2px solid #B00020; outline-offset: 2px; }

/* ===== emblem-logo ===== */
/**
 * ============================================================================
 * EMBLEM-LOGO — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * ============================================================================
 */
.emblem-logo {
  display: flex;
  justify-content: center;
  padding: var(--space-5) var(--space-2);
}

.emblem-logo__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

/* L'image EST le badge complet (cercle + maison + nom) : on l'affiche en grand. */
.emblem-logo__image {
  width: 12rem;
  height: auto;
  object-fit: contain;
}

.emblem-logo__soustexte {
  margin: 0;
  color: var(--color-gris-texte-secondaire);
}

/* ===== fiche-technique ===== */
/**
 * ============================================================================
 * FICHE-TECHNIQUE — carte blanche : pictos (icône + libellé) à gauche, blocs
 * éditoriaux à droite, bouton RÉSERVEZ centré (frame v4). Variables du design
 * system uniquement.
 * ============================================================================
 */
.fiche-technique {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.fiche-technique__carte {
  position: relative;
  background-color: var(--color-blanc);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  /* espace en haut pour l'emblème rond intercalé (à cheval sur le bord). */
  padding-top: 7rem;
  margin-top: 6rem;
}

/* Emblème rond intercalé : à cheval sur le bord supérieur de la carte. */
.fiche-technique__emblem {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

/* Logo complet (arche + maison + nom) tel quel, + localité dessous. */
.fiche-technique__emblem-img {
  width: 12rem;
  height: auto;
  display: block;
}

.fiche-technique__emblem-loc {
  margin-top: 0.15rem;
  font-family: var(--font-family-primary);
  font-size: 0.8rem;
  color: var(--color-gris-texte-secondaire);
  white-space: nowrap;
}

/* Colonne gauche : intro éditoriale AU-DESSUS de la grille de pictos. */
.fiche-technique__col-pictos {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fiche-technique__intro {
  margin: 0;
  color: var(--color-gris-texte-secondaire);
}

.fiche-technique__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

/* Pictos : grille 2 colonnes, icône à GAUCHE + texte à droite. */
.fiche-technique__pictos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
  align-content: start;
}

.fiche-technique__picto-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
}

.fiche-technique__picto-icone {
  flex: 0 0 auto;
  width: 2.625rem;
  height: 2.625rem;
  color: var(--color-taupe);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fiche-technique__picto-icone svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fiche-technique__picto-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fiche-technique__picto-texte {
  margin: 0;
}

/* Éditorial : une colonne, paragraphes empilés, séparée des pictos par un
   fin trait vertical (frame v4). */
.fiche-technique__editorial {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-left: 1px solid color-mix(in srgb, var(--color-noir) 22%, transparent);
  padding-left: var(--space-5);
}

@media (max-width: 767px) {
  .fiche-technique__editorial {
    border-left: none;
    padding-left: 0;
  }
}

.fiche-technique__colonne-titre {
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
}

.fiche-technique__colonne-texte {
  margin: 0;
  color: var(--color-gris-texte-secondaire);
}

.fiche-technique__actions {
  display: flex;
  justify-content: center;
}

.fiche-technique__bouton {
  display: inline-block;
  text-decoration: none;
  color: var(--color-blanc);
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .fiche-technique__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ===== hero ===== */
/**
 * ============================================================================
 * HERO — CSS spécifique au layout de la section (aucune couleur/police/taille
 * en dur : tout référence les variables du design system du sitepackage).
 * ============================================================================
 */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero--accueil {
  /* l'emblème déborde sous le hero (intercalé) : ne pas le rogner. */
  overflow: visible;
  min-height: 90vh;
  align-items: stretch;
}

.hero--fiche_mas {
  min-height: 60vh;
}

.hero__carousel {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.hero__carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-blanc) 70%, transparent);
  color: var(--color-noir);
  font-size: var(--font-size-h3);
  cursor: pointer;
}

.hero__arrow--prev {
  left: var(--space-3);
}

.hero__arrow--next {
  right: var(--space-3);
}

/* Emblème accueil : badge complet (illustration + nom) sur fond crème,
   posé au bas du hero, avec la localité sur une pastille dessous (frame v4). */
/* Emblème INTERCALÉ : à cheval sur le bas du hero et la section suivante. */
.hero__emblem {
  position: absolute;
  left: 50%;
  bottom: -5.25rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

/* Logo complet (arche + maison + nom) posé sur un disque crème (lisibilité sur
   la photo), + localité dessous. Le contenu du logo est inscrit dans un cercle,
   donc un fond border-radius:50% le contient parfaitement. */
.hero__emblem-badge {
  display: block;
  background-color: var(--color-pierre-clair);
  border-radius: 50%;
}

.hero__emblem-image {
  width: 18rem;
  height: auto;
  display: block;
}

.hero__emblem-loc {
  margin-top: 0.1rem;
  font-family: var(--font-family-primary);
  font-size: 0.8rem;
  color: var(--color-gris-texte-secondaire);
  white-space: nowrap;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-noir) 55%, transparent), color-mix(in srgb, var(--color-noir) 0%, transparent));
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

/* Fiche mas : titre + bouton CENTRÉS dans un cadre à fin filet blanc (frame v4). */
.hero__content {
  color: var(--color-blanc);
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-blanc) 75%, transparent);
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.hero__title {
  color: inherit;
  margin: 0;
}

/* Bouton doré plein, rectangulaire, capitales (frame v4). */
.hero__cta {
  display: inline-block;
  color: var(--color-blanc);
  text-decoration: none;
  background-color: var(--color-dore-cta);
  border: none;
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.2s;
}

.hero__cta:hover {
  background-color: color-mix(in srgb, var(--color-dore-cta) 85%, var(--color-noir));
}

@media (max-width: 767px) {
  .hero {
    min-height: 60vh;
  }

  .hero--accueil,
  .hero__carousel {
    min-height: 70vh;
    height: 70vh;
  }

  /* L'emblème reste À CHEVAL sur le bas du hero, comme en desktop : une valeur
     POSITIVE le ferait remonter entièrement sur la photo. Le décalage suit la
     taille réduite de l'image (8,5rem au lieu de 12) pour conserver la même
     proportion de débordement — environ un tiers du disque sous la photo. */
  .hero__emblem {
    bottom: -3.75rem;
  }
  .hero__emblem-image {
    width: 12.75rem;
  }
}

/* ===== mas-intro-gallery ===== */
/**
 * ============================================================================
 * MAS-INTRO-GALLERY — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * Mosaïque : 1 grande image + paires d'images, reproduit la maquette
 * (mosaïque de ~7 photos à gauche, titre + texte + bouton à droite).
 * ============================================================================
 */
.mas-intro-gallery {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Carte blanche bordée sur fond crème (frame v4). */
.mas-intro-gallery__carte {
  position: relative;
  overflow: hidden;
  background-color: var(--color-blanc);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

/* Croquis décoratif au trait : image de fond étendue sur toute la largeur de
   la carte, ancrée en bas, derrière le contenu. */
/* Croquis décoratif au trait (frame v4) : posé EN BAS À DROITE, DANS LE FLUX —
   jamais en filigrane derrière le texte (illisibilité). */
.mas-intro-gallery__croquis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}

.mas-intro-gallery__croquis-img {
  /* PLEINE LARGEUR : le dessin va d'un bord à l'autre de la carte blanche.
     Sa hauteur découle de ses proportions, d'où la nécessité d'une mosaïque
     assez haute pour lui laisser la place sous la colonne texte. */
  width: 100%;
  height: auto;
  display: block;
  /* fond crème/blanc du fichier fondu sur la carte, seul le trait subsiste */
  mix-blend-mode: multiply;
}


.mas-intro-gallery__grid {
  position: relative;
  z-index: 1;
}

.mas-intro-gallery__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-5);
  align-items: start;
}

.mas-intro-gallery__mosaique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.mas-intro-gallery__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.mas-intro-gallery__content {
  position: static;
}

.mas-intro-gallery__title {
  margin: 0 0 var(--space-3);
}

.mas-intro-gallery__texte {
  margin: 0 0 var(--space-4);
  color: var(--color-gris-texte-secondaire);
}

.mas-intro-gallery__bouton {
  display: inline-block;
  text-decoration: none;
  color: var(--color-blanc);
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 1023px) {
  .mas-intro-gallery__grid {
    grid-template-columns: 1fr;
  }

  .mas-intro-gallery__content {
    position: static;
  }
}

/* ===== mentions-legales-texte ===== */
/**
 * ============================================================================
 * MENTIONS-LEGALES-TEXTE — layout spécifique (variables du design system uniquement)
 * ============================================================================
 */
.mentions-legales-texte__inner {
  max-width: 48rem;
  margin: 0 auto;
}

.mentions-legales-texte__title {
  margin: 0 0 var(--space-4);
}

.mentions-legales-texte__body h2,
.mentions-legales-texte__body h3 {
  margin-top: var(--space-4);
}

.mentions-legales-texte__body p + p {
  margin-top: var(--space-2);
}

/* ===== phototheque-galerie ===== */
/**
 * ============================================================================
 * PHOTOTHEQUE-GALERIE — 2 onglets cliquables (un par mas) sur panneau blanc ;
 * la galerie du mas sélectionné s'affiche en mosaïque. Variables du design
 * system uniquement.
 * ============================================================================
 */
.phototheque-galerie {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

.phototheque-galerie__carte {
  background-color: var(--color-blanc);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

/* Onglets cliquables, centrés. */
.phototheque-galerie__tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-hairline);
}

.phototheque-galerie__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-4) var(--space-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--color-gris-texte-secondaire);
  transition: color 0.2s, border-color 0.2s;
}

.phototheque-galerie__tab-mas {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.phototheque-galerie__tab-loc {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.phototheque-galerie__tab:hover {
  color: var(--color-noir);
}

.phototheque-galerie__tab.is-active {
  color: var(--color-noir);
  border-bottom-color: var(--color-dore-cta);
}

/* Panneaux : un seul visible à la fois. */
.phototheque-galerie__panel {
  display: none;
}

.phototheque-galerie__panel.is-active {
  display: block;
}

/* Mosaïque masonry du mas sélectionné. */
.phototheque-galerie__masonry {
  columns: 3;
  column-gap: var(--space-2);
}

.phototheque-galerie__photo-item {
  break-inside: avoid;
  margin-bottom: var(--space-2);
}

.phototheque-galerie__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

@media (max-width: 1023px) {
  .phototheque-galerie__masonry {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .phototheque-galerie__masonry {
    columns: 1;
  }
  .phototheque-galerie__tabs {
    gap: var(--space-2);
  }
}

/* ===== points-forts ===== */
/**
 * ============================================================================
 * POINTS-FORTS — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * ============================================================================
 */
.points-forts {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.points-forts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.points-forts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  position: relative;
  padding: 0 var(--space-4);
}

/* Séparateurs verticaux fins entre les colonnes (frame v4). */
.points-forts__item + .points-forts__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background-color: color-mix(in srgb, var(--color-noir) 18%, transparent);
}

.points-forts__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.125rem;
  height: 4.125rem;
  color: var(--color-noir);
  margin-bottom: var(--space-1);
}

.points-forts__icone svg {
  width: 100%;
  height: 100%;
  display: block;
}

.points-forts__icone-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.points-forts__label {
  margin: 0;
}

.points-forts__description {
  margin: 0;
  color: var(--color-gris-texte-secondaire);
}

@media (max-width: 1023px) {
  .points-forts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .points-forts__item + .points-forts__item::before {
    display: none;
  }
}

/* ── Bandeau 2 : croquis des Alpilles en fond + pictos en cartes beige ── */
.points-forts--bandeau_2 {
  background-color: var(--color-pierre-clair);
  background-image: url("/fileadmin/alpilles/brand/fond-alpilles-croquis.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.points-forts--bandeau_2 .points-forts__item {
  max-width: 15rem;
  margin: 0 auto;
  padding: var(--space-4);
  aspect-ratio: 1 / 1;
  justify-content: center;
  background-color: var(--color-pierre-clair);
  border: 1px solid var(--color-noir);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-noir) 16%, transparent);
}

/* Cartes détachées : pas de séparateurs verticaux dans le bandeau 2. */
.points-forts--bandeau_2 .points-forts__item + .points-forts__item::before {
  display: none;
}

.points-forts--bandeau_2 .points-forts__icone {
  width: 4.875rem;
  height: 4.875rem;
}

@media (max-width: 599px) {
  .points-forts__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== region-experience ===== */
/**
 * ============================================================================
 * REGION-EXPERIENCE — bloc éditorial répétable (~9x) de la page Région.
 * Pleine largeur : la photo va jusqu'au bord de l'écran (aucune marge, aucun
 * fond blanc — le bloc est directement sur le beige). Texte centré en regard
 * de la photo. Variante alternée gauche/droite.
 * ============================================================================
 */
.region-experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* center (et non stretch) : la photo garde TOUJOURS le même format, quelle
     que soit la longueur du texte du bloc. */
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* Variante alternée : l'image passe à droite, le texte à gauche (frame v4). */
.region-experience--image_droite .region-experience__media { order: 2; }
.region-experience--image_droite .region-experience__content { order: 1; }

/* Photo : pleine largeur de sa moitié (jusqu'au bord de l'écran), sans arrondi,
   et TOUJOURS au même format (ratio fixe, identique sur tous les blocs). */
.region-experience__media {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.region-experience__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Texte : centré (vertical + horizontal) en regard de la photo, resserré. */
.region-experience__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.region-experience__title {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.region-experience__texte {
  margin: 0;
  max-width: 34rem;
  color: var(--color-gris-texte-secondaire);
}

/* Paragraphes resserrés : pas de grands blancs entre les blocs de texte. */
.region-experience__texte p {
  margin: 0 0 var(--space-2);
}

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

/* Empilement sur mobile : image au-dessus du texte quelle que soit la variante. */
@media (max-width: 768px) {
  .region-experience {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .region-experience--image_droite .region-experience__media,
  .region-experience--image_droite .region-experience__content { order: initial; }
  .region-experience__media {
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .region-experience__content {
    padding: var(--space-4) var(--space-3);
  }
}

/* ===== region-hero ===== */
/**
 * ============================================================================
 * REGION-HERO — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * ============================================================================
 */
.region-hero {
  position: relative;
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
}

.region-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.region-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.region-hero__content {
  position: relative;
  z-index: 1;
}

.region-hero__title {
  margin: 0 0 var(--space-1);
}

.region-hero__subtitle {
  margin: 0;
  font-weight: var(--font-weight-body);
}

/* ===== reserver-tarifs ===== */
/**
 * ============================================================================
 * RESERVER-TARIFS — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * ============================================================================
 */
.reserver-tarifs {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.reserver-tarifs__header {
  margin-bottom: var(--space-4);
}

.reserver-tarifs__title {
  margin: 0 0 var(--space-1);
}

.reserver-tarifs__soustitre {
  margin: 0;
  font-weight: var(--font-weight-body);
}

/* Frame v4 : intro à gauche, tarifs (2 saisons) à droite. */
.reserver-tarifs__cols {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

.reserver-tarifs__texte-intro {
  color: var(--color-gris-texte-secondaire);
}

/* 2 blocs saison côte à côte (frame v4). */
.reserver-tarifs__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-3);
}

.reserver-tarifs__saison-titre {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-h4);
}

.reserver-tarifs__saison-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reserver-tarifs__saison-ligne {
  margin-bottom: 0.25rem;
}

.reserver-tarifs__saison-ligne::before {
  content: "– ";
}

.reserver-tarifs__longues-periodes {
  margin: 0 0 var(--space-5);
}

.reserver-tarifs__vignettes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.reserver-tarifs__vignette-titre {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
}

/* Cadre photo réservé (photos ajoutées par le client) : tient sa place. */
.reserver-tarifs__vignette a {
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--color-gris-section);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.reserver-tarifs__vignette-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

@media (max-width: 767px) {
  .reserver-tarifs__cols,
  .reserver-tarifs__grille,
  .reserver-tarifs__vignettes {
    grid-template-columns: 1fr;
  }
}

/* ===== social-feed ===== */
/**
 * ============================================================================
 * SOCIAL-FEED — CSS spécifique au layout de la section (aucune couleur/
 * police/taille en dur : tout référence les variables du design system).
 * ============================================================================
 */
.social-feed {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.social-feed__intro {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto var(--space-4);
}

.social-feed__title {
  margin: 0 0 var(--space-2);
}

.social-feed__texte {
  margin: 0 0 var(--space-3);
  color: var(--color-gris-texte-secondaire);
}

.social-feed__bouton {
  display: inline-block;
  text-decoration: none;
  color: var(--color-blanc);
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Module d'actualités Facebook (Page Plugin) centré. */
.social-feed__facebook {
  display: flex;
  justify-content: center;
}

.social-feed__fb {
  width: 100%;
  max-width: 500px;
  height: 640px;
  border: none;
  background-color: var(--color-blanc);
  border-radius: var(--radius-sm);
}

.social-feed__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
}

.social-feed__item {
  display: block;
}

.social-feed__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 767px) {
  .social-feed__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== telecharger-fiche ===== */
/**
 * ============================================================================
 * TELECHARGER-FICHE — encadré doré/tan CENTRÉ (marges), titre + bouton ghost.
 * Variables du design system uniquement.
 * ============================================================================
 */
.telecharger-fiche {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.telecharger-fiche__box {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  text-align: center;
  color: var(--color-blanc);
}

.telecharger-fiche__titre {
  margin: 0;
  color: inherit;
  font-weight: var(--font-weight-body);
}

/* Bouton « ghost » : contour blanc, fond transparent (frame). */
.telecharger-fiche__bouton {
  display: inline-block;
  text-decoration: none;
  background-color: transparent;
  color: var(--color-blanc);
  border: 1px solid var(--color-blanc);
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.2s, color 0.2s;
}

.telecharger-fiche__bouton:hover {
  background-color: var(--color-blanc);
  color: var(--color-noir);
}