/*
Theme Name:   Villa Dordogne — Les Terrasses
Theme URI:    https://villadordogne.fr
Description:  Thème enfant Divi pour la Maison Les Terrasses, Dévillac (47). Reprend et prolonge la charte graphique de villadordogne.com : vert profond, terracotta, crème, typographie serif Cormorant Garamond.
Author:       Hervé & Mireille — Maison Les Terrasses
Author URI:   https://villadordogne.fr
Template:     Divi
Version:      3.41.0
License:      GNU General Public License v2 or later
Text Domain:  villadordogne
*/

/* ==========================================================================
   1. VARIABLES — LA CHARTE
   Toute la palette et la typographie sont centralisées ici.
   Pour changer une couleur sur tout le site, modifiez uniquement cette section.
   ========================================================================== */

:root {
  /* Couleurs principales */
  --vd-vert:            #2F4739; /* vert profond — bandeaux, encadrés « inclus » */
  --vd-vert-clair:      #3E5C4A;
  --vd-vert-pale:       #EAEFE9;
  /* Terracotta assombri en v3.15.0 : #B5673C ne donnait que 4,23:1 sur blanc
     et 3,82:1 sur crème, sous le seuil AA de 4,5:1 exigé pour un texte de
     moins de 18,66 px — libellés de boutons, sur-titres, noms des voyageurs.
     #A0562F monte à 5,43:1 sur blanc et 4,91:1 sur crème, pour une différence
     de teinte imperceptible à l'œil. */
  --vd-terracotta:      #A0562F; /* accent — boutons, sur-titres, prix */
  --vd-terracotta-fonce:#874527;
  --vd-terracotta-pale: #FBF0E9;
  --vd-brun:            #3A2E26; /* en-têtes de tableaux */
  --vd-sable:           #F5E4BE; /* surlignage haute saison */
  --vd-creme:           #F7F3EC; /* fond de section */
  --vd-blanc:           #FFFDF9;

  /* Texte */
  --vd-texte:           #2E3330;
  --vd-texte-doux:      #6E6A63;
  /* Assombri en v3.14.1 : #9A958C ne donnait que 2,9:1 sur blanc et 2,7:1
     sur crème, sous le seuil de 4,5:1. Cette teinte sert de couleur de
     texte à neuf endroits — métadonnées d'articles, libellés de tableaux,
     délais d'annulation — qui étaient donc tous trop pâles. */
  --vd-texte-clair:     #736D63;
  --vd-filet:           #E3DCD0;

  /* Typographie */
  --vd-serif:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --vd-sans:   'Jost', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle typographique fluide — s'adapte sans media query */
  --vd-h1: clamp(2.2rem, 5.2vw, 4rem);
  --vd-h2: clamp(1.8rem, 3.6vw, 2.75rem);
  --vd-h3: clamp(1.35rem, 2.2vw, 1.75rem);
  --vd-h4: clamp(1.1rem, 1.6vw, 1.3rem);
  --vd-corps: 1.0625rem;
  --vd-petit: 0.9375rem;
  --vd-micro: 0.8125rem;

  /* Rythme */
  --vd-radius: 6px;
  --vd-radius-l: 10px;
  --vd-ombre: 0 1px 3px rgba(46, 51, 48, .06), 0 6px 20px rgba(46, 51, 48, .05);
  --vd-ombre-forte: 0 2px 6px rgba(46, 51, 48, .08), 0 14px 40px rgba(46, 51, 48, .09);
  --vd-transition: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. TYPOGRAPHIE
   ========================================================================== */

body,
.et_pb_module,
input, textarea, select, button {
  font-family: var(--vd-sans);
  font-size: var(--vd-corps);
  line-height: 1.75;
  color: var(--vd-texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2,
.et_pb_module h3, .et_pb_module h4 {
  font-family: var(--vd-serif);
  color: var(--vd-vert);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

h1, .et_pb_module h1 { font-size: var(--vd-h1); }
h2, .et_pb_module h2 { font-size: var(--vd-h2); }
h3, .et_pb_module h3 { font-size: var(--vd-h3); }
h4, .et_pb_module h4 { font-size: var(--vd-h4); }

/* Italique d'accent — reprend le style « Tarifs 2026 » du site actuel */
.vd-accent {
  font-style: italic;
  color: var(--vd-terracotta);
  font-weight: 400;
}

/* Sur-titre en petites capitales espacées — « VOS HÔTES », « AUTOUR DE LA MAISON » */
.vd-surtitre {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vd-terracotta);
  margin-bottom: 1rem;
  display: block;
}

/* Chiffres elzéviriens pour les prix — détail typographique du site actuel */
.vd-prix,
.vd-tarif-table td:last-child,
.vd-chiffre {
  font-family: var(--vd-serif);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: 'onum' 1;
  color: var(--vd-terracotta);
  font-size: 1.5rem;
  white-space: nowrap;
}

/* Titre de section avec filet horizontal — « Saisons & tarifs ———— » */
.vd-titre-filet {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--vd-serif);
  font-size: var(--vd-h3);
  color: var(--vd-vert);
  margin-bottom: 1.75rem;
}
.vd-titre-filet::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--vd-filet);
}

/* ==========================================================================
   3. BOUTONS
   Un seul style d'appel à l'action, répété partout.
   ========================================================================== */

.et_pb_button,
.vd-btn {
  font-family: var(--vd-sans) !important;
  font-size: var(--vd-micro) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1rem 2rem !important;
  border-radius: var(--vd-radius) !important;
  border: 1px solid transparent !important;
  transition: all var(--vd-transition) !important;
  line-height: 1.2 !important;
}

/* Bouton principal — terracotta plein */
.et_pb_button,
.vd-btn--principal {
  background: var(--vd-terracotta) !important;
  color: #fff !important;
}
.et_pb_button:hover,
.vd-btn--principal:hover {
  background: var(--vd-terracotta-fonce) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--vd-ombre);
}

/* Bouton secondaire — contour discret */
.et_pb_button.vd-btn--secondaire,
.vd-btn--secondaire {
  background: transparent !important;
  color: var(--vd-vert) !important;
  border-color: var(--vd-filet) !important;
}
.et_pb_button.vd-btn--secondaire:hover,
.vd-btn--secondaire:hover {
  border-color: var(--vd-vert) !important;
  background: var(--vd-vert) !important;
  color: #fff !important;
}

/* Divi ajoute une flèche au survol — on la retire, elle casse le style sobre */
.et_pb_button:after,
.et_pb_button:before { display: none !important; }

/* ==========================================================================
   4. EN-TÊTE
   ========================================================================== */

#main-header {
  background: rgba(255, 253, 249, .96) !important;
  backdrop-filter: blur(8px);
  box-shadow: none !important;
  border-bottom: 1px solid var(--vd-filet);
  transition: all var(--vd-transition);
}
#main-header.et-fixed-header {
  box-shadow: var(--vd-ombre) !important;
}

/* Logo — v2.4
   Le fichier d'origine (logo-terrasses.png) contient 35 % de marges
   transparentes. La règle précédente compensait ces marges en élargissant
   le logo, ce qui le faisait déborder de l'en-tête de 46 px.
   Le fichier recadré (logo-terrasses-recadre.png) est cadré au plus juste
   et se dimensionne donc à la hauteur, comme il se doit.
   Les deux règles coexistent : l'affichage reste correct avant comme après
   le remplacement du fichier dans Divi. */
#logo {
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: 60px !important;
  transition: max-height var(--vd-transition), height var(--vd-transition);
}
#logo[src*="logo-terrasses-recadre"] {
  height: 54px !important;
  max-height: none !important;
}

/* En-tête généreux à l'arrivée, rétracté au défilement — v2.5
   Divi pose la classe .et-fixed-header dès que la page défile ; on s'appuie
   dessus plutôt que d'ajouter du JavaScript. La hauteur de l'en-tête est
   pilotée par le décalage de la navigation, pas par une hauteur fixe :
   l'en-tête s'adapte donc si le menu passe sur deux lignes.
   Mesuré : 72 px en haut de page → 50 px au défilement. */
#main-header #et-top-navigation {
  padding-top: 38px !important;
  transition: padding-top var(--vd-transition);
}
#main-header .logo_container {
  padding: 10px 0 !important;
  transition: padding var(--vd-transition);
}

#main-header.et-fixed-header #et-top-navigation { padding-top: 16px !important; }
#main-header.et-fixed-header .logo_container   { padding: 6px 0 !important; }
#main-header.et-fixed-header #logo             { max-height: 42px !important; }
#main-header.et-fixed-header #logo[src*="logo-terrasses-recadre"] {
  height: 36px !important;
}

@media (max-width: 980px) {
  /* Sur mobile l'en-tête est déjà compact : pas de rétraction, on garde
     une hauteur constante pour éviter que le contenu ne saute. */
  #main-header #et-top-navigation,
  #main-header.et-fixed-header #et-top-navigation { padding-top: 12px !important; }
  #main-header .logo_container,
  #main-header.et-fixed-header .logo_container { padding: 6px 0 !important; }
  #logo,
  #main-header.et-fixed-header #logo { max-height: 40px !important; }
  #logo[src*="logo-terrasses-recadre"],
  #main-header.et-fixed-header #logo[src*="logo-terrasses-recadre"] { height: 36px !important; }
}

#top-menu a {
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
  font-weight: 400;
  color: var(--vd-texte) !important;
  padding-bottom: 4px !important;
  position: relative;
}
#top-menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--vd-vert);
  transform: scaleX(0);
  transition: transform var(--vd-transition);
}
#top-menu a:hover::after,
#top-menu li.current-menu-item > a::after { transform: scaleX(1); }
#top-menu li.current-menu-item > a { color: var(--vd-vert) !important; }

/* Le dernier élément du menu devient un bouton — classe « vd-menu-cta » à
   ajouter sur l'entrée « Réserver » dans Apparence → Menus */
#top-menu li.vd-menu-cta > a {
  background: var(--vd-terracotta);
  color: #fff !important;
  padding: .6rem 1.4rem !important;
  border-radius: var(--vd-radius);
  font-size: var(--vd-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#top-menu li.vd-menu-cta > a::after { display: none; }
#top-menu li.vd-menu-cta > a:hover { background: var(--vd-terracotta-fonce); }

/* ==========================================================================
   5. SECTIONS ET FONDS
   ========================================================================== */

.vd-section--creme  { background: var(--vd-creme); }
.vd-section--blanc  { background: var(--vd-blanc); }
.vd-section--vert   { background: var(--vd-vert); }
.vd-section--vert,
.vd-section--vert h1, .vd-section--vert h2,
.vd-section--vert h3, .vd-section--vert h4,
.vd-section--vert p  { color: #fff; }

/* Bandeau des promesses — v2.2
   Quatre arguments de vente juste sous la photo d'accueil. Chaque colonne
   reçoit une icône via ::before (masque SVG en data-URI : pas de police
   d'icônes, pas de requête réseau, la couleur suit la charte).
   L'ordre des icônes suit l'ordre des colonnes — si les colonnes sont
   réordonnées dans Divi, ajuster les :nth-child ci-dessous. */
.vd-promesses {
  background: var(--vd-creme);
  padding: 2.5rem 0 2.25rem;
  border-top: 1px solid rgba(181, 103, 60, .14);
  border-bottom: 1px solid rgba(181, 103, 60, .14);
}
.vd-promesses .et_pb_column {
  text-align: center;
  padding: 0 1rem;
  border-right: 1px solid rgba(181, 103, 60, .18);
}
.vd-promesses .et_pb_column:last-child,
.vd-promesses .et_pb_column.et-last-child { border-right: none; }

.vd-promesses .vd-promesse-titre {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vd-vert);
  font-weight: 500;
}

/* Le gabarit commun de l'icône */
.vd-promesses .vd-promesse-titre::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto .7rem;
  background-color: var(--vd-terracotta);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* 1 — Piscine chauffée */
.vd-promesses .et_pb_column:nth-child(1) .vd-promesse-titre::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Cpath d='M2 20.5c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Cpath d='M8 15V5a2 2 0 0 1 4 0'/%3E%3Cpath d='M16 15V5a2 2 0 0 1 4 0'/%3E%3Cpath d='M8 9.5h8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Cpath d='M2 20.5c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Cpath d='M8 15V5a2 2 0 0 1 4 0'/%3E%3Cpath d='M16 15V5a2 2 0 0 1 4 0'/%3E%3Cpath d='M8 9.5h8'/%3E%3C/svg%3E");
}

/* 2 — Climatisation */
.vd-promesses .et_pb_column:nth-child(2) .vd-promesse-titre::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M3.8 7.2l16.4 9.6'/%3E%3Cpath d='M20.2 7.2L3.8 16.8'/%3E%3Cpath d='M12 6.2l2.4-2.4M12 6.2L9.6 3.8M12 17.8l2.4 2.4M12 17.8l-2.4 2.4'/%3E%3Cpath d='M7.1 9.1l-3.3-.9M7.1 9.1l-.9-3.3M16.9 14.9l3.3.9M16.9 14.9l.9 3.3'/%3E%3Cpath d='M16.9 9.1l3.3-.9M16.9 9.1l.9-3.3M7.1 14.9l-3.3.9M7.1 14.9l-.9 3.3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M3.8 7.2l16.4 9.6'/%3E%3Cpath d='M20.2 7.2L3.8 16.8'/%3E%3Cpath d='M12 6.2l2.4-2.4M12 6.2L9.6 3.8M12 17.8l2.4 2.4M12 17.8l-2.4 2.4'/%3E%3Cpath d='M7.1 9.1l-3.3-.9M7.1 9.1l-.9-3.3M16.9 14.9l3.3.9M16.9 14.9l.9 3.3'/%3E%3Cpath d='M16.9 9.1l3.3-.9M16.9 9.1l.9-3.3M7.1 14.9l-3.3.9M7.1 14.9l-.9 3.3'/%3E%3C/svg%3E");
}

/* 3 — Tout inclus */
.vd-promesses .et_pb_column:nth-child(3) .vd-promesse-titre::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8a2 2 0 0 1-1 1.73l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.73l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8z'/%3E%3Cpath d='M3.3 7L12 12l8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8a2 2 0 0 1-1 1.73l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.73l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8z'/%3E%3Cpath d='M3.3 7L12 12l8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

/* 4 — Meilleur tarif */
.vd-promesses .et_pb_column:nth-child(4) .vd-promesse-titre::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 2.8 12V4.8a2 2 0 0 1 2-2H12a2 2 0 0 1 1.4.6l7.2 7.2a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 2.8 12V4.8a2 2 0 0 1 2-2H12a2 2 0 0 1 1.4.6l7.2 7.2a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.3'/%3E%3C/svg%3E");
}

/* Bandeau de chiffres clés — « 3 Plus Beaux Villages · 5' du marché · 1h » */
.vd-chiffres {
  background: var(--vd-vert);
  border-radius: var(--vd-radius-l);
  padding: 2.5rem 1.5rem;
  color: #fff;
}
.vd-chiffres .vd-chiffre-valeur {
  font-family: var(--vd-serif);
  font-variant-numeric: oldstyle-nums;
  font-size: 2.5rem;
  line-height: 1;
  color: #fff;
  display: block;
  margin-bottom: .5rem;
}
.vd-chiffres .vd-chiffre-label {
  font-size: var(--vd-micro);
  color: rgba(255, 255, 255, .82);
  line-height: 1.5;
}

/* Variante « ligne de chiffres » — v2.3
   Bandeau autonome placé dans un module Texte, sans dépendre des colonnes
   Divi. Sert à remonter les chiffres de vente (capacité, surface, piscine…)
   au-dessus des listes descriptives. */
.vd-chiffres-ligne {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--vd-vert);
  border-radius: var(--vd-radius-l);
  padding: 1.75rem 0;
  margin: 0 0 2.5rem;
}
.vd-chiffres-ligne > div {
  text-align: center;
  padding: 0 .75rem;
  border-right: 1px solid rgba(247, 243, 236, .15);
}
.vd-chiffres-ligne > div:last-child { border-right: none; }
.vd-chiffres-ligne .vd-chiffre-valeur {
  display: block;
  font-family: var(--vd-serif);
  font-variant-numeric: lining-nums;
  font-size: 2rem;
  line-height: 1.1;
  color: #fff;
}
.vd-chiffres-ligne .vd-chiffre-label {
  display: block;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-top: .35rem;
}

@media (max-width: 980px) {
  .vd-chiffres-ligne {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem 0;
    padding: 1.5rem 0;
  }
  .vd-chiffres-ligne > div:nth-child(3n) { border-right: none; }
  .vd-chiffres-ligne .vd-chiffre-valeur { font-size: 1.65rem; }
}
@media (max-width: 560px) {
  .vd-chiffres-ligne { grid-template-columns: repeat(2, 1fr); }
  .vd-chiffres-ligne > div:nth-child(3n) { border-right: 1px solid rgba(247, 243, 236, .15); }
  .vd-chiffres-ligne > div:nth-child(2n) { border-right: none; }
  /* Le nombre de chiffres est impair : le dernier occupe toute la largeur
     plutôt que de rester seul, calé à gauche, sur sa ligne. */
  .vd-chiffres-ligne > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: none;
  }
}

/* Vidéo et plan intégrés — v2.7, renommé en v3.3
   Conteneurs à ratio fixe : la hauteur suit la largeur, donc aucun saut de
   mise en page pendant le chargement de l'iframe.
   ATTENTION : le plan géographique s'appelle « vd-plan » et non « vd-carte ».
   « vd-carte » désigne depuis l'origine les encarts (section 9) ; les deux
   se sont télescopés en v2.7 et les encarts se retrouvaient contraints à un
   format 16/10 avec débordement masqué. */
.vd-video,
.vd-plan {
  position: relative;
  width: 100%;
  border: 0;   /* la réinitialisation de Divi laisse 1px, visible sur fond vert */
  padding: 0;
  border-radius: var(--vd-radius-l);
  overflow: hidden;
  background: var(--vd-vert);
  box-shadow: var(--vd-ombre);
}
.vd-video { aspect-ratio: 16 / 9; }
.vd-plan  { aspect-ratio: 16 / 10; }

.vd-video iframe,
.vd-plan iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Chargement au clic — v3.4
   Une carte Google embarquée se charge avant les images de la page et dépose
   ses cookies dès l'arrivée du visiteur. On affiche donc un panneau d'attente
   et l'iframe n'est créée que si le visiteur la demande. */
.vd-plan--attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  text-align: center;
  padding: 1.5rem;
  cursor: pointer;
  border: 0;
  /* Le panneau doit remplir le cadre 16/10 du conteneur : sans hauteur
     explicite, un bouton se dimensionne sur son contenu et laissait un
     grand vide vert sous le texte. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  color: inherit;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .05), transparent 60%),
    var(--vd-vert);
  transition: background-color var(--vd-transition);
}
.vd-plan--attente:hover { background-color: var(--vd-vert-clair); }
.vd-plan--attente:focus-visible {
  outline: 2px solid var(--vd-sable);
  outline-offset: -4px;
}
.vd-plan__pastille {
  width: 46px;
  height: 46px;
  background-color: var(--vd-sable);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.vd-plan__invite {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
}
.vd-plan__mention {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  color: rgba(255, 255, 255, .68);
  max-width: 26rem;
  line-height: 1.5;
}

/* Lien de repli sous le plan, pour ouvrir l'itinéraire dans l'application */
.vd-plan-lien {
  display: inline-block;
  margin-top: .85rem;
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
  color: var(--vd-terracotta-fonce);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
.vd-plan-lien:hover { color: var(--vd-vert); }

@media (max-width: 560px) {
  .vd-plan { aspect-ratio: 4 / 3; }
}

/* Bandeau de chiffres — variante lisible, v3.3
   Le bandeau vert de la page La Région empilait valeur et légende sans
   respiration : trois blocs de texte vert sur vert. On sépare nettement le
   chiffre de sa légende, on ajoute des filets verticaux et on aère. */
.vd-chiffres--lisible {
  padding: 2.75rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.vd-chiffres--lisible > .et_pb_column,
.vd-chiffres--lisible > div {
  text-align: center;
  padding: .25rem 1.5rem;
  border-right: 1px solid rgba(247, 243, 236, .16);
  /* Indispensable : Divi impose width:29.66% et un flottement aux colonnes.
     Dans une grille, ce pourcentage se calcule sur la case et non sur la
     ligne — chaque colonne se retrouvait à 101 px dans un emplacement de
     339 px, et le texte se comprimait sur toute la hauteur. */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}
.vd-chiffres--lisible > *:last-child { border-right: none; }
.vd-chiffres--lisible .vd-chiffre-valeur {
  font-family: var(--vd-serif);
  font-variant-numeric: lining-nums;
  font-size: 2.9rem;
  line-height: 1;
  color: #fff;
  display: block;
  margin-bottom: .65rem;
}
.vd-chiffres--lisible .vd-chiffre-label {
  display: block;
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  max-width: 15rem;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .vd-chiffres--lisible {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 2rem 1.25rem;
  }
  .vd-chiffres--lisible > .et_pb_column,
  .vd-chiffres--lisible > div {
    border-right: none;
    border-bottom: 1px solid rgba(247, 243, 236, .16);
    padding-bottom: 1.75rem;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
  }
  .vd-chiffres--lisible > *:last-child { border-bottom: none; padding-bottom: 0; }
  .vd-chiffres--lisible .vd-chiffre-valeur { font-size: 2.4rem; }
}

/* Encarts d'activités — v3.3
   Une icône en filigrane par activité, posée en tête de carte. Même principe
   que le bandeau des promesses : masque SVG, pas de police d'icônes. */
.vd-activite {
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius-l);
  padding: 1.65rem 1.5rem 1.5rem;
  height: 100%;
  transition: border-color var(--vd-transition), transform var(--vd-transition);
}
.vd-activite:hover {
  border-color: var(--vd-terracotta);
  transform: translateY(-2px);
}
.vd-activite__titre {
  font-family: var(--vd-serif);
  font-size: 1.3rem;
  color: var(--vd-vert);
  margin: 0 0 .55rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.vd-activite__titre::before {
  content: "";
  flex: 0 0 26px;
  height: 26px;
  background-color: var(--vd-terracotta);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.vd-activite__texte {
  font-size: var(--vd-petit);
  color: var(--vd-texte-doux);
  margin: 0;
  line-height: 1.65;
}

.vd-activite--rando .vd-activite__titre::before   { -webkit-mask-image: var(--i-rando);   mask-image: var(--i-rando); }
.vd-activite--velo .vd-activite__titre::before    { -webkit-mask-image: var(--i-velo);    mask-image: var(--i-velo); }
.vd-activite--canoe .vd-activite__titre::before   { -webkit-mask-image: var(--i-canoe);   mask-image: var(--i-canoe); }
.vd-activite--baignade .vd-activite__titre::before{ -webkit-mask-image: var(--i-baignade);mask-image: var(--i-baignade); }
.vd-activite--golf .vd-activite__titre::before    { -webkit-mask-image: var(--i-golf);    mask-image: var(--i-golf); }
.vd-activite--parcs .vd-activite__titre::before   { -webkit-mask-image: var(--i-parcs);   mask-image: var(--i-parcs); }

:root {
  --i-rando:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M2 20l7-12 4 6 2-3 7 9'/%3E%3Ccircle cx='16' cy='5' r='2'/%3E%3C/svg%3E");
  --i-velo:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='17' r='3.5'/%3E%3Ccircle cx='18.5' cy='17' r='3.5'/%3E%3Cpath d='M5.5 17l4-9h5l-4 9h7.5'/%3E%3Cpath d='M13 8h3'/%3E%3C/svg%3E");
  --i-canoe:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 17c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Cpath d='M4 13h16l-2.5 3.5h-11z'/%3E%3Cpath d='M8 4l8 7'/%3E%3Cpath d='M6.5 5.5l3-3'/%3E%3C/svg%3E");
  --i-baignade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16.5c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Cpath d='M2 20.5c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Ccircle cx='16' cy='5' r='2'/%3E%3Cpath d='M5 13l4-3 3 2 3-3'/%3E%3C/svg%3E");
  --i-golf:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 21V3l8 4-8 4'/%3E%3Cellipse cx='9' cy='20.5' rx='6' ry='1.6'/%3E%3C/svg%3E");
  --i-parcs:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Cpath d='M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E");
}

/* Encarts illustrés d'une icône — v3.7
   Utilisés sur « À propos » : ce que nous aimons ici, nos engagements.
   Même principe que le bandeau des promesses — masque SVG, aucune police
   d'icônes, la couleur suit la charte. */
.vd-carte--icone .vd-carte__titre {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.vd-carte--icone .vd-carte__titre::before {
  content: "";
  flex: 0 0 24px;
  height: 24px;
  background-color: var(--vd-terracotta);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.vd-carte--douceur .vd-carte__titre::before    { -webkit-mask-image: var(--i-douceur);    mask-image: var(--i-douceur); }
.vd-carte--paysages .vd-carte__titre::before   { -webkit-mask-image: var(--i-paysages);   mask-image: var(--i-paysages); }
.vd-carte--gens .vd-carte__titre::before       { -webkit-mask-image: var(--i-gens);       mask-image: var(--i-gens); }
.vd-carte--traditions .vd-carte__titre::before { -webkit-mask-image: var(--i-traditions); mask-image: var(--i-traditions); }
.vd-carte--patrimoine .vd-carte__titre::before { -webkit-mask-image: var(--i-patrimoine); mask-image: var(--i-patrimoine); }
.vd-carte--gastronomie .vd-carte__titre::before{ -webkit-mask-image: var(--i-gastronomie);mask-image: var(--i-gastronomie); }
.vd-carte--repondre .vd-carte__titre::before   { -webkit-mask-image: var(--i-repondre);   mask-image: var(--i-repondre); }
.vd-carte--joignable .vd-carte__titre::before  { -webkit-mask-image: var(--i-joignable);  mask-image: var(--i-joignable); }
.vd-carte--transparent .vd-carte__titre::before{ -webkit-mask-image: var(--i-transparent);mask-image: var(--i-transparent); }
.vd-carte--preparer .vd-carte__titre::before   { -webkit-mask-image: var(--i-preparer);   mask-image: var(--i-preparer); }

:root {
  --i-douceur:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h20'/%3E%3Cpath d='M4 18a8 8 0 0 1 16 0'/%3E%3Cpath d='M12 3v2M4.2 6.2l1.4 1.4M19.8 6.2l-1.4 1.4'/%3E%3C/svg%3E");
  --i-paysages:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19h20'/%3E%3Cpath d='M2 19l6-9 4 5.5 3-4 7 7.5'/%3E%3Ccircle cx='17' cy='6' r='2.2'/%3E%3C/svg%3E");
  --i-gens:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17.5' cy='9.5' r='2.4'/%3E%3Cpath d='M14.5 19.5a4.6 4.6 0 0 1 7-3.9'/%3E%3C/svg%3E");
  --i-traditions:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.6 10.2a1.6 1.6 0 0 1-1.6 1.3H6.2a1.6 1.6 0 0 1-1.6-1.3z'/%3E%3Cpath d='M8.5 9L11 3.5M15.5 9L13 3.5'/%3E%3C/svg%3E");
  --i-patrimoine:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9l2-2 2 2v12'/%3E%3Cpath d='M15 21V9l2-2 2 2v12'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3Cpath d='M5 9V6l2-1 2 1v3M15 9V6l2-1 2 1v3'/%3E%3C/svg%3E");
  --i-gastronomie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v8a2.5 2.5 0 0 0 5 0V3'/%3E%3Cpath d='M8.5 11v10'/%3E%3Cpath d='M17 3c-1.7 1.6-2.5 3.4-2.5 5.5 0 1.9 1 3 2.5 3.2V21'/%3E%3C/svg%3E");
  --i-repondre:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4.5 13.5H11L10 22l8.5-11.5H12z'/%3E%3C/svg%3E");
  --i-joignable:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.6a1.7 1.7 0 0 1-1.9 1.7A16.8 16.8 0 0 1 3.8 5.9 1.7 1.7 0 0 1 5.5 4h2.6a1.7 1.7 0 0 1 1.7 1.5c.1.9.3 1.8.6 2.6a1.7 1.7 0 0 1-.4 1.8L8.9 11a13.6 13.6 0 0 0 5.1 5.1l1.1-1.1a1.7 1.7 0 0 1 1.8-.4c.8.3 1.7.5 2.6.6a1.7 1.7 0 0 1 1.5 1.7z'/%3E%3C/svg%3E");
  --i-transparent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
  --i-preparer:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='13' rx='2'/%3E%3Cpath d='M8.5 7V5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M2.5 13h19'/%3E%3C/svg%3E");
}

/* Modes d'accès — v3.10
   Une icône devant chaque mode de transport de la section « Comment venir ».
   Le titre reste un h3 : l'icône est purement décorative, elle est produite
   par un pseudo-élément et n'est donc pas lue par les lecteurs d'écran. */
.vd-acces {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--vd-serif);
  color: var(--vd-vert);
}
.vd-acces::before {
  content: "";
  flex: 0 0 30px;
  height: 30px;
  background-color: var(--vd-terracotta);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.vd-acces--voiture::before { -webkit-mask-image: var(--i-voiture); mask-image: var(--i-voiture); }
.vd-acces--avion::before   { -webkit-mask-image: var(--i-avion);   mask-image: var(--i-avion); }
.vd-acces--train::before   { -webkit-mask-image: var(--i-train);   mask-image: var(--i-train); }

:root {
  --i-voiture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17v-3.2a2 2 0 0 1 .2-.9l2-4A2 2 0 0 1 7 7.8h10a2 2 0 0 1 1.8 1.1l2 4a2 2 0 0 1 .2.9V17'/%3E%3Cpath d='M3 17h18'/%3E%3Cpath d='M5.5 13h13'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
  --i-avion:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 2.8a1.5 1.5 0 0 1 3 0V9l7.5 4.4v2.2L13.5 13v4.6l2.5 1.8v1.8L12 20l-4 1.2v-1.8l2.5-1.8V13L3 15.6v-2.2L10.5 9z'/%3E%3C/svg%3E");
  --i-train:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='13' rx='3'/%3E%3Cpath d='M5 9.5h14'/%3E%3Ccircle cx='8.8' cy='12.8' r='.9'/%3E%3Ccircle cx='15.2' cy='12.8' r='.9'/%3E%3Cpath d='M7.5 16 5.5 20M16.5 16l2 4M4 20h16'/%3E%3C/svg%3E");
}

/* Coups de cœur illustrés — v3.11
   L'icône se pose près de l'étiquette de couleur, en haut de l'encart. */
.vd-carte--coup .vd-badge::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: .45rem;
  vertical-align: -.24em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.vd-coup--bastide .vd-badge::before     { -webkit-mask-image: var(--i-bastide);     mask-image: var(--i-bastide); }
.vd-coup--marche .vd-badge::before      { -webkit-mask-image: var(--i-traditions);  mask-image: var(--i-traditions); }
.vd-coup--chateaux .vd-badge::before    { -webkit-mask-image: var(--i-patrimoine);  mask-image: var(--i-patrimoine); }
.vd-coup--gastronomie .vd-badge::before { -webkit-mask-image: var(--i-gastronomie); mask-image: var(--i-gastronomie); }

/* Modalités de paiement — icône devant l'intitulé, dans le tableau.
   On reste en inline-block : un affichage flex casserait la cellule. */
/* L'intitulé ne doit pas se scinder : la colonne fait 136 px et l'icône en
   consomme une part, ce qui renvoyait « Acompte », « Caution » et « Arrivée »
   à la ligne. La colonne s'élargit d'elle-même, le tableau se rééquilibre. */
.vd-table td.vd-mod { white-space: nowrap; }

.vd-table td.vd-mod::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-right: .5rem;
  vertical-align: -.28em;
  background-color: var(--vd-terracotta);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.vd-mod--acompte::before { -webkit-mask-image: var(--i-acompte); mask-image: var(--i-acompte); }
.vd-mod--solde::before   { -webkit-mask-image: var(--i-solde);   mask-image: var(--i-solde); }
.vd-mod--caution::before { -webkit-mask-image: var(--i-caution); mask-image: var(--i-caution); }
.vd-mod--arrivee::before { -webkit-mask-image: var(--i-cle);     mask-image: var(--i-cle); }
.vd-mod--depart::before  { -webkit-mask-image: var(--i-depart);  mask-image: var(--i-depart); }

@media (max-width: 767px) {
  /* En mode carte, la cellule occupe toute la largeur : le retour à la ligne
     redevient possible sans risque. */
  .vd-table td.vd-mod { white-space: normal; }
  .vd-table td.vd-mod::before { width: 17px; height: 17px; }
}

:root {
  --i-bastide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M4 21V9l8-5 8 5v12'/%3E%3Cpath d='M8 21v-6a1.5 1.5 0 0 1 3 0v6M13 21v-6a1.5 1.5 0 0 1 3 0v6'/%3E%3C/svg%3E");
  --i-acompte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5A5.5 5.5 0 0 0 7.6 9M7.6 15a5.5 5.5 0 0 0 9.4-.5'/%3E%3Cpath d='M4 10.5h8M4 13.5h8'/%3E%3C/svg%3E");
  --i-solde:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M9 15.5l2 2 4-4'/%3E%3C/svg%3E");
  --i-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.1 8.2-7.5 9.5-4.4-1.3-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M9.5 12l1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
  --i-cle:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='3.6'/%3E%3Cpath d='M10.2 13 20 3.2M17 6.2l2.2 2.2M14.4 8.8l2.2 2.2'/%3E%3C/svg%3E");
  --i-depart:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8V12l3.4 2'/%3E%3C/svg%3E");
}

/* ==========================================================================
   RÉSERVER — panneau « en direct » et conditions   v3.13
   Reprend le principe de l'ancien site : un panneau vert plein pour les
   arguments, des cellules claires pour les conditions, un code couleur pour
   les délais d'annulation.
   ========================================================================== */

.vd-direct {
  background: var(--vd-vert);
  border-radius: var(--vd-radius-l);
  padding: 1.9rem 2rem 1.75rem;
}
/* Le sélecteur est doublé à dessein : la règle de Divi « .et_pb_module h2 »
   impose le vert de la charte et l'emportait sur une classe simple — le
   titre s'affichait en vert sur fond vert, donc invisible. */
.vd-direct .vd-direct__titre {
  font-family: var(--vd-serif);
  font-size: 1.55rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 1.15rem;
  line-height: 1.2;
}
.vd-direct__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
.vd-direct__item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--vd-radius);
}
.vd-direct__pastille {
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  position: relative;
}
.vd-direct__pastille::before {
  content: "";
  position: absolute;
  inset: 6px;
  background-color: var(--vd-sable);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.vd-direct__texte {
  font-size: var(--vd-petit);
  line-height: 1.55;
  color: rgba(255, 255, 255, .84);
  margin: 0;
}
.vd-direct__texte strong {
  display: block;
  color: #fff;
  font-weight: 500;
  margin-bottom: .15rem;
}
.vd-direct--tarif .vd-direct__pastille::before    { -webkit-mask-image: var(--i-tarif);     mask-image: var(--i-tarif); }
.vd-direct--contact .vd-direct__pastille::before  { -webkit-mask-image: var(--i-joignable); mask-image: var(--i-joignable); }
.vd-direct--paiement .vd-direct__pastille::before { -webkit-mask-image: var(--i-caution);   mask-image: var(--i-caution); }
.vd-direct--reponse .vd-direct__pastille::before  { -webkit-mask-image: var(--i-repondre);  mask-image: var(--i-repondre); }

/* Conditions — rangée de cellules */
.vd-cond {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.vd-cond__cell {
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius);
  padding: 1.15rem .9rem 1rem;
  text-align: center;
}
.vd-cond__icone {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto .6rem;
  background-color: var(--vd-terracotta);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.vd-cond__label {
  font-family: var(--vd-sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vd-texte-clair);
  margin-bottom: .3rem;
}
.vd-cond__val {
  font-family: var(--vd-serif);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--vd-vert);
}
.vd-cond--acompte .vd-cond__icone { -webkit-mask-image: var(--i-acompte); mask-image: var(--i-acompte); }
.vd-cond--solde .vd-cond__icone   { -webkit-mask-image: var(--i-solde);   mask-image: var(--i-solde); }
.vd-cond--caution .vd-cond__icone { -webkit-mask-image: var(--i-caution); mask-image: var(--i-caution); }
.vd-cond--arrivee .vd-cond__icone { -webkit-mask-image: var(--i-cle);     mask-image: var(--i-cle); }
.vd-cond--depart .vd-cond__icone  { -webkit-mask-image: var(--i-depart);  mask-image: var(--i-depart); }

/* Annulation — trois délais, trois couleurs */
.vd-annul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.vd-annul__cell {
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-top: 3px solid var(--vd-filet);
  border-radius: var(--vd-radius);
  padding: 1.15rem 1.15rem 1rem;
}
.vd-annul__delai {
  font-family: var(--vd-sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vd-texte-clair);
  margin-bottom: .35rem;
}
.vd-annul__val {
  font-family: var(--vd-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: .3rem;
}
.vd-annul__desc {
  font-size: var(--vd-micro);
  color: var(--vd-texte-doux);
  line-height: 1.5;
  margin: 0;
}
.vd-annul--favorable { border-top-color: #639922; }
.vd-annul--favorable .vd-annul__val { color: #3B6D11; }
.vd-annul--partiel   { border-top-color: #BA7517; }
.vd-annul--partiel .vd-annul__val   { color: #854F0B; }
.vd-annul--aucun     { border-top-color: #A32D2D; }
.vd-annul--aucun .vd-annul__val     { color: #791F1F; }

@media (max-width: 980px) {
  .vd-cond { grid-template-columns: repeat(2, 1fr); }
  .vd-annul { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vd-direct { padding: 1.75rem 1.35rem 1.5rem; }
  .vd-direct__grille { grid-template-columns: 1fr; }
  .vd-cond { grid-template-columns: 1fr; }
}

/* Arguments de la réservation en direct — v3.12 */
.vd-direct--tarif .vd-carte__titre::before    { -webkit-mask-image: var(--i-tarif);     mask-image: var(--i-tarif); }
.vd-direct--contact .vd-carte__titre::before  { -webkit-mask-image: var(--i-joignable); mask-image: var(--i-joignable); }
.vd-direct--paiement .vd-carte__titre::before { -webkit-mask-image: var(--i-caution);   mask-image: var(--i-caution); }
.vd-direct--reponse .vd-carte__titre::before  { -webkit-mask-image: var(--i-repondre);  mask-image: var(--i-repondre); }

:root {
  --i-tarif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 2.8 12V4.8a2 2 0 0 1 2-2H12a2 2 0 0 1 1.4.6l7.2 7.2a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.3'/%3E%3C/svg%3E");
}

/* Encart « également sur Airbnb » — informatif, sans lien sortant */
.vd-ailleurs {
  background: var(--vd-creme);
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius-l);
  padding: 1.5rem 1.75rem;
  margin-top: 2rem;
}
.vd-ailleurs__titre {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--vd-terracotta-fonce);
  display: block;
  margin-bottom: .55rem;
}
.vd-ailleurs p {
  margin: 0;
  font-size: var(--vd-petit);
  color: var(--vd-texte-doux);
  line-height: 1.65;
}

/* Portrait des hôtes, en médaillon */
.vd-portrait {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vd-vert-pale);
  box-shadow: var(--vd-ombre-forte);
  border: 6px solid #fff;
}
.vd-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vd-portrait-legende {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  /* --vd-texte-clair ne donnait que 2,93:1 sur fond crème, sous le seuil
     de 4,5:1. On passe au gris de texte secondaire, à 5,4:1. */
  color: var(--vd-texte-doux);
}

/* Vignettes de lieux — v3.3
   Photo, nom du lieu, temps de trajet et crédit photo. Utilisées sur la page
   La Région pour illustrer Villeréal, Biron et Monflanquin. */
.vd-lieu {
  position: relative;
  display: block;
  border-radius: var(--vd-radius-l);
  overflow: hidden;
  background: var(--vd-vert);
  aspect-ratio: 4 / 3;
}
.vd-lieu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2, 0, .2, 1);
}
.vd-lieu:hover img { transform: scale(1.04); }
.vd-lieu__voile {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.1rem .9rem;
  background: linear-gradient(to top, rgba(24, 34, 28, .85), rgba(24, 34, 28, 0));
}
.vd-lieu__nom {
  display: block;
  font-family: var(--vd-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: #fff;
}
.vd-lieu__temps {
  display: block;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vd-sable);
  margin-top: .25rem;
}
/* Crédit photo, obligatoire sur les fonds sous licence */
.vd-credit {
  position: absolute;
  right: .6rem;
  bottom: .45rem;
  font-family: var(--vd-sans);
  font-size: .6875rem;   /* 11 px : plancher de lisibilité du site */
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 2px rgba(24, 34, 28, .5);
}

/* ==========================================================================
   5 bis. JOURNAL — LISTE DES ARTICLES, PAGE D'ARTICLE, ENCADRÉS   v3.5
   ========================================================================== */

.vd-journal { display: block; }
.vd-journal__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.vd-post {
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--vd-transition), transform var(--vd-transition), box-shadow var(--vd-transition);
}
.vd-post:hover {
  border-color: var(--vd-terracotta);
  transform: translateY(-3px);
  box-shadow: var(--vd-ombre);
}

.vd-post__image {
  display: block;
  overflow: hidden;
  background: var(--vd-vert);
  aspect-ratio: 3 / 2;
}
.vd-post__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.2, 0, .2, 1);
}
.vd-post:hover .vd-post__image img { transform: scale(1.04); }
.vd-post__sans-image { display: block; width: 100%; height: 100%; }

.vd-post__corps {
  padding: 1.35rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vd-post__rubrique {
  align-self: flex-start;
  font-family: var(--vd-sans);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  background: var(--vd-terracotta);
  padding: .25rem .6rem;
  border-radius: 3px;
  margin-bottom: .8rem;
}
.vd-post__titre {
  font-family: var(--vd-serif);
  font-size: 1.4rem;
  line-height: 1.22;
  margin: 0 0 .55rem;
}
.vd-post__titre a { color: var(--vd-vert); text-decoration: none; }
.vd-post__titre a:hover { color: var(--vd-terracotta); }
.vd-post__extrait {
  font-size: var(--vd-petit);
  color: var(--vd-texte-doux);
  line-height: 1.62;
  margin: 0 0 1rem;
  flex: 1;
}
.vd-post__meta {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  color: var(--vd-texte-clair);
  margin: 0;
}

/* Article mis en avant : image à gauche, texte à droite */
.vd-post--vedette {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
}
.vd-post--vedette .vd-post__image { aspect-ratio: auto; height: 100%; min-height: 260px; }
.vd-post--vedette .vd-post__corps { padding: 2rem 2.25rem; justify-content: center; }
.vd-post--vedette .vd-post__rubrique { background: var(--vd-vert); }
.vd-post--vedette .vd-post__titre { font-size: 2rem; }
.vd-post--vedette .vd-post__extrait { font-size: var(--vd-corps); flex: 0; }

@media (max-width: 767px) {
  .vd-post--vedette { grid-template-columns: 1fr; }
  .vd-post--vedette .vd-post__image { aspect-ratio: 3 / 2; min-height: 0; }
  .vd-post--vedette .vd-post__corps { padding: 1.35rem 1.5rem 1.5rem; }
  .vd-post--vedette .vd-post__titre { font-size: 1.5rem; }
  .vd-journal__grille { grid-template-columns: 1fr; gap: 1.35rem; }
}

/* Page d'un article — v3.6
   Divi fournit déjà le titre, l'image à la une et une ligne d'informations.
   On masque la sienne (elle affiche l'identifiant de l'auteur et une date à
   l'anglaise) et on garde la nôtre, qui porte la rubrique et la durée. */
.single-post .et_post_meta_wrapper > .post-meta,
.single-post .post-meta { display: none !important; }

.single-post .et_post_meta_wrapper > img,
.single-post .entry-featured-image-url img {
  border-radius: var(--vd-radius-l);
  margin-bottom: 1.5rem;
  width: 100%;
  height: auto;
}

.vd-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  color: var(--vd-texte-clair);
  margin: 0 0 1.5rem;
}

/* Encadrés dans le corps des articles */
.vd-encadre {
  border-radius: var(--vd-radius);
  padding: 1.15rem 1.35rem;
  margin: 1.75rem 0;
  font-size: var(--vd-petit);
  line-height: 1.65;
}
.vd-encadre__titre {
  display: block;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: .4rem;
}
.vd-encadre p:last-child { margin-bottom: 0; }
.vd-encadre ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.vd-encadre li { margin-bottom: .25rem; }

.vd-encadre--conseil {
  background: var(--vd-creme);
  border-left: 3px solid var(--vd-terracotta);
}
.vd-encadre--conseil .vd-encadre__titre { color: var(--vd-terracotta-fonce); }

.vd-encadre--pratique {
  background: var(--vd-vert-pale);
  border-left: 3px solid var(--vd-vert);
}
.vd-encadre--pratique .vd-encadre__titre { color: var(--vd-vert); }

/* Articles liés */
.vd-lies {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--vd-filet);
}
.vd-lies__titre {
  font-family: var(--vd-serif);
  font-size: var(--vd-h3);
  color: var(--vd-vert);
  margin: 0 0 1.5rem;
}
.vd-lies__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 767px) {
  .vd-lies__grille { grid-template-columns: 1fr; }
}

/* Formulaire : deux champs sur une même ligne — v3.8
   Utilisé pour les dates d'arrivée et de départ, qui vont par paire et
   n'ont pas besoin d'une ligne chacune. */
.frm-fluent-form .ff-el-group.vd-demi {
  display: inline-block;
  width: calc(50% - .55rem);
  vertical-align: top;
}
.frm-fluent-form .ff-el-group.vd-demi + .ff-el-group.vd-demi {
  margin-left: 1rem;
}
@media (max-width: 640px) {
  .frm-fluent-form .ff-el-group.vd-demi,
  .frm-fluent-form .ff-el-group.vd-demi + .ff-el-group.vd-demi {
    display: block;
    width: 100%;
    margin-left: 0;
  }
}

/* Paragraphes vides — v3.9
   WordPress insère un <p></p> vide après un <span> suivi d'un bloc, ce qui
   arrive dans chaque bandeau (sur-titre puis titre) et dans les encadrés.
   Ils créent des blancs inexpliqués au milieu du texte. */
#main-content p:empty,
.entry-content p:empty { display: none; }

/* Date de mise à jour d'un document légal */
.vd-maj {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vd-filet);
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  color: var(--vd-texte-doux);
}

/* ==========================================================================
   6. TABLEAUX — TARIFS ET DISTANCES
   ========================================================================== */

.vd-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--vd-radius);
  overflow: hidden;
  box-shadow: var(--vd-ombre);
}
.vd-table thead th {
  background: var(--vd-brun);
  color: #fff;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.15rem 1.5rem;
  text-align: left;
}
.vd-table thead th:last-child { text-align: right; }
.vd-table td {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--vd-filet);
  vertical-align: middle;
}
.vd-table tbody tr:last-child td { border-bottom: none; }
.vd-table td:first-child { font-weight: 500; color: var(--vd-texte); }
.vd-table td:nth-child(2) { color: var(--vd-texte-doux); font-size: var(--vd-petit); }
.vd-table td:last-child { text-align: right; }

/* Ligne mise en avant — haute saison */
.vd-table tr.vd-highlight { background: var(--vd-sable); }
.vd-table tr.vd-highlight td:last-child { font-size: 1.6rem; }

/* Pastille d'étiquette — « ÉTÉ », « BASTIDE INCONTOURNABLE » */
.vd-badge {
  display: inline-block;
  font-family: var(--vd-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 3px;
  background: var(--vd-terracotta);
  color: #fff;
  margin-left: .6rem;
  vertical-align: middle;
}
.vd-badge--sable { background: #E0C179; color: var(--vd-brun); }
.vd-badge--vert  { background: var(--vd-vert-pale); color: var(--vd-vert); }
.vd-badge--bleu  { background: #DCE8ED; color: #3D6B7F; }

/* Note d'information sous un tableau — filet terracotta à gauche */
.vd-note {
  background: var(--vd-terracotta-pale);
  border-left: 3px solid var(--vd-terracotta);
  padding: 1rem 1.35rem;
  font-size: var(--vd-petit);
  color: var(--vd-texte-doux);
  border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
  margin-top: 1.25rem;
}
.vd-note strong { color: var(--vd-texte); }

/* Encadré vert de réassurance — « Tarif définitif, aucune surprise » */
.vd-rassurance {
  background: var(--vd-vert);
  color: #fff;
  padding: 1.35rem 1.5rem;
  border-radius: var(--vd-radius);
  font-size: var(--vd-petit);
  margin-top: 1rem;
}
.vd-rassurance strong { color: #fff; }
.vd-rassurance em { color: rgba(255, 255, 255, .88); }

/* ==========================================================================
   7. LISTES INCLUS / NON INCLUS
   ========================================================================== */

.vd-liste-box {
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius);
  overflow: hidden;
  height: 100%;
}
.vd-liste-box__titre {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1rem 1.35rem;
}
.vd-liste-box--inclus .vd-liste-box__titre { background: var(--vd-vert); color: #fff; }
.vd-liste-box--option .vd-liste-box__titre { background: var(--vd-creme); color: var(--vd-texte-doux); }

.vd-liste-box ul { list-style: none; margin: 0; padding: 0; }
.vd-liste-box li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .8rem 1.35rem;
  border-bottom: 1px solid var(--vd-filet);
  font-size: var(--vd-petit);
  color: var(--vd-texte-doux);
}
.vd-liste-box li:last-child { border-bottom: none; }
.vd-liste-box li::before {
  flex: 0 0 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 700;
}
.vd-liste-box--inclus li::before {
  content: '✓';
  background: var(--vd-vert-pale);
  color: var(--vd-vert);
}
.vd-liste-box--option li::before {
  content: '–';
  background: var(--vd-creme);
  color: var(--vd-texte-clair);
}

/* ==========================================================================
   7 bis. MOSAÏQUE DE PHOTOS
   À poser sur une colonne Divi : les modules Image qu'elle contient
   se rangent en damier 2 × 2 au lieu de s'empiler.
   Les images restent des modules Divi ordinaires, donc modifiables.
   ========================================================================== */

.vd-mosaique {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}
.vd-mosaique .et_pb_module { margin-bottom: 0 !important; }
.vd-mosaique .et_pb_image_wrap { display: block; height: 100%; }
.vd-mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--vd-radius);
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}
.vd-mosaique .et_pb_image:hover img { transform: scale(1.03); }

@media (max-width: 560px) {
  .vd-mosaique { grid-template-columns: 1fr; gap: 10px; }
}

/* ==========================================================================
   8. CARTES — ACTIVITÉS, COUPS DE CŒUR, « CE QUE NOUS AIMONS ICI »
   ========================================================================== */

.vd-carte {
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius);
  padding: 1.6rem;
  height: 100%;
  transition: all var(--vd-transition);
}
.vd-carte:hover {
  border-color: var(--vd-terracotta);
  box-shadow: var(--vd-ombre);
  transform: translateY(-2px);
}
.vd-carte__icone { font-size: 1.5rem; margin-bottom: .9rem; display: block; }
/* Ces intitulés sont désormais des h3 : on neutralise la taille et les
   marges héritées des titres pour conserver l'apparence d'origine. */
h3.vd-carte__titre {
  font-size: 1.15rem;
  margin: 0 0 .55rem;
  line-height: 1.3;
}
.vd-carte__titre {
  font-family: var(--vd-sans);
  font-size: var(--vd-corps);
  font-weight: 500;
  color: var(--vd-texte);
  margin-bottom: .5rem;
}
.vd-carte__texte { font-size: var(--vd-petit); color: var(--vd-texte-doux); margin: 0; }

/* Carte « coup de cœur » — filet coloré en haut */
.vd-carte--coup {
  border-top: 4px solid var(--vd-terracotta);
  padding: 1.75rem;
}
.vd-carte--coup.vd-carte--vert { border-top-color: var(--vd-vert); }
.vd-carte--coup.vd-carte--brun { border-top-color: var(--vd-brun); }
.vd-carte--coup.vd-carte--bleu { border-top-color: #3D6B7F; }
.vd-carte--coup h3 {
  font-family: var(--vd-serif);
  font-size: 1.4rem;
  margin: .75rem 0 .75rem;
}
.vd-carte--coup ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  border-top: 1px solid var(--vd-filet);
  padding-top: 1rem;
}
.vd-carte--coup li {
  font-size: var(--vd-petit);
  color: var(--vd-texte-doux);
  padding-left: 1rem;
  position: relative;
  margin-bottom: .4rem;
}
.vd-carte--coup li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--vd-terracotta);
}

/* ==========================================================================
   9. LISTE DE DISTANCES
   ========================================================================== */

.vd-distances { background: #fff; border: 1px solid var(--vd-filet); border-radius: var(--vd-radius); }
.vd-distances__ligne {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--vd-filet);
}
.vd-distances__ligne:last-child { border-bottom: none; }
.vd-distances__temps {
  flex: 0 0 58px;
  font-family: var(--vd-serif);
  font-variant-numeric: oldstyle-nums;
  font-size: 1.05rem;
  color: var(--vd-terracotta);
  padding-top: 1px;
}
.vd-distances__temps small { font-size: .65em; letter-spacing: .04em; }
.vd-distances__lieu { font-weight: 500; color: var(--vd-texte); display: block; }
.vd-distances__note { font-size: var(--vd-petit); color: var(--vd-texte-doux); }

/* ==========================================================================
   10. CITATIONS
   ========================================================================== */

.vd-citation {
  border-left: 2px solid var(--vd-terracotta);
  padding: .35rem 0 .35rem 1.5rem;
  font-family: var(--vd-serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--vd-vert);
  margin: 1.75rem 0;
}
.vd-section--vert .vd-citation {
  border-left-color: rgba(255, 255, 255, .45);
  color: #fff;
}

/* Avis voyageur */
.vd-avis {
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius);
  padding: 1.75rem;
  height: 100%;
}
.vd-avis__etoiles { color: #D9A03C; letter-spacing: .15em; margin-bottom: .9rem; display: block; }
.vd-avis__texte { font-size: var(--vd-petit); color: var(--vd-texte-doux); font-style: italic; }
.vd-avis__auteur {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vd-terracotta);
  margin-top: 1rem;
  display: block;
}

/* ==========================================================================
   10 bis. ENCART DE NOTE — PLATEFORMES DE RÉSERVATION
   ========================================================================== */

.vd-plateformes-groupe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.vd-plateforme {
  flex: 1 1 200px;
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius);
  padding: 1.6rem 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  transition: border-color var(--vd-transition), box-shadow var(--vd-transition);
}
.vd-plateforme:hover {
  border-color: var(--vd-terracotta);
  box-shadow: var(--vd-ombre);
}

.vd-plateforme__libelle {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vd-texte-doux);
}

.vd-plateforme__ligne {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  margin-top: .25rem;
}
.vd-plateforme__valeur {
  font-family: var(--vd-serif);
  font-variant-numeric: oldstyle-nums;
  font-size: 3rem;
  line-height: 1;
  color: var(--vd-vert);
}
.vd-plateforme__bareme {
  font-family: var(--vd-serif);
  font-size: 1.15rem;
  color: var(--vd-texte-clair);
}

.vd-plateforme__etoiles {
  color: #D9A03C;
  letter-spacing: .18em;
  font-size: 1.05rem;
}
.vd-plateforme__nombre {
  font-size: var(--vd-petit);
  color: var(--vd-texte-doux);
}
.vd-plateforme__mention {
  margin-top: .5rem;
  display: inline-block;
  font-family: var(--vd-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 100px;
  background: var(--vd-vert-pale);
  color: var(--vd-vert);
}

/* Variante « ligne » : mention sobre dans le bandeau d'en-tête.
   Volontairement discrète pour ne pas concurrencer le bouton d'appel. */
.vd-plateforme-ligne {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  margin: 0 0 1.5rem;
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
  color: rgba(255, 255, 255, .92);
  letter-spacing: .01em;
}
.vd-plateforme-ligne strong {
  font-family: var(--vd-serif);
  font-variant-numeric: oldstyle-nums;
  font-size: 1.35rem;
  font-weight: 500;
  color: #fff;
}
.vd-plateforme-ligne__etoiles { color: #F5E4BE; font-size: 1.05rem; }
.vd-plateforme-ligne__source { color: rgba(255, 255, 255, .78); }

/* Variante « bandeau » : cartouche posé sur la photo d'en-tête.
   Fond transparent, filet et texte blancs, pour rester lisible sur l'image. */
.vd-plateforme--hero {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--vd-radius-l);
  padding: 1.75rem 2rem;
  max-width: 21rem;
  margin-left: auto;
}
.vd-plateforme--hero:hover {
  border-color: rgba(255, 255, 255, .85);
  box-shadow: none;
}
.vd-plateforme--hero .vd-plateforme__libelle {
  color: #fff;
  font-size: var(--vd-petit);
  letter-spacing: .12em;
}
.vd-plateforme--hero .vd-plateforme__valeur { color: #fff; }
.vd-plateforme--hero .vd-plateforme__bareme,
.vd-plateforme--hero .vd-plateforme__nombre { color: rgba(255, 255, 255, .85); }
.vd-plateforme--hero .vd-plateforme__etoiles { color: #F5E4BE; }
.vd-plateforme--hero .vd-plateforme__mention {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.vd-plateforme--hero .vd-plateforme__lien {
  color: #fff;
  font-size: var(--vd-petit);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: .35rem;
}
.vd-plateforme--hero .vd-plateforme__lien:hover { color: var(--vd-sable); }

@media (max-width: 980px) {
  .vd-plateforme--hero { margin: 1.75rem auto 0; }
}
@media (max-width: 560px) {
  .vd-plateforme { flex-basis: 100%; padding: 1.35rem 1.2rem; }
  .vd-plateforme__valeur { font-size: 2.5rem; }
  .vd-plateforme--hero { padding: 1.35rem 1.4rem; max-width: 100%; }
}

/* ==========================================================================
   11. FAQ — ACCORDÉON DIVI
   ========================================================================== */

.et_pb_toggle,
.vd-faq .et_pb_toggle {
  background: #fff !important;
  border: 1px solid var(--vd-filet) !important;
  border-radius: var(--vd-radius) !important;
  margin-bottom: .6rem !important;
  padding: 0 !important;
  transition: all var(--vd-transition);
}
.et_pb_toggle:hover { border-color: var(--vd-terracotta) !important; }
.et_pb_toggle_title {
  font-family: var(--vd-sans) !important;
  font-size: var(--vd-corps) !important;
  font-weight: 400 !important;
  color: var(--vd-texte) !important;
  padding: 1.15rem 3.25rem 1.15rem 1.35rem !important;
}
.et_pb_toggle_content { padding: 0 1.35rem 1.35rem !important; color: var(--vd-texte-doux); font-size: var(--vd-petit); }
.et_pb_toggle_title:before {
  color: var(--vd-terracotta) !important;
  border: 1px solid var(--vd-terracotta);
  border-radius: 50%;
  width: 22px; height: 22px;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  right: 1.35rem !important;
}
.et_pb_toggle_open { border-color: var(--vd-terracotta) !important; box-shadow: var(--vd-ombre) !important; }

/* ==========================================================================
   12. FORMULAIRE DE CONTACT
   ========================================================================== */

.et_pb_contact_form input,
.et_pb_contact_form textarea,
.et_pb_contact_form select,
.vd-form input, .vd-form textarea {
  background: #fff !important;
  border: 1px solid var(--vd-filet) !important;
  border-radius: var(--vd-radius) !important;
  padding: .9rem 1.1rem !important;
  font-family: var(--vd-sans) !important;
  font-size: var(--vd-corps) !important;
  color: var(--vd-texte) !important;
  transition: border-color var(--vd-transition), box-shadow var(--vd-transition);
}
.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus {
  border-color: var(--vd-terracotta) !important;
  box-shadow: 0 0 0 3px var(--vd-terracotta-pale) !important;
  outline: none !important;
}
.et_pb_contact_form ::placeholder { color: var(--vd-texte-clair) !important; }

/* ==========================================================================
   13. CALENDRIER BEDBOOKING — widget officiel   v3.14
   Le widget injecte son propre balisage dans le conteneur : on se contente
   de lui offrir un cadre à la charte, sans contraindre sa hauteur — elle
   varie selon le mois affiché et le nombre de tarifs.
   ========================================================================== */

.vd-booking {
  position: relative;
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius-l);
  box-shadow: var(--vd-ombre);
  padding: .5rem;
  /* Surtout pas « overflow: hidden » : le calendrier est plus large que
     l'écran d'un téléphone en mode portrait, et tout ce qui dépasse — dont
     les flèches de changement de mois, placées à droite — serait rogné.
     On laisse donc défiler horizontalement à l'intérieur du cadre. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.vd-booking > div { width: 100%; }
.vd-booking iframe {
  width: 100%;
  border: 0;
  display: block;
}
/* Le widget se dimensionne seul : on retire la hauteur minimale une fois
   son contenu injecté, pour éviter un grand vide sous le calendrier. */
.vd-booking > div:not(:empty) { min-height: 0 !important; }

/* Variante servie hors de la langue du widget : la page hébergée par
   BedBooking, en iframe. Elle est responsive et gère son propre défilement —
   le défilement horizontal du cadre ferait donc doublon, et sur mobile deux
   barres imbriquées rendent le calendrier pénible à manipuler. */
.vd-booking--hebergee {
  overflow: hidden;
  padding: 0;
}
.vd-booking--hebergee iframe { height: 760px; }

/* Barre de défilement discrète, pour signaler que le calendrier se fait
   glisser plutôt que de laisser croire qu'il est coupé. */
.vd-booking::-webkit-scrollbar { height: 6px; }
.vd-booking::-webkit-scrollbar-track { background: var(--vd-creme); border-radius: 3px; }
.vd-booking::-webkit-scrollbar-thumb {
  background: var(--vd-terracotta);
  border-radius: 3px;
  opacity: .7;
}

@media (max-width: 782px) {
  /* On récupère chaque pixel de largeur utile sur petit écran. */
  .vd-booking { padding: .25rem; }
  .vd-booking__aide { display: block; }
}
.vd-booking__aide {
  display: none;
  margin-top: .6rem;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  color: var(--vd-texte-clair);
  text-align: center;
}

/* ==========================================================================
   14. PIED DE PAGE
   ========================================================================== */

#main-footer { background: var(--vd-vert) !important; }
#footer-widgets, #footer-widgets a, #footer-info, #footer-info a {
  color: rgba(255, 255, 255, .85) !important;
  font-size: var(--vd-petit);
}
#footer-widgets h4 {
  color: #fff !important;
  font-family: var(--vd-serif) !important;
  font-size: 1.2rem !important;
}
#footer-widgets a:hover, #footer-info a:hover { color: #fff !important; }
#footer-bottom { background: rgba(0, 0, 0, .18) !important; }

/* ==========================================================================
   14 bis. ARTICLES DU BLOG
   Les articles migrés depuis l'ancien site sont encapsulés dans .vd-article.
   ========================================================================== */

/* Page d'un article : en-tête sobre, colonne de lecture centrée.
   Divi affiche par défaut un titre démesuré et une colonne latérale sans
   intérêt sur un site de location — on reprend la main sur les deux. */

.single-post #main-content .container { padding-top: 0; }

.single-post .entry-title,
.single-post h1.entry-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important;
  line-height: 1.15;
  max-width: 20em;
  margin: 0 auto .9rem;
  text-align: center;
}
.single-post .et_post_meta_wrapper > .post-meta,
.single-post .post-meta {
  text-align: center;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vd-texte-clair);
  padding-bottom: 1.75rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--vd-filet);
  max-width: 44em;
  margin-left: auto;
  margin-right: auto;
}
.single-post .post-meta a { color: var(--vd-terracotta); }
.single-post .et_post_meta_wrapper { padding-top: 2.5rem; }
.single-post article.et_pb_post { padding-bottom: 3rem; }

/* Image mise en avant, si présente */
.single-post .et_post_meta_wrapper > img,
.single-post .entry-featured-image-url img {
  border-radius: var(--vd-radius);
  margin-bottom: 2rem;
}

/* Corps de l'article — v3.6
   La colonne était réglée sur 44 em, soit près de 90 caractères par ligne.
   L'œil décroche au-delà de 75 : on resserre en unités « ch », qui suivent
   la largeur réelle des caractères quelle que soit la taille du texte. */
.vd-article {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 1.09rem;
  line-height: 1.8;
  color: var(--vd-texte);
}

/* Chapeau : le premier paragraphe donne le ton */
.vd-article > p:first-of-type {
  font-size: 1.22rem;
  line-height: 1.65;
  color: var(--vd-vert);
  margin-bottom: 2rem;
}

/* Filet terracotta au-dessus des intertitres */
.vd-article h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--vd-terracotta);
  margin-bottom: 1rem;
}

.vd-article a {
  color: var(--vd-terracotta-fonce);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.vd-article a:hover { color: var(--vd-vert); }

.vd-article ul { list-style: none; padding-left: 0; }
.vd-article ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .55rem;
}
.vd-article ul li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vd-terracotta);
}
.vd-article ol { padding-left: 1.35rem; }
.vd-article ol li { margin-bottom: .55rem; }
.vd-article ol li::marker { color: var(--vd-terracotta); font-weight: 500; }

.vd-article blockquote {
  margin: 2.25rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--vd-terracotta);
  font-family: var(--vd-serif);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--vd-vert);
  font-style: italic;
}

.vd-article img {
  width: 100%;
  height: auto;
  border-radius: var(--vd-radius);
  margin: 2rem 0;
}

/* Séparation de section — remplace les « · · · » hérités de la migration */
.vd-article .vd-sep {
  border: 0;
  height: auto;
  margin: 2.75rem auto;
  text-align: center;
  overflow: visible;
  /* Divi colore les <hr> par le fond, pas par la bordure : sans cette remise
     à zéro, le losange se détachait sur une bande beige pleine largeur. */
  background: transparent !important;
}
.vd-article .vd-sep::before {
  content: "◆";
  display: block;
  font-size: .55rem;
  letter-spacing: 1.1em;
  text-indent: 1.1em;   /* compense l'espacement, pour un vrai centrage */
  color: var(--vd-terracotta);
  opacity: .75;
}

/* Les encadrés débordent légèrement de la colonne : ils respirent mieux
   et rythment la lecture sans la couper. */
.vd-article .vd-encadre {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
@media (max-width: 640px) {
  .vd-article .vd-encadre { margin-left: 0; margin-right: 0; }
  .vd-article > p:first-of-type { font-size: 1.12rem; }
}

/* Un article n'a qu'un seul H1 : le titre de la page.
   Si un H1 subsiste dans le corps, on le ramène visuellement au rang de H2. */
.vd-article h1 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 2.5rem 0 1rem;
}
.vd-article h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin: 2.75rem 0 .9rem;
  line-height: 1.2;
}
.vd-article h2::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--vd-terracotta);
  margin-top: .7rem;
  opacity: .55;
}
.vd-article h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  margin: 2rem 0 .6rem;
  line-height: 1.25;
}
/* Le premier titre ne doit pas décoller du chapô */
.vd-article > h2:first-child,
.vd-article > h3:first-child { margin-top: 0; }
.vd-article h4 {
  font-family: var(--vd-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--vd-terracotta);
  margin: 1.5rem 0 .5rem;
}
.vd-article p { margin-bottom: 1.15rem; }
.vd-article ul, .vd-article ol { margin: 0 0 1.35rem 1.35rem; }

/* --------------------------------------------------------------------------
   v3.41.0 — Correctif : puce dupliquée dans les articles de blog
   Divi 5 injecte dans le <head>, via une balise <style> en ligne, la règle
   « #left-area ul, .entry-content ul, .et-l--body ul { list-style-type: disc } ».
   Le sélecteur « #left-area ul » porte un identifiant : sa spécificité (1,0,1)
   l'emporte sur « .vd-article ul » (0,1,1) déclaré plus haut ligne ~1996.
   Résultat : la puce native du navigateur s'affichait EN PLUS de la pastille
   terracotta dessinée par « .vd-article ul li::before » — deux puces par item.
   On repasse devant en préfixant par le conteneur, sans recourir à !important.
   Portée : uniquement les contenus encapsulés dans .vd-article, c'est-à-dire
   les articles de blog FR et EN. Aucune page du site n'utilise cette classe.
   -------------------------------------------------------------------------- */
#left-area .vd-article ul,
.entry-content .vd-article ul,
.et-l--body .vd-article ul {
  list-style: none;
}
.vd-article li { margin-bottom: .5rem; }
.vd-article a { color: var(--vd-terracotta); text-decoration: underline; text-underline-offset: 3px; }
.vd-article a:hover { color: var(--vd-terracotta-fonce); }
.vd-article strong { color: var(--vd-vert); font-weight: 500; }
.vd-article blockquote {
  border-left: 2px solid var(--vd-terracotta);
  padding: .35rem 0 .35rem 1.5rem;
  margin: 1.75rem 0;
  font-family: var(--vd-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--vd-vert);
}
.vd-article hr {
  border: none;
  height: 1px;
  background: var(--vd-filet);
  margin: 2.5rem 0;
}
.vd-article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.vd-article th, .vd-article td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--vd-filet);
  text-align: left;
}
.vd-article th { background: var(--vd-creme); font-weight: 500; font-size: var(--vd-petit); }

/* Liste des articles */
.et_pb_post .entry-title { font-family: var(--vd-serif); }
.et_pb_post .entry-title a { color: var(--vd-vert); }
.et_pb_post .entry-title a:hover { color: var(--vd-terracotta); }
.et_pb_post .post-meta { font-size: var(--vd-micro); color: var(--vd-texte-clair); }
.et_pb_post .more-link {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vd-terracotta) !important;
}

/* ==========================================================================
   14 ter. CRÉDITS DE PIED DE PAGE
   ========================================================================== */

.vd-footer-credits { font-size: var(--vd-micro); color: rgba(255, 255, 255, .8); }
.vd-footer-credits a { color: rgba(255, 255, 255, .95); text-decoration: underline; }
#et-footer-nav, .bottom-nav { background: transparent; }
.bottom-nav a {
  font-size: var(--vd-micro) !important;
  color: rgba(255, 255, 255, .85) !important;
  letter-spacing: .04em;
}
.bottom-nav a:hover { color: #fff !important; }

/* ==========================================================================
   14 quater. GALERIE FILTRABLE ET VISIONNEUSE
   ========================================================================== */

.vd-galerie__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2.25rem;
}
.vd-galerie__filtre {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .6rem 1.15rem;
  border: 1px solid var(--vd-filet);
  border-radius: 100px;
  background: transparent;
  color: var(--vd-texte-doux);
  cursor: pointer;
  transition: all var(--vd-transition);
}
.vd-galerie__filtre:hover { border-color: var(--vd-terracotta); color: var(--vd-terracotta); }
.vd-galerie__filtre.is-actif {
  background: var(--vd-vert);
  border-color: var(--vd-vert);
  color: #fff;
}

.vd-galerie__grille {
  display: grid;
  grid-template-columns: repeat(var(--vd-cols, 3), 1fr);
  gap: 12px;
}
.vd-galerie[data-colonnes="2"] .vd-galerie__grille { --vd-cols: 2; }
.vd-galerie[data-colonnes="4"] .vd-galerie__grille { --vd-cols: 4; }

.vd-galerie__item {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--vd-creme);
  border-radius: var(--vd-radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  display: block;
  animation: vd-apparition .35s ease both;
}
.vd-galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}
.vd-galerie__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(47, 71, 57, 0);
  transition: background var(--vd-transition);
}
.vd-galerie__item:hover img { transform: scale(1.05); }
.vd-galerie__item:hover::after { background: rgba(47, 71, 57, .18); }
.vd-galerie__item:focus-visible { outline: 2px solid var(--vd-terracotta); outline-offset: 3px; }
.vd-galerie__item.is-masque { display: none; }

@keyframes vd-apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vd-galerie-vide {
  text-align: center;
  color: var(--vd-texte-doux);
  font-style: italic;
  padding: 2rem 0;
}

/* Visionneuse plein écran */
.vd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(24, 33, 27, .94);
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  align-items: center;
  animation: vd-fondu .2s ease both;
}
.vd-lightbox[hidden] { display: none; }
@keyframes vd-fondu { from { opacity: 0; } to { opacity: 1; } }

.vd-lightbox__contenu {
  margin: 0;
  text-align: center;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.vd-lightbox__contenu img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--vd-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.vd-lightbox__contenu figcaption {
  color: rgba(255, 255, 255, .82);
  font-size: var(--vd-petit);
  max-width: 44em;
  padding: 0 1rem;
}

.vd-lightbox button {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: color var(--vd-transition), transform var(--vd-transition);
}
.vd-lightbox button:hover { color: #fff; }
.vd-lightbox__prec, .vd-lightbox__suiv { font-size: 3rem; line-height: 1; }
.vd-lightbox__prec:hover { transform: translateX(-3px); }
.vd-lightbox__suiv:hover { transform: translateX(3px); }
.vd-lightbox__fermer {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  font-size: 2.4rem;
  line-height: 1;
}

@media (max-width: 980px) {
  .vd-galerie__grille { --vd-cols: 2 !important; gap: 10px; }
  .vd-lightbox { grid-template-columns: 2.5rem 1fr 2.5rem; }
  .vd-lightbox__prec, .vd-lightbox__suiv { font-size: 2.2rem; }
}
@media (max-width: 560px) {
  .vd-galerie__grille { --vd-cols: 1 !important; }
  .vd-galerie__filtres { gap: .4rem; }
  .vd-galerie__filtre { padding: .5rem .85rem; font-size: .75rem; }
  .vd-lightbox__contenu img { max-height: 70vh; }
}

/* ==========================================================================
   15. BOUTON WHATSAPP FLOTTANT
   ========================================================================== */

.vd-whatsapp {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: var(--vd-ombre-forte);
  z-index: 9998;
  transition: transform var(--vd-transition);
}
.vd-whatsapp:hover { transform: scale(1.07); }
.vd-whatsapp svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 640px) {
  .vd-whatsapp { bottom: 16px; right: 16px; width: 50px; height: 50px; }
  .vd-whatsapp svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   16. MOBILE ET TABLETTE
   Le trafic d'un gîte est majoritairement mobile — cette section compte
   autant que tout le reste.
   ========================================================================== */

@media (max-width: 980px) {
  /* v2.2 — grille 2×2 : les quatre promesses restent visibles d'un seul
     coup d'œil au lieu de former quatre blocs empilés qu'on scrolle. */
  .vd-promesses .et_pb_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 0;
  }
  .vd-promesses .et_pb_column {
    width: auto !important;
    margin: 0 !important;
    padding: 0 .75rem;
    border-right: 1px solid rgba(181, 103, 60, .18);
    border-bottom: none;
  }
  .vd-promesses .et_pb_column:nth-child(2n),
  .vd-promesses .et_pb_column.et-last-child { border-right: none; }
  .vd-promesses .vd-promesse-titre::before { width: 26px; height: 26px; }
  .vd-chiffres { padding: 1.75rem 1rem; }
  .vd-chiffres .vd-chiffre-valeur { font-size: 2rem; }
  .vd-titre-filet { font-size: 1.4rem; }
}

@media (max-width: 767px) {
  /* Tableaux : on passe en cartes empilées, illisibles autrement sur 375 px.
     L'en-tête est masqué visuellement mais reste lu par les lecteurs d'écran
     (display:none l'aurait supprimé de l'arbre d'accessibilité), et chaque
     cellule rappelle son intitulé de colonne via data-label. */
  .vd-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .vd-table td[data-label]:not(:first-child)::before {
    content: attr(data-label) " · ";
    font-family: var(--vd-sans);
    font-size: var(--vd-micro);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vd-texte-clair);
  }
  .vd-table, .vd-table tbody, .vd-table tr, .vd-table td { display: block; width: 100%; }
  .vd-table tr {
    border: 1px solid var(--vd-filet);
    border-radius: var(--vd-radius);
    margin-bottom: .75rem;
    padding: .5rem 0;
  }
  .vd-table tr.vd-highlight { border-color: #E0C179; }
  .vd-table td { border: none; padding: .35rem 1.15rem; text-align: left !important; }
  .vd-table td:first-child { font-size: 1.05rem; padding-top: .75rem; }
  .vd-table td:last-child { padding-bottom: .75rem; }

  .vd-distances__ligne { flex-direction: column; gap: .2rem; }
  .vd-distances__temps { flex: none; }
  .vd-citation { font-size: 1.15rem; padding-left: 1.1rem; }

  /* Boutons pleine largeur, cible tactile confortable */
  .et_pb_button { display: block; text-align: center; width: 100%; padding: 1.05rem 1.5rem !important; }
  .et_pb_button + .et_pb_button { margin-top: .6rem; }
}

/* ==========================================================================
   17. ACCESSIBILITÉ ET IMPRESSION
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible {
  outline: 2px solid var(--vd-terracotta);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   26. AUDIT FINAL — v3.15.0
   ========================================================================== */

/* --- 26.1 Liens dans le corps du texte -----------------------------------
   Divi colore tout lien non stylé en #2EA3F2, son bleu par défaut : un bleu
   d'interface au milieu d'une charte terracotta et vert forêt, à 2,75:1 sur
   blanc. On reprend la main, avec un soulignement discret — la couleur seule
   ne suffit pas à signaler un lien à qui distingue mal les teintes. */
#main-content a:not([class]) {
  color: var(--vd-terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(160, 86, 47, .38);
  transition: color var(--vd-transition), text-decoration-color var(--vd-transition);
}

#main-content a:not([class]):hover {
  color: var(--vd-terracotta-fonce);
  text-decoration-color: currentColor;
}

/* Les liens porteurs d'une classe échappent à la règle ci-dessus et
   retombaient donc sur le bleu de Divi. */
#main-content a.vd-plateforme__lien,
#main-content a.vd-lien,
#main-content .vd-encadre a,
#main-content .vd-note a {
  color: var(--vd-terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(160, 86, 47, .38);
}

#main-content a.vd-plateforme__lien:hover,
#main-content a.vd-lien:hover,
#main-content .vd-encadre a:hover,
#main-content .vd-note a:hover {
  color: var(--vd-terracotta-fonce);
  text-decoration-color: currentColor;
}

/* Les titres de cartes sont déjà des zones cliquables entières : les souligner
   ferait double emploi et alourdirait la grille du journal. */
#main-content .vd-post__titre a,
#main-content a.vd-carte--lien,
#main-content .vd-carte--lien a,
#main-content .vd-journal a:not([class]) {
  color: inherit;
  text-decoration: none;
}

#main-content .vd-post__titre a:hover {
  color: var(--vd-terracotta);
}

/* --- 26.2 Formulaire de contact ------------------------------------------
   Fluent Forms livre son bouton d'envoi en #1A7EFB. Sur la page « À propos »
   et sur « Réserver », c'est la seule tache bleue de la page. */
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style,
.fluentform button[type="submit"] {
  background: var(--vd-terracotta) !important;
  border: 0 !important;
  color: #fff !important;
  font-family: var(--vd-sans) !important;
  font-size: var(--vd-petit) !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .85rem 2.25rem !important;
  border-radius: var(--vd-radius) !important;
  box-shadow: var(--vd-ombre);
  transition: background var(--vd-transition), transform var(--vd-transition);
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff_btn_style:hover,
.fluentform button[type="submit"]:hover {
  background: var(--vd-terracotta-fonce) !important;
  transform: translateY(-1px);
}

/* Les cases Oui / Non arrivaient au format natif du navigateur : minuscules
   et impossibles à viser au doigt. */
.fluentform .ff-el-form-check input[type="radio"],
.fluentform .ff-el-form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--vd-terracotta);
  margin-right: .4rem;
  vertical-align: -3px;
}

.fluentform .ff-el-form-check label {
  cursor: pointer;
  padding: .35rem .25rem;
}

/* --- 26.3 Ligne d'informations native de Divi ----------------------------
   Divi affiche « par maison-les-terrasses | Avr 25, 2026 | Bastides » sous le
   titre : l'identifiant technique du compte, une date au format américain, et
   un lien vers une archive d'auteur jamais mise en forme. Notre propre ligne
   (.vd-article-meta) dit la même chose en mieux, juste en dessous. */
body.single-post .et_post_meta_wrapper .post-meta,
body.single-post #main-content .post-meta {
  display: none;
}

/* --- 26.4 Lien d'évitement ------------------------------------------------
   Permet d'atteindre le contenu sans traverser le menu à chaque page.
   Invisible tant qu'on ne l'atteint pas au clavier. */
.vd-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--vd-vert);
  color: #fff;
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
  padding: .85rem 1.5rem;
  border-radius: 0 0 var(--vd-radius) 0;
  text-decoration: none;
}

.vd-evitement:focus {
  left: 0;
  outline: 2px solid var(--vd-sable);
  outline-offset: -4px;
}

/* --- 26.5 Bas de page ----------------------------------------------------- */
#footer-bottom {
  background: rgba(0, 0, 0, .16);
  padding: 1.25rem 0;
}

#footer-info,
.vd-pied {
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  color: rgba(255, 255, 255, .72);
  text-align: center;
  padding: 0 !important;
  float: none !important;
  line-height: 1.7;
}

.vd-pied a {
  color: rgba(255, 255, 255, .88);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  text-underline-offset: .18em;
}

.vd-pied a:hover { color: #fff; text-decoration-color: currentColor; }

.vd-pied__sep { opacity: .45; margin: 0 .5rem; }

/* --- 26.6 Pages de rubrique, de recherche et page 404 ---------------------
   Elles sortaient telles que Divi les livre : aucun titre de niveau 1,
   « Recent Posts » en anglais, mise en page par défaut. On y arrive pourtant
   depuis la pastille de rubrique en tête de chaque article. */
.vd-archive {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 5% 4.5rem;
}

.vd-archive__entete {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.vd-archive__sur {
  display: block;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vd-terracotta);
  margin-bottom: .75rem;
}

.vd-archive__titre {
  font-family: var(--vd-serif);
  font-size: var(--vd-h1);
  font-weight: 400;
  line-height: 1.1;
  color: var(--vd-vert);
  margin: 0 0 1rem;
}

.vd-archive__intro {
  font-family: var(--vd-sans);
  font-size: var(--vd-corps);
  color: var(--vd-texte-doux);
  line-height: 1.7;
  margin: 0;
}

.vd-archive__vide {
  text-align: center;
  font-family: var(--vd-sans);
  color: var(--vd-texte-doux);
  padding: 2rem 0 3rem;
}

.vd-archive__retour {
  display: block;
  text-align: center;
  margin-top: 3rem;
}

/* --- 26.10 Bandeau « édition passée » sur un article d'actualité ----------
   Un article annonçant un événement daté reste utile après coup — il dit ce
   qu'il y a à voir dans la région — mais il ne doit pas laisser croire que
   l'événement est à venir. */
.vd-article .vd-perime {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--vd-sable);
  border-radius: var(--vd-radius);
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
  line-height: 1.6;
  color: var(--vd-brun);
}

.vd-article .vd-perime::before {
  content: "";
  flex: 0 0 auto;
  width: 1.3em;
  height: 1.3em;
  margin-top: .05em;
  background: var(--vd-brun);
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E");
}

.vd-article .vd-perime strong { color: var(--vd-brun); }

/* --- 26.9 Choix de la langue, en fin de menu ------------------------------ */
#top-menu li.vd-langues {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-left: 1.1rem !important;
  margin-left: .4rem;
  border-left: 1px solid var(--vd-filet);
}

#top-menu li.vd-langues a.vd-langue {
  display: inline-block;
  padding: .3rem .5rem !important;
  font-family: var(--vd-sans);
  font-size: var(--vd-micro);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--vd-texte-doux);
  border-radius: var(--vd-radius);
  text-decoration: none;
  opacity: 1;
  transition: color var(--vd-transition), background var(--vd-transition);
}

#top-menu li.vd-langues a.vd-langue:hover {
  color: var(--vd-terracotta);
  background: var(--vd-creme);
}

/* La langue courante se signale par un simple soulignement terracotta.
   Une pastille vert forêt pleine pesait plus lourd que le bouton RÉSERVER
   qu'elle jouxte, et attirait l'œil au mauvais endroit. */
#top-menu li.vd-langues a.vd-langue.is-actif {
  color: var(--vd-texte);
  background: transparent;
  cursor: default;
  box-shadow: inset 0 -2px 0 0 var(--vd-terracotta);
  border-radius: 0;
}

#top-menu li.vd-langues a.vd-langue.is-actif:hover {
  color: var(--vd-texte);
  background: transparent;
}

/* Séparateur discret entre les deux langues. */
#top-menu li.vd-langues a.vd-langue + a.vd-langue {
  position: relative;
}

#top-menu li.vd-langues a.vd-langue + a.vd-langue::before {
  content: "";
  position: absolute;
  left: -.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: .8em;
  background: var(--vd-filet);
}

/* Le filet et le retrait ci-dessus supposaient que le sélecteur tienne en bout
   de menu, sur la même ligne que les rubriques. En dessous de 1200 px, ce
   n'est pas le cas : le menu occupe toute la largeur disponible et le
   sélecteur passe seul à la ligne suivante. Le retrait prévu pour séparer deux
   voisins ne sépare alors plus rien — il décale « FR » de 33 px vers la droite
   par rapport à « Accueil », juste au-dessus. On le neutralise, et le retrait
   négatif compense le rembourrage interne du premier lien pour que les deux
   textes partagent exactement la même verticale. */
@media (min-width: 981px) and (max-width: 1199px) {
  #top-menu li.vd-langues {
    flex-basis: 100%;
    border-left: 0;
    padding-left: 0 !important;
    margin-left: -.5rem;
    margin-top: .15rem;
  }
}

/* À partir de 1200 px, la largeur disponible suffit pour que le sélecteur
   tienne dans le prolongement de RÉSERVER, sur la même ligne que le menu.
   Le rembourrage gauche du bandeau de nav était surdimensionné (168 px) et
   empêchait ce placement même quand la place existait ; on le réduit ici
   pour libérer l'espace nécessaire. */
@media (min-width: 1200px) {
  #et-top-navigation {
    padding-left: 40px;
  }
}

/* Sur le menu déroulant mobile, les deux langues passent sur leur propre
   ligne, alignées avec les autres entrées. */
@media (max-width: 980px) {
  #top-menu li.vd-langues {
    border-left: 0;
    border-top: 1px solid var(--vd-filet);
    margin: .5rem 0 0;
    padding: .75rem 5% .25rem !important;
  }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- 26.7 Icônes de titre dans les articles -------------------------------
   Les articles repris de l'ancien site ouvraient leurs titres par un émoji.
   Le rendu change d'un téléphone à l'autre, la couleur ne suit pas la charte,
   et les lecteurs d'écran les énoncent (« maison », « calendrier »).
   Même principe que le reste du site : un masque CSS sur une image intégrée,
   donc aucune requête supplémentaire et la couleur du texte. */
.vd-article h2.vd-h2--icone {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.vd-article h2.vd-h2--icone::before {
  content: "";
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  align-self: center;
  background: var(--vd-terracotta);
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}

.vd-h2--maison    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E"); }
.vd-h2--ecran     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='12.5' rx='2'/%3E%3Cpath d='m8 3.5 4 3.5 4-3.5'/%3E%3C/svg%3E"); }
.vd-h2--calendrier{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.vd-h2--chateau   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V8l2.5 2V8l2.5 2V8l4 3 4-3v2l2.5-2v2L21 8v13z'/%3E%3Cpath d='M10 21v-5h4v5'/%3E%3C/svg%3E"); }
.vd-h2--carte     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6.5 6-2.5 6 2.5 6-2.5v13.5l-6 2.5-6-2.5-6 2.5z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }
.vd-h2--printemps { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 9.5c0-3 1-4.5 0-6.5-1 2 0 3.5 0 6.5zM14.5 12c3 0 4.5 1 6.5 0-2-1-3.5 0-6.5 0zM12 14.5c0 3-1 4.5 0 6.5 1-2 0-3.5 0-6.5zM9.5 12c-3 0-4.5-1-6.5 0 2 1 3.5 0 6.5 0z'/%3E%3C/svg%3E"); }
.vd-h2--soleil    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2v2.4M12 19.6V22M2 12h2.4M19.6 12H22M4.9 4.9l1.7 1.7M17.4 17.4l1.7 1.7M19.1 4.9l-1.7 1.7M6.6 17.4l-1.7 1.7'/%3E%3C/svg%3E"); }
.vd-h2--cadeau    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='11.5' rx='1.5'/%3E%3Cpath d='M2 9h20v3.5H2zM12 9v11.5'/%3E%3Cpath d='M12 9C10.5 5.5 9 4 7.5 4S5 5 5 6.2 6.5 9 12 9zM12 9c1.5-3.5 3-5 4.5-5S19 5 19 6.2 17.5 9 12 9z'/%3E%3C/svg%3E"); }
.vd-h2--budget    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5a4.5 4.5 0 1 0 0 7M8 11h5M8 13.5h5'/%3E%3C/svg%3E"); }
.vd-h2--horloge   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E"); }

/* --- 26.8 Fiche pratique dans un article ---------------------------------
   Une liste « intitulé / valeur » : dates, lieu, tarifs, liens utiles. */
.vd-article .vd-fiche {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr;
  gap: .1rem 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--vd-creme);
  border-left: 3px solid var(--vd-terracotta);
  border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
}

.vd-article .vd-fiche dt {
  font-weight: 600;
  color: var(--vd-vert);
  padding: .55rem 0;
}

.vd-article .vd-fiche dd {
  margin: 0;
  padding: .55rem 0;
  color: var(--vd-texte);
  line-height: 1.6;
}

.vd-article .vd-fiche dt + dd + dt,
.vd-article .vd-fiche dt + dd + dt + dd {
  border-top: 1px solid var(--vd-filet);
}

@media (max-width: 640px) {
  .vd-article .vd-fiche {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.25rem 1.35rem;
  }

  .vd-article .vd-fiche dt { padding: .9rem 0 .15rem; }
  .vd-article .vd-fiche dd { padding: 0 0 .3rem; }
  .vd-article .vd-fiche dt + dd + dt + dd { border-top: 0; }
}

/* Trois pistes de rattrapage sur la page 404. */
.vd-cartes--3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin: 0 auto;
  max-width: 900px;
}

.vd-carte--lien {
  display: block;
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius-l);
  box-shadow: var(--vd-ombre);
  padding: 1.75rem 1.5rem;
  text-decoration: none !important;
  transition: transform var(--vd-transition), box-shadow var(--vd-transition);
}

.vd-carte--lien:hover {
  transform: translateY(-3px);
  box-shadow: var(--vd-ombre-forte);
}

.vd-carte--lien .vd-carte__titre {
  font-family: var(--vd-serif);
  font-size: var(--vd-h4);
  font-weight: 500;
  color: var(--vd-vert);
  margin: 0 0 .5rem;
}

.vd-carte--lien .vd-carte__texte {
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
  color: var(--vd-texte-doux);
  line-height: 1.65;
  margin: 0;
}

/* Pagination des rubriques et de la recherche. */
.vd-archive .navigation.pagination { margin-top: 3rem; }

.vd-archive .nav-links {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.vd-archive .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .85rem;
  font-family: var(--vd-sans);
  font-size: var(--vd-petit);
  color: var(--vd-texte);
  background: #fff;
  border: 1px solid var(--vd-filet);
  border-radius: var(--vd-radius);
  text-decoration: none;
  transition: background var(--vd-transition), color var(--vd-transition);
}

.vd-archive .page-numbers:hover,
.vd-archive .page-numbers.current {
  background: var(--vd-terracotta);
  border-color: var(--vd-terracotta);
  color: #fff;
}

.vd-archive .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media print {
  #main-header, #main-footer, .vd-whatsapp, .et_pb_button { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .vd-table { box-shadow: none; border: 1px solid #999; }
}