/**
 * ============================================================================
 * ALPILLES PRESTIGE — STYLES GLOBAUX (structure, header, footer, conteneurs)
 * ============================================================================
 * Ce fichier ne définit AUCUNE couleur/police/taille en dur : tout référence
 * les variables exposées par design-system.css (chargé avant ce fichier).
 * ============================================================================
 */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-creme-fond);
  color: var(--color-anthracite);
  font-family: var(--font-family-primary);
}

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

a {
  color: var(--color-ciel);
}

a:hover {
  color: var(--color-olivier);
}

/* ---- Conteneur générique ---- */
.container {
  width: 100%;
  max-width: var(--breakpoint-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

@media (max-width: 767px) {
  .section {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
}

/* ============================================================================
 * Header global (Partials/Page/Header.html) — barre sticky crème, logo,
 * menu principal (généré depuis l'arbre de pages), bloc contact, sélecteur
 * de langue, CTA "Réserver" + bandeau "Nos mas à vendre".
 * Classes BEM préfixées .c-header (composant global du gabarit, distinct des
 * anciens Content Blocks pimentrouge/site-header supprimés).
 * ============================================================================
 */
/* Lien d'évitement (accessibilité) : masqué à l'écran, il n'apparaît qu'au
   focus clavier (Tab) → plus de mention « Aller au contenu » visible en haut. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-taupe);
  color: var(--color-blanc);
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

.c-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-pierre-clair);
  border-bottom: var(--border-hairline);
}

/* Barre PLEINE LARGEUR (frame v4) : logo collé au bord gauche, "RÉSERVER" collé
   au bord droit sur toute la hauteur — le contenu s'étale sur toute la longueur
   au lieu d'être groupé dans un conteneur centré. */
.c-header__bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: none;
  margin: 0;
  padding: 0;
}

.c-header__logo {
  display: flex;
  align-items: center;
  /* Le logo ne doit JAMAIS être écrasé par le menu quand la place manque. */
  flex-shrink: 0;
  /* Collé au bord gauche + trait vertical de séparation (frame v4). */
  padding: var(--space-1) var(--space-3);
  border-right: var(--border-hairline);
}

/* Téléphone du header : toujours sur une seule ligne. */
.c-header__contact-phone,
.c-header__contact-label {
  white-space: nowrap;
}

.c-header__logo-img {
  display: block;
  height: 2.5rem;
  width: auto;
}

.c-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}

.c-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-anthracite);
}

.c-header__nav {
  flex: 1;
  display: flex;
  align-items: center;
  /* Menu CENTRÉ dans l'espace libre entre le logo et le groupe de droite. */
  justify-content: center;
}

.c-header__menu {
  display: flex;
  list-style: none;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

.c-header__menu-item {
  display: flex;
  align-items: center;
}

.c-header__menu-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Libellé calé en haut d'une boîte de hauteur IDENTIQUE pour tous les onglets
     (qu'ils aient une localité ou non) : les libellés s'alignent sur le même axe
     et chaque onglet est centré en hauteur dans la barre. */
  justify-content: flex-start;
  min-height: 2.1rem;
  /* Libellé sur UNE ligne pour que tous les onglets s'alignent sur le même axe. */
  white-space: nowrap;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: var(--font-letter-spacing-eyebrow);
  color: var(--color-anthracite);
  text-decoration: none;
  line-height: 1.3;
}

.c-header__menu-link:hover,
.c-header__menu-link.is-active {
  color: var(--color-dore-cta);
}

/* Sous-titre (localité) sorti du flux : positionné SOUS le libellé, il ne
   décale plus la ligne des onglets, qui restent alignés et centrés en hauteur. */
/* Sous-titre (localité) DANS le flux : il occupe sa place dans la boîte de
   l'onglet, dont la hauteur est réservée pour tous (cf. --menu-link) — ainsi
   les onglets restent alignés ET centrés en hauteur dans la barre. */
.c-header__menu-sub {
  margin-top: 0.1rem;
  white-space: nowrap;
  font-size: 0.625rem;
  font-weight: var(--font-weight-body);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-gris-texte-secondaire);
}

/* Groupe de droite : étiré en hauteur pour que "RÉSERVER" touche le bord. */
.c-header__aside {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  flex-shrink: 0;
}

.c-header__contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  line-height: 1.2;
}

/* Contact repris dans le menu hamburger : masqué par défaut, affiché seulement
   sous 1280px (cf. media query plus bas). Déclaré ICI, avant la media query :
   à spécificité égale, la dernière règle du fichier l'emporte — placée après,
   elle réimposerait « display: none » y compris sur mobile. */
.c-header__nav-contact {
  display: none;
}

.c-header__contact-label {
  color: var(--color-gris-texte-secondaire);
}

.c-header__contact-phone {
  color: var(--color-anthracite);
  text-decoration: none;
  font-weight: var(--font-weight-h4);
}

.c-header__lang-switch {
  display: flex;
  gap: var(--space-1);
}

.c-header__lang-flag {
  text-decoration: none;
  color: var(--color-anthracite);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-body);
  text-transform: uppercase;
}

.c-header__lang-flag.is-active {
  font-weight: var(--font-weight-h4);
  color: var(--color-dore-cta);
}

.c-header__cta {
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* "RÉSERVER" : collé au bord droit, pleine hauteur du header, sans arrondi
   (frame v4). */
.c-header__cta--reserver {
  color: var(--color-blanc);
  /* Ne jamais rétrécir/rogner le bouton quand la place manque. */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-radius: 0;
  padding: var(--space-1) var(--space-5);
}

.c-header__lang-switch {
  align-items: center;
}

/* Bandeau "NOS MAS À VENDRE" : hors du header sticky (statique au scroll) et
   de hauteur NULLE → il ne crée aucune bande sous le header, le contenu remonte.
   Le bouton flotte juste sous le trait fin, aligné à droite sur la largeur de
   la barre → son bord droit coïncide avec le bouton "RÉSERVER". */
.c-header__banner {
  position: relative;
  height: 0;
  /* Pleine largeur comme la barre du header : le bouton peut ainsi s'aligner
     exactement sur le bord droit de "RÉSERVER". */
  max-width: none;
  margin: 0;
  padding: 0;
}

.c-header__cta--vendre {
  /* Fixe au scroll : le bouton reste visible en permanence, calé juste sous
     le header sticky (hauteur ~3.5rem) et aligné à droite comme "RÉSERVER". */
  position: fixed;
  top: calc(3.5rem + var(--space-2));
  right: 0;
  z-index: 50;
  color: var(--color-anthracite);
}

/* Écrans intermédiaires (1280–1599px) : menu resserré (gaps + interlettrage)
   pour que toute la barre tienne sans rogner le bouton "RÉSERVER". */
@media (min-width: 1280px) and (max-width: 1599px) {
  .c-header__bar {
    gap: var(--space-2);
  }

  .c-header__logo {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .c-header__menu {
    gap: var(--space-2);
  }

  .c-header__menu-link {
    letter-spacing: 0.02em;
  }

  .c-header__cta--reserver {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Menu burger : déclenché dès 1279px — en dessous, le menu complet (6 entrées
   + sous-titres + téléphone + FR/EN + RÉSERVER) ne tient pas et écrasait le
   logo / rognait le bouton RÉSERVER. */
@media (max-width: 1279px) {
  .c-header__burger {
    display: flex;
  }

  .c-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-pierre-clair);
    border-bottom: var(--border-hairline);
    padding: var(--space-2);
  }

  .c-header__nav.is-open {
    display: block;
  }

  .c-header__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* La barre ne garde que l'essentiel : logo, hamburger, langues, RÉSERVER.
     Le bloc contact partait hors écran et faisait déborder toute la page
     horizontalement — il est repris dans le menu déroulant (voir plus bas). */
  .c-header__aside .c-header__contact {
    display: none;
  }

  .c-header__aside {
    gap: var(--space-2);
    /* Pas de flex-wrap : sur une barre étroite il ferait passer « RÉSERVER »
       à la ligne, ce qui casse la hauteur du header sticky. */
    flex-wrap: nowrap;
  }

  /* Le logo est le seul élément qui peut céder de la place : sans cela, la
     somme des largeurs minimales dépasse l'écran et la page déborde. */
  .c-header__logo {
    min-width: 0;
    flex-shrink: 1;
  }

  .c-header__logo-img {
    max-width: 100%;
    height: auto;
    max-height: 2.5rem;
  }

  /* Contact affiché dans le menu hamburger, aligné sur les entrées du menu. */
  .c-header__nav-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--border-hairline);
  }

  /* « RÉSERVER » reste collé au bord droit, pleine hauteur, jamais rogné.
     C'est le seul appel à l'action conservé dans la barre : il prend la place
     laissée par le bloc contact, parti dans le menu. */
  .c-header__cta--reserver {
    padding: var(--space-1) var(--space-2);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
  }

  /* Espacements resserrés : à 390px, la somme logo + hamburger + langues +
     RÉSERVER dépasse l'écran avec les gaps de bureau. */
  .c-header__bar {
    gap: var(--space-1);
  }

  .c-header__lang-switch {
    gap: 0.35rem;
  }

  .c-header__logo-img {
    max-height: 2rem;
  }
}

/* Téléphones étroits : le logo cède encore un peu pour que « RÉSERVER » tienne. */
@media (max-width: 420px) {
  .c-header__logo-img {
    max-height: 1.75rem;
  }

  /* Le bandeau « NOS MAS À VENDRE » est en position fixe, calé à droite : sur
     un écran étroit il mordait hors cadre. On le rentre dans la marge. */
  .c-header__cta--vendre {
    right: var(--space-2);
    padding: var(--space-1) var(--space-2);
    font-size: 0.7rem;
  }
}

/* ============================================================================
 * Footer global (Partials/Page/Footer.html) — logo, adresse, liens de
 * navigation secondaire, réseaux sociaux, flèche de remontée en haut de page.
 * ============================================================================
 */
.c-footer {
  background-color: var(--color-pierre-clair);
  padding-top: var(--space-5);
  padding-bottom: var(--space-3);
  text-align: center;
  position: relative;
}

.c-footer__logo img {
  display: inline-block;
  height: 3rem;
  width: auto;
  margin-bottom: var(--space-3);
}

.c-footer__coords {
  margin: 0 0 var(--space-2);
}

.c-footer__coords a {
  color: inherit;
  text-decoration: none;
}

.c-footer__separator {
  border: none;
  border-top: var(--border-hairline);
  max-width: 640px;
  margin: var(--space-3) auto 0;
}

.c-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-3);
}

.c-footer__links a {
  font-size: var(--font-size-small);
  color: var(--color-anthracite);
  text-decoration: none;
}

.c-footer__links a:hover {
  text-decoration: underline;
}

.c-footer__social {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.c-footer__social a {
  font-size: var(--font-size-small);
  color: var(--color-anthracite);
  text-decoration: none;
}

.c-footer__social a:hover {
  text-decoration: underline;
}

.c-footer__bottom {
  margin-top: var(--space-2);
  color: var(--color-gris-texte-secondaire);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
}

/* Crédit agence : « Création PimentRouge.fr » (lien vers pimentrouge.fr). */
.c-footer__credit a {
  color: inherit;
  text-decoration: underline;
}

.c-footer__credit a:hover {
  color: var(--color-noir);
}

/* Lien « Mentions légales » dans la barre du bas, à côté du copyright et du
   crédit : même discrétion (couleur héritée, souligné). */
.c-footer__link--mentions {
  color: inherit;
  text-decoration: underline;
}

.c-footer__link--mentions:hover {
  color: var(--color-noir);
}

.c-footer__back-to-top {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  background-color: var(--color-blanc);
  color: var(--color-anthracite);
  text-decoration: none;
}

/* ============================================================================
 * Contenu dynamique (colonne principale)
 * ============================================================================
 */
.page-content > .frame,
.page-content > div {
  margin-bottom: 0;
}