/*
 Theme Name:   La Charbonnière du Vercors
 Theme URI:    https://lacharbonniereduvercors.com
 Description:  Thème WordPress autonome (100% custom, sans framework tiers) pour La Charbonnière du Vercors. Style naturel, épuré, vert olive et beige. Toutes les valeurs sont pilotables depuis le Customizer WordPress. Compatible ABC Réservation Pro.
 Author:       ABCduWeb
 Author URI:   https://abcduweb.fr
 Requires at least: 6.0
 Requires PHP: 7.4
 Version:      4.13.5
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  charbonniere-child
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — pilotées par le Customizer
   Valeurs par défaut, écrasées dynamiquement via wp_add_inline_style()
   ============================================================ */
:root {
  --c-nav:        #4A7C59;    /* barre de nav, éléments d'accent */
  --c-nav-hover:  #355C41;    /* survol nav / bande sombre */
  --c-h2:         #4A7C59;
  --c-body-bg:    #EDE8DF;
  --c-content-bg: #FDFCFA;
  --c-text:       #2E2E2E;
  --c-text-light: #6B6560;
  --c-accent:     #4A7C59;    /* boutons, liens */
  --c-accent-dark:#355C41;
  --c-border:     #D4CCBE;

  /* Hiérarchie de profondeur : le corps de section est le plus clair,
     le footer le plus foncé. Cette progression donne du relief à la
     page et évite l'aplat monotone quand toutes les nuances sont
     identiques par défaut. */
  --c-section-dark: #3F6B4C;  /* bandes CTA / bandes vertes de rappel */
  --c-footer-bg:    #2E4F38;  /* footer : fondation, la plus foncée */
  --c-footer-text:  #ffffff;

  --f-heading:    'Lato', 'Source Sans Pro', Arial, sans-serif;
  --f-body:       'Lato', 'Source Sans Pro', Arial, sans-serif;
  --f-size-base:  15px;
  --f-size-nav:   14px;

  --max-width:    1100px;
  --header-h:     80px;
  --radius:       4px;
  --shadow:       0 2px 12px rgba(0,0,0,0.10);
  --transition:   all 0.25s ease;

  /* Focus ring unifié */
  --focus-ring:   0 0 0 3px rgba(74,124,89,0.4);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--c-body-bg) !important;
  color: var(--c-text) !important;
  font-family: var(--f-body) !important;
  font-size: var(--f-size-base) !important;
  line-height: 1.7 !important;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* ============================================================
   SKIP LINK — accessibilité
   ============================================================ */
.chr-skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 100000;
  text-decoration: none;
  transition: top 0.2s ease;
}
.chr-skip-link:focus {
  top: 0;
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   FOCUS VISIBLE global
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ============================================================
   TITRES
   (le titre du hero est exclu : sa couleur est pilotée par le
   Customizer en style inline, qui ne doit pas être écrasé)
   ============================================================ */
h1:not(.chr-hero__title),
h2:not(.chr-hero__title),
h3, h4, h5, h6 {
  font-family: var(--f-heading) !important;
  color: var(--c-text) !important;
}

.chr-hero__title,
.chr-hero__subtitle {
  font-family: var(--f-heading);
}

h2:not(.chr-hero__title) {
  color: var(--c-h2) !important;
  font-size: clamp(1.3rem, 3vw, 1.8rem) !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
}

h3 {
  color: var(--c-h2) !important;
  font-size: clamp(1.1rem, 2.5vw, 1.3rem) !important;
  font-weight: 600 !important;
}

h1:not(.chr-hero__title) {
  font-size: clamp(1.7rem, 4vw, 2.4rem) !important;
  font-weight: 700 !important;
}

/* ============================================================
   LIENS
   ============================================================ */
a {
  color: var(--c-accent) !important;
  transition: color 0.2s ease !important;
}
a:hover {
  color: var(--c-accent-dark) !important;
}

/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */
#main-content {
  background-color: transparent;
}

.section-white {
  background-color: var(--c-content-bg) !important;
}

/* ============================================================
   ZONE DE CONTENU ÉDITORIAL (article, page — éditeur natif)
   ============================================================ */
.chr-content-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px;
}
.chr-page-title {
  text-align: center;
  margin-bottom: 1.5rem !important;
}
.chr-entry-meta {
  text-align: center;
  color: var(--c-text-light) !important;
  font-size: 0.85rem;
  margin-bottom: 24px;
}
/* Zone de texte : pleine largeur du conteneur, sans "carte" flottante.
   La largeur de lecture reste limitée pour le confort (lignes trop longues
   = lecture pénible), mais les fonds s'étendent d'un bord à l'autre. */
.chr-entry-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ── Bandeau de titre des pages ────────────────────────────── */
/* Bandeau de titre : compact, sans rupture de fond avec le corps.
   Un simple filet court sous le titre suffit à marquer la séparation. */
.chr-page-header {
  background: var(--c-content-bg);
  padding: clamp(36px, 5vw, 60px) 24px clamp(18px, 2.5vw, 28px);
  text-align: center;
}
.chr-page-header .chr-page-title {
  margin: 0 auto !important;
  max-width: 900px;
}
.chr-page-header .chr-page-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--c-accent);
  border-radius: 2px;
  margin: 18px auto 0;
}
.chr-page-body { padding-top: clamp(32px, 4vw, 52px); }

/* ── Corps de page ─────────────────────────────────────────────
   Sélecteur volontairement plus précis que la règle générique
   « .chr-section > * », sinon cette dernière l'emporterait. */
.chr-page-body .chr-entry-content,
.chr-page-body .chr-comments {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
/* Un bloc explicitement "pleine largeur" reprend toute la place */
.chr-page-body .alignfull { max-width: none; }
.chr-page-body .alignwide { max-width: 1240px; }
.chr-entry-content > *:first-child { margin-top: 0 !important; }
.chr-entry-content p { margin-bottom: 1.2em; }
.chr-entry-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.chr-entry-content ul, .chr-entry-content ol { margin-bottom: 1.2em; padding-left: 1.4em; }
.chr-entry-content blockquote {
  border-left: 4px solid var(--c-accent);
  margin: 1.5em 0;
  padding: 0.5em 1.5em;
  font-style: italic;
  color: var(--c-text-light) !important;
}
.chr-entry-content .wp-block-columns { gap: 32px; }
.chr-entry-content .wp-block-button__link,
.chr-entry-content .btn,
.chr-btn,
a.chr-btn,
button.chr-btn {
  font-family: var(--f-body) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  background-color: var(--c-accent) !important;
  color: #ffffff !important;
  border: 2px solid var(--c-accent) !important;
  border-radius: var(--radius) !important;
  padding: 12px 28px !important;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease !important;
  text-decoration: none !important;
  display: inline-block;
}

.chr-entry-content .wp-block-button__link:hover,
.chr-btn:hover,
a.chr-btn:hover {
  background-color: transparent !important;
  color: var(--c-accent) !important;
}

.chr-btn:focus-visible {
  box-shadow: var(--focus-ring);
}

.chr-btn.btn-outline {
  background-color: transparent !important;
  color: var(--c-accent) !important;
}
.chr-btn.btn-outline:hover {
  background-color: var(--c-accent) !important;
  color: #fff !important;
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.chr-form input[type="text"],
.chr-form input[type="email"],
.chr-form input[type="tel"],
.chr-form textarea,
.chr-form select,
input, textarea, select {
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--f-body) !important;
  font-size: var(--f-size-base) !important;
  padding: 10px 14px !important;
  background-color: var(--c-content-bg) !important;
  color: var(--c-text) !important;
  transition: border-color 0.2s ease !important;
}

.chr-form input:focus,
.chr-form textarea:focus,
input:focus, textarea:focus {
  border-color: var(--c-accent) !important;
  outline: none !important;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   BLURBS / CARTES
   ============================================================ */
.chr-blurb {
  background: var(--c-content-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.chr-blurb:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-3px) !important;
}

.chr-blurb-title {
  color: var(--c-h2) !important;
  font-family: var(--f-heading) !important;
}

/* ============================================================
   GALERIE / IMAGES
   ============================================================ */
.chr-gallery .chr-gallery-item,
.chr-image img {
  border-radius: var(--radius) !important;
  transition: opacity 0.25s ease !important;
}

.chr-gallery .chr-gallery-item:hover img {
  opacity: 0.9 !important;
}

/* ============================================================
   WIDGET TARIFS / ICÔNES CAPACITÉ
   ============================================================ */
.gite-card {
  background: var(--c-content-bg);
  border: 2px solid var(--c-accent);
  border-radius: var(--radius);
  text-align: center;
  padding: 20px 16px;
}
.gite-card .gite-name {
  font-family: var(--f-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-h2);
}
.gite-card .gite-capacity {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-accent);
}

/* ============================================================
   ABC RÉSERVATION PRO — compatibilité
   ============================================================ */
.abc-resa-calendar,
.abc-resa-form,
.abc-resa-widget {
  font-family: var(--f-body);
}
.abc-resa-calendar .abc-resa-btn,
.abc-resa-form .abc-resa-submit {
  border-radius: var(--radius);
  font-family: var(--f-body);
}
/* S'assurer que les boutons de réservation héritent du thème */
.abc-resa-btn-primary {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}
.abc-resa-btn-primary:hover {
  background-color: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
}

/* ============================================================
   PIED DE PAGE — FOOTER
   (le rendu réel utilise #charbonniere-footer, stylé dynamiquement
   depuis le Customizer — voir inc/footer.php / inc/customizer.php)
   ============================================================ */

/* ============================================================
   DIAPORAMA / SLIDER
   ============================================================ */
.chr-slider .chr-arrow-prev,
.chr-slider .chr-arrow-next {
  background-color: var(--c-accent) !important;
  border-radius: 50% !important;
  opacity: 0.85 !important;
}

.chr-slider .chr-arrow-prev:hover,
.chr-slider .chr-arrow-next:hover {
  opacity: 1 !important;
  background-color: var(--c-accent-dark) !important;
}

.chr-controllers a {
  background-color: rgba(255,255,255,0.5) !important;
  border: 2px solid rgba(255,255,255,0.8) !important;
}

.chr-controllers a.selected {
  background-color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}

/* ============================================================
   SÉPARATEURS
   ============================================================ */
.chr-divider,
hr {
  border-color: var(--c-border) !important;
}

/* ============================================================
   RESPONSIVE — clamp() remplace les media queries fixes
   ============================================================ */
@media (max-width: 767px) {
  .chr-btn { padding: 10px 20px !important; }
}

/* ============================================================
   PREFERS-REDUCED-MOTION — accessibilité
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto;
  }
  .chr-blurb:hover {
    transform: none !important;
  }
}

/* ============================================================
   SIDEBAR / WIDGETS (Appearance → Widgets)
   ============================================================ */
.chr-sidebar { display: flex; flex-direction: column; gap: 28px; }
.chr-widget {
  background: var(--c-content-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 22px;
}
.chr-widget-title {
  color: var(--c-h2) !important;
  font-size: 1.05rem !important;
  margin-top: 0 !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-border);
}

/* ============================================================
   LAYOUT GÉNÉRIQUE : contenu + sidebar
   ============================================================ */
.chr-layout-with-sidebar {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .chr-layout-with-sidebar { grid-template-columns: 1fr; }
}

/* ============================================================
   CARTES ARTICLES (archive / index blog)
   ============================================================ */
.chr-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  margin: 32px 0;
}
.chr-post-card {
  background: var(--c-content-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.chr-post-card:hover { transform: translateY(-3px); }
.chr-post-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.chr-post-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.chr-post-card-title { font-size: 1.1rem !important; margin: 0 !important; }
.chr-post-card-title a { color: var(--c-h2) !important; text-decoration: none !important; }
.chr-post-card-meta { font-size: 0.8rem; color: var(--c-text-light) !important; }
.chr-post-card-excerpt { font-size: 0.9rem; color: var(--c-text-light) !important; flex: 1; }

/* ============================================================
   GRILLE GÎTES (archive chr_gite)
   ============================================================ */
.chr-gite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  margin: 32px 0;
}
.chr-gite-archive-card {
  background: var(--c-content-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease;
}
.chr-gite-archive-card:hover { transform: translateY(-3px); }
.chr-gite-archive-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.chr-gite-archive-card-body { padding: 18px 20px; }
.chr-gite-archive-card-title { font-size: 1.15rem !important; margin: 0 0 6px !important; }
.chr-gite-archive-card-title a { color: var(--c-h2) !important; text-decoration: none !important; }
.chr-gite-archive-card-price { color: var(--c-accent) !important; font-weight: 700; }

/* ============================================================
   PAGINATION
   ============================================================ */
.chr-pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 32px;
  justify-content: center;
}
.chr-pagination a,
.chr-pagination span {
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--c-border);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.9rem;
}
.chr-pagination .current {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #fff !important;
}
.chr-pagination a:hover {
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}

/* ============================================================
   404 / RECHERCHE
   ============================================================ */
.chr-center-block {
  max-width: 640px;
  margin: 60px auto;
  padding: 0 24px;
  text-align: center;
}
.chr-center-block .search-form {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.chr-center-block .search-form input[type="search"] {
  min-width: 260px;
}

/* ============================================================
   LISTE DES ÉQUIPEMENTS (page d'accueil migrée)
   ============================================================ */
.chr-equip-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 24px;
}
.chr-equip-list li {
  position: relative;
  padding-left: 26px;
  color: var(--c-text) !important;
}
.chr-equip-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}

/* ============================================================
   RYTHME DES SECTIONS — page d'accueil
   Alternance de fonds + en-têtes de section cohérents, pour
   éviter l'effet « bloc unique » et guider la lecture.
   ============================================================ */
.chr-section {
  padding: clamp(56px, 8vw, 96px) 24px;
}
.chr-section > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Fond alterné clair */
.chr-section--alt { background: var(--c-content-bg); }

/* Bande sombre : contraste fort, rappelle le header et le hero */
.chr-section--dark { background: var(--c-section-dark); }
.chr-section--dark .chr-section-title,
.chr-section--dark h2 { color: #fff !important; }
.chr-section--dark .chr-eyebrow { color: rgba(255,255,255,.75); }
.chr-section--dark .chr-eyebrow::after { background: rgba(255,255,255,.4); }
.chr-section--dark .chr-lede { color: rgba(255,255,255,.9) !important; }

/* ── Bande de chiffres sur fond sombre ─────────────────────────
   Pas de cartes : sur un aplat de couleur, des encadrés ajoutent
   du bruit. On garde une rangée épurée, rythmée par de fines
   séparations verticales. */
.chr-section--stats { padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(36px, 5vw, 56px); }

.chr-section--dark .chr-chiffres {
  margin: 0;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.chr-section--dark .chr-chiffre {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 14px 12px !important;
  position: relative;
}
/* Séparateurs verticaux subtils entre chaque cellule, découpés par le motif
   (pas de bordure absolue pour rester net quand la grille casse en 2 rangs). */
.chr-section--dark .chr-chiffre + .chr-chiffre::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,.15);
}
.chr-section--dark .chr-chiffres--blocks .chr-chiffre:hover {
  transform: none;
  box-shadow: none;
}
/* Icône unique pour chiffres ET atouts — même taille, même couleur */
.chr-section--dark .chr-chiffre-icon {
  color: rgba(255,255,255,.75) !important;
  margin-bottom: 12px;
}
.chr-section--dark .chr-chiffre-icon svg {
  width: 28px !important;
  height: 28px !important;
}
/* Chiffre : valeur en gros, libellé en petites capitales espacées */
.chr-section--dark .chr-chiffre-val {
  color: #fff !important;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 4px;
  line-height: 1.1;
}
.chr-section--dark .chr-chiffre-lbl {
  color: rgba(255,255,255,.72) !important;
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 500;
}
/* Atout dans la grille fusionnée : même style visuel que les libellés
   des chiffres, pour une lecture parfaitement homogène. Le libellé
   remplace simplement la valeur chiffrée. */
.chr-section--dark .chr-chiffres.chr-atouts .chr-atout,
.chr-section--dark .chr-chiffres--merged .chr-atout {
  padding: 14px 12px !important;
}
.chr-section--dark .chr-chiffres.chr-atouts .chr-atout-lbl,
.chr-section--dark .chr-chiffres--merged .chr-atout-lbl {
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1.3;
  margin-top: 0;
}

/* ── Grille FUSIONNÉE (chiffres + atouts sur une même bande) ──
   Ajoutée par le JS de la bande stats : tous les éléments sont
   regroupés dans un seul conteneur .chr-chiffres--merged pour former
   une grille homogène qui casse en autant de rangées que nécessaire. */
.chr-section--dark .chr-chiffres--merged {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: center;   /* icônes et libellés alignés sur une même ligne de base */
}
/* Séparateurs uniformes dans la grille fusionnée */
.chr-section--dark .chr-chiffres--merged .chr-chiffre::before { display: none; }
.chr-section--dark .chr-chiffres--merged .chr-chiffre {
  border-right: 1px solid rgba(255,255,255,.15) !important;
  padding: 10px 12px !important;
}
/* Retire le trait de droite en bout de ligne, quelle que soit la largeur */
.chr-section--dark .chr-chiffres--merged .chr-chiffre:last-child { border-right: 0 !important; }

@media (max-width: 900px) {
  .chr-section--dark .chr-chiffres,
  .chr-section--dark .chr-chiffres--merged {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .chr-section--dark .chr-chiffres,
  .chr-section--dark .chr-chiffres--merged {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── En-tête de section ───────────────────────────────────── */
.chr-eyebrow {
  display: block;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 12px;
}
.chr-eyebrow::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--c-accent);
  margin: 10px auto 0;
}
.chr-section-title {
  text-align: center;
  margin: 0 0 16px !important;
  font-size: clamp(1.6rem, 4vw, 2.3rem) !important;
}
.chr-lede {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  color: var(--c-text-light) !important;
}

/* ── Bloc d'appel à l'action ──────────────────────────────── */
.chr-cta {
  text-align: center;
}
.chr-cta .chr-btn { margin-top: 8px; }

/* Bande CTA de fin de page : posée sur crème plutôt que sur vert
   pour rompre avec le vert du footer qui suit immédiatement. On gagne
   une vraie respiration, un vrai changement de registre, et le bouton
   vert plein attire l'œil au lieu de se fondre dans le fond. */
.chr-section--dark.chr-cta {
  background: linear-gradient(180deg, var(--c-body-bg) 0%, #E5DFD1 100%) !important;
  color: var(--c-text) !important;
  border-top: 1px solid var(--c-border);
  padding-top: clamp(64px, 8vw, 96px) !important;
  padding-bottom: clamp(64px, 8vw, 96px) !important;
}
.chr-section--dark.chr-cta .chr-section-title,
.chr-section--dark.chr-cta h2 {
  color: var(--c-h2) !important;
}
.chr-section--dark.chr-cta .chr-lede,
.chr-section--dark.chr-cta .chr-eyebrow {
  color: var(--c-text-light) !important;
}
.chr-section--dark.chr-cta .chr-eyebrow::after {
  background: var(--c-accent);
}

/* Bouton principal du CTA de fin : plein vert, généreux, avec un léger
   décollement au survol pour inviter au clic. */
.chr-section--dark.chr-cta .chr-btn {
  background-color: var(--c-accent) !important;
  color: #fff !important;
  border-color: var(--c-accent) !important;
  padding: 14px 34px !important;
  font-size: .95rem !important;
  box-shadow: 0 6px 20px rgba(74,124,89,.28);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.chr-section--dark.chr-cta .chr-btn:hover,
.chr-section--dark.chr-cta .chr-btn:focus-visible {
  background-color: var(--c-accent-dark) !important;
  border-color: var(--c-accent-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(74,124,89,.40);
}

/* CTA sur fond sombre (bandes intermédiaires, non finales) :
   plein blanc au repos, transition élégante vers un contour blanc. */
.chr-section--dark:not(.chr-cta) .chr-btn {
  background-color: #fff !important;
  color: var(--c-nav) !important;
  border-color: #fff !important;
  padding: 14px 34px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease !important;
}
.chr-section--dark:not(.chr-cta) .chr-btn:hover,
.chr-section--dark:not(.chr-cta) .chr-btn:focus-visible {
  background-color: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}

/* Le diaporama garde une hauteur raisonnable sur mobile */
@media (max-width: 767px) {
  .chr-diaporama { --chr-diap-h: 320px !important; }
  .chr-section { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   ALIGNEMENTS GUTENBERG (pleine largeur / large)
   Nécessaires pour que les blocs "Pleine largeur" débordent
   réellement du conteneur de contenu.
   ============================================================ */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.alignwide {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
/* Évite une barre de défilement horizontale due au 100vw */
html, body { overflow-x: hidden; }

/* Sur l'accueil, le contenu part du bord : aucune marge parasite */
.chr-front > *:first-child { margin-top: 0; }

/* ============================================================
   FORMULAIRES DU THÈME (contact, newsletter)
   ============================================================ */
.chr-form-wrap { margin: 8px 0 0; }

.chr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 600px) {
  .chr-form-row { grid-template-columns: 1fr; }
}

.chr-field { margin-bottom: 18px; }
.chr-field label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 6px;
  color: var(--c-text);
}
.chr-field input[type="text"],
.chr-field input[type="email"],
.chr-field input[type="tel"],
.chr-field textarea,
.chr-newsletter-row input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--c-text);
  transition: border-color .2s, box-shadow .2s;
}
.chr-field input:focus,
.chr-field textarea:focus,
.chr-newsletter-row input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(74,124,89,.15);
}
.chr-field textarea { resize: vertical; min-height: 140px; }

.chr-field--check label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--c-text-light);
}
.chr-field--check input { margin-top: 3px; flex-shrink: 0; }

.chr-req { color: #b4453c; }
.chr-opt { color: var(--c-text-light); font-weight: 400; font-size: .85em; }

.chr-form-note {
  font-size: .82rem;
  color: var(--c-text-light) !important;
  margin-top: 14px;
}

/* Champ piège : invisible, mais pas display:none (certains robots l'ignorent) */
.chr-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ── Messages de retour ───────────────────────────────────── */
.chr-alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  font-size: .95rem;
  border-left: 4px solid;
}
.chr-alert--success {
  background: rgba(74,124,89,.10);
  border-color: var(--c-accent);
  color: #2f5238;
}
.chr-alert--error {
  background: rgba(180,69,60,.08);
  border-color: #b4453c;
  color: #8c3229;
}

/* ── Newsletter ───────────────────────────────────────────── */
.chr-newsletter { max-width: 560px; }
.chr-newsletter-title { margin-top: 0 !important; }
.chr-newsletter-text { color: var(--c-text-light) !important; font-size: .95rem; }
.chr-newsletter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chr-newsletter-row input[type="email"] { flex: 1; min-width: 220px; width: auto; }
.chr-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  font-size: .82rem;
  color: var(--c-text-light);
  line-height: 1.5;
}
.chr-newsletter-consent input { margin-top: 3px; flex-shrink: 0; }

/* Sur fond sombre (pied de page, bandeau) */
.chr-section--dark .chr-newsletter-title,
.chr-section--dark .chr-newsletter-text,
.chr-section--dark .chr-newsletter-consent { color: rgba(255,255,255,.9) !important; }

/* ============================================================
   PIED DE PAGE — ajustements visuels
   ============================================================ */
#charbonniere-footer .chr-ft-logo img {
  max-height: 64px;
  width: auto;
}
#charbonniere-footer .chr-ft-logo {
  padding-bottom: 8px;
  margin-bottom: 8px;
}

/* Colonnes : titres plus discrets, filet court plutôt que pleine largeur */
#charbonniere-footer .chr-ft-col h4 {
  font-size: .82rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 16px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  position: relative;
}
#charbonniere-footer .chr-ft-col h4::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: currentColor;
  opacity: .5;
  margin-top: 8px;
}

#charbonniere-footer .chr-ft-col p,
#charbonniere-footer .chr-ft-col li {
  line-height: 1.7;
}
#charbonniere-footer address { font-style: normal; }
#charbonniere-footer .chr-ft-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
#charbonniere-footer .chr-ft-menu li { margin-bottom: 8px; }

/* Liens : soulignement à l'approche, plus lisible qu'un simple changement de teinte */
#charbonniere-footer a {
  text-decoration: none;
  transition: opacity .2s;
}
#charbonniere-footer a:hover { text-decoration: underline; }

/* Réseaux sociaux : pastilles alignées */
#charbonniere-footer .chr-ft-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  font-size: 1.15rem;
}

/* Barre de copyright : séparée par un filet discret */
#charbonniere-footer .chr-ft-bottom,
#charbonniere-footer .chr-ft-copyright {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  font-size: .82rem;
}

/* ============================================================
   PIED DE PAGE — mise en page compacte
   Quand une seule colonne a du contenu, une grille à 3 colonnes
   laisse deux tiers de vide. On bascule alors sur une mise en page
   centrée, resserrée, qui paraît voulue plutôt que tronquée.
   ============================================================ */
#charbonniere-footer.chr-ft--compact {
  text-align: center;
  padding-top: 40px !important;
  padding-bottom: 0 !important;
}
#charbonniere-footer.chr-ft--compact .chr-ft-columns {
  display: block;
  max-width: 900px;
  margin: 0 auto;
}
#charbonniere-footer.chr-ft--compact .chr-ft-col { text-align: center; }

/* Le titre de colonne n'a plus de sens seul : on le masque */
#charbonniere-footer.chr-ft--compact .chr-ft-col h4 { display: none; }

/* Menu en ligne plutôt qu'en liste verticale */
#charbonniere-footer.chr-ft--compact .chr-ft-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
}
#charbonniere-footer.chr-ft--compact .chr-ft-menu li { margin: 0; }
#charbonniere-footer.chr-ft--compact .chr-ft-menu a {
  font-size: .95rem;
  letter-spacing: .02em;
}

#charbonniere-footer.chr-ft--compact address p { margin: 4px 0; }
#charbonniere-footer.chr-ft--compact .chr-ft-social { justify-content: center; }

#charbonniere-footer.chr-ft--compact .chr-ft-logo { margin-bottom: 22px; }
#charbonniere-footer.chr-ft--compact .chr-ft-logo img { max-height: 56px; }

/* Colonnes classiques : éviter qu'une colonne isolée s'étire à gauche */
#charbonniere-footer.chr-ft--cols .chr-ft-columns {
  align-items: start;
}

/* ============================================================
   LARGEUR DU CONTENU — adaptation automatique
   La largeur de lecture (780px) convient au texte, mais écrase les
   composants "applicatifs" (réservation, calendrier, carte, galerie)
   qui ont besoin de place. On les détecte pour élargir la zone.
   ============================================================ */
.chr-page-body .chr-entry-content:has(.abc-resa-scope),
.chr-page-body .chr-entry-content:has(.gite-reservation-calendar-menu),
.chr-page-body .chr-entry-content:has(.chr-gallery),
.chr-page-body .chr-entry-content:has(.chr-carte),
.chr-page-body .chr-entry-content:has(.chr-diaporama),
.chr-page-body .chr-entry-content:has(table) {
  max-width: 1240px;
}

/* Réglage manuel par page (metabox « Options de page ») */
.chr-page-body.is-width-large .chr-entry-content { max-width: 1240px !important; }
.chr-page-body.is-width-full  .chr-entry-content { max-width: none   !important; }

/* Repli pour les navigateurs sans :has() — le module de réservation
   reprend au moins toute la largeur disponible. */
.chr-entry-content > .abc-resa-scope { width: 100%; }

/* ============================================================
   FAQ DÉPLIANTE
   ============================================================ */
.chr-faq { max-width: 780px; margin: 0 auto; }
.chr-faq-title { text-align: center; margin-bottom: 24px !important; }
.chr-faq-item {
  border-bottom: 1px solid var(--c-border);
  padding: 4px 0;
}
.chr-faq-q {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--c-h2);
  position: relative;
  transition: color .2s;
}
.chr-faq-q::-webkit-details-marker { display: none; }
.chr-faq-q::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--c-accent);
  transition: transform .2s;
}
.chr-faq-item[open] .chr-faq-q::after { content: "−"; }
.chr-faq-q:hover { color: var(--c-accent); }
.chr-faq-q:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.chr-faq-a {
  padding: 0 40px 20px 0;
  color: var(--c-text-light) !important;
}
.chr-faq-a p { margin: 0 0 .8em; }

/* Sur fond sombre */
.chr-section--dark .chr-faq-q { color: #fff; }
.chr-section--dark .chr-faq-a { color: rgba(255,255,255,.85) !important; }
.chr-section--dark .chr-faq-item { border-color: rgba(255,255,255,.18); }

/* ============================================================
   CARTES « ACTIVITÉS / À FAIRE AUTOUR »
   ============================================================ */
.chr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.chr-card {
  background: var(--c-content-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.chr-card h3 {
  margin: 0 0 10px !important;
  font-size: 1.08rem !important;
}
.chr-card p {
  margin: 0;
  color: var(--c-text-light) !important;
  font-size: .95rem;
  line-height: 1.65;
}
.chr-card-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 8px;
}
/* Sur fond alterné, les cartes prennent le fond blanc pour ressortir */
.chr-section--alt .chr-card { background: #fff; }

/* ============================================================
   PORTRAITS EN ROND
   Style ajouté au bloc Image de Gutenberg (« Rounded » / arrondi).
   Utilisé pour les portraits de la page Présentation.
   ============================================================ */
/* Style « Arrondi » choisi explicitement dans l'éditeur : cercle parfait.
   Le recadrage est centré un peu haut pour ne pas couper les visages. */
.wp-block-image.is-style-rounded img {
  border-radius: 999px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  max-width: 300px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  box-shadow: var(--shadow);
}

/* ── Portraits en colonne étroite ──────────────────────────────
   Dans une section du thème, une image seule dans une colonne réduite
   est un portrait dans la quasi-totalité des cas.

   Choix de rendu : rectangle vertical à coins arrondis plutôt qu'un
   cercle. Les portraits sont souvent cadrés en pied (format 9:16) :
   les enfermer dans un cercle rogne le visage et donne une pastille
   étirée. Le format 3/4 conserve le cadrage d'origine tout en gardant
   une silhouette douce, cohérente avec le reste du site. */
.chr-section .wp-block-column[style*="flex-basis:38%"] .wp-block-image img,
.chr-section .wp-block-column[style*="flex-basis:40%"] .wp-block-image img,
.chr-section .wp-block-column[style*="flex-basis:35%"] .wp-block-image img {
  width: 100% !important;
  max-width: 340px !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center 25% !important;   /* privilégie le haut : les visages */
  border-radius: 14px !important;
  margin: 0 auto !important;
  display: block !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.14) !important;
}
/* La figure ne doit pas brider la largeur de l'image */
.chr-section .wp-block-column[style*="flex-basis:38%"] .wp-block-image,
.chr-section .wp-block-column[style*="flex-basis:40%"] .wp-block-image,
.chr-section .wp-block-column[style*="flex-basis:35%"] .wp-block-image {
  width: 100%;
  margin: 0;
}

/* ── Images sans fichier sélectionné ───────────────────────────
   Un bloc image laissé vide (emplacement non rempli) occupe malgré tout
   sa place sur Safari/iOS et affiche une forme fantôme. On le neutralise
   côté visiteur, tout en le laissant visible dans l'éditeur pour pouvoir
   y déposer une photo. */
.wp-block-image img:not([src]),
.wp-block-image img[src=""] {
  display: none;
}
/* Si la figure ne contient plus rien de visible, elle ne doit pas
   réserver d'espace non plus. */
.wp-block-image:not(:has(img[src])):not(:has(video)):not(:has(a)) {
  display: none;
}

/* Cartes « portrait + texte » côte à côte : sur mobile, on empile
   dans l'ordre le plus naturel (portrait au-dessus du texte). */
@media (max-width: 767px) {
  .chr-section .wp-block-columns.are-vertically-aligned-center {
    gap: 24px;
  }
}

/* ============================================================
   PLUGIN DE RÉSERVATION — habillage du bandeau de titre
   Le plugin (ABC Réservation Pro) affiche « Réservez votre séjour »
   dans un bloc .gite-form-header au fond beige, avec un <h2> vert
   à l'intérieur. Résultat : titre peu lisible, couleur qui tranche
   avec la charte. On ré-habille l'ensemble en CSS pur — le plugin
   reste intact, seul son style change.
   ============================================================ */
.abc-resa-scope .gite-form-header {
  /* Dégradé de vert dans les tons de la charte, plutôt que du beige */
  background: linear-gradient(135deg, var(--c-nav) 0%, var(--c-accent) 100%) !important;
  color: #fff !important;
  padding: clamp(36px, 5vw, 56px) 24px !important;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  text-align: center;
  margin-bottom: 28px;
}

/* Motif subtil en arrière-plan pour donner du relief */
.abc-resa-scope .gite-form-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.10), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0,0,0,.15), transparent 50%);
  pointer-events: none;
}

/* Le titre lui-même : blanc, plus grand, avec un accent visuel */
.abc-resa-scope .gite-form-header h2 {
  position: relative;
  color: #fff !important;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: -.01em;
  line-height: 1.2;
}

/* Petit intitulé au-dessus du titre pour donner du contexte */
.abc-resa-scope .gite-form-header h2::before {
  content: "Notre gîte";
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 12px;
}

/* Filet décoratif sous le titre, rappel de la grammaire du thème */
.abc-resa-scope .gite-form-header h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: rgba(255,255,255,.6);
  border-radius: 2px;
  margin: 18px auto 0;
}

@media (max-width: 600px) {
  .abc-resa-scope .gite-form-header { border-radius: 0; margin-left: -16px; margin-right: -16px; }
}

/* ============================================================
   ATOUTS — [gite_atouts]
   Variante de la bande de chiffres pour les équipements
   « qualitatifs » (parking, terrasse, jardin…), sans valeur numérique.
   ============================================================ */
.chr-section--dark .chr-chiffres.chr-atouts .chr-atout {
  padding: 6px 12px !important;
}
.chr-section--dark .chr-chiffres.chr-atouts .chr-chiffre-icon svg {
  width: 34px !important;
  height: 34px !important;
  color: #fff !important;
  opacity: .9;
  margin-bottom: 14px;
}
.chr-section--dark .chr-chiffres.chr-atouts .chr-atout-lbl {
  color: #fff !important;
  font-size: .82rem !important;
  text-transform: none;   /* casse normale pour les libellés longs */
  letter-spacing: .02em !important;
  font-weight: 500;
}

/* ============================================================
   PAGE DE CONFIRMATION DE RÉSERVATION
   ============================================================ */
.chr-confirmation {
  text-align: center;
  padding-top: clamp(60px, 8vw, 96px) !important;
  padding-bottom: clamp(60px, 8vw, 96px) !important;
}

/* Grosse coche animée */
.chr-confirm-icon {
  color: var(--c-accent);
  margin: 0 auto 28px;
  animation: chr-confirm-pop .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.chr-confirm-icon svg {
  width: 88px;
  height: 88px;
  display: block;
  margin: 0 auto;
}
.chr-confirm-icon svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: chr-confirm-draw .5s .35s ease-out forwards;
}
@keyframes chr-confirm-pop {
  0%   { opacity: 0; transform: scale(.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes chr-confirm-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chr-confirm-icon, .chr-confirm-icon svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

.chr-confirm-title {
  margin: 0 auto 12px !important;
  max-width: 680px;
}
.chr-confirm-title::after { display: none; }   /* pas de filet ici */

.chr-confirm-lede {
  color: var(--c-text-light) !important;
  font-size: 1.08rem;
  max-width: 560px;
  margin: 0 auto 40px !important;
}

/* Étapes numérotées */
.chr-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  text-align: left;
}
.chr-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--c-content-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.chr-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
}
.chr-step strong {
  display: block;
  color: var(--c-h2);
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.chr-step p {
  margin: 0;
  color: var(--c-text-light) !important;
  font-size: .93rem;
  line-height: 1.6;
}

.chr-confirm-contact {
  color: var(--c-text-light) !important;
  font-size: .95rem;
  margin: 0 0 14px !important;
}
.chr-confirmation .chr-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   FIL D'ARIANE
   ============================================================ */
.chr-breadcrumbs {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 24px 0;
  font-size: .85rem;
  color: var(--c-text-light);
}
.chr-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chr-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chr-breadcrumbs a {
  color: var(--c-text-light);
  text-decoration: none;
  transition: color .15s;
}
.chr-breadcrumbs a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}
.chr-breadcrumbs [aria-current="page"] {
  color: var(--c-text);
  font-weight: 500;
}
.chr-breadcrumbs-sep {
  color: var(--c-border);
  font-weight: 400;
}

/* ============================================================
   PAGE 404 — pistes de récupération
   ============================================================ */
.chr-404-search {
  margin: 32px auto 40px;
  max-width: 480px;
}
.chr-404-search .search-form {
  display: flex;
  gap: 10px;
}
.chr-404-search input[type="search"] {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--f-body);
}
.chr-404-search input[type="search"]:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(74,124,89,.15);
}
.chr-404-search input[type="submit"],
.chr-404-search button {
  padding: 12px 22px;
  background: var(--c-accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: pointer;
}
.chr-404-links {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.chr-404-links a {
  display: block;
  background: var(--c-content-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px 22px;
  text-decoration: none;
  color: var(--c-text);
  transition: border-color .2s, transform .2s;
}
.chr-404-links a:hover,
.chr-404-links a:focus-visible {
  border-color: var(--c-accent);
  transform: translateX(4px);
}
.chr-404-links strong {
  display: block;
  color: var(--c-h2);
  margin-bottom: 4px;
}
.chr-404-links span {
  color: var(--c-text-light);
  font-size: .9rem;
}

/* ============================================================
   FOCUS CLAVIER — visible partout
   Règle globale de secours : tout élément interactif atteint au
   clavier reçoit un anneau visible, quel que soit son style local.
   ============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Sur les fonds foncés, on inverse en blanc pour la lisibilité */
.chr-section--dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
#charbonniere-header :where(a, button, [tabindex]):focus-visible,
#charbonniere-footer :where(a, button, [tabindex]):focus-visible {
  outline-color: #fff;
}

/* Liens légaux : ligne discrète sous le copyright */
#charbonniere-footer .chr-ft-legal {
  margin-top: 8px;
  font-size: .78rem;
  opacity: .8;
}
#charbonniere-footer .chr-ft-legal a { color: inherit !important; }
#charbonniere-footer .chr-ft-legal span { margin: 0 6px; opacity: .5; }

/* ============================================================
   BANDE HERO (stats + atouts) — FUSION en grille unique
   Quand la bande contient à la fois [gite_chiffres] et [gite_atouts],
   un petit script les regroupe côté client en une seule grille.
   Chiffres et atouts se lisent alors comme une même liste homogène,
   qui casse en autant de rangées que nécessaire selon la largeur.
   ============================================================ */
.chr-section--stats {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* ============================================================
   PAGE DE PAIEMENT DU SOLDE
   Trois « garanties » alignées sous le titre + intégration
   propre avec le formulaire du plugin ABC Réservation Pro.
   ============================================================ */
.chr-payment {
  text-align: center;
  padding-top: clamp(50px, 6vw, 80px) !important;
  padding-bottom: clamp(50px, 6vw, 80px) !important;
}
.chr-payment .chr-confirm-icon svg { color: var(--c-accent); }

.chr-payment-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 36px auto;
  max-width: 720px;
}
@media (max-width: 640px) {
  .chr-payment-trust { grid-template-columns: 1fr; }
}
.chr-payment-trust__item {
  background: var(--c-content-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px 18px;
  text-align: center;
}
.chr-payment-trust__item svg {
  width: 26px;
  height: 26px;
  color: var(--c-accent);
  margin-bottom: 10px;
}
.chr-payment-trust__item strong {
  display: block;
  color: var(--c-h2);
  font-size: .95rem;
  margin-bottom: 4px;
}
.chr-payment-trust__item span {
  display: block;
  color: var(--c-text-light);
  font-size: .85rem;
  line-height: 1.5;
}

.chr-payment-contact {
  color: var(--c-text-light) !important;
  font-size: .92rem;
  margin-top: 30px !important;
}

/* Cadre autour du formulaire du plugin, s'il vient s'insérer ici */
.chr-payment .abc-resa-scope,
.chr-payment [class*="paiement"],
.chr-payment [class*="payment"],
.chr-payment [class*="pay-balance"],
.chr-payment [class*="pay_balance"] {
  background: var(--c-content-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
  margin: 30px auto;
  max-width: 640px;
  text-align: left;
}

/* ============================================================
   EMPLACEMENT PHOTO À REMPLIR
   Repère visuel bien identifiable, pour qu'un emplacement resté
   vide se remarque immédiatement au lieu de passer inaperçu.
   ============================================================ */
.chr-photo-placeholder {
  border: 2px dashed var(--c-border);
  border-radius: var(--radius);
  padding: 48px 20px;
  color: var(--c-text-light) !important;
  font-size: .9rem;
  font-style: italic;
  background: rgba(0,0,0,.02);
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTIF v2 — 2 septembre 2026
   Mesuré et vérifié en direct sur lacharbonniereduvercors.com
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Air vertical des sections ──────────────────────────────
   .chr-section posait 96 px de padding en haut ET en bas. Deux
   sections qui se suivent cumulaient donc ~192 px de vide : c'est
   l'origine du grand blanc au-dessus des titres.
   Mesuré sur /presentation/ : 108 px au-dessus de « QUI SOMMES-NOUS ».
   96 → 48 px en desktop, 32 px en petit écran.
   La bande de chiffres (--stats) conserve son propre réglage.     */
.chr-section:not(.chr-section--stats) {
  padding-top:    clamp(32px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

/* Le sur-titre est un <p> : il héritait d'un margin-top par défaut
   de 12,48 px qui s'ajoutait au padding de la section.            */
.chr-eyebrow { margin-top: 0; }

/* Résidus de l'éditeur : un paragraphe vide ou un <br> orphelin laissé
   dans un bloc Gutenberg occupe une vraie hauteur (≈30 px pour un <p>
   vide via ses marges, 17 px pour un <br>) et déséquilibre la bande.
   Mesuré sur la bande verte de l'accueil : 43 px au-dessus des chiffres,
   69 px en dessous — d'où l'impression de vide sous « 12 PERSONNES ».
   Cette règle les neutralise ; le vrai correctif reste de les supprimer
   dans l'éditeur de la page.                                       */
.chr-section p:empty  { display: none; }
.chr-section > * > br { display: none; }

/* ── 2. Hauteur du hero sur mobile ─────────────────────────────
   inc/hero.php écrit min-height en style INLINE (60dvh sur
   /contact/). Sans !important, aucune règle de feuille de style ne
   peut le modifier — c'est pourquoi les correctifs sans !important
   restent sans effet.
   Conséquence sur téléphone : la photo (1920×800, ratio 2,4) est
   affichée dans un cadre quasi portrait, on n'en voit qu'un tiers.
   Réduire la hauteur élargit la portion de photo visible.         */
@media (max-width: 900px) {
  #chr-hero.chr-hero { min-height: 300px !important; }
}
@media (max-width: 600px) {
  #chr-hero.chr-hero { min-height: 240px !important; }
}