/*
Theme Name: Divi Child
Template: Divi
Description: Divi Child Theme
Author: Info Conception
Author URI: https://infoconception.fr/
*/


:root {
    --mc-cream: #FCFBF8;
    --mc-green-dark: #2E362F;
    --mc-green-mid: #4E6653;
    --mc-text-body: #56595c;
    --mc-tan-border: #EDE7DF;
    --mc-font-serif1: 'Alata', Georgia, serif;
    --mc-font-serif: 'Playfair Display', Georgia, serif;
    --mc-font-sans: 'Poppins', -apple-system, sans-serif;
}

.mc-landing {
    /* background-color (et non "background") : laisse la propriété
       background-image libre, pour ne pas écraser la photo de fond
       que Divi applique sur ce même élément via le champ ACF
       image_de_presentation + sa superposition de couleur native. */
    background-color: var(--mc-cream) !important;
    color: var(--mc-green-dark) !important;
    font-family: var(--mc-font-sans) !important;
    line-height: 1.6 !important;

    /* Casse la largeur du conteneur Divi (souvent limité à ~1080px)
       pour que le fond couvre toute la largeur de l'écran */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}
.mc-landing * { box-sizing: border-box !important; }

/* ==================================================
   HERO
   ================================================== */

.mc-hero {
    width: 100% !important;
    padding: 100px 24px !important;
    min-height: 65vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    /* même logique : pas de "background" ici, pour laisser passer
       l'image de fond Divi si elle est appliquée sur .mc-hero
       plutôt que sur .mc-landing */
    background-position: center 30% !important;
    background-size: cover !important;
    box-sizing: border-box !important;
}

.mc-hero-panel {
    position: relative !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-radius: 24px !important;
    padding: 56px 60px !important;
    max-width: 700px !important;
    width: 100% !important;
    box-shadow: 0 8px 24px rgba(46, 54, 47, 0.18) !important;
    box-sizing: border-box !important;
}
@supports not (backdrop-filter: blur(6px)) {
    .mc-hero-panel { background: rgba(255, 255, 255, 0.85) !important; }
}

.mc-hero-panel h1 {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(36px, 5vw, 56px) !important;
    margin: 0 0 18px !important;
    color: var(--mc-green-dark) !important;
}
.mc-hero-panel .mc-subtitle {
    font-family: var(--mc-font-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(24px, 4vw, 38px) !important;
    color: var(--mc-green-mid) !important;
    margin: 0 0 28px !important;
    line-height: 1.25 !important;
}
.mc-hero-panel p.mc-lead {
    font-size: 17px !important;
    color: var(--mc-green-dark) !important;
    max-width: 520px !important;
    margin: 0 auto 32px !important;
}

.mc-cta-group {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}
.mc-btn {
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 16px 32px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
    border: 2px solid transparent !important;
}
.mc-btn:hover { transform: translateY(-2px) !important; }
.mc-btn--primary { background: var(--mc-green-mid) !important; color: #fff !important; }
.mc-btn--primary:hover { box-shadow: 0 8px 20px rgba(78,102,83,0.3) !important; }
.mc-btn--outline { background: transparent !important; color: var(--mc-green-mid) !important; border-color: var(--mc-green-mid) !important; }
.mc-btn--outline:hover { background: rgba(78,102,83,0.08) !important; }

@media (max-width: 780px) {
    .mc-hero { padding: 60px 20px !important; min-height: 55vh !important; }
    .mc-hero-panel { padding: 36px 24px !important; }
    .mc-cta-group { flex-direction: column !important; align-items: stretch !important; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-btn { transition: none !important; }
}

/* Utilitaire gardé au cas où : force overflow:visible sur un conteneur
   Divi si jamais un élément déborde de sa section/ligne/colonne.
   A appliquer via le champ "Classe CSS" (onglet Avancé) sur l'élément
   Divi concerné, si besoin. */
.mc-overflow-visible {
    overflow: visible !important;
}

/* Le module Code Divi qui contient ce shortcode ajoute par défaut une
   marge/un espace sous son contenu (comportement standard des modules
   Divi, pensé pour espacer du contenu texte classique) — ce qui crée
   la ligne blanche visible sous le hero. On neutralise cette marge
   spécifiquement pour le module qui contient .mc-landing. */
.et_pb_code_inner:has(.mc-landing) {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}
.et_pb_module:has(.mc-landing) {
    margin-bottom: 0 !important;
}

/* Si la marge blanche sous la photo résiste malgré tout (padding
   caché ajouté par Divi sur la section/ligne parente, qu'on ne
   maîtrise pas toujours via le panneau Espacement), on peint tout
   l'ancêtre en cream : le vide reste, mais il n'est plus blanc. */
.et_pb_section:has(.mc-landing),
.et_pb_row:has(.mc-landing),
.et_pb_column:has(.mc-landing),
.et_pb_module:has(.mc-landing),
.et_pb_code_inner:has(.mc-landing) {
    background-color: var(--mc-cream) !important;
}
/* Solution de repli si :has() n'est pas supporté par le navigateur :
   ajoute la classe "mc-no-module-margin" dans Avancé > Classe CSS
   du module Code concerné, directement dans Divi. */
.mc-no-module-margin,
.mc-no-module-margin .et_pb_code_inner {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==================================================
   SECTION PRESENTATION — deux colonnes : photo à gauche (forme
   organique), texte + liste + cartes à droite.
   Section indépendante (pas forcément dans .mc-landing) : elle
   casse donc elle-même le conteneur Divi pour couvrir 100% de
   la page, avec les mêmes variables et la même logique que le hero.
   ================================================== */

.mc-presentation {
    /* Fond plein écran : la section casse le conteneur Divi comme
       .mc-landing (width 100vw + left 50% + margin-left -50vw),
       pour que le cream couvre toute la largeur de la page. */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    background-color: var(--mc-cream) !important;

    /* Le contenu (grille photo/texte), lui, reste cadré à 80% de la
       largeur : on le resserre via le padding gauche/droite plutôt
       que via la largeur de l'élément, pour garder le fond à 100%. */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 100px !important;
    padding: 100px 10vw !important;
}
.mc-presentation * { box-sizing: border-box !important; }

/* ---------- Colonne image ---------- */

.mc-presentation-media {
    position: relative !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    justify-self: center !important;
    aspect-ratio: 1 / 1 !important;
}

.mc-presentation-media img {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 0 50% 50% 0 / 60% 60% 40% 40% !important;
}

/* État vide (aucune image ACF) : placeholder pointillé, comme le
   wireframe, en attendant que le visuel soit renseigné */
.mc-presentation-media:empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ececE6 !important;
    border: 2px dashed var(--mc-tan-border) !important;
    border-radius: 0 50% 50% 0 / 60% 60% 40% 40% !important;
}

.mc-presentation-media:empty::before {
    content: "Photo — soin énergétique, mains, ambiance chaleureuse" !important;
    font-family: var(--mc-font-sans) !important;
    font-size: 14px !important;
    color: var(--mc-text-body) !important;
    text-align: center !important;
    max-width: 220px !important;
    display: block !important;
}

/* ---------- Colonne contenu ---------- */

.mc-presentation-content {
    text-align: left !important;
}

.mc-presentation-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--mc-green-mid) !important;
    margin: 0 0 16px !important;
}

.mc-presentation-eyebrow-line {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--mc-green-mid) !important;
}

.mc-presentation-eyebrow-dash {
    display: inline-block !important;
    color: var(--mc-green-mid) !important;
    font-weight: 400 !important;
}

.mc-presentation-content h2 {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.5vw, 40px) !important;
    color: var(--mc-green-dark) !important;
    margin: 0 0 20px !important;
}

.mc-presentation-intro {
    font-family: var(--mc-font-sans) !important;
    font-size: 17px !important;
    color: var(--mc-text-body) !important;
    margin: 0 0 16px !important;
}

/* ---------- Liste ---------- */

.mc-presentation-liste {
    list-style: none !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
}

.mc-presentation-liste li {
    list-style: none !important;
    position: relative !important;
    padding-left: 22px !important;
    font-family: var(--mc-font-sans) !important;
    font-size: 16px !important;
    color: var(--mc-green-dark) !important;
    margin-bottom: 12px !important;
}

.mc-presentation-liste li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--mc-green-mid) !important;
}

/* ---------- Cartes ---------- */

.mc-presentation-cartes {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.mc-presentation-carte {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 28px 16px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(46, 54, 47, 0.08) !important;
}

.mc-presentation-carte-icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 16px !important;
    border-radius: 50% !important;
    background: var(--mc-cream) !important;
    overflow: hidden !important;
}

.mc-presentation-carte-icone img {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
}

.mc-presentation-carte p {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: 19px !important;
    color: var(--mc-green-dark) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Neutralise la marge de module Divi pour cette section aussi */
.et_pb_code_inner:has(.mc-presentation) {
    margin: 0 !important;
    padding: 0 !important;
}
.et_pb_module:has(.mc-presentation) {
    margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .mc-presentation {
        grid-template-columns: 1fr !important;
        padding: 60px 20px !important;
        gap: 40px !important;
    }
    .mc-presentation-content { text-align: center !important; }
    .mc-presentation-eyebrow { justify-content: center !important; }
    .mc-presentation-liste {
        text-align: left !important;
        max-width: 420px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .mc-presentation-cartes { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 560px) {
    .mc-presentation-cartes { grid-template-columns: 1fr !important; }
}

/* ==================================================
   SECTION COACHING MENTAL — bandeau eyebrow + titre,
   4 cartes icône/titre, texte de conclusion.
   Même logique de casse de conteneur que .mc-landing /
   .mc-presentation, mêmes variables et mêmes fixes Divi.
   ================================================== */

.mc-coaching {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    background-color: #F2ECE3 !important;
    padding: 100px 10vw !important;
    text-align: center !important;
}
.mc-coaching * { box-sizing: border-box !important; }

.mc-coaching-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--mc-green-mid) !important;
    margin: 0 0 16px !important;
}

.mc-coaching-eyebrow-line {
    display: inline-block !important;
    width: 32px !important;
    height: 1px !important;
    background-color: var(--mc-green-mid) !important;
}

.mc-coaching-eyebrow-dash {
    display: inline-block !important;
    color: var(--mc-green-mid) !important;
    font-weight: 400 !important;
}

.mc-coaching-title {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.5vw, 40px) !important;
    color: var(--mc-green-dark) !important;
    margin: 0 0 48px !important;
}

.mc-coaching-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 0 0 40px !important;
}

.mc-coaching-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 44px 32px !important;
    min-height: 220px !important;
    text-align: left !important;
    box-shadow: 0 10px 30px rgba(46, 54, 47, 0.08) !important;
}

.mc-coaching-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 0 24px !important;
    border-radius: 50% !important;
    background-color: #F6F2EA !important;
    overflow: hidden !important;
}

.mc-coaching-icon img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

.mc-coaching-card-title {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: 19px !important;
    color: var(--mc-green-dark) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.mc-coaching-footer {
    max-width: 650px !important;
    margin: 0 auto !important;
    font-family: var(--mc-font-sans) !important;
    color: var(--mc-text-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Neutralise la marge de module Divi pour cette section aussi */
.et_pb_code_inner:has(.mc-coaching) {
    margin: 0 !important;
    padding: 0 !important;
}
.et_pb_module:has(.mc-coaching) {
    margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .mc-coaching { padding: 60px 20px !important; }
    .mc-coaching-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
    .mc-coaching-cards { grid-template-columns: 1fr !important; }
}

/* ==================================================
   SECTION À PROPOS / CONFIANCE — bandeau eyebrow + titre,
   3 cartes centrées : icône, titre, texte descriptif.
   Même logique de casse de conteneur que les autres sections.
   ================================================== */

.mc-trust {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    background-color: var(--mc-cream) !important;
    padding: 100px 10vw !important;
    text-align: center !important;
}
.mc-trust * { box-sizing: border-box !important; }

.mc-trust-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #919C96 !important;
    margin: 0 0 16px !important;
}

.mc-trust-eyebrow-line {
    display: inline-block !important;
    width: 32px !important;
    height: 1px !important;
    background-color: #EDF0EA !important;
}

.mc-trust-eyebrow-dash {
    display: inline-block !important;
    color: #919C96 !important;
    font-weight: 400 !important;
}

.mc-trust-title {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.5vw, 40px) !important;
    color: var(--mc-green-dark) !important;
    margin: 0 0 48px !important;
}

.mc-trust-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.mc-trust-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 44px 32px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(46, 54, 47, 0.08) !important;
}

.mc-trust-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 24px !important;
    border-radius: 50% !important;
    background-color: #EDF0EA !important;
    overflow: hidden !important;
}

.mc-trust-icon img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

.mc-trust-card-title {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: 19px !important;
    color: var(--mc-green-dark) !important;
    margin: 0 0 12px !important;
    line-height: 1.4 !important;
}

.mc-trust-card-text {
    font-family: var(--mc-font-sans) !important;
    font-size: 15px !important;
    color: var(--mc-text-body) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* Neutralise la marge de module Divi pour cette section aussi */
.et_pb_code_inner:has(.mc-trust) {
    margin: 0 !important;
    padding: 0 !important;
}
.et_pb_module:has(.mc-trust) {
    margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .mc-trust { padding: 60px 20px !important; }
    .mc-trust-cards { grid-template-columns: 1fr !important; }
}

/* ==================================================
   SECTION TÉMOIGNAGES — bandeau eyebrow + titre,
   3 cartes : photo + nom + étoiles, puis citation.
   Même logique de casse de conteneur que les autres sections.
   ================================================== */

.mc-testimonials {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    background-color: var(--mc-cream) !important;
    padding: 100px 10vw !important;
    text-align: center !important;
}
.mc-testimonials * { box-sizing: border-box !important; }

.mc-testimonials-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #919C96 !important;
    margin: 0 0 16px !important;
}

.mc-testimonials-eyebrow-line {
    display: inline-block !important;
    width: 32px !important;
    height: 1px !important;
    background-color: #EDF0EA !important;
}

.mc-testimonials-title {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.5vw, 40px) !important;
    color: var(--mc-green-dark) !important;
    margin: 0 0 48px !important;
}

.mc-testimonials-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.mc-testimonial-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 44px 32px !important;
    text-align: left !important;
    box-shadow: 0 10px 30px rgba(46, 54, 47, 0.08) !important;
}

.mc-testimonial-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 20px !important;
}

.mc-testimonial-photo {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background-color: #EDF0EA !important;
}

.mc-testimonial-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* État vide (aucune photo ACF) : placeholder pointillé avec "Photo" */
.mc-testimonial-photo:empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ececE6 !important;
    border: 1px dashed var(--mc-tan-border) !important;
}

.mc-testimonial-photo:empty::before {
    content: "Photo" !important;
    font-family: var(--mc-font-sans) !important;
    font-size: 10px !important;
    color: var(--mc-text-body) !important;
    text-align: center !important;
}

.mc-testimonial-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mc-testimonial-name {
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--mc-green-dark) !important;
    margin: 0 !important;
}

.mc-testimonial-stars {
    font-size: 13px !important;
    letter-spacing: 2px !important;
    color: #C9A227 !important;
    line-height: 1 !important;
}

.mc-testimonial-text {
    font-family: var(--mc-font-sans) !important;
    font-size: 15px !important;
    color: var(--mc-text-body) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Neutralise la marge de module Divi pour cette section aussi */
.et_pb_code_inner:has(.mc-testimonials) {
    margin: 0 !important;
    padding: 0 !important;
}
.et_pb_module:has(.mc-testimonials) {
    margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .mc-testimonials { padding: 60px 20px !important; }
    .mc-testimonials-cards { grid-template-columns: 1fr !important; }
}

/* ==================================================
   SECTION CTA FINALE — bandeau plein écran vert,
   titre + bouton. Réutilise .mc-btn déjà défini
   dans le hero, avec une nouvelle variante --cream.
   ================================================== */

.mc-cta-final {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    background-color: #8EA88B !important;
    padding: 80px 24px !important;
    text-align: center !important;
}
.mc-cta-final * { box-sizing: border-box !important; }

.mc-cta-final-title {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    color: var(--mc-cream) !important;
    margin: 0 0 32px !important;
}

.mc-btn--cream {
    background: var(--mc-cream) !important;
    color: var(--mc-green-mid) !important;
}
.mc-btn--cream:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Neutralise la marge de module Divi pour cette section aussi */
.et_pb_code_inner:has(.mc-cta-final) {
    margin: 0 !important;
    padding: 0 !important;
}
.et_pb_module:has(.mc-cta-final) {
    margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
    .mc-cta-final { padding: 56px 20px !important; }
}

/* ==================================================
   HEADER — logo + menu principal + bouton CTA.
   Réutilise .mc-btn / .mc-btn--primary déjà définis
   dans le hero pour le bouton "Prendre rendez-vous".
   ================================================== */

.mc-header {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    background-color: var(--mc-cream) !important;
    padding: 20px 5vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
}
.mc-header * { box-sizing: border-box !important; }

.mc-header-logo a {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    color: var(--mc-green-dark) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.mc-header-nav {
    flex: 1 1 auto !important;
}

.mc-header-menu {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mc-header-menu li {
    list-style: none !important;
    margin: 0 !important;
}

.mc-header-menu a {
    font-family: var(--mc-font-sans) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: var(--mc-green-dark) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.mc-header-menu a:hover {
    color: var(--mc-green-mid) !important;
}

.mc-header-cta {
    padding: 14px 26px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Neutralise la marge de module Divi pour le header aussi */
.et_pb_code_inner:has(.mc-header) {
    margin: 0 !important;
    padding: 0 !important;
}
.et_pb_module:has(.mc-header) {
    margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .mc-header {
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 20px !important;
    }
    .mc-header-menu {
        flex-wrap: wrap !important;
        gap: 16px 24px !important;
    }
}

/* ==================================================
   FOOTER — logo/description, navigation, contact,
   puis une barre du bas (copyright + liens légaux).
   Même logique de casse de conteneur que les autres
   sections, mêmes variables et fixes Divi.
   ================================================== */

.mc-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    background-color: var(--mc-green-dark) !important;
    padding: 64px 10vw 0 !important;
}
.mc-footer * { box-sizing: border-box !important; }

.mc-footer-main {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr !important;
    gap: 48px !important;
    padding-bottom: 48px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.mc-footer-logo {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    color: var(--mc-cream) !important;
    margin: 0 0 16px !important;
}

.mc-footer-description {
    font-family: var(--mc-font-sans) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(252, 251, 248, 0.7) !important;
    margin: 0 !important;
    max-width: 360px !important;
}

.mc-footer-col-title {
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--mc-cream) !important;
    margin: 0 0 20px !important;
}

.mc-footer-menu,
.mc-footer-contact-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.mc-footer-menu li,
.mc-footer-contact-list li {
    list-style: none !important;
    margin: 0 !important;
}

.mc-footer-menu a,
.mc-footer-contact-list a,
.mc-footer-contact-list li {
    font-family: var(--mc-font-sans) !important;
    font-size: 15px !important;
    color: rgba(252, 251, 248, 0.75) !important;
    text-decoration: none !important;
}

.mc-footer-menu a:hover,
.mc-footer-contact-list a:hover {
    color: var(--mc-cream) !important;
}

.mc-footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 24px 0 !important;
}

.mc-footer-copyright {
    font-family: var(--mc-font-sans) !important;
    font-size: 13px !important;
    color: rgba(252, 251, 248, 0.55) !important;
    margin: 0 !important;
}

.mc-footer-legal-menu {
    list-style: none !important;
    display: flex !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mc-footer-legal-menu li {
    list-style: none !important;
    margin: 0 !important;
}

.mc-footer-legal-menu a {
    font-family: var(--mc-font-sans) !important;
    font-size: 13px !important;
    color: rgba(252, 251, 248, 0.55) !important;
    text-decoration: none !important;
}

.mc-footer-legal-menu a:hover {
    color: var(--mc-cream) !important;
}

/* Neutralise la marge de module Divi pour le footer aussi */
.et_pb_code_inner:has(.mc-footer) {
    margin: 0 !important;
    padding: 0 !important;
}
.et_pb_module:has(.mc-footer) {
    margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .mc-footer { padding: 48px 24px 0 !important; }
    .mc-footer-main {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: left !important;
    }
    .mc-footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 0 32px !important;
    }
}

/* ==================================================
   SECTION CONTACT — titre + intro, coordonnées à
   gauche, formulaire Contact Form 7 à droite.
   Même logique de casse de conteneur que les autres
   sections, mêmes variables et fixes Divi.
   ================================================== */

.mc-contact {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    background-color: var(--mc-cream) !important;
    padding: 100px 10vw !important;
    text-align: center !important;
}
.mc-contact * { box-sizing: border-box !important; }

.mc-contact-title {
    font-family: var(--mc-font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.5vw, 40px) !important;
    color: var(--mc-green-dark) !important;
    margin: 0 0 16px !important;
}

.mc-contact-intro {
    font-family: var(--mc-font-sans) !important;
    font-size: 16px !important;
    color: var(--mc-text-body) !important;
    max-width: 560px !important;
    margin: 0 auto 48px !important;
    line-height: 1.6 !important;
}

.mc-contact-grid {
    display: grid !important;
    grid-template-columns: 0.8fr 1.2fr !important;
    gap: 48px !important;
    text-align: left !important;
}

/* Si les coordonnées ne sont pas renseignées, le formulaire est seul :
   on passe à une seule colonne centrée plutôt que de le laisser collé
   à gauche dans une grille à deux colonnes vide. */
.mc-contact-grid:has(.mc-contact-form:only-child) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
}
.mc-contact-grid .mc-contact-form:only-child {
    width: 100% !important;
    max-width: 560px !important;
}

.mc-contact-info-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.mc-contact-info-list li {
    list-style: none !important;
    margin: 0 !important;
}

.mc-contact-info-label {
    display: block !important;
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--mc-green-mid) !important;
    margin: 0 0 4px !important;
}

.mc-contact-info-list a,
.mc-contact-info-list span {
    font-family: var(--mc-font-sans) !important;
    font-size: 16px !important;
    color: var(--mc-green-dark) !important;
    text-decoration: none !important;
}

.mc-contact-info-list a:hover {
    color: var(--mc-green-mid) !important;
}

.mc-contact-form {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 10px 30px rgba(46, 54, 47, 0.08) !important;
}

.mc-contact-form-notice {
    font-family: var(--mc-font-sans) !important;
    font-size: 14px !important;
    color: var(--mc-text-body) !important;
    margin: 0 !important;
}

/* Habillage des champs générés par Contact Form 7 */
.mc-contact-form .wpcf7-form p {
    margin: 0 0 20px !important;
}
.mc-contact-form .wpcf7-form label {
    display: block !important;
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--mc-green-dark) !important;
    margin: 0 0 8px !important;
}
.mc-contact-form .wpcf7-form input[type="text"],
.mc-contact-form .wpcf7-form input[type="email"],
.mc-contact-form .wpcf7-form input[type="tel"],
.mc-contact-form .wpcf7-form textarea {
    width: 100% !important;
    font-family: var(--mc-font-sans) !important;
    font-size: 15px !important;
    color: var(--mc-green-dark) !important;
    background: var(--mc-cream) !important;
    border: 1px solid var(--mc-tan-border) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}
.mc-contact-form .wpcf7-form textarea {
    min-height: 140px !important;
    resize: vertical !important;
}
.mc-contact-form .wpcf7-form input:focus,
.mc-contact-form .wpcf7-form textarea:focus {
    outline: none !important;
    border-color: var(--mc-green-mid) !important;
}
.mc-contact-form .wpcf7-submit {
    font-family: var(--mc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #fff !important;
    background: var(--mc-green-mid) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    cursor: pointer !important;
    transition: box-shadow .15s ease !important;
}
.mc-contact-form .wpcf7-submit:hover {
    box-shadow: 0 8px 20px rgba(78, 102, 83, 0.3) !important;
}
.mc-contact-form .wpcf7-not-valid-tip {
    font-family: var(--mc-font-sans) !important;
    font-size: 13px !important;
    color: #b3413a !important;
    margin-top: 6px !important;
}
.mc-contact-form .wpcf7-response-output {
    font-family: var(--mc-font-sans) !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    margin: 16px 0 0 !important;
    padding: 12px 16px !important;
}

/* Neutralise la marge de module Divi pour cette section aussi */
.et_pb_code_inner:has(.mc-contact) {
    margin: 0 !important;
    padding: 0 !important;
}
.et_pb_module:has(.mc-contact) {
    margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .mc-contact { padding: 60px 20px !important; }
    .mc-contact-grid { grid-template-columns: 1fr !important; }
}