/* ==========================================================
   VILLA LUPANTIA — DESIGN SYSTEM
   WordPress + Bricks Builder

   Typographies :
   - Lora : titres
   - Outfit : textes / UI

   Approche :
   - Mobile first
   - Variables CSS
   - rem
   - Classes réutilisables
   ========================================================== */


/* ==========================================================
   01. VARIABLES
   ========================================================== */

:root {

  /* -------------------------------------------------------
     TYPOGRAPHIES
     ------------------------------------------------------- */

  --font-heading: "Lora", Georgia, serif;
  --font-body: "Outfit", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;


  /* -------------------------------------------------------
     TAILLES TYPOGRAPHIQUES
     ------------------------------------------------------- */

  /* Hero */
  --fs-display: clamp(2rem, 5vw, 3.625rem);

  /* H1 pages intérieures */
  --fs-h1: clamp(1.625rem, 4vw, 2.875rem);

  /* H2 principal */
  --fs-h2-lg: clamp(1.5rem, 3.5vw, 2.5rem);

  /* H2 standard */
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);

  /* H2 compact */
  --fs-h2-sm: clamp(1.375rem, 3vw, 2.125rem);

  /* H3 */
  --fs-h3: 1.125rem;

  /* Textes */
  --fs-body-lg: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --fs-button: 0.9375rem;


  /* -------------------------------------------------------
     LINE HEIGHTS
     ------------------------------------------------------- */

  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-h3: 1.3;

  --lh-body-lg: 1.9;
  --lh-body: 1.8;
  --lh-small: 1.6;

  --ls-label: 0.12em;


  /* =======================================================
     COULEURS
     ======================================================= */

  --color-forest: #334f48;
  --color-forest-dark: #243830;

  --color-vegetal: #76964b;
  --color-sage: #a9b99a;

  --color-cream: #f5f1e8;
  --color-off-white: #faf8f3;
  --color-sand: #e8e0d0;

  --color-earth: #765c43;
  --color-water: #527c80;

  --color-dark: #262c29;
  --color-text-muted: #4a5247;

  --color-white: #ffffff;


  /* -------------------------------------------------------
     COULEURS SÉMANTIQUES
     ------------------------------------------------------- */

  --color-primary: var(--color-forest);
  --color-primary-hover: var(--color-forest-dark);

  --color-accent: var(--color-vegetal);

  --color-text: var(--color-dark);
  --color-text-secondary: var(--color-text-muted);

  --color-background: var(--color-off-white);
  --color-background-alt: var(--color-cream);

  --color-border: var(--color-sand);

  --color-on-dark: var(--color-off-white);


  /* =======================================================
     ESPACEMENTS
     ======================================================= */

  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 0.75rem;   /* 12px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */


  /* -------------------------------------------------------
     ESPACEMENT DES SECTIONS
     ------------------------------------------------------- */

  --section-space: clamp(3rem, 6vw, 5rem);
  --section-space-lg: clamp(3.75rem, 8vw, 6.25rem);
  --section-space-hero: clamp(5rem, 10vw, 7.5rem);


  /* -------------------------------------------------------
     MARGES LATÉRALES
     ------------------------------------------------------- */

  --page-gutter: clamp(1.25rem, 4vw, 1.5rem);


  /* =======================================================
     CONTAINERS
     ======================================================= */

  --container: 75rem;          /* 1200px */
  --container-content: 50rem;  /* 800px */
  --container-text: 45rem;     /* 720px */
  --container-narrow: 43.75rem; /* 700px */


  /* =======================================================
     GRILLES
     ======================================================= */

  --grid-gap-sm: 1rem;
  --grid-gap: 1.5rem;
  --grid-gap-blog: 1.75rem;
  --grid-gap-lg: 3rem;
  --grid-gap-xl: 4rem;


  /* =======================================================
     BORDER RADIUS
     ======================================================= */

  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.625rem; /* 10px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-pill: 999rem;


  /* =======================================================
     BORDURES
     ======================================================= */

  --border-default: 0.0625rem solid var(--color-sand);

  --border-control:
    0.09375rem solid var(--color-sand);

  --border-accent:
    0.09375rem solid var(--color-vegetal);


  /* =======================================================
     OMBRES
     ======================================================= */

  /* Utilisée avec parcimonie */
  --shadow-sm:
    0 0.0625rem 0.5rem rgba(38, 44, 41, 0.08);


  /* =======================================================
     HEADER
     ======================================================= */

  --header-height: 4.25rem; /* 68px */
  --nav-gap: 2rem;


  /* =======================================================
     TRANSITIONS
     ======================================================= */

  --transition-fast: 180ms ease;
}


/* ==========================================================
   02. BASE
   ========================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);

  color: var(--color-text-secondary);
  background-color: var(--color-background);
}


/* ==========================================================
   03. TYPOGRAPHIE
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;

  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);

  color: var(--color-text);
}

.heading-display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
}

.heading-h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
}

.heading-h2-lg {
  font-family: var(--font-heading);
  font-size: var(--fs-h2-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.heading-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.heading-h2-sm {
  font-family: var(--font-heading);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

.heading-h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
}


/* ----------------------------------------------------------
   TEXTES
   ---------------------------------------------------------- */

.text-large {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.text-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.text-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.text-muted {
  color: var(--color-text-secondary);
}


/* ----------------------------------------------------------
   OVERLINE / LABEL
   ---------------------------------------------------------- */

.overline {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.4;

  letter-spacing: var(--ls-label);
  text-transform: uppercase;

  color: var(--color-vegetal);
}


/* ==========================================================
   04. CONTAINERS
   ========================================================== */

.container {
  width: 100%;
  max-width: var(--container);

  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.container--content {
  width: 100%;
  max-width: var(--container-content);

  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.container--text {
  width: 100%;
  max-width: var(--container-text);

  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.container--narrow {
  width: 100%;
  max-width: var(--container-narrow);

  margin-inline: auto;
  padding-inline: var(--page-gutter);
}


/* ==========================================================
   05. SECTIONS
   ========================================================== */

.section {
  padding-block: var(--section-space);
}

.section--large {
  padding-block: var(--section-space-lg);
}

.section--hero {
  padding-block: var(--section-space-hero);
}

.section--cream {
  background-color: var(--color-cream);
}

.section--forest {
  color: var(--color-on-dark);
  background-color: var(--color-forest);
}

.section--water {
  color: var(--color-on-dark);
  background-color: var(--color-water);
}
.section--forest h1,
.section--forest h2,
.section--forest h3,
.section--forest h4,
.section--forest h5,
.section--forest h6,
.section--water h1,
.section--water h2,
.section--water h3,
.section--water h4,
.section--water h5,
.section--water h6 {
  color: var(--color-on-dark);
}


/* ==========================================================
   06. GRILLES
   ========================================================== */

/* Texte + image */
.grid-2 {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 18.75rem), 1fr)
    );

  gap: var(--grid-gap-xl);
  align-items: center;
}


/* Cartes */
.grid-cards {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(min(100%, 17.5rem), 1fr)
    );

  gap: var(--grid-gap);
}


/* Blog */
.grid-blog {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(min(100%, 18rem), 1fr)
    );

  gap: var(--grid-gap-blog);
}


/* Chiffres clés */
.grid-stats {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(11.25rem, 1fr)
    );

  gap: var(--grid-gap);
}


/* ==========================================================
   07. GALERIE
   ========================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-sm);
}

.gallery-grid > :first-child {
  grid-column: span 2;
}


/* ==========================================================
   

/* Carte horizontale (Lieux / La Touraine) */
.card-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-off-white);
  border: var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.card-horizontal:hover {
  border-color: var(--color-vegetal);
}

.card-horizontal__image {
  flex: 0 0 7.5rem;
  width: 7.5rem;
  height: 5.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

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

.card-horizontal__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-horizontal__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  margin: 0;
  line-height: 1.3;
}

.card-horizontal__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-secondary);
  margin: 0;
}

08. CARTES
   ========================================================== */

.card {
  padding: 1.75rem 1.5rem;

  background-color: var(--color-off-white);

  border: var(--border-default);
  border-radius: var(--radius-md);
}

.card--compact {
  padding: 1.25rem 1.5rem;
}

.card--large {
  padding: 2rem;
}


/* ==========================================================
   09. IMAGES
   ========================================================== */

.image-rounded {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.image-rounded img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ==========================================================
   10. BOUTONS — BASE
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: var(--space-2xs);

  min-height: 2.75rem;

  padding: 0.8125rem 1.375rem;

  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  line-height: 1.2;

  border-radius: var(--radius-sm);

  cursor: pointer;
  text-decoration: none;

  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-0.0625rem);
}


/* ----------------------------------------------------------
   PRIMARY
   ---------------------------------------------------------- */

.btn--primary {
  color: var(--color-off-white);
  background-color: var(--color-primary);

  border: 0;
}

.btn--primary:hover {
  color: var(--color-off-white);
  background-color: var(--color-primary-hover);
}


/* ----------------------------------------------------------
   ACCENT
   ---------------------------------------------------------- */

.btn--accent {
  color: var(--color-off-white);
  background-color: var(--color-vegetal);

  border: 0;
}

.btn--accent:hover {
  color: var(--color-off-white);
  background-color: var(--color-forest);
}


/* ----------------------------------------------------------
   OUTLINE
   ---------------------------------------------------------- */

.btn--outline {
  color: var(--color-forest);
  background-color: transparent;

  border: 0.09375rem solid var(--color-forest);
}

.btn--outline:hover {
  color: var(--color-off-white);
  background-color: var(--color-forest);
}


/* Sur photo / fond sombre */
.btn--light {
  color: var(--color-off-white);
  background-color: transparent;
  border: 0.09375rem solid rgba(250, 248, 243, 0.7);
}

.btn--light:hover {
  color: var(--color-forest);
  background-color: var(--color-off-white);
  border-color: var(--color-off-white);
}


/* ----------------------------------------------------------
   LIEN / GHOST
   ---------------------------------------------------------- */

.btn--text {
  min-height: auto;
  padding: 0;

  color: var(--color-forest);
  background: transparent;

  border: 0;

  text-decoration: underline;
  text-decoration-color: var(--color-vegetal);
  text-underline-offset: 0.25em;
}

.btn--text:hover {
  color: var(--color-forest-dark);
  transform: none;
}


/* ----------------------------------------------------------
   TAILLES
   ---------------------------------------------------------- */

.btn--large {
  padding: 0.875rem 1.625rem;
}

.btn--cta {
  padding: 1rem 2rem;
  font-size: 1rem;
}


/* ==========================================================
   11. TAGS / PILLS
   ========================================================== */

.tag {
  display: inline-flex;
  align-items: center;

  padding: 0.375rem 0.75rem;

  font-size: var(--fs-small);
  font-weight: var(--fw-medium);

  color: var(--color-forest);
  background-color: var(--color-cream);

  border: var(--border-default);
  border-radius: var(--radius-pill);
}


/* ==========================================================
   12. FORMULAIRES
   ========================================================== */

.form-field {
  width: 100%;
  min-height: 3rem;

  padding: 0.6875rem 0.875rem;

  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;

  color: var(--color-dark);
  background-color: var(--color-off-white);

  border: var(--border-control);
  border-radius: var(--radius-sm);

  transition:
    border-color var(--transition-fast),
    outline-color var(--transition-fast);
}

.form-field:focus {
  border-color: var(--color-forest);

  outline: 0.125rem solid rgba(51, 79, 72, 0.18);
  outline-offset: 0.125rem;
}

textarea.form-field {
  min-height: 8rem;
  resize: vertical;
}


/* ==========================================================
   13. HEADER
   ========================================================== */

.site-header {
  min-height: var(--header-height);
}

.site-nav {
  display: flex;
  align-items: center;

  gap: var(--nav-gap);
}

.site-nav a {
  position: relative;

  font-family: var(--font-body);
  font-weight: var(--fw-medium);

  color: var(--color-dark);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--color-forest);
}

.site-nav a[aria-current="page"]::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: -0.4rem;
  left: 0;

  height: 0.125rem;

  background-color: var(--color-vegetal);
}


/* Header lorsqu'il devient sticky / scrollé */
.site-header.is-scrolled {
  background-color: rgba(250, 248, 243, 0.96);
  box-shadow: var(--shadow-sm);
}


/* ==========================================================
   14. SÉPARATEURS
   ========================================================== */

.separator {
  width: 100%;
  height: 0.0625rem;

  background-color: var(--color-sand);
}

.separator--dark {
  background-color: var(--color-forest);
}


/* ==========================================================
   15. ACCESSIBILITÉ — FOCUS
   ========================================================== */

.btn:focus-visible,
a:focus-visible {
  outline: 0.125rem solid var(--color-vegetal);
  outline-offset: 0.1875rem;
}


/* ==========================================================
   16. UTILITAIRES DE COULEUR
   ========================================================== */

.text-dark {
  color: var(--color-dark);
}

.text-forest {
  color: var(--color-forest);
}

.text-vegetal {
  color: var(--color-vegetal);
}

.text-water {
  color: var(--color-water);
}

.bg-cream {
  background-color: var(--color-cream);
}

.bg-off-white {
  background-color: var(--color-off-white);
}

.bg-forest {
  background-color: var(--color-forest);
}

.bg-water {
  background-color: var(--color-water);
}


/* ==========================================================
   17. MOBILE
   ========================================================== */

@media (max-width: 47.99rem) {

  .card-horizontal {
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  .card-horizontal__image {
    flex: 0 0 5rem;
    width: 5rem;
    height: 4.5rem;
  }


  /* Carrousel mobile pour .grid-cards */
  .grid-cards {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    gap: var(--grid-gap) !important;
    padding-bottom: 0.5rem;
    width: 100% !important;
    max-width: 100% !important;
  }

  .grid-cards::-webkit-scrollbar {
    display: none !important;
  }

  .grid-cards > * {
    flex: 0 0 85% !important;
    min-width: 85% !important;
    max-width: 85% !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }


  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid > :first-child {
    grid-column: auto;
  }

  .grid-2 {
    gap: var(--space-lg);
  }

}


/* ==========================================================
   18. REDUCED MOTION
   Accessibilité : désactive les mouvements pour les visiteurs
   ayant demandé une réduction des animations.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}

/* ==========================================================
   CTA FINALE — BACKGROUND SCROLL NATIF
   ========================================================== */
.section--cta {
  position: relative;
  overflow: hidden;
  color: var(--color-off-white);
  padding-block: var(--section-space-lg);
  background-image: linear-gradient(rgba(36, 56, 48, 0.58), rgba(36, 56, 48, 0.58)), url('https://villa-lupuntia.local/wp-content/uploads/2026/08/villa-lupantia-louans.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll !important;
}

.section--cta h2,
.section--cta p {
  color: var(--color-off-white);
}


/* ==========================================================
   CHECKLIST (LISTE À COCHES)
   ========================================================== */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: 0.875rem;
  border-bottom: 0.0625rem solid var(--color-sand);
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  color: var(--color-dark);
  line-height: 1.4;
}

.checklist__item:first-child {
  border-top: 0.0625rem solid var(--color-sand);
}

.checklist__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-vegetal);
}

.checklist__label {
  color: var(--color-dark);
}

/* ==========================================================
   GRILLE ACTIVITÉS & CARTES COMPACTES
   ========================================================== */
.grid-act {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

.activity-card {
  padding: 1.5rem 1.25rem;
  background-color: var(--color-off-white);
  border: var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-xs);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.activity-card:hover {
  border-color: var(--color-vegetal);
}

.activity-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.activity-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

@media (max-width: 61.99rem) {
  .grid-act {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 25rem) {
  .grid-act {
    grid-template-columns: 1fr;
  }
}


/* Icônes PNG cartes d'activités */
.activity-card__png {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  margin-bottom: var(--space-2xs);
  display: block;
}

@media (max-width: 47.99rem) {
  .activity-card__png {
    width: 3.5rem;
    height: 3.5rem;
  }
}


/* Bouton secondaire Sauge (sur fond forêt) */
.btn--outline-sage {
  color: var(--couleur-blanc-casse);
  background-color: transparent;
  border: 0.09375rem solid var(--couleur-sauge);
}

.btn--outline-sage:hover {
  color: var(--couleur-foret);
  background-color: var(--couleur-sauge);
  border-color: var(--couleur-sauge);
}


/* ==========================================================
   FIL D'ARIANE / BREADCRUMB HERO
   ========================================================== */
.hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--couleur-blanc-casse);
  margin-bottom: var(--space-2xs);
}

.hero-breadcrumb__link {
  color: var(--couleur-vegetal);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.hero-breadcrumb__link:hover {
  color: var(--couleur-sauge);
  text-decoration: underline;
}

.hero-breadcrumb__sep {
  color: var(--couleur-sauge);
  font-weight: var(--fw-regular);
  padding-inline: 0.2rem;
}

.hero-breadcrumb__current {
  color: var(--couleur-blanc-casse);
  font-weight: var(--fw-medium);
}

.hero-breadcrumb__accent-line {
  width: 2.5rem;
  height: 0.125rem;
  background-color: var(--couleur-vegetal);
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-pill);
}


/* ==========================================================
   HERO À PROXIMITÉ — FULL WIDTH RECTANGULAIRE (BORDER-RADIUS: 0)
   ========================================================== */
.section--hero-proxi,
#brxe-vlp_proxi_hero_sec,
#brxe-vlp_proxi_hero_img,
#brxe-vlp_proxi_hero_img img,
#brxe-vlp_proxi_hero_ovl {
  border-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================
   SECTION INCONTOURNABLES & ONGLET DE LIEUX (EQUAL HEIGHT)
   ========================================================== */

/* Equal height for all lieu-cards across all rows */
.grid-incontournables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--grid-gap-lg);
  width: 100%;
}

.lieu-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-sable);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.lieu-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
}

.lieu-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--couleur-texte);
  margin: 0;
  flex-grow: 1;
}

.lieu-card__distance {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--couleur-sauge);
  font-style: italic;
  margin: 0;
  margin-top: auto;
  padding-top: var(--space-2xs);
}

/* Alignement vertical et typographie des titres H3 des cartes */
.lieu-card__title {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--couleur-sombre) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  min-height: 3.2rem;
  display: flex;
  align-items: flex-end;
}

@media (max-width: 47.99rem) {
  .lieu-card__title {
    min-height: auto;
  }
}

/* ==========================================================
   BOUTONS D'ONGLETS STYLES ET ÉTAT ACTIF
   ========================================================== */
.incontournables-tabs {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-lg);
  width: 100%;
}

.incontournables-tab-btn,
button.incontournables-tab-btn,
.incontournables-tabs button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  min-height: 44px !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-button, 1rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
  background-color: transparent !important;
  color: var(--couleur-texte) !important;
  border: 1px solid var(--couleur-sable) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.incontournables-tab-btn:hover,
button.incontournables-tab-btn:hover,
.incontournables-tabs button:hover {
  background-color: var(--couleur-creme) !important;
  color: var(--couleur-foret) !important;
  border-color: var(--couleur-sauge) !important;
}

.incontournables-tab-btn.is-active,
button.incontournables-tab-btn.is-active,
.incontournables-tabs button[aria-selected="true"] {
  background-color: var(--couleur-foret) !important;
  color: var(--couleur-blanc-casse) !important;
  border: 1px solid var(--couleur-foret) !important;
}

.incontournables-tab-btn.is-active:hover,
button.incontournables-tab-btn.is-active:hover,
.incontournables-tabs button[aria-selected="true"]:hover {
  background-color: var(--couleur-foret-sombre) !important;
  border-color: var(--couleur-foret-sombre) !important;
  color: var(--couleur-blanc-casse) !important;
}


/* Grille 4 colonnes onglet En famille */
.grid-incontournables--4cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--grid-gap-lg);
  width: 100%;
}

@media (max-width: 61.99rem) {
  .grid-incontournables--4cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }
}

@media (max-width: 35.99rem) {
  .grid-incontournables--4cols {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   PANNEAU CULTURE — LISTE DES MUSÉES
   ========================================================== */
.culture-museums-intro {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--couleur-texte);
  max-width: var(--container-text);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.culture-museums-list {
  max-width: var(--container-content);
  margin-inline: auto;
  background-color: var(--couleur-blanc-casse);
  border: 1px solid var(--couleur-sable);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0.125rem 0.5rem rgba(38, 44, 41, 0.03);
}

.culture-museum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.75rem;
  gap: 1rem;
  border-bottom: 1px solid var(--couleur-sable);
  transition: background-color var(--transition-fast);
}

.culture-museum-row:last-child {
  border-bottom: none;
}

.culture-museum-row:nth-child(odd) {
  background-color: var(--couleur-creme);
}

.culture-museum-row:nth-child(even) {
  background-color: var(--couleur-blanc-casse);
}

.culture-museum-row:hover {
  background-color: rgba(232, 224, 208, 0.4);
}

.culture-museum-name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  color: var(--couleur-sombre);
  margin: 0;
}

.culture-museum-distance {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--couleur-sauge);
  font-style: italic;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 35.99rem) {
  .culture-museum-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    gap: 0.375rem;
  }
  .culture-museum-distance {
    white-space: normal;
  }
}

/* ==========================================================
   BOUTONS CTA FINAL À PROXIMITÉ (DÉSKTOP/TABLETTE CÔTE À CÔTE, GAP 16PX)
   ========================================================== */
.cta-proxi__actions,
#brxe-vlp_proxi_cta_act {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-top: 1rem;
}

.cta-proxi__actions .btn,
#brxe-vlp_proxi_cta_btn1,
#brxe-vlp_proxi_cta_btn2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 24px !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-button, 1rem) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* Bouton secondaire: Découvrir le gîte */
.btn--proxi-sec,
#brxe-vlp_proxi_cta_btn1 {
  background-color: transparent !important;
  color: #A9B99A !important;
  border: 1px solid #76964B !important;
}

.btn--proxi-sec:hover,
#brxe-vlp_proxi_cta_btn1:hover {
  background-color: #76964B !important;
  border-color: #76964B !important;
  color: #FAF8F3 !important;
}

/* Bouton principal: Demander une réservation */
.btn--proxi-pri,
#brxe-vlp_proxi_cta_btn2 {
  background-color: #76964B !important;
  color: #FAF8F3 !important;
  border: 1px solid #76964B !important;
}

.btn--proxi-pri:hover,
#brxe-vlp_proxi_cta_btn2:hover {
  background-color: var(--couleur-foret-sombre, #243830) !important;
  border-color: var(--couleur-foret-sombre, #243830) !important;
  color: #FAF8F3 !important;
}

/* Mobile uniquement (< 767px): l'un sous l'autre */
@media (max-width: 767px) {
  .cta-proxi__actions,
  #brxe-vlp_proxi_cta_act {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .cta-proxi__actions .btn,
  #brxe-vlp_proxi_cta_btn1,
  #brxe-vlp_proxi_cta_btn2 {
    width: 100% !important;
  }
}

/* ==========================================================
   CTA FINAL À PROXIMITÉ (FOND VERT FORET #334F48 FULL WIDTH & PADDING 80PX)
   ========================================================== */
.section--cta-proxi,
#brxe-vlp_proxi_cta_sec {
  background-color: #334F48 !important;
  background: #334F48 !important;
  color: #FAF8F3 !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.cta-proxi__cnt,
#brxe-vlp_proxi_cta_cnt {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-inline: auto !important;
}

.cta-proxi__ttl,
#brxe-vlp_proxi_cta_ttl {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-semibold) !important;
  color: #FAF8F3 !important;
  margin-bottom: 1rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.cta-proxi__txt,
#brxe-vlp_proxi_cta_txt {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: #A9B99A !important;
  max-width: 650px !important;
  margin-inline: auto !important;
  margin-bottom: 2rem !important;
  text-align: center !important;
}

.cta-proxi__actions,
#brxe-vlp_proxi_cta_act {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
}

.cta-proxi__actions .btn,
#brxe-vlp_proxi_cta_btn1,
#brxe-vlp_proxi_cta_btn2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 28px !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* Bouton secondaire: Découvrir le gîte */
.btn--proxi-sec,
#brxe-vlp_proxi_cta_btn1 {
  background-color: transparent !important;
  background: transparent !important;
  color: #A9B99A !important;
  border: 1px solid #76964B !important;
}

.btn--proxi-sec:hover,
#brxe-vlp_proxi_cta_btn1:hover {
  background-color: #76964B !important;
  background: #76964B !important;
  border-color: #76964B !important;
  color: #FAF8F3 !important;
}

/* Bouton principal: Demander une réservation */
.btn--proxi-pri,
#brxe-vlp_proxi_cta_btn2 {
  background-color: #76964B !important;
  background: #76964B !important;
  color: #FAF8F3 !important;
  border: 1px solid #76964B !important;
}

.btn--proxi-pri:hover,
#brxe-vlp_proxi_cta_btn2:hover {
  background-color: #243830 !important;
  background: #243830 !important;
  border-color: #243830 !important;
  color: #FAF8F3 !important;
}

/* Mobile uniquement (< 767px): padding 60px & boutons l'un sous l'autre */
@media (max-width: 767px) {
  .section--cta-proxi,
  #brxe-vlp_proxi_cta_sec {
    padding-top: 3.75rem !important; /* 60px */
    padding-bottom: 3.75rem !important;
  }
  .cta-proxi__actions,
  #brxe-vlp_proxi_cta_act {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .cta-proxi__actions .btn,
  #brxe-vlp_proxi_cta_btn1,
  #brxe-vlp_proxi_cta_btn2 {
    width: 100% !important;
  }
}


/* ==========================================================
   BLOC LIEN TOURISME OFFICIEL EN FIN D'ONGLET
   ========================================================== */
.touraine-tourism-link {
  width: 100%;
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--couleur-texte);
  background-color: var(--couleur-blanc-casse);
}

.touraine-tourism-link__a {
  color: var(--couleur-foret);
  text-decoration: underline;
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
}

.touraine-tourism-link__a:hover {
  color: var(--couleur-vegetal);
}

/* ==========================================================
   BLOC LIEN TOURISME OFFICIEL HORS GRID (INDÉPENDANT)
   ========================================================== */
.touraine-tourism-link-wrap {
  width: 100% !important;
  margin-top: 3.5rem !important; /* 56px */
  margin-bottom: 3.5rem !important; /* 56px */
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

.touraine-tourism-link {
  width: 100% !important;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--couleur-texte) !important;
  margin: 0 !important;
}

.touraine-tourism-link__a {
  color: var(--couleur-foret) !important;
  text-decoration: underline !important;
  font-weight: var(--fw-medium) !important;
  transition: color var(--transition-fast) !important;
}

.touraine-tourism-link__a:hover {
  color: var(--couleur-vegetal) !important;
}

/* ==========================================================
   CORRECTION ESPACEMENT VERTICAL BAS DE SECTION INCONTOURNABLES
   ========================================================== */
.section--incontournables {
  background-color: var(--couleur-blanc-casse);
  padding-top: var(--section-space-lg, 5rem);
  padding-bottom: 3.75rem !important; /* 60px entre le texte et la section CTA suivante */
  height: auto !important;
  min-height: 0 !important;
}

#brxe-vlp_proxi_inc_cnt {
  row-gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.incontournables-panel {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.touraine-tourism-link-wrap {
  width: 100% !important;
  margin-top: 50px !important; /* 50px entre la fin des cartes/musées et le texte */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  height: auto !important;
  min-height: 0 !important;
}

.touraine-tourism-link {
  width: 100% !important;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--couleur-texte) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}


/* ==========================================================
   LIENS CONTACT FOOTER (TÉLÉPHONE & EMAIL)
   ========================================================== */
.footer-contact-link,
#brxe-vlf028,
#brxe-vlf029 {
  color: var(--color-off-white) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

.footer-contact-link:hover,
#brxe-vlf028:hover,
#brxe-vlf029:hover {
  color: var(--couleur-sauge) !important;
  text-decoration: underline !important;
}


/* ==========================================================
   STYLES ARTICLE DE BLOG SINGLE (PAGE DE RÉFÉRENCE)
   ========================================================== */
.single-article-hero {
  background-color: var(--couleur-blanc-casse);
  padding-top: var(--section-space-lg);
  padding-bottom: var(--space-xl);
}

.article-hero-box {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-category-badge {
  display: inline-block;
  padding: 0.25rem 0.875rem;
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-sable);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--couleur-foret);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.article-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-semibold);
  color: var(--couleur-sombre);
  line-height: 1.25;
  margin-bottom: var(--space-sm);
  text-align: center;
}

.article-hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-large);
  line-height: var(--lh-body);
  color: var(--couleur-texte);
  margin-bottom: var(--space-xs);
  text-align: center;
}

.article-meta-date {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--couleur-sauge);
  font-style: italic;
  margin-bottom: var(--space-lg);
}

.article-featured-img-wrap {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0.25rem 1rem rgba(38, 44, 41, 0.06);
}

.article-featured-img-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.single-article-content {
  background-color: var(--couleur-blanc-casse);
  padding-block: var(--section-space-lg);
}

.article-editorial-container {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.article-paragraph {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--couleur-texte);
  margin: 0;
}

.article-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: var(--fw-semibold);
  color: var(--couleur-sombre);
  line-height: 1.3;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.article-media-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block: var(--space-xs);
  box-shadow: 0 0.125rem 0.5rem rgba(38, 44, 41, 0.04);
}

.conseil-lupantia {
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-sable);
  border-left: 4px solid var(--couleur-vegetal);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin-block: var(--space-xs);
}

.conseil-lupantia__label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--couleur-foret);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.375rem;
}

.conseil-lupantia__text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--couleur-texte);
  margin: 0;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-sable);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.25rem 0.75rem rgba(38, 44, 41, 0.08);
  border-color: var(--couleur-sauge);
}

.blog-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-card__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.blog-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
}

.blog-card__cat {
  color: var(--couleur-foret);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blog-card__date {
  color: var(--couleur-sauge);
  font-style: italic;
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  color: var(--couleur-sombre);
  margin: 0;
  line-height: 1.3;
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--couleur-texte);
  margin: 0;
  flex-grow: 1;
}

.blog-card__link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--couleur-foret);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--space-2xs);
  transition: color var(--transition-fast);
}

.blog-card__link:hover {
  color: var(--couleur-vegetal);
  text-decoration: underline;
}

/* ==========================================================
   CONTENEUR ET TYPOGRAPHIE DYNAMIQUE WORDPRESS POST CONTENT
   ========================================================== */
.article-dynamic-content-wrap,
#brxe-art_content_cnt {
  max-width: 800px !important;
  width: 100% !important;
  margin-inline: auto !important;
  margin-top: 64px !important;
  margin-bottom: 80px !important;
  padding-inline: 20px !important;
  box-sizing: border-box !important;
}

.article-dynamic-content-wrap,
.article-dynamic-content-wrap p,
.article-dynamic-content-wrap li,
.brxe-post-content,
.brxe-post-content p,
.brxe-post-content li {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #262C29 !important;
}

.article-dynamic-content-wrap p,
.brxe-post-content p {
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}

.article-dynamic-content-wrap h2,
.brxe-post-content h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: var(--fw-semibold) !important;
  color: #262C29 !important;
  line-height: 1.2 !important;
  margin-top: 56px !important;
  margin-bottom: 20px !important;
}

.article-dynamic-content-wrap h3,
.brxe-post-content h3 {
  font-family: var(--font-heading) !important;
  font-size: clamp(22px, 2.5vw, 28px) !important;
  font-weight: var(--fw-semibold) !important;
  color: #262C29 !important;
  line-height: 1.25 !important;
  margin-top: 40px !important;
  margin-bottom: 16px !important;
}

.article-dynamic-content-wrap img,
.article-dynamic-content-wrap figure img,
.brxe-post-content img,
.brxe-post-content figure img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin-block: 32px !important;
  display: block;
}

.article-dynamic-content-wrap ul,
.article-dynamic-content-wrap ol,
.brxe-post-content ul,
.brxe-post-content ol {
  margin-bottom: 20px !important;
  padding-left: 1.5rem !important;
}

.article-dynamic-content-wrap li,
.brxe-post-content li {
  margin-bottom: 8px !important;
  line-height: 1.7 !important;
}

.article-dynamic-content-wrap a,
.brxe-post-content a {
  color: var(--couleur-foret, #334F48) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: color var(--transition-fast) !important;
}

.article-dynamic-content-wrap a:hover,
.brxe-post-content a:hover {
  color: var(--couleur-vegetal, #76964B) !important;
}

@media (max-width: 767px) {
  .article-dynamic-content-wrap,
  #brxe-art_content_cnt {
    margin-top: 40px !important;
    margin-bottom: 50px !important;
    padding-inline: 20px !important;
    width: 100% !important;
  }
}

/* ==========================================================
   STYLES SUR-MESURE PAGE BLOG & FILTRES ARTICLES
   ========================================================== */
.section--blog-header {
  background-color: var(--couleur-blanc-casse);
  padding-top: var(--section-space-lg, 5rem);
  padding-bottom: var(--space-xl, 3.5rem);
}

.blog-header__cnt {
  max-width: 750px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-header__cnt .overline {
  margin-bottom: 0.75rem;
}

.blog-header__cnt .heading-h1 {
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.blog-header__cnt .text-large {
  max-width: 750px;
  margin-bottom: 0;
}

/* Filter bar buttons */
.blog-filters-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  width: 100%;
}

.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  min-height: 42px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--couleur-texte);
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-sable);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.blog-filter-btn:hover {
  border-color: var(--couleur-foret);
  color: var(--couleur-foret);
}

.blog-filter-btn.active {
  background-color: var(--couleur-foret) !important;
  border-color: var(--couleur-foret) !important;
  color: var(--couleur-blanc-casse) !important;
}

/* Blog grid & cards */
.blog-grid-section {
  background-color: var(--couleur-blanc-casse);
  padding-bottom: var(--section-space-lg, 5rem);
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-sable);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1rem rgba(38, 44, 41, 0.08);
  border-color: var(--couleur-sauge);
}

.blog-card__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.blog-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--couleur-sable);
}

.blog-card__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card__img-wrap img {
  transform: scale(1.03);
}

.blog-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small, 0.875rem);
}

.blog-card__cat {
  color: var(--couleur-foret);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blog-card__date {
  color: var(--couleur-sauge);
  font-style: italic;
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  color: var(--couleur-sombre);
  margin: 0;
  line-height: 1.3;
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--couleur-texte);
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--couleur-foret);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  transition: color var(--transition-fast);
}

.blog-card:hover .blog-card__link {
  color: var(--couleur-vegetal);
  text-decoration: underline;
}

/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
  width: 100%;
}

.blog-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 1rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--couleur-texte);
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-sable);
  text-decoration: none;
  cursor: pointer;
}

.blog-pagination__btn.active {
  background-color: var(--couleur-foret);
  color: var(--couleur-blanc-casse);
  border-color: var(--couleur-foret);
}

.blog-pagination__btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .blog-filters-bar {
    gap: 0.5rem;
    margin-top: 1.75rem;
  }
  .blog-filter-btn {
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    min-height: 38px;
  }
}

/* ==========================================================
   STYLES PAGE CONTACT & FORMULAIRE DE RÉSERVATION
   ========================================================== */
.cct-process-section {
  padding-block: 3.5rem;
  border-bottom: 1px solid var(--couleur-sable);
}

.cct-process-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.cct-process-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cct-process-num {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: var(--fw-bold, 700);
  color: #D8CFC0;
  line-height: 1;
}

.cct-process-ttl {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  color: var(--couleur-sombre);
  margin: 0;
}

.cct-process-txt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--couleur-texte);
  margin: 0;
}

.cct-process-divider {
  width: 1px;
  height: 90px;
  background-color: var(--couleur-sable);
  align-self: center;
}

/* Main Layout 2 Columns */
.cct-main-section {
  background-color: var(--couleur-blanc-casse);
  padding-block: var(--section-space-lg, 5rem);
}

.cct-main-layout {
  display: flex;
  gap: 3.5rem;
  width: 100%;
}

.cct-col-left {
  flex: 0 0 58%;
  display: flex;
  flex-direction: column;
}

.cct-col-right {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cct-section-title {
  margin-bottom: 2rem;
  font-size: var(--fs-h2);
  color: var(--couleur-sombre);
}

/* Form Fields */
.cct-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.cct-form-row {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}

.cct-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.cct-form-group label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--couleur-sombre);
}

.cct-form-group label .req {
  color: #B91C1C;
}

.cct-input,
.cct-select,
.cct-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--couleur-sable);
  background-color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--couleur-sombre);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cct-input:focus,
.cct-select:focus,
.cct-textarea:focus {
  outline: none;
  border-color: var(--couleur-foret);
  box-shadow: 0 0 0 3px rgba(51, 79, 72, 0.1);
}

.cct-input-error {
  border-color: #B91C1C !important;
}

.cct-error-msg {
  font-size: 0.8125rem;
  color: #B91C1C;
  margin-top: 0.125rem;
}

.cct-checkbox-group {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
}

.cct-checkbox-group input[type="checkbox"] {
  margin-top: 0.25rem;
  accent-color: var(--couleur-foret);
  width: 18px;
  height: 18px;
}

.cct-checkbox-group label {
  font-size: 0.8125rem;
  line-height: 1.45;
}

.cct-checkbox-group label a {
  color: var(--couleur-foret);
  text-decoration: underline;
}

.cct-submit-btn {
  width: 100% !important;
  margin-top: 0.5rem;
}

.cct-success-box {
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-vegetal);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-top: 1rem;
}

.cct-success-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  color: var(--couleur-foret);
  margin-bottom: 0.25rem;
}

.cct-success-txt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--couleur-texte);
  margin: 0;
}

/* Right Column Info List */
.cct-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cct-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.cct-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--couleur-creme);
  color: var(--couleur-vegetal);
  flex-shrink: 0;
}

.cct-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cct-info-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--fw-bold, 700);
  color: var(--couleur-sauge);
  letter-spacing: 0.05em;
}

.cct-info-val {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--couleur-sombre);
  margin: 0;
}

.cct-info-link {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--couleur-sombre);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cct-info-link:hover {
  color: var(--couleur-vegetal);
  text-decoration: underline;
}

.cct-map-wrap {
  width: 100%;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  border: 1px solid var(--couleur-sable);
}

.cct-access-box {
  background-color: var(--couleur-creme);
  border: 1px solid var(--couleur-sable);
  border-radius: var(--radius-md, 10px);
  padding: 1.5rem;
}

.cct-access-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  color: var(--couleur-sombre);
  margin: 0 0 1rem 0;
}

.cct-access-list {
  margin: 0;
  padding-left: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--couleur-texte);
}

.cct-access-list li {
  margin-bottom: 0.5rem;
}

.cct-reminder-section {
  padding-block: 1.75rem;
  border-top: 1px solid var(--couleur-sable);
}

.cct-reminder-txt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--couleur-texte);
  margin: 0;
}

.cct-reminder-link {
  color: var(--couleur-foret);
  text-decoration: underline;
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
}

.cct-reminder-link:hover {
  color: var(--couleur-vegetal);
}

@media (max-width: 991px) {
  .cct-main-layout {
    flex-direction: column;
    gap: 3rem;
  }
  .cct-col-left, .cct-col-right {
    flex: 1 1 100%;
  }
}

@media (max-width: 767px) {
  .cct-process-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
  .cct-process-divider {
    display: none;
  }
  .cct-form-row {
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* ==========================================================
   HERO CONTACT ALIGNÉ À GAUCHE HAUT DE GAMME (REF EXACTE)
   ========================================================== */
.section--hero-contact,
#brxe-cct_hero_sec {
  background-color: #334F48 !important;
  background: #334F48 !important;
  padding-block: 4.5rem !important; /* ~72px top/bottom = ~360px desktop height */
  width: 100% !important;
  box-sizing: border-box !important;
}

.cct-hero-cnt,
#brxe-cct_hero_cnt {
  max-width: 1200px !important;
  width: 100% !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.cct-hero-box {
  max-width: 600px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.hero-breadcrumb--left {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  color: #A9B99A !important;
  margin-bottom: 25px !important;
}

.hero-breadcrumb--left a {
  color: #A9B99A !important;
  text-decoration: none !important;
}

.hero-breadcrumb--left a:hover {
  color: #76964B !important;
  text-decoration: underline !important;
}

.cct-hero-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.125rem, 4vw, 3.25rem) !important; /* ~52px desktop */
  line-height: 1.05 !important;
  font-weight: 600 !important;
  color: #FAF8F3 !important;
  margin-top: 0 !important;
  margin-bottom: 25px !important;
  max-width: 600px !important;
  text-align: left !important;
}

.cct-hero-text {
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #A9B99A !important;
  margin: 0 !important;
  max-width: 600px !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  .section--hero-contact,
  #brxe-cct_hero_sec {
    padding-block: 3.5rem !important;
    height: auto !important;
  }
  .cct-hero-cnt,
  #brxe-cct_hero_cnt {
    padding-inline: 20px !important;
  }
}


.cct-error-box {
  background-color: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-top: 1rem;
}
.cct-error-box-txt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: #991B1B;
  margin: 0;
}


/* ==========================================================
   BOUTON ITINÉRAIRE GOOGLE MAPS PAGE CONTACT
   ========================================================== */
.cct-map-wrap {
  width: 100%;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  border: 1px solid var(--couleur-sable);
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
}

.cct-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--couleur-creme);
  color: var(--couleur-foret);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-top: 1px solid var(--couleur-sable);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cct-map-link:hover {
  background-color: var(--couleur-foret);
  color: var(--couleur-blanc-casse);
}

/* ==========================================================
   GALERIE PHOTO ÉDITORIALE UN APERÇU DU DOMAINE (8 PHOTOS)
   ========================================================== */
.section--gallery {
  background-color: var(--couleur-blanc-casse);
  padding-block: var(--section-space-lg, 5rem);
}

.gallery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl, 3rem);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  width: 100%;
  align-items: stretch;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md, 10px);
  background-color: var(--couleur-creme);
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.35s ease;
}

.gallery-item:hover img {
  transform: scale(1.03);
}

/* Placement Grid Desktop : Ligne 1 Villa (2/3) et Rose (1/3) même hauteur parfaite */
.gallery-item--1 {
  grid-column: 1 / 3;
  grid-row: 1;
  height: 380px;
}

.gallery-item--2 {
  grid-column: 3 / 4;
  grid-row: 1;
  height: 380px;
}

/* Ligne 2 : 3 photos de même hauteur */
.gallery-item--3 {
  grid-column: 1 / 2;
  grid-row: 2;
  height: 260px;
}

.gallery-item--4 {
  grid-column: 2 / 3;
  grid-row: 2;
  height: 260px;
}

.gallery-item--5 {
  grid-column: 3 / 4;
  grid-row: 2;
  height: 260px;
}

/* Ligne 3 : 3 photos de même hauteur */
.gallery-item--6 {
  grid-column: 1 / 2;
  grid-row: 3;
  height: 260px;
}

.gallery-item--7 {
  grid-column: 2 / 3;
  grid-row: 3;
  height: 260px;
}

.gallery-item--8 {
  grid-column: 3 / 4;
  grid-row: 3;
  height: 260px;
}

/* Tablette (max-width: 991px): 2 colonnes */
@media (max-width: 991px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .gallery-item--1,
  .gallery-item--2,
  .gallery-item--3,
  .gallery-item--4,
  .gallery-item--5,
  .gallery-item--6,
  .gallery-item--7,
  .gallery-item--8 {
    grid-column: auto;
    grid-row: auto;
    height: 260px;
  }
}

/* Mobile (max-width: 767px): 1 colonne */
@media (max-width: 767px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .gallery-item {
    height: 240px;
  }
}

/* ==========================================================
   SECTION VIDÉO DOMAINE
   ========================================================== */
.section--video-domaine {
  background-color: var(--couleur-creme);
  padding-block: var(--section-space-lg, 5rem);
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl, 3rem);
  max-width: var(--largeur-max, 1200px);
  margin-inline: auto;
}

.video-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.surtitre {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--couleur-sauge);
  margin-bottom: 0.75rem;
}

.video-intro-desc {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--couleur-texte);
  margin-top: 1rem;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background-color: #000000;
  box-shadow: 0 12px 32px rgba(36, 56, 48, 0.08);
}

.video-poster-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-poster-box:hover .video-poster-img {
  transform: scale(1.02);
}

.video-play-btn {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--couleur-blanc-casse, #FAF8F3);
  color: var(--couleur-foret, #334F48);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.video-poster-box:hover .video-play-btn {
  transform: scale(1.12);
  background-color: var(--couleur-foret, #334F48);
  color: var(--couleur-blanc-casse, #FAF8F3);
}

.video-play-btn:focus-visible {
  outline: 3px solid var(--couleur-vegetal);
  outline-offset: 4px;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .video-poster-img,
  .video-play-btn {
    transition: none !important;
  }
  .video-poster-box:hover .video-play-btn {
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .video-wrapper {
    max-width: 100%;
  }
  .video-play-btn {
    width: 60px;
    height: 60px;
  }
}

/* ==========================================================
   BOUTON VOIR TOUS LES AVIS PAGE D'ACCUEIL - CENTRAGE PARFAIT
   ========================================================== */
#brxe-vlp_avis_cnt {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.vlp-avis-btn-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 2.75rem !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.vlp-avis-btn {
  margin-inline: auto !important;
}

/* ==========================================================
   HIÉRARCHIE HARMONISÉE DES BOUTONS & LIENS D'ACTION
   ========================================================== */

/* 1. BOUTON PRINCIPAL (.btn-primary) - Conversion / Réservation */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  min-height: 2.875rem;
  background-color: var(--color-forest, #334f48);
  color: var(--color-on-dark, #faf8f3) !important;
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: var(--fs-button, 0.9375rem);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--color-forest, #334f48);
  border-radius: var(--radius-sm, 0.375rem);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 4px 12px rgba(51, 79, 72, 0.15);
}

.btn-primary:hover {
  background-color: var(--color-forest-dark, #243830);
  border-color: var(--color-forest-dark, #243830);
  color: var(--color-on-dark, #faf8f3) !important;
}

.btn-primary:focus-visible {
  outline: 3px solid var(--color-vegetal, #76964b);
  outline-offset: 2px;
}

/* 2. BOUTON SECONDAIRE (.btn-secondary) - Second bouton Hero */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  min-height: 2.875rem;
  background-color: transparent;
  color: var(--color-on-dark, #faf8f3) !important;
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: var(--fs-button, 0.9375rem);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid rgba(250, 248, 243, 0.6);
  border-radius: var(--radius-sm, 0.375rem);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--color-on-dark, #faf8f3);
  border-color: var(--color-on-dark, #faf8f3);
  color: var(--color-forest, #334f48) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.btn-secondary:focus-visible {
  outline: 3px solid var(--color-vegetal, #76964b);
  outline-offset: 2px;
}

/* 3. LIEN D'ACTION / LIEN TEXTE (.link-arrow) - Découverte & Navigation */
.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  background: transparent !important;
  color: var(--color-forest, #334f48) !important;
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold, 600);
  line-height: 1.4;
  text-decoration: none !important;
  border: none !important;
  padding: 0.25rem 0;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

/* Trait de soulignement sous le texte uniquement */
.link-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  right: 1.25rem;
  height: 2px;
  background-color: var(--color-vegetal, #76964b);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.link-arrow::after {
  content: "→";
  font-family: inherit;
  display: inline-block;
  transition: transform 0.2s ease;
}

.link-arrow:hover {
  color: var(--color-vegetal, #76964b) !important;
}

.link-arrow:hover::before {
  opacity: 1;
}

.link-arrow:hover::after {
  transform: translateX(5px);
}

.link-arrow:focus-visible {
  outline: 2px solid var(--color-vegetal, #76964b);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Responsive Mobile */
@media (max-width: 767px) {
  .btn-primary,
  .btn-secondary {
    min-height: 2.875rem;
    width: 100%;
  }
}

/* ==========================================================
   ACCESSIBILITÉ WCAG 2.2 AA - AJUSTEMENTS DE CONTRASTE
   ========================================================== */

/* Surtitres sur fond clair (Passage à #334F48 - Ratio 8.41:1) */
.surtitre,
.vlp-surtitre {
  color: var(--color-forest, #334f48) !important;
  font-weight: 600 !important;
}

/* Surtitres sur fond vert sombre (Hero/CTA - Passage à #FAF8F3 - Ratio 8.41:1) */
.hero .surtitre,
.section--cta .surtitre {
  color: var(--color-off-white, #faf8f3) !important;
}

/* Survol des liens d'action .link-arrow (Passage à #243830 - Ratio 11.75:1) */
.link-arrow:hover {
  color: var(--color-forest-dark, #243830) !important;
}
.link-arrow::before {
  background-color: var(--color-forest, #334f48) !important;
}
.link-arrow:hover::before {
  background-color: var(--color-forest-dark, #243830) !important;
}

/* ==========================================================
   GRID RESPONSIVE INCONTOURNABLES (3 COLS DESKTOP, 2 TABLET, 1 MOBILE)
   ========================================================== */
.incontournables-panel {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.grid-incontournables {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: var(--grid-gap-lg, 3rem);
  width: 100% !important;
}

.touraine-tourism-link-wrap {
  width: 100% !important;
  margin-top: 50px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 991px) {
  .grid-incontournables {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--grid-gap, 1.5rem);
  }
}

@media (max-width: 767px) {
  .grid-incontournables {
    grid-template-columns: 1fr !important;
    gap: var(--grid-gap-sm, 1rem);
  }
}

/* ==========================================================
   RÈGLES D'AFFICHAGE STRICTES ONGLET INCONTOURNABLES (PAGE À PROXIMITÉ)
   ========================================================== */
.incontournables-panel {
  display: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.incontournables-panel.is-active,
.incontournables-panel[data-panel="chateaux"]:not([style*="display: none"]) {
  display: block !important;
}

.grid-incontournables {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: var(--grid-gap-lg, 3rem);
  width: 100% !important;
}

.touraine-tourism-link-wrap {
  width: 100% !important;
  margin-top: 50px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 991px) {
  .grid-incontournables {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--grid-gap, 1.5rem);
  }
}

@media (max-width: 767px) {
  .grid-incontournables {
    grid-template-columns: 1fr !important;
    gap: var(--grid-gap-sm, 1rem);
  }
}

/* ==========================================================
   PAGE BLOG - GRILLE CARTES 3 COLONNES & DESIGN SYSTEM
   ========================================================== */
.blog-header__cnt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.blog-filters-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  margin-top: 1rem;
}

.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  background-color: var(--color-cream, #f5f1e8);
  color: var(--color-forest, #334f48);
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.875rem;
  font-weight: var(--fw-medium, 500);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-pill, 999rem);
  cursor: pointer;
  transition: all 0.2s ease;
}

.blog-filter-btn:hover {
  background-color: var(--color-sand, #e8e0d0);
  color: var(--color-forest, #334f48);
}

.blog-filter-btn.is-active {
  background-color: var(--color-forest, #334f48) !important;
  color: var(--color-off-white, #faf8f3) !important;
  border-color: var(--color-forest, #334f48) !important;
  font-weight: var(--fw-semibold, 600);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap-lg, 2.5rem);
  width: 100%;
  align-items: stretch;
}

.blog-card {
  display: block;
  width: 100%;
}

.blog-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-cream, #f5f1e8);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-card__inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(36, 56, 48, 0.1);
  border-color: var(--color-vegetal, #76964b);
}

.blog-card__img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-sand, #e8e0d0);
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card__inner:hover .blog-card__img {
  transform: scale(1.04);
}

.blog-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.blog-card__cat {
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-forest, #334f48);
}

.blog-card__date {
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.8125rem;
  color: var(--color-sage, #a9b99a);
}

.blog-card__title {
  font-family: var(--font-heading, "Lora", serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark, #262c29);
  line-height: 1.35;
  margin: 0 0 0.75rem 0;
}

.blog-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card__inner:hover .blog-card__title-link {
  color: var(--color-forest, #334f48);
}

.blog-card__excerpt {
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #4a5247);
  margin: 0 0 1.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.blog-card__action {
  margin-top: auto;
}

.blog-empty-msg {
  text-align: center;
  padding: 4rem 1.5rem;
  background-color: var(--color-cream, #f5f1e8);
  border: 1px dashed var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
  width: 100%;
}

.blog-empty-msg p {
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 1.0625rem;
  color: var(--color-text-secondary, #4a5247);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__inner,
  .blog-card__img {
    transition: none !important;
  }
  .blog-card__inner:hover {
    transform: none !important;
  }
}

@media (max-width: 991px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 767px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ==========================================================
   ENCART CONSEIL VILLA LUPANTIA (SANS ICÔNE - ÉQUILIBRÉ)
   ========================================================== */
.conseil-lupantia {
  background-color: var(--color-cream, #f5f1e8) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-left: 4px solid var(--color-vegetal, #76964b) !important;
  border-radius: var(--radius-sm, 6px) !important;
  padding: 1.25rem 1.5rem !important;
  margin-block: 1.75rem !important;
}

.conseil-lupantia__label {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--color-forest, #334f48) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
  line-height: 1.2 !important;
}

.conseil-lupantia__text {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: var(--color-text-secondary, #4a5247) !important;
  margin: 0 !important;
}

/* ==========================================================
   PAGE LE GÎTE - DESIGN SYSTEM & STRUCTURE ÉDITORIALE
   ========================================================== */
.hero-gite__cnt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  text-align: center;
}

.hero-gite__hdr {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  gap: 1.25rem;
}

.hero-gite__img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 12px 32px rgba(36, 56, 48, 0.12);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin-top: 1rem;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background-color: var(--color-cream, #f5f1e8);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
}

.kpi-card__val {
  font-family: var(--font-heading, "Lora", serif);
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--color-forest, #334f48);
  line-height: 1.2;
}

.kpi-card__lbl {
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.875rem;
  color: var(--color-text-secondary, #4a5247);
  margin-top: 0.25rem;
}

.editorial-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.editorial-col--text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
  text-align: left;
}

.editorial-img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--radius-md, 10px);
}

.spaces-hdr, .rooms-hdr, .eq-hdr, .gal-hdr {
  text-align: center;
  margin-bottom: 2.5rem;
}

.space-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.space-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-off-white, #faf8f3);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

.space-card__img-wrap {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.space-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.space-card:hover .space-card__img {
  transform: scale(1.03);
}

.space-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rooms-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.rooms-info-card {
  padding: 2rem;
  background-color: var(--color-cream, #f5f1e8);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rooms-spec-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.9375rem;
  color: var(--color-text-secondary, #4a5247);
}

.rooms-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.room-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
}

.room-photo:first-child {
  grid-column: span 2;
  height: 220px;
}

.eq-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.eq-card {
  padding: 1.5rem;
  background-color: var(--color-off-white, #faf8f3);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gite-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.gite-gal-item {
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  height: 240px;
}

.gite-gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gite-gal-item:hover img {
  transform: scale(1.04);
}

.gite-gal-item--1 {
  grid-column: span 2;
  height: 320px;
}

.gite-gal-item--2 {
  height: 320px;
}

@media (max-width: 991px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .editorial-row, .rooms-overview {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .space-cards-grid, .eq-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gite-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gite-gal-item--1 {
    grid-column: span 1;
    height: 240px;
  }
  .gite-gal-item--2 {
    height: 240px;
  }
}

@media (max-width: 767px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .space-cards-grid, .eq-cards-grid {
    grid-template-columns: 1fr;
  }
  .rooms-gallery-grid {
    grid-template-columns: 1fr;
  }
  .room-photo:first-child {
    grid-column: span 1;
  }
}

/* ==========================================================
   GALERIE COMPLÈTE DE TOUTES LES 11 PHOTOS DES CHAMBRES
   ========================================================== */
.rooms-section-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
}

.rooms-info-card {
  padding: 2rem;
  background-color: var(--color-cream, #f5f1e8);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rooms-spec-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.9375rem;
  color: var(--color-text-secondary, #4a5247);
}

.rooms-gallery-title {
  text-align: center;
  margin-top: 1rem;
}

.rooms-gallery-grid-all {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.room-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md, 10px);
  background-color: var(--color-cream, #f5f1e8);
  border: 1px solid var(--color-sand, #e8e0d0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.room-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(36, 56, 48, 0.1);
}

.room-photo-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.room-photo-card:hover .room-photo-img {
  transform: scale(1.04);
}

.room-photo-cap {
  padding: 0.875rem 1rem;
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-forest, #334f48);
  text-align: center;
  background-color: var(--color-off-white, #faf8f3);
  border-top: 1px solid var(--color-sand, #e8e0d0);
}

@media (max-width: 991px) {
  .rooms-gallery-grid-all {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 767px) {
  .rooms-gallery-grid-all {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ==========================================================
   SECTION VIE EN GROUPE - GRILLE ÉDITORIALE 100% NATIF BRICKS
   ========================================================== */
.spaces-hdr-ttl {
  margin-bottom: 3rem !important;
}

.spaces-editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2.5rem;
  width: 100%;
  align-items: stretch;
}

.space-editorial-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.space-editorial-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 4px 16px rgba(36, 56, 48, 0.06);
  transition: transform 0.3s ease;
}

.space-editorial-card:hover .space-editorial-card__img {
  transform: translateY(-2px);
}

.space-editorial-card__title {
  font-family: var(--font-heading, "Lora", serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-dark, #262c29);
  line-height: 1.3;
  margin: 0;
}

.space-editorial-card__desc {
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #4a5247);
  margin: 0;
}

@media (max-width: 991px) {
  .spaces-editorial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
}

@media (max-width: 767px) {
  .spaces-editorial-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* ==========================================================
   ASPECT-RATIO 16/10 ET OBJECT-FIT COVER POUR SECTION VIE EN GROUPE
   ========================================================== */
.space-editorial-card__img,
.brxe-image.space-editorial-card__img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
  box-shadow: 0 4px 16px rgba(36, 56, 48, 0.06) !important;
  transition: transform 0.3s ease !important;
}

.space-editorial-card:hover .space-editorial-card__img {
  transform: translateY(-2px) !important;
}

/* ==========================================================
   SECTION LES COUCHAGES - STRUCTURE 100% NATIF BRICKS
   ========================================================== */
.rooms-hdr-ttl {
  text-align: center !important;
}

.rooms-intro-text {
  max-width: 780px !important;
  margin: 0 auto 2.5rem auto !important;
  text-align: center !important;
}

.rooms-specs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  width: 100% !important;
  margin-bottom: 3.5rem !important;
}

.room-spec-card {
  padding: 1.5rem 1.25rem !important;
  background-color: var(--color-cream, #f5f1e8) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important;
  text-align: center !important;
}

.room-spec-card__title {
  font-family: var(--font-heading, "Lora", serif) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--color-forest, #334f48) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.room-spec-card__desc {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.875rem !important;
  color: var(--color-text-secondary, #4a5247) !important;
  margin: 0 !important;
}

.rooms-gal-title {
  text-align: center !important;
  margin-bottom: 1.75rem !important;
  color: var(--color-dark, #262c29) !important;
}

.rooms-native-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

.room-native-gal-img,
.brxe-image.room-native-gal-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
  box-shadow: 0 4px 16px rgba(36, 56, 48, 0.06) !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.room-native-gal-img:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(36, 56, 48, 0.1) !important;
}

@media (max-width: 991px) {
  .rooms-specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .rooms-native-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  .rooms-specs-grid {
    grid-template-columns: 1fr !important;
  }
  .rooms-native-gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ==========================================================
   GALERIE CHAMBRES PURS VISUELS (SANS CADRE/BORDURE/FOND/OMBRE)
   ========================================================== */
.rooms-native-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

.room-native-gal-img,
.brxe-image.room-native-gal-img,
.brxe-image.room-native-gal-img a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  outline: none !important;
}

.room-native-gal-img img,
.brxe-image.room-native-gal-img img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.3s ease !important;
}

.room-native-gal-img:hover img,
.brxe-image.room-native-gal-img:hover img {
  transform: translateY(-3px) !important;
}

@media (max-width: 991px) {
  .rooms-native-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  .rooms-native-gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ==========================================================
   PAGE CONTACT - STYLES DESIGN SYSTEM & FORMULAIRE
   ========================================================== */
.cct-hero-cnt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.cct-hero-title {
  font-family: var(--font-heading, "Lora", serif);
  color: var(--color-forest, #334f48);
  margin: 0;
}

.cct-hero-text {
  max-width: 680px;
  font-size: 1.0625rem;
  color: var(--color-text-secondary, #4a5247);
}

.cct-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
  width: 100%;
}

.cct-process-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background-color: var(--color-off-white, #faf8f3);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
}

.cct-process-num {
  font-family: var(--font-heading, "Lora", serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-vegetal, #76964b);
}

.cct-process-ttl {
  font-family: var(--font-heading, "Lora", serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark, #262c29);
  margin: 0;
}

.cct-process-txt {
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.9375rem;
  color: var(--color-text-secondary, #4a5247);
  margin: 0;
}

.cct-main-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  width: 100%;
}

.cct-col-left, .cct-col-right {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.cct-section-title {
  margin-bottom: 0.5rem;
}

.cct-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.cct-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cct-form-group label {
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark, #262c29);
}

.cct-form-group label .req {
  color: var(--color-forest, #334f48);
}

.cct-input, .cct-select, .cct-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body, "Outfit", sans-serif);
  font-size: 0.9375rem;
  color: var(--color-dark, #262c29);
  background-color: var(--color-off-white, #faf8f3);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-sm, 6px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cct-input:focus, .cct-select:focus, .cct-textarea:focus {
  outline: none;
  border-color: var(--color-forest, #334f48);
  box-shadow: 0 0 0 3px rgba(51, 79, 72, 0.15);
}

.cct-input-error {
  border-color: #c93b2b !important;
  background-color: #fff8f7 !important;
}

.cct-error-msg {
  font-size: 0.8125rem;
  color: #c93b2b;
  min-height: 1.1rem;
}

.cct-checkbox-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}

.cct-checkbox-group input[type="checkbox"] {
  margin-top: 0.25rem;
  accent-color: var(--color-forest, #334f48);
  width: 1.125rem;
  height: 1.125rem;
}

.cct-checkbox-group label {
  font-weight: 400;
  font-size: 0.84375rem;
  line-height: 1.4;
  color: var(--color-text-secondary, #4a5247);
}

.cct-submit-btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.cct-success-box {
  padding: 1.25rem;
  background-color: #f0f7f4;
  border: 1px solid var(--color-vegetal, #76964b);
  border-radius: var(--radius-md, 10px);
  margin-top: 1rem;
}

.cct-success-title {
  font-family: var(--font-heading, "Lora", serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-forest, #334f48);
  margin-bottom: 0.25rem;
}

.cct-success-txt {
  font-size: 0.875rem;
  color: var(--color-dark, #262c29);
  margin: 0;
}

.cct-error-box {
  padding: 1rem;
  background-color: #fdf2f2;
  border: 1px solid #c93b2b;
  border-radius: var(--radius-md, 10px);
  margin-top: 1rem;
}

.cct-error-box-txt {
  font-size: 0.875rem;
  color: #c93b2b;
  margin: 0;
}

.cct-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cct-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.cct-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-cream, #f5f1e8);
  color: var(--color-forest, #334f48);
  border-radius: 50%;
  flex-shrink: 0;
}

.cct-info-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-forest, #334f48);
  margin-bottom: 0.25rem;
}

.cct-info-val {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-dark, #262c29);
}

.cct-info-link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-forest, #334f48);
  text-decoration: none;
}

.cct-info-link:hover {
  text-decoration: underline;
}

.cct-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

.cct-map-wrap iframe {
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 4px 16px rgba(36, 56, 48, 0.08);
}

.cct-access-box {
  padding: 1.5rem;
  background-color: var(--color-cream, #f5f1e8);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cct-access-title {
  font-family: var(--font-heading, "Lora", serif);
  font-size: 1.125rem;
  color: var(--color-forest, #334f48);
  margin: 0;
}

.cct-access-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #4a5247);
}

.cct-reminder-section {
  text-align: center;
}

.cct-rmd-cnt {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cct-reminder-txt {
  margin: 0;
  font-size: 1rem;
  color: var(--color-dark, #262c29);
}

.cct-reminder-link {
  color: var(--color-forest, #334f48);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 991px) {
  .cct-main-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .cct-process-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 767px) {
  .cct-form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .cct-submit-btn {
    width: 100%;
  }
}

/* ==========================================================
   PAGE CONTACT REFONTE UNIFIÉE ET COMPACTE (WCAG AA & 0 CLS)
   ========================================================== */
.cct-hero-sec-compact {
  background-color: var(--color-forest, #334f48) !important;
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

.cct-hero-cnt {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

.hero-breadcrumb-horizontal {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.5rem !important;
}

.hero-bc-link {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.hero-bc-link:hover {
  color: var(--color-sage, #a9b99a) !important;
}

.hero-bc-sep, .hero-bc-curr {
  color: #ffffff !important;
}

.cct-hero-h1-compact {
  color: #ffffff !important;
  margin: 0 !important;
}

.cct-hero-txt-compact {
  color: #ffffff !important;
  max-width: 720px !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.cct-process-sec-compact {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.cct-prc-title {
  text-align: center !important;
  margin-bottom: 2.5rem !important;
}

.cct-process-grid-native {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  width: 100% !important;
}

.cct-step-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  padding: 1.75rem !important;
  background-color: var(--color-off-white, #faf8f3) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
}

.cct-step-num {
  font-family: var(--font-heading, "Lora", serif) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--color-forest, #334f48) !important;
}

.cct-step-ttl {
  font-family: var(--font-heading, "Lora", serif) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--color-dark, #262c29) !important;
  margin: 0 !important;
}

.cct-step-desc {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.9375rem !important;
  color: var(--color-text-secondary, #4a5247) !important;
  margin: 0 !important;
}

.cct-main-section-clean {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.cct-main-grid-aligned {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 3.5rem !important;
  align-items: start !important;
  width: 100% !important;
}

.cct-col-left-form, .cct-col-right-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

.cct-col-title {
  margin-bottom: 0.25rem !important;
}

.cct-form-clean {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.cct-info-blocks-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.cct-info-unit {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.cct-info-sublabel {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--color-forest, #334f48) !important;
}

.cct-info-text-val {
  margin: 0 !important;
  font-size: 0.9375rem !important;
  color: var(--color-dark, #262c29) !important;
}

.cct-info-link-val {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--color-forest, #334f48) !important;
  text-decoration: underline !important;
}

.cct-info-link-val:hover {
  color: var(--color-vegetal, #76964b) !important;
}

.cct-maps-btn {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0.5rem !important;
}

.cct-access-card-clean {
  padding: 1.5rem !important;
  background-color: var(--color-cream, #f5f1e8) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  margin-top: 0.5rem !important;
}

.cct-acc-title {
  font-family: var(--font-heading, "Lora", serif) !important;
  font-size: 1.125rem !important;
  color: var(--color-forest, #334f48) !important;
  margin: 0 !important;
}

.cct-acc-line {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.875rem !important;
  color: var(--color-text-secondary, #4a5247) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

@media (max-width: 991px) {
  .cct-main-grid-aligned {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .cct-process-grid-native {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  .cct-hero-sec-compact {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .cct-form-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .cct-submit-btn {
    width: 100% !important;
  }
}

/* ==========================================================
   HAUTEUR STRICTEMENT ÉGALE DES 3 CARTES DU PROCESSUS CONTACT
   ========================================================== */
.cct-process-grid-native {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
  width: 100% !important;
}

.cct-step-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  min-height: 100% !important;
  gap: 0.75rem !important;
  padding: 1.75rem !important;
  background-color: var(--color-off-white, #faf8f3) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
}

/* ==========================================================
   FIL D'ARIANE STRICTEMENT SUR UNE SEULE LIGNE HORIZONTALE
   ========================================================== */
.hero-breadcrumb-horizontal,
#brxe-cct_hero_bc_wrap,
.brxe-block.hero-breadcrumb-horizontal {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  width: auto !important;
}

.hero-breadcrumb-horizontal > * {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* ==========================================================
   SECTION CARTE GOOGLE MAPS PLEINE LARGEUR EN BAS DE PAGE
   ========================================================== */
.section--map-fullwidth {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.container--fullwidth {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cct-map-full-iframe,
.cct-map-full-iframe iframe {
  display: block !important;
  width: 100% !important;
  height: 480px !important;
  border: none !important;
}

@media (max-width: 767px) {
  .cct-map-full-iframe iframe {
    height: 360px !important;
  }
}

/* ==========================================================
   BLOG CARD UNIFIED & CLEAN (FIX DOUBLE BORDER ON HOVER)
   ========================================================== */
.blog-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background-color: var(--color-cream, #f5f1e8) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.blog-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(36, 56, 48, 0.1) !important;
  border-color: var(--color-vegetal, #76964b) !important;
}

.blog-card__inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.blog-card__inner:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ==========================================================
   BLOG CARD UNIFIED & CATEGORY FILTERING FIX
   ========================================================== */
.blog-card.is-hidden,
.blog-card[style*="display: none"] {
  display: none !important;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-cream, #f5f1e8);
  border: 1px solid var(--color-sand, #e8e0d0);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  box-shadow: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(36, 56, 48, 0.1);
  border-color: var(--color-vegetal, #76964b);
}

.blog-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.blog-card__inner:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* ==========================================================
   PAGE À PROXIMITÉ — OPTIMISATION ONGLET CHÂTEAUX & CARTE
   ========================================================== */
.grid-incontournables {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
  margin-bottom: 3rem !important;
}

.lieu-card--clickable {
  display: flex !important;
  flex-direction: column !important;
  height: 100 % !important;
  text-decoration: none !important;
  color: inherit !important;
  background-color: var(--color-cream, #f5f1e8) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.lieu-card--clickable:hover {
  transform: translateY(-4px) !important;
  border-color: var(--color-vegetal, #76964b) !important;
  box-shadow: 0 8px 20px rgba(36, 56, 48, 0.08) !important;
}

.lieu-card__content {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 1.5rem !important;
  gap: 0.75rem !important;
}

.lieu-card__distance--clean {
  margin-top: auto !important;
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--color-forest, #334f48) !important;
  background-color: rgba(118, 150, 75, 0.12) !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 6px !important;
  display: inline-block !important;
  align-self: flex-start !important;
}

.chateaux-map-section {
  margin-top: 3.5rem !important;
  padding: 2.5rem !important;
  background-color: var(--color-off-white, #faf8f3) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 1rem !important;
}

.chateaux-map-eyebrow {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--color-vegetal, #76964b) !important;
}

.chateaux-map-title {
  margin: 0 !important;
  color: var(--color-dark, #262c29) !important;
}

.chateaux-map-desc {
  max-width: 680px !important;
  margin: 0 0 1rem 0 !important;
  font-size: 0.9375rem !important;
  color: var(--color-text-secondary, #4a5247) !important;
}

.touraine-map-wrapper {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto 1.5rem auto !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(36, 56, 48, 0.05) !important;
}

.chateaux-map-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0.5rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .lieu-card--clickable {
    transition: none !important;
  }
  .lieu-card--clickable:hover {
    transform: none !important;
  }
}

@media (max-width: 991px) {
  .grid-incontournables {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 600px) {
  .grid-incontournables {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .chateaux-map-section {
    padding: 1.5rem 1rem !important;
  }
}

/* ==========================================================
   PAGE EXTÉRIEURS — STYLES ÉDITORIAUX ET RESPONSIVE (100% BRICKS)
   ========================================================== */
.section--hero-ext {
  background-color: var(--color-forest, #334f48) !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.ext-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3.5rem !important;
  align-items: center !important;
}

.ext-hero-txt-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
}

.ext-eyebrow-light {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--color-sage, #a9b99a) !important;
  text-transform: uppercase !important;
}

.ext-eyebrow-dark {
  font-family: var(--font-body, "Outfit", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--color-vegetal, #76964b) !important;
  text-transform: uppercase !important;
}

.ext-hero-h1 {
  color: #ffffff !important;
  margin: 0 !important;
}

.ext-hero-desc {
  color: #ffffff !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.ext-hero-cta {
  margin-top: 0.5rem !important;
}

.ext-hero-img-block {
  width: 100% !important;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

.ext-hero-img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.ext-intro-sec {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.ext-intro-cnt {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 820px !important;
  gap: 1.25rem !important;
}

.ext-intro-h2 {
  margin: 0 !important;
}

.ext-intro-desc {
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
  color: var(--color-text-secondary, #4a5247) !important;
  margin: 0 !important;
}

.ext-domaine-sec {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.ext-domaine-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 4rem !important;
  align-items: center !important;
}

.ext-domaine-txt-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.ext-domaine-h2 {
  margin: 0 !important;
}

.ext-domaine-desc {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--color-text-secondary, #4a5247) !important;
  margin: 0 !important;
}

.ext-domaine-img-block {
  width: 100% !important;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(36, 56, 48, 0.08) !important;
}

.ext-domaine-img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.ext-espaces-sec {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.ext-espaces-hdr-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 3rem !important;
  gap: 0.75rem !important;
}

.ext-espaces-title {
  margin: 0 !important;
}

.ext-espaces-sub {
  max-width: 680px !important;
  font-size: 1.0625rem !important;
  color: var(--color-text-secondary, #4a5247) !important;
  margin: 0 !important;
}

.ext-espaces-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

.ext-space-card {
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--color-off-white, #faf8f3) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden !important;
  height: 100% !important;
}

.ext-space-card__img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
}

.ext-space-card__body {
  display: flex !important;
  flex-direction: column !important;
  padding: 1.5rem !important;
  gap: 0.75rem !important;
  flex-grow: 1 !important;
}

.ext-space-card__title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  color: var(--color-dark, #262c29) !important;
}

.ext-space-card__txt {
  margin: 0 !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: var(--color-text-secondary, #4a5247) !important;
}

.ext-act-sec {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.ext-act-hdr-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 3rem !important;
  gap: 0.75rem !important;
}

.ext-act-title {
  margin: 0 !important;
}

.ext-act-sub {
  max-width: 680px !important;
  font-size: 1.0625rem !important;
  color: var(--color-text-secondary, #4a5247) !important;
  margin: 0 !important;
}

.ext-act-grid-native {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.75rem !important;
  align-items: stretch !important;
}

.ext-act-card {
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--color-cream, #f5f1e8) !important;
  border: 1px solid var(--color-sand, #e8e0d0) !important;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden !important;
  height: 100% !important;
}

.ext-act-card__img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
}

.ext-act-card__body {
  display: flex !important;
  flex-direction: column !important;
  padding: 1.25rem !important;
  gap: 0.5rem !important;
  flex-grow: 1 !important;
}

.ext-act-card__title {
  margin: 0 !important;
  font-size: 1.125rem !important;
  color: var(--color-dark, #262c29) !important;
}

.ext-act-card__txt {
  margin: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-secondary, #4a5247) !important;
}

.ext-gal-sec {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.ext-gal-title {
  text-align: center !important;
  margin-bottom: 2.5rem !important;
}

.ext-gallery-grid-native {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

.ext-gallery-img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.ext-gallery-img:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(36, 56, 48, 0.12) !important;
}

.section--cta-ext {
  background-color: var(--color-forest, #334f48) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.ext-cta-cnt {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 720px !important;
  gap: 1.25rem !important;
}

.ext-cta-h2 {
  color: #ffffff !important;
  margin: 0 !important;
}

.ext-cta-desc {
  color: #ffffff !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  .ext-hero-grid, .ext-domaine-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .ext-espaces-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .ext-act-grid-native {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  .ext-gallery-grid-native {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .ext-act-grid-native, .ext-gallery-grid-native {
    grid-template-columns: 1fr !important;
  }
  .section--hero-ext, .ext-intro-sec, .ext-domaine-sec, .ext-espaces-sec, .ext-act-sec, .ext-gal-sec, .section--cta-ext {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ==========================================================
   GRILLE 3 COLONNES LOISIRS (VOLLEY, TENNIS, PING-PONG, BILLARD, BABY-FOOT, JEUX)
   ========================================================== */
.ext-act-grid-native {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

@media (max-width: 991px) {
  .ext-act-grid-native {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 600px) {
  .ext-act-grid-native {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   GALERIE EXTÉRIEURS SANS CADRES NI BORDURES (NATIVE BRICKS)
   ========================================================== */
.ext-gallery-grid-native {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

.ext-gallery-grid-native > *,
.ext-gallery-img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 0.25s ease !important;
}

.ext-gallery-img:hover {
  transform: scale(1.02) !important;
  box-shadow: none !important;
  border: none !important;
}

@media (max-width: 991px) {
  .ext-gallery-grid-native {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .ext-gallery-grid-native {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   GALERIE ÉDITORIALE MASONRY DYNAMIQUE (EXTÉRIEURS)
   ========================================================== */
.ext-editorial-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 240px !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

.ext-gal-item {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-radius: var(--radius-md, 10px) !important;
}

.ext-gal-item--wide {
  grid-column: span 2 !important;
}

.ext-gal-item--tall {
  grid-row: span 2 !important;
}

.ext-gal-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.ext-gal-img:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 10px 24px rgba(36, 56, 48, 0.12) !important;
}

@media (max-width: 991px) {
  .ext-editorial-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 220px !important;
  }
  .ext-gal-item--wide {
    grid-column: span 2 !important;
  }
  .ext-gal-item--tall {
    grid-row: span 2 !important;
  }
}

@media (max-width: 600px) {
  .ext-editorial-gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .ext-gal-item--wide {
    grid-column: span 1 !important;
  }
  .ext-gal-item--tall {
    grid-row: span 1 !important;
  }
  .ext-gal-item {
    height: auto !important;
    aspect-ratio: auto !important;
  }
  .ext-gal-img {
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: 480px !important;
  }
}

/* ==========================================================
   MOSAÏQUE ÉDITORIALE STRUCTURÉE ET COMPACTE (0 VIDE / 0 HORROURS)
   ========================================================== */
.ext-compact-mosaic-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 260px) !important;
  gap: 1.25rem !important;
  width: 100% !important;
}

.ext-mosaic-item {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-radius: var(--radius-md, 10px) !important;
}

/* Positionnement exact Desktop sans trous */
.ext-mosaic-item--hero-landscape {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 2 !important;
}

.ext-mosaic-item--tall-portrait {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 3 !important;
}

.ext-mosaic-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: transform 0.3s ease !important;
}

.ext-mosaic-img:hover {
  transform: scale(1.02) !important;
}

/* Tablette: 2 colonnes structurées */
@media (max-width: 991px) {
  .ext-compact-mosaic-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 240px !important;
  }
  .ext-mosaic-item--hero-landscape {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
  .ext-mosaic-item--tall-portrait {
    grid-column: span 1 !important;
    grid-row: span 2 !important;
  }
}

/* Mobile: 1 colonne fluide avec proportions naturelles */
@media (max-width: 600px) {
  .ext-compact-mosaic-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    gap: 1rem !important;
  }
  .ext-mosaic-item--hero-landscape,
  .ext-mosaic-item--tall-portrait,
  .ext-mosaic-item {
    grid-column: span 1 !important;
    grid-row: auto !important;
    height: auto !important;
  }
  .ext-mosaic-img {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }
  .ext-mosaic-item--tall-portrait .ext-mosaic-img {
    aspect-ratio: 4 / 5 !important;
  }
}

/* ==========================================================
   MOSAÏQUE 4 COLONNES AVEC BALANÇOIRES ET ROSIER EN PORTRAIT STRICT
   ========================================================== */
.ext-mosaic-4col-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(3, 240px) !important;
  gap: 1.25rem !important;
  width: 100% !important;
}

.ext-mosaic-item {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-radius: var(--radius-md, 10px) !important;
}

/* Positionnement exact Desktop sans trous */
.ext-mosaic-item--hero-landscape {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 2 !important;
}

.ext-mosaic-item--pos-r1c3 {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
}

.ext-mosaic-item--balancoires-portrait {
  grid-column: 4 / 5 !important;
  grid-row: 1 / 3 !important;
}

.ext-mosaic-item--rose-portrait {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 4 !important;
}

.ext-mosaic-item--facade-landscape {
  grid-column: 2 / 4 !important;
  grid-row: 2 / 3 !important;
}

.ext-mosaic-item--pos-r3c2 {
  grid-column: 2 / 3 !important;
  grid-row: 3 / 4 !important;
}

.ext-mosaic-item--potager-wide {
  grid-column: 3 / 5 !important;
  grid-row: 3 / 4 !important;
}

.ext-mosaic-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: transform 0.3s ease !important;
}

.ext-mosaic-img:hover {
  transform: scale(1.02) !important;
}

/* Tablette: 2 colonnes structurées */
@media (max-width: 991px) {
  .ext-mosaic-4col-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 230px !important;
  }
  .ext-mosaic-item--hero-landscape,
  .ext-mosaic-item--facade-landscape,
  .ext-mosaic-item--potager-wide {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
  .ext-mosaic-item--balancoires-portrait,
  .ext-mosaic-item--rose-portrait {
    grid-column: span 1 !important;
    grid-row: span 2 !important;
  }
  .ext-mosaic-item--pos-r1c3,
  .ext-mosaic-item--pos-r3c2 {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
}

/* Mobile: 1 colonne fluide avec proportions naturelles */
@media (max-width: 600px) {
  .ext-mosaic-4col-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    gap: 1rem !important;
  }
  .ext-mosaic-item {
    grid-column: span 1 !important;
    grid-row: auto !important;
    height: auto !important;
  }
  .ext-mosaic-img {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }
  .ext-mosaic-item--balancoires-portrait .ext-mosaic-img,
  .ext-mosaic-item--rose-portrait .ext-mosaic-img {
    aspect-ratio: 3 / 4 !important;
  }
}

/* ==========================================================
   GAP RÉDUIT POUR LA MOSAÏQUE 4 COLONNES (EXTÉRIEURS)
   ========================================================== */
.ext-mosaic-4col-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(3, 240px) !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

@media (max-width: 600px) {
  .ext-mosaic-4col-grid {
    gap: 0.625rem !important;
  }
}