/*
Theme Name: Erwan Legrand
Theme URI: https://erwan-legrand.fr
Description: Thème enfant Blocksy pour le site d'Erwan Legrand, thérapeute en pratiques énergétiques complémentaires.
Author: Charlotte
Author URI: https://erwan-legrand.fr
Template: blocksy
Version: 1.15.6
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erwan-legrand
*/

/* ==========================================
   POLICES — Duo moderne Fraunces + Inter
   Titres + italiques : Fraunces (serif variable, expressif, 2024+)
   Corps + labels     : Inter    (sans-serif de référence)
   Chargement via wp_enqueue_style dans functions.php (1 seul appel CSS).
   ========================================== */

/* ==========================================
   DESIGN TOKENS — Charte graphique officielle
   Variables CSS partagées par tout le site.
   Source de vérité : CLAUDE.md (section CHARTE GRAPHIQUE).
   Préfixe : --el- (Erwan Legrand)
   ========================================== */

:root {

    /* ---------- Couleurs ---------- */

    /* Fond principal — "Terre Apaisante" */
    --el-color-background: #efd2c3;

    /* Fond section douce — "Crème Chaude" (hero accueil notamment) */
    --el-color-cream: #fff2eb;

    /* Blanc pur — "Respiration" */
    --el-color-white: #ffffff;

    /* Texte principal — "Marron Organique" */
    --el-color-text: #2f231a;

    /* Titres — "Cuivre Profond" */
    --el-color-heading: #803813;

    /* Interactions (boutons, liens, hover) — "Terracotta Chaleureux" */
    --el-color-accent: #A65630;


    /* ---------- Typographies ---------- */

    /* Familles de polices (chargées via Google Fonts dans functions.php) */
    /* Titres + italiques : Fraunces (serif variable moderne, expressif).
       Corps + labels     : Inter (sans-serif moderne de référence). */
    --el-font-heading: "Fraunces", Georgia, serif;
    --el-font-body: "Inter", system-ui, -apple-system, sans-serif;
    --el-font-label: "Inter", system-ui, -apple-system, sans-serif;

    /* Tailles de police */
    --el-font-size-h1: 56px;
    --el-font-size-h2: 40px;
    --el-font-size-body: 18px;

}

/* ==========================================
   Styles globaux
   Applique la charte typographique et chromatique
   à tous les sélecteurs HTML natifs.
   ========================================== */

body {
    font-family: var(--el-font-body);
    font-size: var(--el-font-size-body);
    color: var(--el-color-text);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--el-color-heading);
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: var(--el-font-size-h1); }
h2 { font-size: var(--el-font-size-h2); }
h3 { font-size: 24px; }

p {
    margin-bottom: 1.25em;
}

a {
    color: var(--el-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-thickness: 2px;
}

strong {
    font-weight: 700;
}

::selection {
    background-color: var(--el-color-accent);
    color: var(--el-color-white);
}

/* ==========================================
   Court-circuit Blocksy — typos forcées

   Le Customizer Blocksy ne propose ni Playfair Display ni Montserrat
   dans ses dropdowns de polices (pour éviter les appels Google Fonts
   externes). On force donc ici nos polices auto-hébergées.

   Stratégie :
   1. Réécrire --theme-font-family (variable maître de Blocksy
      utilisée pour tous les éléments texte) → Montserrat partout.
   2. Sélecteur à spécificité renforcée (body h1... et classes
      Blocksy titres) pour gagner la cascade contre main.min.css
      qui est chargé après notre style.css enfant.
   ========================================== */

:root {
    --theme-font-family: var(--el-font-body);
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .wp-block-heading,
body .site-title, body .entry-title, body .page-title,
body .ct-post-title, body .ct-module-title,
body .related-entry-title {
    font-family: var(--el-font-heading);
}

/* Header : fond forcé en blanc, hauteur réduite à 80px.
   Blocksy définit par défaut --height: 120px et un fond Terre Apaisante
   sur le header middle via global.css. On réutilise le MÊME sélecteur
   (spécificité identique) ; notre CSS étant chargé après global.css,
   on gagne la cascade sans !important. */
[data-header*="type-1"] .ct-header [data-row*="middle"] {
    --height: 60px;
    background-color: var(--el-color-cream);
}

/* Header : masquer le site-title (wordmark).
   La maquette ne montre aucun logo dans le header — le wordmark
   "ERWAN LEGRAND" apparaît uniquement en eyebrow du hero. */
.ct-header .site-title-container {
    display: none;
}

/* Header : masquer l'icône loupe (search).
   Pas de recherche prévue côté vitrine, on retire le bouton. */
.ct-header .ct-header-search {
    display: none;
}

/* Menu principal : Montserrat (sans-serif), taille réduite façon maquette.
   On cible directement font-* au lieu des custom-props Blocksy pour garantir
   l'application (certaines CSS vars de Blocksy ne sont plus lues après cascade). */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
    font-family: var(--el-font-label);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--el-color-text);
}

/* État actif (page courante) : noir en gras, pas cuivre.
   La maquette montre "Shiatsu Acupression" en bold/black quand on y est. */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current_page_item > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a {
    font-weight: 700;
    color: var(--el-color-text);
}

/* Hover : cuivre (marque de la charte pour interactions). */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:hover {
    color: var(--el-color-accent);
}

/* Sous-menu (dropdown) : fond blanc, bordure légère, typo Playfair Display
   cohérente avec le menu parent, transitions discrètes au hover. */
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
    background-color: var(--el-color-white);
    border: 1px solid rgba(47, 35, 26, 0.08); /* fine bordure marron très transparente */
    padding: 8px 0;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(47, 35, 26, 0.08);
}

[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu > li > a {
    font-family: var(--el-font-label);
    font-size: 14px;
    font-weight: 400;
    color: var(--el-color-text);
    padding: 10px 20px;
    text-transform: none;
    letter-spacing: 0.01em;
}

[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu > li > a:hover {
    color: var(--el-color-accent);
    background-color: var(--el-color-cream); /* crème subtile au hover */
}

/* Item enfant actif (page courante) : gras noir comme le parent. */
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu > li.current-menu-item > a,
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu > li.current_page_item > a {
    font-weight: 700;
    color: var(--el-color-text);
}

/* "Prendre RDV" (menu-item-21) : bordure cuivre en tirets, positionné tout
   à droite via flex order. Le <a> Blocksy remplit toute la hauteur du header
   par défaut ; on le force à hauteur-contenu pour que la bordure colle au texte. */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.menu-item-21 {
    margin-left: auto;
    order: 99;
    display: flex;
    align-items: center;
}

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.menu-item-21 > a {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 0;
    border: 1px dashed var(--el-color-heading);
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.3;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.menu-item-21 > a:hover {
    background-color: var(--el-color-heading);
    color: var(--el-color-white);
    border-color: var(--el-color-heading);
}

/* ==========================================
   MENU MOBILE (burger)
   Dropdown plein largeur depuis le HAUT, fond Terre Apaisante.
   Items Fraunces, gros, centrés, séparateurs fins cuivre.

   Structure Blocksy constatée :
   - Bouton :  <button class="ct-header-trigger ct-toggle"> + <svg> 3 <rect>
   - Panneau : <div id="offcanvas" class="ct-panel" data-behaviour="right-side" inert>
   - État fermé : attribut `inert` présent
   - État ouvert : attribut `inert` retiré
   - Menu : <nav class="mobile-menu"><ul><li class="page_item page-item-N">
   - "Prendre RDV" = page-item-12 (l'ID de la page, pas un menu-item-N)
   ========================================== */

/* ---- Bouton burger : 2 traits fins cuivre (au lieu de 3 gris) ---- */

.ct-header-trigger {
    color: var(--el-color-heading);
}
/* Blocksy rend 3 <rect> dans le SVG du burger. On masque celui du milieu
   et on colorie les deux restants en cuivre. */
.ct-header-trigger .ct-icon rect {
    fill: var(--el-color-heading);
}
.ct-header-trigger .ct-icon rect:nth-child(2) {
    display: none;
}

/* ---- Panneau offcanvas : override du slide-from-right → dropdown-from-top
   Blocksy gère data-behaviour="right-side" avec un translateX. On impose
   plein largeur + translateY, en spécificité suffisante pour battre la
   feuille Blocksy (#offcanvas + data-behaviour). ---- */

#offcanvas.ct-panel[data-behaviour] {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    height: auto;
    max-height: 100vh;
    transform: translateY(-100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    background-color: var(--el-color-background);
}

/* État ouvert : inert absent → translateY(0).
   On utilise :not([inert]) parce que Blocksy toggle inert et non data-state. */
#offcanvas.ct-panel[data-behaviour]:not([inert]) {
    transform: translateY(0);
}

/* Wrapper interne : fond beige, scroll si contenu dépasse. */
#offcanvas .ct-panel-inner {
    background-color: var(--el-color-background);
    min-height: 100vh;
    padding: 0;
}

#offcanvas .ct-panel-content[data-device="mobile"] {
    padding: 96px 24px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
}
#offcanvas .ct-panel-content-inner {
    width: 100%;
}

/* ---- Bouton close (X cuivre en haut à droite) ---- */

#offcanvas .ct-panel-actions {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 10;
}
#offcanvas .ct-toggle-close {
    color: var(--el-color-heading);
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
}
#offcanvas .ct-toggle-close svg {
    width: 18px;
    height: 18px;
    fill: var(--el-color-heading);
}

/* ---- Liste menu mobile : style pilules avec icônes ---- */

/* Conteneur <ul> : largeur confortable, aéré. */
#offcanvas nav.mobile-menu > ul,
#offcanvas nav.mobile-menu ul#menu-menu-mobile {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

#offcanvas nav.mobile-menu > ul > li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Pilule par défaut : bordure cuivre fine, arrondi complet, icône à
   gauche via ::before (SVG data URI). */
#offcanvas nav.mobile-menu > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 16px 24px;
    border: 1px solid rgb(from var(--el-color-heading) r g b / 0.35);
    border-radius: 999px;
    background-color: transparent;
    font-family: var(--el-font-label);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--el-color-text);
    text-decoration: none;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Icône générique (chevron) via mask-image pour que la couleur suive
   currentColor automatiquement (hover, actif, etc.). */
#offcanvas nav.mobile-menu > ul > li > a::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--el-icon, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/></svg>")) no-repeat center / contain;
            mask: var(--el-icon, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/></svg>")) no-repeat center / contain;
}

/* Icônes par item via variable CSS --el-icon sur le <li>. */
#offcanvas nav.mobile-menu > ul > li#menu-item-66 > a {
    --el-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9M5 10v10h5v-6h4v6h5V10'/></svg>");
}
#offcanvas nav.mobile-menu > ul > li#menu-item-68 > a,
#offcanvas nav.mobile-menu > ul > li#menu-item-69 > a,
#offcanvas nav.mobile-menu > ul > li#menu-item-70 > a {
    --el-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'><circle cx='12' cy='12' r='3'/><circle cx='12' cy='12' r='7' opacity='.55'/><circle cx='12' cy='12' r='11' opacity='.3'/></svg>");
}
#offcanvas nav.mobile-menu > ul > li#menu-item-72 > a {
    --el-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><circle cx='17' cy='9' r='2'/><path d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M15 20c0-2.5 2-4.5 4.5-4.5'/></svg>");
}
#offcanvas nav.mobile-menu > ul > li#menu-item-73 > a {
    --el-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5z'/></svg>");
}
#offcanvas nav.mobile-menu > ul > li#menu-item-74 > a {
    --el-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='1.5'/><path d='M7 9h10M7 13h10M7 17h6'/></svg>");
}
#offcanvas nav.mobile-menu > ul > li#menu-item-75 > a {
    --el-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>");
}

/* État actif (page courante) : fond crème très léger, bordure cuivre
   plus marquée, texte cuivre en gras — ancre visuelle claire. */
#offcanvas nav.mobile-menu > ul > li.current-menu-item > a,
#offcanvas nav.mobile-menu > ul > li.current_page_item > a {
    background-color: rgb(from var(--el-color-heading) r g b / 0.06);
    border-color: var(--el-color-heading);
    color: var(--el-color-heading);
    font-weight: 600;
}

#offcanvas nav.mobile-menu > ul > li > a:hover {
    background-color: rgb(from var(--el-color-heading) r g b / 0.08);
    border-color: var(--el-color-heading);
    color: var(--el-color-heading);
}

/* ---- Labels de section (Pratiques / En savoir plus) ----
   Pas de pilule, typo label cuivre en caps, petit et espacé.
   Marge haute pour aérer entre deux blocs. Non cliquable visuellement. */

#offcanvas nav.mobile-menu > ul > li.el-menu-section {
    margin-top: 16px;
    pointer-events: none;
}
#offcanvas nav.mobile-menu > ul > li.el-menu-section > a {
    border: none;
    padding: 6px 0;
    font-family: var(--el-font-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(from var(--el-color-heading) r g b / 0.65);
    justify-content: center;
    gap: 10px;
    background: none;
}
#offcanvas nav.mobile-menu > ul > li.el-menu-section > a::before,
#offcanvas nav.mobile-menu > ul > li.el-menu-section > a::after {
    content: "";
    display: block;
    flex: 1;
    height: 1px;
    background-color: rgb(from var(--el-color-heading) r g b / 0.25);
    margin: 0;
    -webkit-mask: none;
            mask: none;
    background-image: none;
    max-width: 40px;
}

/* ---- CTA "Prendre Rendez-vous" : pilule pleine cuivre, prominent ----
   Police plus grande, fond plein, gros padding, ombre douce.
   Au-dessus : marge pour le détacher visuellement. */

#offcanvas nav.mobile-menu > ul > li.el-menu-cta {
    margin-top: 24px;
}
#offcanvas nav.mobile-menu > ul > li.el-menu-cta > a {
    background-color: var(--el-color-heading);
    border-color: var(--el-color-heading);
    color: var(--el-color-white);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.18em;
    padding: 20px 24px;
    box-shadow: 0 6px 18px rgb(from var(--el-color-heading) r g b / 0.22);
}
#offcanvas nav.mobile-menu > ul > li.el-menu-cta > a:hover {
    background-color: var(--el-color-accent);
    border-color: var(--el-color-accent);
    color: var(--el-color-white);
    box-shadow: 0 8px 22px rgb(from var(--el-color-accent) r g b / 0.3);
}
#offcanvas nav.mobile-menu > ul > li.el-menu-cta > a::before {
    /* Icône calendrier pour le CTA */
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>") no-repeat center / contain;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

/* ---- Mentions Légales : lien texte discret tout en bas ---- */

#offcanvas nav.mobile-menu > ul > li.el-menu-legal {
    margin-top: 20px;
}
#offcanvas nav.mobile-menu > ul > li.el-menu-legal > a {
    border: none;
    background: none;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: rgb(from var(--el-color-text) r g b / 0.55);
    text-decoration: underline;
    text-underline-offset: 3px;
}
#offcanvas nav.mobile-menu > ul > li.el-menu-legal > a::before {
    display: none;
}
#offcanvas nav.mobile-menu > ul > li.el-menu-legal > a:hover {
    color: var(--el-color-heading);
    background: none;
}

/* ==========================================
   Styles custom du site
   À compléter au fur et à mesure, page par page.
   ========================================== */

/* ---------- Page Accueil : Hero ---------- */

/* Masquer le titre de page auto de Blocksy sur la home uniquement.
   Le H1 est déjà dans notre Hero (.el-hero), on évite le doublon
   sans casser les autres pages qui utilisent .hero-section. */
.home .hero-section {
    display: none;
}

/* Annuler tout l'espace vertical que Blocksy ajoute au-dessus du contenu
   sur la home, pour que le Hero commence juste sous le header.
   Plusieurs couches peuvent contribuer (padding .ct-container-full via
   --theme-content-vertical-spacing, padding article via
   --theme-boxed-content-spacing, margin-top du premier bloc).
   On neutralise la pile complète, uniquement sur la home. */
.home .site-main,
.home .ct-container-full[data-vertical-spacing*="top"],
.home article,
.home .entry-content {
    padding-top: 0;
    margin-top: 0;
}

.home .entry-content > .wp-block-group:first-child {
    margin-top: 0;
}

/* Supprimer l'espace vertical entre les sections (blocs top-level) sur
   la home : chaque module a son propre fond coloré et doit toucher le
   suivant sans liseré blanc. Gutenberg injecte un margin-block-start
   via --wp--style--block-gap sur les enfants de is-layout-constrained ;
   on force 0 sur ces enfants uniquement sur la home. */
.home .entry-content.is-layout-constrained > *,
.home .entry-content > .alignfull {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Conteneur Hero : collé au header en haut, collé au module suivant
   en bas (padding-bottom 0 pour éviter la bande crème entre sections). */
.el-hero {
    padding: 0;
}

.el-hero .wp-block-columns {
    gap: 60px;
    align-items: center;
}

/* Colonne droite du hero : tous les éléments centrés horizontalement
   ET verticalement par rapport à la hauteur de l'image (colonne gauche).
   - flex-direction: column + justify-content: center → centrage vertical
   - text-align: center → centrage horizontal des blocs inline (p, h1)
   - justify-content centre aussi les enfants flex horizontalement
     (.wp-block-buttons, .wp-block-social-links) via leurs propres règles. */
.el-hero .wp-block-column:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.el-hero .wp-block-buttons,
.el-hero .wp-block-social-links {
    justify-content: center;
}

/* Sur-titre "ERWAN LEGRAND" (eyebrow) — Montserrat tracking large. */
.el-eyebrow {
    font-family: var(--el-font-body);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--el-color-text);
    margin-bottom: 40px;
}

/* Baseline italique sous l'eyebrow — Playfair Display italic.
   Couleur : Marron Organique (texte) pour contraster avec le H1 en Cuivre. */
.el-tagline {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
    color: var(--el-color-text);
    margin-bottom: 48px;
}

/* Titre principal du Hero : plus gros que le H1 global,
   line-height serré pour un rendu capital impactant. */
.el-hero h1 {
    font-size: 56px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 40px 0;
    text-align: center;
    /* Couleur forcée : Blocksy impose --theme-headings-color (marron palette-4)
       via main.min.css. On écrit explicitement la couleur voulue ici. */
    color: var(--el-color-heading);
}

/* Bouton ghost "CABINETS SITUÉS À...".
   Spécificité (0,0,3,0) pour battre le style outline de Gutenberg
   à spécificité égale (notre CSS étant chargé après). */
.wp-block-button.el-btn-ghost .wp-block-button__link {
    background-color: transparent;
    color: var(--el-color-heading);
    border: 1px solid var(--el-color-heading);
    padding: 16px 32px;
    font-family: var(--el-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.el-btn-ghost .wp-block-button__link:hover {
    background-color: var(--el-color-accent);
    color: var(--el-color-white);
    border-color: var(--el-color-accent);
}

/* Icônes sociales : uniformiser en cercles Cuivre Profond.
   !important justifié : Gutenberg applique les couleurs "brand"
   de chaque service (LinkedIn bleu, Facebook bleu, Instagram rose)
   via des sélecteurs très spécifiques par service
   (.wp-social-link-linkedin, .wp-social-link-facebook, etc.)
   qu'on ne peut pas battre sans !important. */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
    background-color: var(--el-color-heading) !important;
    color: var(--el-color-white) !important;
    transition: background-color 0.2s ease;
}

.wp-block-social-links:not(.is-style-logos-only) .wp-social-link:hover {
    background-color: var(--el-color-accent) !important;
}

/* ---------- Page Accueil : Hero — responsive mobile ---------- */

@media (max-width: 768px) {
    .el-hero {
        padding: 40px 0;
    }

    .el-hero h1 {
        font-size: 36px;
    }

    .el-hero .wp-block-columns {
        gap: 32px;
    }
}

/* ==========================================
   Page Accueil — Module "Stimuler" (Pitch)
   Section pleine largeur, fond Terre Apaisante,
   filigrane floral derrière le bloc texte.
   ========================================== */

.el-pitch {
    padding: 100px 0;
    text-align: center;
}

/* H2 en marron organique (pas en cuivre comme les autres titres) :
   choix maquette spécifique à cette section. */
.el-pitch .el-pitch__title {
    font-family: var(--el-font-heading);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--el-color-text);
    margin: 0 0 36px 0;
}

/* Bloc texte centré + filigrane floral en background.
   Image carrée 1600x1600 (PNG transparent), affichée à 500px centrée.
   On passe par un pseudo-élément ::before pour pouvoir appliquer
   une opacité faible (effet filigrane, cf. rendu Canva) sans
   impacter l'opacité du texte. Le texte repasse au-dessus via
   position relative + z-index. */
.el-pitch__body {
    position: relative;
    max-width: 680px;
    margin: 0 auto 48px auto;
    padding: 40px 0 0 0;
}

.el-pitch__body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/images/fond-fleur.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 500px 500px;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

.el-pitch__body > * {
    position: relative;
    z-index: 1;
}

.el-pitch__lede {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--el-color-text);
    margin-bottom: 32px;
}

.el-pitch__body p {
    line-height: 1.7;
}

/* Variante "ghost dark" du bouton : bordure + texte marron,
   utilisée sur fond Terre Apaisante où le cuivre manquerait
   de contraste. Cohérente visuellement avec .el-btn-ghost. */
.wp-block-button.el-btn-ghost-dark .wp-block-button__link {
    background-color: transparent;
    color: var(--el-color-text);
    border: 1px solid var(--el-color-text);
    padding: 14px 40px;
    font-family: var(--el-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.el-btn-ghost-dark .wp-block-button__link:hover {
    background-color: var(--el-color-text);
    color: var(--el-color-background);
}

@media (max-width: 768px) {
    .el-pitch {
        padding: 60px 0;
    }
    .el-pitch .el-pitch__title {
        font-size: 26px;
    }
}

/* ==========================================
   Page "Mon Histoire" (À propos)
   Section fond Terre Apaisante + filigrane floral
   derrière le corps du texte (même principe que .el-pitch__body).
   ========================================== */

.el-about {
    padding: 100px 0;
    text-align: center;
}

.el-about__title {
    font-family: var(--el-font-heading);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--el-color-heading);
    margin: 0 0 40px 0;
}

.el-about__lede {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: var(--el-color-text);
    max-width: 680px;
    margin: 0 auto 16px auto;
}

.el-about__body {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 24px 40px;
}

.el-about__body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/images/fond-fleur.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 500px 500px;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.el-about__body > * {
    position: relative;
    z-index: 1;
}

.el-about__body p {
    line-height: 1.75;
    text-align: left;
    margin-bottom: 20px;
}

/* Questions rhétoriques en gras + capitales, alignées à gauche
   (cohérent avec le texte courant qui suit). Lignes resserrées
   pour un bloc compact.
   Spécificité (0,0,2,0) + !important pour battre le reset de
   paragraphe par Gutenberg/Blocksy. */
.el-about__body .el-about__question {
    font-family: var(--el-font-body) !important;
    font-weight: 700 !important;
    font-size: 18px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--el-color-heading);
    text-align: left !important;
    margin: 6px 0 !important;
}

/* Espace avant le premier bloc question et après le dernier,
   pour séparer des paragraphes adjacents. */
.el-about__body .el-about__question:first-child,
.el-about__body .el-about__question + :not(.el-about__question) {
    margin-top: 32px !important;
}

.el-about__body .el-about__question:not(:has(+ .el-about__question)) {
    margin-bottom: 32px !important;
}

@media (max-width: 768px) {
    .el-about {
        padding: 60px 20px;
    }
    .el-about__title {
        font-size: 36px;
    }
    .el-about__lede {
        font-size: 17px;
    }
    .el-about__body {
        padding: 24px 0;
    }
}

/* ==========================================
   Page Accueil — Module "Pratiques" (3 cartes)
   Section fond blanc, 3 colonnes desktop, empilées mobile.
   ========================================== */

.el-practices {
    padding: 100px 0;
}

/* Gap entre colonnes. Pas de max-width ici : le group parent
   .el-practices est en layout constrained et impose déjà la largeur
   max du thème (--theme-block-max-width), on ne double pas la contrainte. */
.el-practices__grid {
    gap: 56px;
}

/* Ratio portrait 4:5 pour coller à la maquette (images plus hautes
   que larges, pas carrées). */
.el-practice-card__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* Titres cartes : cuivre profond + bold, alignés au bord gauche de l'image. */
.el-practice-card__title {
    font-family: var(--el-font-heading);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--el-color-heading);
    margin: 24px 0 16px 0;
    padding: 0;
    text-align: left;
}

.el-practice-card__body,
.el-practice-card p,
.el-practice-card ul {
    font-family: var(--el-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--el-color-text);
    text-align: left;
}

.el-practice-card ul {
    padding-left: 20px;
    margin: 8px 0 0 0;
}

.el-practice-card li {
    margin-bottom: 6px;
}

/* Carte cliquable en entier via "stretched link" : un seul <a> visible
   (le "En savoir plus") est étendu en absolu sur toute la carte via ::after.
   Un seul lien = bon pour l'accessibilité et le SEO. */
.el-practice-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Le lien "En savoir plus" reste collé en bas de la carte même si les
   textes varient en longueur (grâce à margin-top: auto + flex column). */
.el-practice-card__link {
    margin-top: auto;
    padding-top: 16px;
}

.el-practice-card__link a {
    font-family: var(--el-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--el-color-heading);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.el-practice-card__link a:hover,
.el-practice-card__link a:focus-visible {
    color: var(--el-color-interaction);
    border-bottom-color: var(--el-color-interaction);
}

/* Stretched link : le ::after du <a> couvre toute la carte,
   rendant l'image + le titre + le texte cliquables sans imbriquer
   de lien supplémentaire (une seule cible pour les lecteurs d'écran). */
.el-practice-card__link a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Les listes et images doivent rester au-dessus du ::after pour
   que la sélection de texte et l'alt reste naturelle. */
.el-practice-card > *:not(.el-practice-card__link) {
    position: relative;
    z-index: 0;
}

/* Feedback visuel au survol de la carte entière. */
.el-practice-card__media {
    overflow: hidden;
}
.el-practice-card__media img {
    transition: transform 0.4s ease;
}
.el-practice-card:hover .el-practice-card__media img {
    transform: scale(1.03);
}

/* Classe utilitaire WordPress pour masquer visuellement un élément
   tout en le gardant accessible aux lecteurs d'écran et au SEO.
   Posée ici en secours au cas où le thème ne la fournirait pas. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .el-practices {
        padding: 60px 0;
    }
    .el-practices__grid {
        gap: 40px;
    }
}
/* =================================================================
   Page Shiatsu — /shiatsu-acupression/
   4 modules : hero, accompagnement, entreprise, statut
   ================================================================= */

/* --- Utilitaires partagés sur cette page ------------------------- */

/* Sous-titre cuivre en small caps, réutilisé pour étiqueter les
   sous-sections (INDICATIONS, RYTHME, ADAPTÉ A TOUT AGE, etc.). */
.el-pill-title {
    font-family: var(--el-font-label);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--el-color-heading);
    text-align: center;
    margin: 0 0 16px 0;
}

/* Wrapper pour section au fond photo délavé : l'image est posée en
   background-image, un overlay beige (Crème Chaude) en ::before tinte
   l'image pour coller à la charte chaleureuse du site.
   - Intensité : --el-wash-alpha (0 = image brute, 1 = beige opaque)
   - Teinte    : --el-wash-color (RGB triplet, ex "255 242 235") —
     surchargeable par section si besoin. */
.el-bg-washed {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}
.el-bg-washed::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(var(--el-wash-color, 255 242 235) / var(--el-wash-alpha, 0.85));
    pointer-events: none;
    z-index: 0;
}
.el-bg-washed > * {
    position: relative;
    z-index: 1;
}

/* --- Module 1 — Hero -------------------------------------------- */

.el-shiatsu-hero {
    background-color: var(--el-color-background);
    /* Cadre rose autour de l'image + texte. Le padding-left est fluide :
       220px à partir de 2000px de viewport, ~132px à 1200px, plancher 40px
       pour éviter l'écrasement de la colonne texte sur écrans moyens.
       Mobile : reset à 0 dans la media query ci-dessous. */
    padding: 40px 0 40px clamp(40px, 11vw, 220px);
}

.el-shiatsu-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    /* min-height supprimé : la hauteur de section est désormais pilotée
       par le contenu (image à ratio naturel + texte). */
}

.el-shiatsu-hero__media {
    margin: 0;
    align-self: center; /* image centrée verticalement → rose "flotte" au-dessus/en-dessous */
}
.el-shiatsu-hero__media img {
    width: 100%;
    height: auto;
    display: block;
}

.el-shiatsu-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* texte aligné en haut, pas centré vertical */
    align-items: center;
    padding: 60px 40px 80px;      /* texte rapproché du centre visuel (40px latéraux au lieu de 60) */
    text-align: center;
}

.el-shiatsu-hero__title {
    font-family: var(--el-font-heading);
    font-size: clamp(42px, 4vw, 52px);
    font-weight: 700;
    color: var(--el-color-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    margin: 0;
}

.el-shiatsu-hero__subtitle {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 20px;
    color: var(--el-color-text);
    margin: 16px 0 48px 0;
}

.el-shiatsu-hero__lists {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
}

/* Listes du hero : puces alignées à gauche, bloc centré dans la colonne. */
.el-shiatsu-hero__lists ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    text-align: left;
    display: inline-block;
}
.el-shiatsu-hero__lists li {
    font-family: var(--el-font-body);
    font-size: 15px;
    color: var(--el-color-text);
    line-height: 1.6;
    margin-bottom: 6px;
}
.el-shiatsu-hero__lists li::marker {
    color: var(--el-color-text);
}

.el-shiatsu-hero__note {
    font-family: var(--el-font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--el-color-heading);
    margin: 32px 0 0 0;
    max-width: 440px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .el-shiatsu-hero {
        padding: 0; /* reset du cadre rose desktop : image pleine largeur mobile */
    }
    .el-shiatsu-hero__grid {
        grid-template-columns: 1fr;
    }
    .el-shiatsu-hero__media img {
        aspect-ratio: 4 / 3;  /* crop 4:3 pour cadre mobile uniforme */
        object-fit: cover;    /* activé uniquement en mobile pour honorer l'aspect-ratio */
    }
    .el-shiatsu-hero__content {
        padding: 60px 24px;
    }
    .el-shiatsu-hero__title {
        font-size: 44px;
    }
}

/* --- Module 2 — Mon accompagnement en Shiatsu ------------------- */

.el-shiatsu-accompagnement {
    --el-wash-alpha: 0.90;
    background-color: var(--el-color-cream);
    background-image: url("assets/images/shiatsu/shiatsu_image2.png");
    padding: 100px 40px;
}

.el-shiatsu-accompagnement__title {
    font-family: var(--el-font-heading);
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 700;
    color: var(--el-color-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 0 0 64px 0;
}

.el-shiatsu-accompagnement__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    max-width: 1200px;
    margin: 0 auto 64px auto;
    align-items: start;
}

/* Titres des colonnes : évite les coupures disgracieuses sur petits écrans. */
.el-shiatsu-accompagnement__cols .el-pill-title {
    hyphens: none;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* Paragraphe descriptif sous chaque titre de colonne. */
.el-shiatsu-accompagnement__cols p {
    font-family: var(--el-font-body);
    font-size: 17px;
    color: var(--el-color-text);
    line-height: 1.65;
    text-align: center;
    margin: 0;
}

.el-shiatsu-accompagnement__cols ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}
.el-shiatsu-accompagnement__cols li {
    font-family: var(--el-font-body);
    font-size: 17px;
    color: var(--el-color-text);
    line-height: 1.65;
    margin-bottom: 10px;
}
.el-shiatsu-accompagnement__cols li::marker {
    color: var(--el-color-text);
}

.el-shiatsu-accompagnement__note-italic {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 17px;
    color: var(--el-color-text);
    text-align: center;
    max-width: 780px;
    margin: 0 auto 32px auto;
    line-height: 1.7;
}

.el-shiatsu-accompagnement__note-copper {
    font-family: var(--el-font-heading);
    font-size: 15px;
    color: var(--el-color-heading);
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .el-shiatsu-accompagnement {
        padding: 60px 24px;
    }
    .el-shiatsu-accompagnement__cols {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* --- Module 3 — Le Shiatsu en entreprise ------------------------ */

.el-shiatsu-entreprise {
    --el-wash-alpha: 0.65;
    background-color: var(--el-color-white);
    background-image: url("assets/images/shiatsu/shiatsu_image3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 40px;
}

.el-shiatsu-entreprise__title {
    font-family: var(--el-font-heading);
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 700;
    color: var(--el-color-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 0 0 20px 0;
}

.el-shiatsu-entreprise__eyebrow {
    font-family: var(--el-font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--el-color-heading);
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px auto;
    line-height: 1.6;
}

.el-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto 8px auto;
}

.el-stat {
    text-align: center;
}

.el-stat__number {
    font-family: var(--el-font-heading);
    font-size: clamp(40px, 4.5vw, 56px);
    font-weight: 700;
    color: var(--el-color-heading);
    line-height: 1;
    margin: 0 0 12px 0;
}

.el-stat__label {
    font-family: var(--el-font-body);
    font-size: 13px;
    color: var(--el-color-text);
    line-height: 1.5;
    margin: 0;
}

.el-shiatsu-entreprise__source {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 12px;
    color: var(--el-color-heading);
    text-align: right;
    max-width: 1100px;
    margin: 0 auto 48px auto;
}

.el-shiatsu-entreprise__lede {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 17px;
    color: var(--el-color-text);
    text-align: center;
    max-width: 820px;
    margin: 0 auto 56px auto;
    line-height: 1.7;
}

.el-shiatsu-entreprise__cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
    max-width: 900px;
    margin: 0 auto 48px auto;
    align-items: start;
}

.el-shiatsu-entreprise__cols .el-pill-title {
    margin-bottom: 20px;
}

.el-shiatsu-entreprise__subhead {
    font-family: var(--el-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--el-color-heading);
    margin: 20px 0 8px 0;
}

.el-shiatsu-entreprise__cols p {
    font-family: var(--el-font-body);
    font-size: 14px;
    color: var(--el-color-text);
    line-height: 1.6;
    margin: 0;
}

.el-shiatsu-entreprise__matos {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}
.el-shiatsu-entreprise__matos p {
    font-family: var(--el-font-body);
    font-size: 14px;
    color: var(--el-color-text);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .el-shiatsu-entreprise {
        padding: 60px 24px;
    }
    .el-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
    .el-shiatsu-entreprise__cols {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .el-shiatsu-entreprise__source {
        text-align: center;
    }
}

@media (max-width: 500px) {
    .el-stats {
        grid-template-columns: 1fr;
    }
}

/* --- Module 4 — Statut / Spécialisation / Diplôme --------------- */

.el-shiatsu-statut {
    background-color: var(--el-color-white);
    padding: 100px 40px;
}

.el-shiatsu-statut__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.el-shiatsu-statut__col h3 {
    font-family: var(--el-font-heading);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
    color: var(--el-color-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 0 0 32px 0;
}

.el-shiatsu-statut__col p {
    font-family: var(--el-font-body);
    font-size: 15px;
    color: var(--el-color-text);
    line-height: 1.6;
    text-align: left;
    margin: 0 0 16px 0;
}

.el-shiatsu-statut__conclusion {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    color: var(--el-color-text);
    text-align: center;
    max-width: 820px;
    margin: 56px auto 0 auto;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .el-shiatsu-statut {
        padding: 60px 24px;
    }
    .el-shiatsu-statut__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ==========================================================
   Fix espacement pages pratiques — titre natif Blocksy désactivé
   Blocksy applique un padding-top sur .ct-container-full (via
   l'attribut data-vertical-spacing="top:bottom") pour aérer sous
   l'ancien titre de page. Une fois le titre désactivé côté admin,
   ce padding crée un espace blanc inutile entre le header et le
   hero. On le neutralise uniquement en haut ; le padding-bottom
   reste pour aérer avant le footer.

   Pour étendre aux pages Magnétisme et Fascias quand leurs hero
   seront désactivés : remplacer `.page-id-9` par
   `.page-id-9, .page-id-10, .page-id-11`.
   Si la liste s'allonge, refacto en body class custom via filtre
   PHP dans functions.php (lecture du post meta has_hero_section).
   ========================================================== */
.page-id-3 .ct-container-full[data-vertical-spacing*="top"],
.page-id-7 .ct-container-full[data-vertical-spacing*="top"],
.page-id-9 .ct-container-full[data-vertical-spacing*="top"],
.page-id-10 .ct-container-full[data-vertical-spacing*="top"],
.page-id-11 .ct-container-full[data-vertical-spacing*="top"],
.page-id-12 .ct-container-full[data-vertical-spacing*="top"],
.page-id-13 .ct-container-full[data-vertical-spacing*="top"],
.page-id-14 .ct-container-full[data-vertical-spacing*="top"],
.page-id-15 .ct-container-full[data-vertical-spacing*="top"],
.page-id-94 .ct-container-full[data-vertical-spacing*="top"] {
    padding-top: 0;
}

/* Neutralise aussi les margin-block automatiques appliqués par le
   layout engine WordPress aux enfants de .is-layout-constrained, qui
   créent un liseré blanc visible entre le header et le hero. */
.page-id-7 .entry-content.is-layout-constrained > *,
.page-id-7 .entry-content > .alignfull,
.page-id-9 .entry-content.is-layout-constrained > *,
.page-id-9 .entry-content > .alignfull,
.page-id-10 .entry-content.is-layout-constrained > *,
.page-id-10 .entry-content > .alignfull,
.page-id-11 .entry-content.is-layout-constrained > *,
.page-id-11 .entry-content > .alignfull,
.page-id-13 .entry-content.is-layout-constrained > *,
.page-id-13 .entry-content > .alignfull,
.page-id-14 .entry-content.is-layout-constrained > *,
.page-id-14 .entry-content > .alignfull,
.page-id-15 .entry-content.is-layout-constrained > *,
.page-id-15 .entry-content > .alignfull,
.page-id-3 .entry-content.is-layout-constrained > *,
.page-id-3 .entry-content > .alignfull,
.page-id-94 .entry-content.is-layout-constrained > *,
.page-id-94 .entry-content > .alignfull {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Dernière section colorée (washed / terre) collée au footer : le
   padding-bottom par défaut de Blocksy laisse apparaître le fond blanc
   du body entre les deux. On le neutralise pour les pages concernées. */
.page-id-7 .ct-container-full[data-vertical-spacing*="bottom"],
.page-id-10 .ct-container-full[data-vertical-spacing*="bottom"],
.page-id-11 .ct-container-full[data-vertical-spacing*="bottom"],
.page-id-12 .ct-container-full[data-vertical-spacing*="bottom"],
.page-id-13 .ct-container-full[data-vertical-spacing*="bottom"],
.page-id-14 .ct-container-full[data-vertical-spacing*="bottom"],
.page-id-15 .ct-container-full[data-vertical-spacing*="bottom"],
.page-id-3 .ct-container-full[data-vertical-spacing*="bottom"],
.page-id-94 .ct-container-full[data-vertical-spacing*="bottom"] {
    padding-bottom: 0;
}

/* ==========================================================
   Page Prendre RDV (ID 12)
   Structure : hero crème + 3 cabinets (fond terre) + bloc
   réservation (formulaire / Fluent Booking) + rappel téléphone.
   ========================================================== */

/* Neutralise l'écart vertical automatique entre les sections
   full-bleed sur la page RDV, comme sur l'accueil. */
.page-id-12 .entry-content.is-layout-constrained > *,
.page-id-12 .entry-content > .alignfull {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* ---- Hero RDV ---- */
.el-rdv-hero {
    padding: 80px 40px 60px;
    text-align: center;
}

.el-rdv-hero .el-eyebrow {
    margin-bottom: 16px;
}

.el-rdv-hero h1 {
    font-family: var(--el-font-heading);
    font-size: clamp(36px, 4.5vw, 48px);
    color: var(--el-color-heading);
    margin: 0 0 16px;
    line-height: 1.15;
}

.el-rdv-hero__lede {
    font-family: var(--el-font-body);
    font-size: 17px;
    color: var(--el-color-text);
    max-width: 640px;
    margin: 0 auto;
}

/* ---- Section cabinets (3 cartes sur fond terre) ---- */
.el-rdv-cabinets {
    padding: 80px 40px;
}

.el-rdv-cabinets__title {
    font-family: var(--el-font-heading);
    font-size: clamp(28px, 3vw, 36px);
    color: var(--el-color-heading);
    margin: 0 0 48px;
    letter-spacing: 0.02em;
}

.el-rdv-cabinets__grid {
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.el-cabinet-card {
    padding: 0;
}

.el-cabinet-card__media {
    margin: 0 0 24px;
    border: 4px solid var(--el-color-white);
    overflow: hidden;
}

.el-cabinet-card__media img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.el-cabinet-card__name {
    font-family: var(--el-font-heading);
    font-size: 26px;
    color: var(--el-color-heading);
    margin: 0 0 8px;
    letter-spacing: 0.03em;
}

.el-cabinet-card__days {
    font-family: var(--el-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--el-color-white);
    letter-spacing: 0.12em;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.el-cabinet-card__body {
    font-family: var(--el-font-body);
    font-size: 15px;
    color: var(--el-color-text);
    line-height: 1.6;
    margin: 0 0 12px;
}

.el-cabinet-card__address {
    font-family: var(--el-font-body);
    font-size: 15px;
    color: var(--el-color-text);
    line-height: 1.6;
    margin: 16px 0 0;
    padding-left: 20px;
    border-left: 3px solid var(--el-color-heading);
}

.el-cabinet-card__address strong {
    font-weight: 700;
    color: var(--el-color-heading);
}

/* ---- Section réservation (formulaire ou Fluent Booking) ---- */
.el-rdv-booking {
    padding: 80px 40px;
}

.el-rdv-booking__title {
    font-family: var(--el-font-heading);
    font-size: clamp(28px, 3vw, 36px);
    color: var(--el-color-heading);
    margin: 0 0 16px;
    letter-spacing: 0.02em;
}

.el-rdv-booking__intro {
    font-family: var(--el-font-body);
    font-size: 16px;
    color: var(--el-color-text);
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto 40px;
}

/* Styles Fluent Forms pour matcher la charte */
.el-rdv-booking .fluentform {
    font-family: var(--el-font-body);
    max-width: 680px;
    margin: 0 auto;
}

.el-rdv-booking .fluentform .ff-el-input--label label,
.el-rdv-booking .fluentform label {
    font-family: var(--el-font-body);
    font-size: 14px;
    color: var(--el-color-text);
    font-weight: 500;
}

.el-rdv-booking .fluentform input[type="text"],
.el-rdv-booking .fluentform input[type="email"],
.el-rdv-booking .fluentform input[type="tel"],
.el-rdv-booking .fluentform input[type="date"],
.el-rdv-booking .fluentform select,
.el-rdv-booking .fluentform textarea {
    font-family: var(--el-font-body);
    font-size: 15px;
    color: var(--el-color-text);
    border: 1px solid rgba(128, 56, 19, 0.25);
    border-radius: 2px;
    padding: 10px 12px;
    background-color: var(--el-color-white);
}

.el-rdv-booking .fluentform input:focus,
.el-rdv-booking .fluentform select:focus,
.el-rdv-booking .fluentform textarea:focus {
    border-color: var(--el-color-heading);
    outline: none;
    box-shadow: 0 0 0 2px rgba(128, 56, 19, 0.1);
}

.el-rdv-booking .fluentform .ff-btn-submit,
.el-rdv-booking .fluentform button[type="submit"] {
    font-family: var(--el-font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    background-color: var(--el-color-heading);
    color: var(--el-color-white);
    border: 1px solid var(--el-color-heading);
    padding: 12px 32px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.el-rdv-booking .fluentform .ff-btn-submit:hover,
.el-rdv-booking .fluentform button[type="submit"]:hover {
    background-color: var(--el-color-accent);
    border-color: var(--el-color-accent);
}

/* ---- Rappel téléphone ---- */
.el-rdv-phone {
    padding: 60px 40px;
    text-align: center;
}

.el-rdv-phone__title {
    font-family: var(--el-font-heading);
    font-size: 28px;
    color: var(--el-color-heading);
    margin: 0 0 12px;
}

.el-rdv-phone__lede {
    font-family: var(--el-font-body);
    font-size: 16px;
    color: var(--el-color-text);
    margin: 0 0 24px;
}

/* ---- Responsive ---- */
@media (max-width: 781px) {
    .el-rdv-hero {
        padding: 60px 24px 40px;
    }
    .el-rdv-cabinets {
        padding: 60px 24px;
    }
    .el-rdv-cabinets__grid {
        gap: 48px;
    }
    .el-rdv-booking {
        padding: 60px 24px;
    }
    .el-rdv-phone {
        padding: 48px 24px;
    }
}

/* ==========================================
   PAGE MAGNÉTISME
   Module 1 — Hero : image à gauche, panneau Terre Apaisante à
   droite avec titre + sous-titre + prestations + charte déonto.
   Module 2 — Accompagnement : fond hands délavé, 3 colonnes,
   conclusion en 3 paragraphes.
   ========================================== */

/* --- Module 1 — Hero Magnétisme --------------------------------- */

.el-magnetisme-hero {
    background-color: var(--el-color-background);
    /* Pas de padding : l'image bleed à gauche, le panneau de droite
       gère sa propre respiration interne via .el-magnetisme-hero__content. */
}

.el-magnetisme-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 720px;
    align-items: stretch;
}

/* Image gauche : remplit toute la cellule, cover pour garder les
   proportions sans distorsion. */
.el-magnetisme-hero__media {
    margin: 0;
    height: 100%;
}
.el-magnetisme-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Panneau droite : contenu centré verticalement, padding généreux. */
.el-magnetisme-hero__content {
    padding: 80px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}

.el-magnetisme-hero__title {
    font-family: var(--el-font-heading);
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--el-color-heading);
    text-align: center;
    margin: 0;
    line-height: 1.1;
}

.el-magnetisme-hero__subtitle {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--el-color-text);
    text-align: center;
    margin: 0;
}

.el-magnetisme-hero__prestations {
    max-width: 520px;
    margin: 16px auto 0;
    text-align: center;
}
.el-magnetisme-hero__prestations ul {
    list-style: disc;
    padding-left: 24px;
    margin: 18px auto 0;
    text-align: left;
    display: inline-block;
}
.el-magnetisme-hero__prestations li {
    font-family: var(--el-font-body);
    font-size: 16px;
    color: var(--el-color-text);
    line-height: 1.6;
    margin-bottom: 10px;
}
.el-magnetisme-hero__prestations li::marker {
    color: var(--el-color-text);
}

/* Charte déonto : 3 paragraphes cuivre en uppercase letter-spaced. */
.el-magnetisme-hero__charter {
    max-width: 560px;
    margin: 8px auto 0;
}
.el-magnetisme-hero__charter-item {
    font-family: var(--el-font-label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--el-color-heading);
    line-height: 1.7;
    margin: 0 0 14px 0;
    text-align: left;
}
.el-magnetisme-hero__charter-item:last-child {
    margin-bottom: 0;
}

/* Mobile : image en haut, contenu en bas (empilé). */
@media (max-width: 900px) {
    .el-magnetisme-hero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .el-magnetisme-hero__media img {
        height: 420px;
    }
    .el-magnetisme-hero__content {
        padding: 48px 24px;
    }
    .el-magnetisme-hero__title {
        font-size: clamp(32px, 8vw, 44px);
    }
}

/* --- Module 2 — Mon accompagnement en magnétisme ---------------- */

.el-magnetisme-accompagnement {
    --el-wash-alpha: 0.88;
    background-color: var(--el-color-white);
    background-image: url("assets/images/magnetisme/magnetisme_image2.png");
    background-position: center;
    padding: 100px 40px;
}

.el-magnetisme-accompagnement__title {
    font-family: var(--el-font-heading);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--el-color-text);
    text-align: center;
    margin: 0 0 64px 0;
}

.el-magnetisme-accompagnement__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    max-width: 1200px;
    margin: 0 auto 64px auto;
    align-items: start;
}

.el-magnetisme-accompagnement__cols .el-pill-title {
    hyphens: none;
    overflow-wrap: normal;
    word-break: keep-all;
}

.el-magnetisme-accompagnement__cols ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}
.el-magnetisme-accompagnement__cols li {
    font-family: var(--el-font-body);
    font-size: 17px;
    color: var(--el-color-text);
    line-height: 1.65;
    margin-bottom: 10px;
}
.el-magnetisme-accompagnement__cols li::marker {
    color: var(--el-color-text);
}

/* Conclusion sous les 3 colonnes : 3 paragraphes séparés. */
.el-magnetisme-accompagnement__conclusion {
    max-width: 900px;
    margin: 0 auto;
}

/* Paragraphe "Pourquoi un tarif minoré ?" : le strong passe en cuivre. */
.el-magnetisme-accompagnement__note-question {
    font-family: var(--el-font-body);
    font-size: 17px;
    color: var(--el-color-text);
    line-height: 1.7;
    margin: 0 0 24px 0;
}
.el-magnetisme-accompagnement__note-question strong {
    color: var(--el-color-heading);
    font-weight: 600;
}

.el-magnetisme-accompagnement__note-body {
    font-family: var(--el-font-body);
    font-size: 17px;
    color: var(--el-color-text);
    line-height: 1.7;
    margin: 0 0 32px 0;
}

/* Dernier bloc : uppercase cuivre, même style que la charte du hero. */
.el-magnetisme-accompagnement__note-copper {
    font-family: var(--el-font-label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--el-color-heading);
    line-height: 1.7;
    margin: 0;
    text-align: center;
}

@media (max-width: 900px) {
    .el-magnetisme-accompagnement {
        padding: 60px 24px;
    }
    .el-magnetisme-accompagnement__cols {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 48px;
    }
}

/* ==========================================
   PAGE FASCIAS
   Module 1 — Hero : image à gauche, panneau Terre Apaisante à
   droite avec titre + sous-titre + indications + contre-indications
   + disclaimer médical cuivre.
   Module 2 — Accompagnement : fond mains délavé, 3 colonnes
   (Définition / Déroulement / Séance et tarif) + conclusion
   italique + note cuivre auto-régulation.
   ========================================== */

/* --- Module 1 — Hero Fascias ------------------------------------ */

.el-fascias-hero {
    background-color: var(--el-color-background);
}

.el-fascias-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 720px;
    align-items: stretch;
}

.el-fascias-hero__media {
    margin: 0;
    height: 100%;
}
.el-fascias-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.el-fascias-hero__content {
    padding: 64px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.el-fascias-hero__title {
    font-family: var(--el-font-heading);
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--el-color-heading);
    text-align: center;
    margin: 0;
    line-height: 1.1;
}

.el-fascias-hero__subtitle {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--el-color-text);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.el-fascias-hero__indications,
.el-fascias-hero__contre {
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.el-fascias-hero__indications ul,
.el-fascias-hero__contre ul {
    list-style: disc;
    padding-left: 24px;
    margin: 14px auto 0;
    text-align: left;
    display: inline-block;
}
.el-fascias-hero__indications li,
.el-fascias-hero__contre li {
    font-family: var(--el-font-body);
    font-size: 16px;
    color: var(--el-color-text);
    line-height: 1.55;
    margin-bottom: 8px;
}
.el-fascias-hero__indications li::marker,
.el-fascias-hero__contre li::marker {
    color: var(--el-color-text);
}

.el-fascias-hero__contre {
    margin-top: 4px;
}

/* Disclaimer médical en bas du panneau : uppercase cuivre, même
   traitement que la charte Magnétisme. */
.el-fascias-hero__disclaimer {
    font-family: var(--el-font-label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--el-color-heading);
    line-height: 1.7;
    text-align: center;
    max-width: 560px;
    margin: 8px auto 0;
}

@media (max-width: 900px) {
    .el-fascias-hero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .el-fascias-hero__media img {
        height: 420px;
    }
    .el-fascias-hero__content {
        padding: 48px 24px;
    }
    .el-fascias-hero__title {
        font-size: clamp(32px, 8vw, 44px);
    }
}

/* --- Module 2 — Mon accompagnement par les fascias -------------- */

.el-fascias-accompagnement {
    --el-wash-alpha: 0.88;
    background-color: var(--el-color-white);
    background-image: url("assets/images/fascias/fascias_image2.png");
    background-position: center;
    background-size: cover;
    padding: 100px 40px;
}

.el-fascias-accompagnement__title {
    font-family: var(--el-font-heading);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--el-color-text);
    text-align: center;
    margin: 0 0 64px 0;
}

.el-fascias-accompagnement__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    max-width: 1200px;
    margin: 0 auto 56px auto;
    align-items: start;
}

.el-fascias-accompagnement__cols .el-pill-title {
    hyphens: none;
    overflow-wrap: normal;
    word-break: keep-all;
}

.el-fascias-accompagnement__cols ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}
.el-fascias-accompagnement__cols li {
    font-family: var(--el-font-body);
    font-size: 17px;
    color: var(--el-color-text);
    line-height: 1.65;
    margin-bottom: 10px;
}
.el-fascias-accompagnement__cols li::marker {
    color: var(--el-color-text);
}

.el-fascias-accompagnement__conclusion {
    max-width: 1000px;
    margin: 0 auto;
}

/* Paragraphe italique mis en avant : encadré léger pour reprendre
   l'effet "highlight" du Canva sans rajouter d'élément. */
.el-fascias-accompagnement__note-italic {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--el-color-text);
    line-height: 1.65;
    margin: 0 0 32px 0;
    text-align: center;
}

.el-fascias-accompagnement__note-copper {
    font-family: var(--el-font-label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--el-color-heading);
    line-height: 1.7;
    margin: 0;
    text-align: center;
}

@media (max-width: 900px) {
    .el-fascias-accompagnement {
        padding: 60px 24px;
    }
    .el-fascias-accompagnement__cols {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 48px;
    }
}

/* ==========================================
   PAGE STAGES
   Fond Terre Apaisante pleine largeur, titre centré cuivre,
   2 colonnes identiques : image + titre + sous-titre + intro
   + liste puces + footer dates/tarif.
   ========================================== */

.el-stages {
    background-color: var(--el-color-background);
    padding: 80px 32px 100px;
}

.el-stages__title {
    font-family: var(--el-font-heading);
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--el-color-text);
    text-align: center;
    margin: 0 0 72px 0;
    line-height: 1.15;
}

.el-stages__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.el-stages__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Image : coins arrondis doux, pas d'arche (le design montre un
   rectangle avec radius). */
.el-stages__media {
    margin: 0 auto 16px;
    max-width: 460px;
    width: 100%;
}
.el-stages__media img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.el-stages__col-title {
    font-family: var(--el-font-label);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--el-color-heading);
    text-align: center;
    margin: 8px 0 4px 0;
}

/* Sous-titre : italique léger, ton plus clair — donne l'air "respiré"
   comme dans la maquette. */
.el-stages__col-subtitle {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 17px;
    color: rgb(from var(--el-color-text) r g b / 0.6);
    text-align: center;
    margin: 0 0 16px 0;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.el-stages__col-intro {
    font-family: var(--el-font-body);
    font-size: 16px;
    color: var(--el-color-text);
    line-height: 1.65;
    margin: 0;
    text-align: left;
}

.el-stages__col-list {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}
.el-stages__col-list li {
    font-family: var(--el-font-body);
    font-size: 16px;
    color: var(--el-color-text);
    line-height: 1.65;
    margin-bottom: 6px;
}
.el-stages__col-list li::marker {
    color: var(--el-color-text);
}

.el-stages__col-footer {
    font-family: var(--el-font-body);
    font-size: 16px;
    color: var(--el-color-text);
    line-height: 1.65;
    margin: 8px 0 0;
    text-align: left;
}
.el-stages__col-footer a {
    color: var(--el-color-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.el-stages__col-footer a:hover {
    color: var(--el-color-accent);
}

/* Mobile : les 2 colonnes s'empilent, padding réduit. */
@media (max-width: 900px) {
    .el-stages {
        padding: 60px 24px 72px;
    }
    .el-stages__title {
        margin-bottom: 48px;
    }
    .el-stages__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
}

/* ==========================================
   PAGE RÉFÉRENCES
   Fond Crème Chaude + lotus décoratif centré en arrière-plan,
   titre cuivre, eyebrow en caps, 3 colonnes avec blocs
   référence (titre cuivre + liste puces).
   ========================================== */

.el-references {
    background-color: var(--el-color-cream);
    padding: 80px 32px 100px;
    position: relative;
    overflow: hidden;
}

/* Lotus décoratif en arrière-plan : pseudo-élément pour pouvoir jouer
   l'opacité sans toucher le contenu. Centré, positionné sous le titre. */
.el-references::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/images/references/references_lotus.png");
    background-position: center 160px;
    background-repeat: no-repeat;
    background-size: 360px auto;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.el-references > * {
    position: relative;
    z-index: 1;
}

.el-references__title {
    font-family: var(--el-font-heading);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--el-color-heading);
    text-align: center;
    margin: 0 0 24px 0;
    line-height: 1.1;
}

.el-references__subtitle {
    font-family: var(--el-font-label);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--el-color-text);
    text-align: center;
    max-width: 780px;
    margin: 0 auto 72px auto;
    line-height: 1.75;
}

.el-references__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    max-width: 1240px;
    margin: 0 auto;
    align-items: start;
}

.el-references__col {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Titre de bloc : Inter bold cuivre, taille moyenne, line-height serré. */
.el-references__block-title {
    font-family: var(--el-font-label);
    font-size: 16px;
    font-weight: 700;
    color: var(--el-color-heading);
    letter-spacing: 0.01em;
    margin: 0 0 12px 0;
    line-height: 1.35;
    text-transform: none;
}

.el-references__col ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}
.el-references__col li {
    font-family: var(--el-font-body);
    font-size: 15px;
    color: var(--el-color-text);
    line-height: 1.55;
    margin-bottom: 6px;
}
.el-references__col li::marker {
    color: var(--el-color-text);
}

/* Liens (sites web) : cuivre souligné fin, underline à l'hover. */
.el-references__col a {
    color: var(--el-color-heading);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 500;
    word-break: break-word;
}
.el-references__col a:hover {
    color: var(--el-color-accent);
    text-decoration-thickness: 2px;
}

/* Tablette : 2 colonnes. */
@media (max-width: 1100px) {
    .el-references__grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}

/* Mobile : 1 colonne, lotus plus petit et plus haut. */
@media (max-width: 720px) {
    .el-references {
        padding: 60px 24px 72px;
    }
    .el-references::before {
        background-size: 240px auto;
        background-position: center 140px;
    }
    .el-references__subtitle {
        margin-bottom: 48px;
    }
    .el-references__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ==========================================
   FOOTER — minimaliste horizontal, 3 colonnes
   Fond Crème Chaude, wordmark Fraunces, corps Inter.
   Ligne haute : brand (gauche) · contact (centre) · légal (droite)
   Ligne basse : mention obligatoire pleine largeur centrée.
   Mobile : les 3 colonnes s'empilent proprement.
   ========================================== */

.el-footer {
    background-color: var(--el-color-cream);
    color: var(--el-color-text);
    padding: 64px 40px 40px;
    border-top: 1px solid rgba(47, 35, 26, 0.08);
}

.el-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Ligne 1 : 3 colonnes égales, alignées top. */
.el-footer__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
}

/* Alignement par colonne pour équilibrer visuellement. */
.el-footer__col--brand   { text-align: left; }
.el-footer__col--contact { text-align: center; }
.el-footer__col--legal   { text-align: right; }

.el-footer__col p {
    margin: 0;
}
.el-footer__col p + p {
    margin-top: 6px;
}

/* Wordmark : Fraunces, empreinte du branding haut de page. */
.el-footer__wordmark {
    font-family: var(--el-font-heading);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--el-color-heading);
}

.el-footer__tagline {
    font-family: var(--el-font-body);
    font-size: 14px;
    color: var(--el-color-text);
    opacity: 0.75;
}

/* Téléphone : cuivre, cliquable, hover = terracotta. */
.el-footer__phone {
    font-family: var(--el-font-body);
    font-size: 17px;
    font-weight: 500;
}
.el-footer__phone a {
    color: var(--el-color-heading);
    text-decoration: none;
    transition: color 180ms ease;
}
.el-footer__phone a:hover,
.el-footer__phone a:focus-visible {
    color: var(--el-color-accent);
}

.el-footer__cabinets {
    font-family: var(--el-font-body);
    font-size: 14px;
    color: var(--el-color-text);
    letter-spacing: 0.02em;
}

/* Copyright + liens légaux : petite ligne discrète. */
.el-footer__copyright {
    font-family: var(--el-font-body);
    font-size: 13px;
    color: var(--el-color-text);
    opacity: 0.7;
    letter-spacing: 0.02em;
}
.el-footer__links {
    font-family: var(--el-font-body);
    font-size: 13px;
    letter-spacing: 0.02em;
}
.el-footer__links a {
    color: var(--el-color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 180ms ease;
}
.el-footer__links a:hover,
.el-footer__links a:focus-visible {
    color: var(--el-color-accent);
}

/* Séparateur horizontal fin entre ligne 1 et la mention obligatoire. */
.el-footer__sep {
    border: none;
    border-top: 1px solid rgba(47, 35, 26, 0.12);
    margin: 0 0 24px;
}

/* Mention légale obligatoire — italique Fraunces, gris doux, pleine largeur. */
.el-footer__disclaimer {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    color: var(--el-color-text);
    opacity: 0.75;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* Séparateur "·" entre éléments inline. */
.el-footer__dot {
    display: inline-block;
    margin: 0 4px;
    opacity: 0.5;
}

/* Mobile : les 3 colonnes s'empilent, tout centré. */
@media (max-width: 720px) {
    .el-footer {
        padding: 48px 20px 32px;
    }
    .el-footer__row {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 32px;
    }
    .el-footer__col--brand,
    .el-footer__col--contact,
    .el-footer__col--legal {
        text-align: center;
    }
    .el-footer__wordmark {
        font-size: 20px;
    }
    .el-footer__disclaimer {
        font-size: 13px;
    }
}

/* ==========================================================
   Page Blog (ID 7) — Articles et actualités
   Grille 7 tuiles : 1 grande (gauche, 2 rangées) + 6 petites.
   Markup 100% Gutenberg natif (wp:group + wp:heading), les
   icônes et le bouton "+" sont rendus en CSS (::before / ::after)
   pour garder la page pleinement éditable dans l'admin WP.
   ========================================================== */
.el-blog {
    background: var(--el-color-cream);
    padding: 72px 48px 96px;
}

.el-blog__title {
    font-family: var(--el-font-heading);
    font-weight: 600;
    font-size: clamp(34px, 4.6vw, 56px);
    color: var(--el-color-title);
    text-align: center;
    letter-spacing: 0.02em;
    margin: 0 0 56px;
}

.el-blog__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: repeat(3, minmax(260px, 1fr));
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}

.el-blog__card {
    position: relative;
    border-radius: 22px;
    padding: 28px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.el-blog__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgb(47 35 26 / 0.12);
}

/* Icône (::before) : positionnée en haut de la tuile via background-image,
   la classe --violet/--mustard/... détermine quelle icône SVG charger */
.el-blog__card:not(.el-blog__card--feature)::before {
    content: "";
    display: block;
    position: absolute;
    top: 28px;
    left: 28px;
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* "+" décoratif en haut à droite (remplace le futur lien vers l'article) */
.el-blog__card::after {
    content: "+";
    position: absolute;
    top: 16px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgb(from var(--el-color-title) r g b / 0.08);
    color: var(--el-color-title);
    font-family: var(--el-font-body);
    font-weight: 300;
    font-size: 26px;
    line-height: 34px;
    text-align: center;
}

.el-blog__card--feature {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 32px 32px 36px;
}

/* Palette des tuiles — pastels inspirés du mockup, teintés vers la charte chaude */
.el-blog__card--blue      { background: #c7d4e3; }  /* bleu pastel, tuile feature */
.el-blog__card--violet    { background: #d9c9df; }  /* violet poudré */
.el-blog__card--mustard   { background: #e8c76a; }  /* jaune moutarde chaud */
.el-blog__card--orange    { background: #e88a4a; }  /* orange vif */
.el-blog__card--terracotta{ background: #d97a52; }  /* terracotta endométriose */
.el-blog__card--cream     { background: #fff2eb; border: 1px solid rgb(from var(--el-color-title) r g b / 0.08); } /* crème pâle */
.el-blog__card--sky       { background: #bfd3dc; }  /* bleu pastel oncologie */

/* Mapping icône SVG → classe de variante. Les SVG vivent dans
   assets/images/blog/icons/ ; Charlotte peut les remplacer directement. */
.el-blog__card--violet::before    { background-image: url("assets/images/blog/icons/circle.svg"); }
.el-blog__card--mustard::before   { background-image: url("assets/images/blog/icons/grain.svg"); }
.el-blog__card--orange::before    { background-image: url("assets/images/blog/icons/palm.svg"); }
.el-blog__card--terracotta::before{ background-image: url("assets/images/blog/icons/coral.svg"); }
.el-blog__card--cream::before     { background-image: url("assets/images/blog/icons/arch.svg"); }
.el-blog__card--sky::before       { background-image: url("assets/images/blog/icons/burst.svg"); }

/* Tuile feature — entête événement */
.el-blog__event-city {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: var(--el-color-title);
    margin: 0 0 2px !important;
    letter-spacing: 0.02em;
}

.el-blog__event-date {
    font-family: var(--el-font-body);
    font-size: 15px;
    color: var(--el-color-text);
    margin: 0 !important;
}

.el-blog__event-place {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 16px;
    color: var(--el-color-title);
    margin: 0 0 18px !important;
}

.el-blog__feature-media {
    margin: 0 0 18px !important;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-blog__feature-media img {
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 140px 140px 18px 18px;
    display: block;
}

.el-blog__feature-title {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 2vw, 28px);
    color: var(--el-color-title);
    margin: 0 !important;
    text-align: center;
    line-height: 1.2;
}

/* Petites tuiles — titre en bas */
.el-blog__card-title {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--el-color-title);
    margin: 0 !important;
    line-height: 1.25;
    letter-spacing: 0.01em;
    padding-top: 110px; /* laisse la place à l'icône ::before au-dessus */
}

/* Responsive : tablette 2 colonnes */
@media (max-width: 960px) {
    .el-blog {
        padding: 56px 24px 72px;
    }
    .el-blog__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-auto-rows: auto;
    }
    .el-blog__card--feature {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 420px;
    }
}

/* Responsive : mobile 1 colonne */
@media (max-width: 600px) {
    .el-blog {
        padding: 48px 18px 64px;
    }
    .el-blog__title {
        font-size: 28px;
        margin-bottom: 36px;
    }
    .el-blog__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 18px;
    }
    .el-blog__card {
        min-height: 220px;
        padding: 24px;
    }
    .el-blog__card--feature {
        min-height: 380px;
    }
    .el-blog__card:not(.el-blog__card--feature)::before {
        top: 24px;
        left: 24px;
        width: 72px;
        height: 72px;
    }
    .el-blog__card-title {
        font-size: 18px;
        padding-top: 90px;
    }
}

/* ==========================================================
   Page Mentions Légales (ID 15)
   Contenu texte sur fond crème + lotus en filigrane derrière.
   ========================================================== */
.el-mentions {
    position: relative;
    background: var(--el-color-background);
    padding: 88px 32px 72px;
    overflow: hidden;
    isolation: isolate;
}

.el-mentions::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/images/mentions/mentions_lotus.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: clamp(520px, 58vw, 780px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.el-mentions__inner {
    position: relative;
    z-index: 1;
}

.el-mentions__inner > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.el-mentions__section-title {
    font-family: var(--el-font-body);
    font-weight: 700;
    font-size: clamp(16px, 1.6vw, 19px);
    letter-spacing: 0.08em;
    color: var(--el-color-title);
    text-transform: uppercase;
    margin: 0 0 22px !important;
}

.el-mentions__inner .el-mentions__section-title + * {
    margin-top: 0 !important;
}

.el-mentions h2.el-mentions__section-title {
    margin-top: 56px !important;
}

.el-mentions__sub {
    font-family: var(--el-font-heading);
    font-weight: 700;
    font-size: clamp(17px, 1.5vw, 20px);
    color: var(--el-color-text);
    margin: 28px 0 10px !important;
    letter-spacing: 0.01em;
}

.el-mentions__line {
    font-family: var(--el-font-heading);
    font-weight: 400;
    font-size: clamp(15px, 1.3vw, 17px);
    color: var(--el-color-text);
    line-height: 1.7;
    margin: 0 0 8px !important;
}

.el-mentions__line strong {
    font-weight: 700;
}

.el-mentions__line a {
    color: var(--el-color-text);
    text-decoration: none;
    border-bottom: 1px solid rgb(from var(--el-color-text) r g b / 0.25);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.el-mentions__line a:hover {
    color: var(--el-color-interactive);
    border-color: var(--el-color-interactive);
}

.el-mentions__copyright {
    font-family: var(--el-font-heading);
    font-style: italic;
    font-size: 15px;
    color: var(--el-color-text);
    margin: 64px 0 0 !important;
    opacity: 0.85;
}

/* Responsive mentions */
@media (max-width: 720px) {
    .el-mentions {
        padding: 56px 20px 48px;
    }
    .el-mentions::before {
        background-size: 440px;
        opacity: 0.12;
    }
    .el-mentions h2.el-mentions__section-title {
        margin-top: 40px !important;
    }
    .el-mentions__copyright {
        margin-top: 44px !important;
    }
}