.elementor-14 .elementor-element.elementor-element-f5ca4b7{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-14:not(.elementor-motion-effects-element-type-background), body.elementor-page-14 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EDE8E0;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-f5ca4b7 *//* =========================================
   Page 1. CHARTE GRAPHIQUE & VARIABLES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Montserrat:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

:root {
    /* Palette Meraki */
    --c-beige-fond: #EDE8E0;
    --c-beige-light: #F7F5F3;
    --c-vert-foret: #2E473B;
    --c-brun-texte: #3E2723;
    --c-rouille: #944028;
    --c-argile: #C57B57;
    --c-blanc: #FFFFFF;

    /* Typographies */
    --f-titre: 'Cinzel', serif;
    --f-sign: 'Playfair Display', serif;
    --f-corps: 'Montserrat', sans-serif;

    /* Structure */
    --radius-organic: 0px 60px 0px 60px; /* Signature visuelle coins */
    --max-width: 1200px;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--c-beige-fond);
    color: var(--c-brun-texte);
    font-family: var(--f-corps);
    font-weight: 300;
    line-height: 1.8;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* Titres */
h1, h2, h3 {
    font-family: var(--f-titre);
    color: var(--c-vert-foret);
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.2;
}

h1 { font-size: clamp(36px, 5vw, 52px); letter-spacing: 2px; margin-bottom: 24px; }
h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: 2px; margin-bottom: 30px; }
h3 { font-size: 22px; letter-spacing: 1px; margin-bottom: 15px; }

/* Sous-titres Signature */
.subtitle-serif {
    font-family: var(--f-sign);
    font-style: italic;
    font-size: 20px;
    color: var(--c-rouille);
    margin-bottom: 20px;
    display: block;
}

/* Liens & Boutons */
a { text-decoration: none; transition: 0.3s ease; }

.btn {
    display: inline-block;
    padding: 16px 32px;
    font-family: var(--f-corps);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    margin-top: 20px;
}

.btn-primary {
    background-color: var(--c-vert-foret);
    color: var(--c-blanc);
    border-color: var(--c-vert-foret);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--c-vert-foret);
}

.btn-secondary {
    background-color: transparent;
    color: var(--c-vert-foret);
    border-color: var(--c-vert-foret);
}

.btn-secondary:hover {
    background-color: var(--c-vert-foret);
    color: var(--c-blanc);
}

.btn-white {
    background-color: transparent;
    color: var(--c-beige-fond);
    border-color: var(--c-beige-fond);
}

.btn-white:hover {
    background-color: var(--c-beige-fond);
    color: var(--c-vert-foret);
}

/* =========================================
   3. STRUCTURE DES SECTIONS
   ========================================= */
.niso-section {
    padding: 100px 20px;
    width: 100%;
    position: relative;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Layout Split (Hero & Posture) */
.split-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

.split-content { flex: 1; }
.split-image { flex: 1; }

.img-frame {
    width: 100%;
    height: 600px;
    overflow: hidden;
    border-radius: var(--radius-organic);
    box-shadow: 10px 10px 40px rgba(46, 71, 59, 0.15);
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s ease;
}

.img-frame:hover img { transform: scale(1.05); }

/* =========================================
   4. SECTIONS SPÉCIFIQUES
   ========================================= */

/* HERO */
.hero-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
}

/* MIROIR (Liste) */
.miroir-section {
    background-color: var(--c-beige-light);
    text-align: center;
}

.miroir-content {
    max-width: 800px;
    margin: 0 auto;
}

.clean-list {
    list-style: none;
    margin: 40px 0;
    text-align: left;
    display: inline-block;
}

.clean-list li {
    font-size: 18px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px;
    color: var(--c-brun-texte);
}

/* Puce personnalisée (Losange) au lieu d'emoji */
.clean-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background-color: var(--c-rouille);
    transform: rotate(45deg);
}

/* POSTURE (Fond Vert) */
.posture-section {
    background-color: var(--c-vert-foret);
    color: var(--c-blanc);
}

.posture-section h2 { color: var(--c-beige-fond); }
.posture-section p { color: rgba(255,255,255,0.9); }

/* =========================================
   5. ANIMATIONS (Scroll Reveal)
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-200 { transition-delay: 0.2s; }
.delay-400 { transition-delay: 0.4s; }

/* =========================================
   6. RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
    .split-layout { flex-direction: column; text-align: center; }
    .split-layout.reverse { flex-direction: column-reverse; }
    .clean-list { text-align: left; } /* Garder la liste alignée gauche même en mobile */
    .img-frame { height: 400px; margin-top: 30px; }
    h1 { font-size: 32px; }
}

/* =========================================
   CORRECTIF CONTRASTE (URGENT)
   ========================================= */

/* 1. Force le texte en Brun Profond sur les sections beiges */
body, 
.hero-section p, 
.miroir-section p,
.niso-section p {
    color: var(--c-brun-texte) !important; /* #3E2723 */
}

/* 2. Corrige spécifiquement les textes sous les titres H3 (Section Méthode) */
.niso-section h3 + p, 
.reveal p {
    color: var(--c-brun-texte) !important;
}

/* 3. EXCEPTION : On garde le texte clair UNIQUEMENT sur les fonds verts */
.posture-section p,
.niso-footer p,
.niso-footer a, 
.niso-footer .footer-tagline,
.niso-footer .footer-contact-text {
    color: var(--c-beige-fond) !important; /* #EDE8E0 */
    opacity: 0.9;
}

/* 4. Corrige la couleur des liens du menu header (si jamais ils sont blancs) */
.niso-nav a {
    color: var(--c-vert-foret) !important;
}
.niso-nav a:hover {
    color: var(--c-rouille) !important;
}/* End custom CSS */