/* ===============================
   RESET GLOBAL
=============================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===============================
   BASE HTML & BODY
=============================== */

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background-color: #f8f7f6; /* BLANC CHAUD */
}

body {
    margin: 0;
    padding: 0;

    font-family: -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto,
               Helvetica, Arial,
               "Noto Sans",
               "Liberation Sans",
               sans-serif;

    line-height: 1.75;
    color: #2F2F2D;

    background-color: #f8f7f6; /* BLANC CHAUD */
    overflow-x: hidden;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}


h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ===============================
   GENERIC REUSABLE COMPONENTS
=============================== */

/* Generic Card Component */
.card {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: left;
}

.card--white {
    background-color: #ffffff;
}

.card--semi-transparent {
    background-color: #FFFFFFEE;
}

.card--green {
    background-color: #bbcabd;
    border: 1px solid #d5dfd2;
}

.card--sage {
    background-color: #A7B5A9;
    color: #2A2F2C;
}

.card--beige {
    background-color: #EFE7DD;
}

.card--compact {
    padding: 1.4rem 1.6rem;
}

.card--large {
    padding: 2.5rem 2.75rem;
}

/* Generic Button Component */
.btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: #CC5500;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #8e3b00;
    transform: translateY(-2px);
}

.btn--primary {
    background-color: #b64c01;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    box-shadow: 0 4px 6px rgba(204, 85, 0, 0.2);
}

.btn--primary:hover {
    background-color: #8e3b00;
    box-shadow: 0 6px 12px rgba(204, 85, 0, 0.3);
}

.btn--small {
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    border-radius: 999px;
}

.btn--header {
    padding: 0.55rem 1.3rem;
    font-size: 0.9rem;
    border-radius: 10px;
    margin-top: 0;
    white-space: nowrap;
    margin-left: 20px;
}
@media (max-width: 550px) {
    .btn--header {
        margin-left: 0px!important;
    }
    .header-right {
        padding-left: 0rem;
    }
}
@media (max-width: 800px) {

    /* Le header devient vertical */
    .top-banner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background-color: #FAF8F5 !important; /* ton beige crème */
        padding: 0.5rem 0.5rem 0.5rem !important; 
        width: 100%;
        box-sizing: border-box;
    }
        /* S'assurer que rien ne dépasse */
    .top-banner * {
        position: relative;
        z-index: 2;
    }

    /* Ligne 1 : nom + hamburger */
    .header-first-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 1rem; /* espace hamburger */
    }

    .hamburger {
        margin-right: 0.5rem; /* spacing à droite */
    }
    
    /* Forcer les enfants à rester dans le header */
    .header-first-row,
    .header-right {
        background-color: transparent !important;
        width: 100%;
    }

    /* Ligne 2 : bouton RV */
    .header-right {
        display: flex !important;
        flex-direction: column !important; /* ← OBLIGATOIRE */
        align-items: flex-end !important;   /* ← aligne le bouton à droite */
        width: 100%;
        margin-top: 0.2rem;
        padding-top: 0!important;
    }

    .header-cta {
        margin-left: 0 !important;
    }
}


.btn--service {
    background-color: #cb701a;
    box-shadow: 0 4px 12px rgba(182, 76, 1, 0.25);
}

.btn--service:hover {
    background-color: #8f3c01;
    box-shadow: 0 6px 15px rgba(182, 76, 1, 0.35);
}

/* Generic Container Component */
.container {
    max-width: 1100px;
    margin: 0 auto;
}

.container--narrow {
    max-width: 900px;
}

.container--centered {
    max-width: 800px;
    margin: 0 auto;
}

.container--full-width {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Generic Divider Component */
.divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 20px auto;
}

.divider .line {
    height: 1px;
    background-color: #e1dad1;
    display: block;
    width: 340px;
    max-width: 40%;
}

.divider .dot {
    width: 10px;
    height: 10px;
    background-color: #e1dad1;
    border-radius: 50%;
}

.divider--short .line {
    width: 120px;
}

.divider--short .dot {
    margin: 0 10px;
}

.divider--vertical {
    width: 1.5px;
    height: 260px;
    background-color: rgba(0,0,0,0.18);
    margin: 0 auto;
    border-radius: 2px;
    gap: 0;
}

.divider--section {
    width: 90px;
    height: 3px;
    background-color: #A7B5A9;
    border-radius: 4px;
    margin-bottom: 2rem;
}

/* Generic Flex Grid Component */
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.grid--2cols > * {
    flex: 1 1 calc(50% - 1rem);
    min-width: 250px;
}

.grid--3cols > * {
    flex: 1 1 calc(33.333% - 1.334rem);
    min-width: 250px;
}

.grid--4cols > * {
    flex: 1 1 calc(25% - 1.5rem);
    min-width: 230px;
}

.grid--auto > * {
    flex: 1 1 250px;
}

/* Generic CTA/Quote Section */
.cta-section {
    padding: 2.2rem 2rem;
    border-radius: 16px;
    margin-top: 2rem;
}

.cta-section--white {
    background-color: #ffffff;
    border-left: 5px solid #D4D8CD;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.cta-section--green {
    background-color: #A7B5A9;
    color: #FFFFFF;
}

.cta-section--light-green {
    background-color: #b8c7bb;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 3rem 1.5rem;
}

.cta-section--beige {
    background-color: #EFE7DD;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Generic Content Wrapper */
.content-wrapper {
    margin: 0 auto;
    padding: 0 2rem;
}

.content-wrapper--narrow {
    max-width: 700px;
}

.content-wrapper--wide {
    max-width: 1100px;
}

/* ===============================
   OFFSET ANCRE
=============================== */

section {
    scroll-margin-top: 120px;
}

/* ===============================
   HEADER (TOP BANNER)
=============================== */

.top-banner {
    display: flex;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-height: 100px;
}

.header-left {
    flex: 0 0 56.67%;
    background-color: #FAF8F5;
    display: flex;
    align-items: center;
    min-width: 272px;
    padding: 1.8rem 3rem 1.8rem 2rem; /* +0.3rem top-bottom */
    position: relative;
    z-index: 2;
}

.header-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: -16px;
    width: 100px;
    height: 100%;
    background-color: #FAF8F5;
    transform: skewX(-10deg);
    z-index: -1;
}

.header-right {
    flex: 0 0 43.33%;
    background-color: #FAF8F5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.8rem 2rem; /* harmonisé */
    position: relative;
    z-index: 1;
}
.header-right .btn-rendezvous {
    margin-left: 2rem; /* espace entre onglet et bouton */
    margin-right:1rem;
}

.logo h1 {
    font-family: 'Playfair Display', serif;
    color: #333;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-size: 1.7rem;
}

.logo span {
    color: #777;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
}

/* ===============================
   NAVIGATION
=============================== */

.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
    align-items: center;
    height: 100%;
}
.nav-menu > ul > li {
    position: relative;
}
.nav-menu > ul > li > a {
    text-decoration: none;
    color: #CC5500;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    padding: 0.5rem 1rem;
}

.nav-menu > ul > li > a:hover {
    background: #f2efeb;
    color: #000;
    border-radius: 8px;
}

/* Dropdown toggle button styling */
.dropdown-toggle {
    background: none;
    border: none;
    text-decoration: none;
    color: #CC5500;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.25s ease;
}

.dropdown-toggle:hover {
    color: #7c7c7c;
}

/* ------------------------------------------ */
/* DROPDOWN PREMIUM — Version clean et stable FORCÉE */
/* ------------------------------------------ */

.dropdown {
    position: relative; /* nécessaire pour le positionnement du sous-menu */
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;

    background: #f8f7f6;
    border-radius: 6px!important;
    padding: 1rem 0.3rem 0.4rem !important;

    width: max-content !important;
    height: auto !important;   

    list-style: none;
    margin: 0;

    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
    backdrop-filter: blur(4px);

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;

    z-index: 5000 !important;

    display: block !important;       /* neutralise le flex du menu principal */
}

/* Items du dropdown */
.dropdown-menu li {
    display: block;
    margin: 0;
}

.dropdown-menu li a {
    position: relative;
    display: block !important;
    padding: 0.65rem 1.4rem;
    white-space: nowrap;
    color: #c45800;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600; /* gras élégant */
}

/* Hover item */
.dropdown-menu li a:hover {
    background: #f2efeb;
    color: #000;
}

/* Ouverture du menu - hover pour desktop */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ouverture du menu - active state pour mobile (click) */
.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ===============================
   HAMBURGER MENU (MOBILE)
=============================== */

.hamburger {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 3px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}
@media (max-width: 800px) {

    .nav-menu {
        width: 85%;               /* réduit la largeur */
        max-width: 285px;         /* limite premium */
        margin-left: 10px;        /* pousse à droite */
        margin-right: 0rem;     /* petit espace esthétique */
        border-radius: 20px;      /* plus doux */
        padding: 1.4rem 1rem;
    }

    .nav-menu.open {
        display: flex;
    }
}


/* ===============================
   MAIN WRAPPER
=============================== */

main {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem; 
    flex: 1;
}

/* ===============================
   IMAGE STYLES
=============================== */

img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.image-container {
   margin: 2rem auto;
   text-align: center;
}

.pain-image {
    max-width: 800px;
}

/* ===============================
   SECTIONS (ANCIEN SYSTÈME MASQUAGE) — SUPPRIMÉ
=============================== */

/* Main sections are controlled by JavaScript */

#accueil {
    padding: 2.5rem 0 6rem;
}
#accueil .content-with-image {
    align-items: center;
    gap: 4rem;
}

#accueil h2 {
    font-size: 3rem;
    line-height: 1.2;
    color: #2F2F2D;
}

#accueil .text-content span {
    font-size: 1.05rem;
    color: #444;
}

#accueil .image-content img {
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

#services-cards {
    padding: 4rem 2rem;
    background-color: #e2e0de; /* <- même fond que ton site */
}

.service-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 265px;
    
}
@media (min-width: 800px) {
.service-card {
    max-width : 400px;
}
}

.service-card,
.service-card.card {
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.service-card p {
    margin-bottom: 1.5rem;
    color: #555;
    font-size: 1rem;
}

.service-btn {
    align-self: flex-start;
}



/* ===============================
   SECTION SERVICES — VERSION PREMIUM (FINAL FIX)
================================ */

/* SECTION ENTIÈRE — pleine largeur mais propre */
.content-section#services {
    background-color: #f8f7f6;
    color: #2F2F2D;
    padding: 4rem 0;
    text-align: left; /* le texte ne sera plus centré */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}
/* Réduit l’espace sous la section Services */
.content-section#services {
    padding-bottom: 0.2rem !important;
}

/* Réduit l’espace sous la version cartes si utilisée */
#services-cards {
    padding-bottom: 0.2rem !important;
}

/* CONTENEUR INTERNE — centre et limite la largeur */
/* .services-inner uses .content-wrapper .content-wrapper--narrow */

/* TITRE parfaitement aligné à gauche */
.services-inner h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    color: #2F2F2D;
    margin-bottom: 2.5rem;
    text-align: left !important; /* empêche toute réécriture */
}

/* LISTE PREMIUM */
.tarifs-list-premium {
    list-style: none;
    max-width: 700px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.tarifs-list-premium li {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.3rem 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.06);
}

.tarifs-list-premium .service-title {
    color: #333;
    font-weight: 500;
}

.tarifs-list-premium .service-price {
    color: #CC5500;
    font-weight: 600;
    font-size: 1.15rem;
}

/* ===============================
   BOUTON RENDEZ-VOUS
=============================== */

.nav-cta {
    margin-left: 0.5rem;
}
/* ===============================
   CONTENU AVEC IMAGE
=============================== */

.content-with-image {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1.5rem;
}

.text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.text-content span {
    display: block;
    line-height: 1.5;
}

.image-content {
    flex: 0 0 300px;
}

.image-content img {
    width: 100%;
    height: auto;
}

.image-content img {
    width: 100%;
    height: auto;
    margin: 0;
}

/* ===== HERO ACCUEIL ===== */
.hero {
    padding: 1.8rem 0 2.5rem;
}
.hero-layout {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 0rem;
}

.hero-text {
    flex: 1.1;
    margin-left: auto;
    margin-right: auto;
}
.hero-text h1 {
    font-size: 2.8rem;
    line-height: 1.2;
    color: #2F2F2D;
}
.hero-text p {
    margin-top: 1rem;
    font-size: 1.05rem;
    color: #555;
    max-width: 34rem;
}
.hero-image {
    flex: 0 0 380px; /* contrôle la taille totale du bloc image */
}
.hero-image img {
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    max-width: 100%;
    height: auto;
}

/* ==========================================
   SECTION APPROCHE — retrouve son fond vert
========================================== */
#approche-section {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 4rem 2rem;
    background-color: #A7B5A9; /* ton vert doux */
}

.services-wrapper {
    /* Uses .grid .grid--4cols */
    max-width: 1100px;
    margin: 0 auto;
    justify-content: center;
}

/* service-card uses .card--semi-transparent */
@media (max-width: 800px) {
    .services-wrapper {
        flex-direction: column;       /* 1 colonne */
        max-width: 100%;
    }

    .services-wrapper > * {
        flex: 1 1 100%;               /* les cartes s'étirent */
    }

    .service-card {
        min-width: 0;                  /* on enlève la limite des 230px */
        width: 100%;                   /* prend toute la largeur de la colonne */
    }
}

.service-card h3 {
    font-family: 'Playfair Display', serif;
    color: #2F2F2D;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.service-card p {
    color: #444;
    font-size: 1rem;
    line-height: 1.6;
}

/* Texte avant les cartes */
.services-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem; /* espace sous le texte */
    color: #2F2F2D;
}

.services-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    margin-bottom: 1rem;
    color: #2F2F2D;
}

.services-intro p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #3a3a3a;
    opacity: 0.9;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.approche-icon svg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 2rem auto;
    width: 150px;      /* modifiable */
    height: auto;
      opacity: 0.9; /* NE MARCHE PAS? très léger adoucissement */
}

.approche-icon svg * {
    stroke: #e9e9e9; /* NE MARCHE PAS ta couleur verte douce */
}
.svg-approche {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 1rem;
    max-width: 100px;
}

.icon-with-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px; /* espace respirant */
    margin: 50px 0;
}

/* Groupe horizontal */
#accueil .dots-group {
    display: flex;
    gap: 15px; /* plus compact et naturel */
    align-items: center;
}

/* Subtilité visuelle */
.dot {
    display: block;
    border-radius: 50%;
    background-color: rgb(195, 128, 128)!important; /* NE MARCHE PAS*/
}

/* Tailles organiques */
.dot-small {
    width: 10px;
    height: 10px;
}

.dot-medium {
    width: 13px;
    height: 13px;
}

.dot-tiny {
    width: 7px;
    height: 7px;
}

/* Micro variation verticale subtile (effet organique naturel) */
.left-dots .dot-small   { transform: translateY(-1px); }
.left-dots .dot-medium  { transform: translateY(2px); }
.left-dots .dot-tiny    { transform: translateY(-2px); }

.right-dots .dot-medium { transform: translateY(-1px); }
.right-dots .dot-small  { transform: translateY(1px); }
.right-dots .dot-tiny   { transform: translateY(-3px); }

/* Icône centrée */
.approche-icon svg {
    display: block;
}
.icon-with-dots {
        gap: 25px; /* rapproche l’icône des cercles */
        margin: 1px 0;
    }

    .dots-group {
        gap: 10px; /* réduit l’espace entre les points */
    }

    .dot-small {
        width: 8px;
        height: 8px;
    }

    .dot-medium {
        width: 10px;
        height: 10px;
    }

    .dot-tiny {
        width: 6px;
        height: 6px;
    }

    /* optionnel — micro recentrage vertical */
    .left-dots .dot-small   { transform: translateY(-1px); }
    .left-dots .dot-medium  { transform: translateY(1px); }
    .left-dots .dot-tiny    { transform: translateY(-1px); }

    .right-dots .dot-medium { transform: translateY(-1px); }
    .right-dots .dot-small  { transform: translateY(1px); }
    .right-dots .dot-tiny   { transform: translateY(-2px); }

    /*—————— À PROPOS ——————*/

.about-section {
    text-align: flex-start;
    padding: 80px 20px;
    max-width: 800px;
    margin: auto;
}

.about-section h2 {
    font-size: 32px;
    margin-bottom: 30px;
    color: #333;
}

.about-text p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #333;
}

/* Carte accroche */
.about-card {
    /* Uses .card .card--beige .cta-section--beige */
    padding: 35px 40px;
    margin-top: 40px;
}

.about-card p {
    font-size: 20px;
    margin: 0;
    font-style: italic;
    color: #333;
}



/* DIVISION SUBTILE */

.divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 20px auto;
}
@media (max-width: 800px) {

    .divider {
        margin: 10px!important;
    }
}

/* Ligne large par défaut (desktop)
N'EXISTE PLUS? */
.divider .line {
    height: 1px;
    background-color: #e1dad1;
    display: block;
    width: 340px;       /* ← LIGNE PLUS LARGE */
    max-width: 40%;     /* ← Empêche que ça dépasse sur petits écrans */
}

/* Point central 
N'EXISTE PLUS?*/
.divider .dot {
    width: 10px;
    height: 10px;
    background-color: #e1dad1;
    border-radius: 50%;
}


/*—————— TARIFS ——————*/

.tarifs-section {
    padding: 60px 20px;
    background-color: #f8f7f6;
    border-radius: 20px;
    max-width: 900px;
    margin: auto;
}

.tarifs-section h2 {
    text-align: left !important;  
    font-size: 32px;
    margin-bottom: 30px;
    color: #fff;
}

.tarifs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tarifs-list li {
    background: rgba(255,255,255,0.25);
    margin: 15px 0;
    padding: 18px 22px;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    backdrop-filter: blur(4px);
}
/* ===============================
   CORRECTIF FINAL SECTION SERVICES
================================ */

/* Titre en foncé */
.content-section#services h2 {
    color: #2F2F2D !important;
}

/* Texte de la liste en foncé */
.tarifs-list-premium li,
.tarifs-list-premium .service-title,
.tarifs-list-premium .service-price {
    color: #2F2F2D !important;
}

/* MAIS les prix doivent redevenir orange */
.tarifs-list-premium .service-price {
    color: #CC5500 !important;
}



/* ===============================
   TITRES
=============================== */

h1 {
    font-size: 2.5rem;
    color: #CC5500;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #CC5500;
}

/* ================= FOOTER PREMIUM ================= */
.footer {
    background-color: #F4F2EE;
    border-top: 1px solid rgba(0,0,0,0.04);
    color: #2F2F2D;
    width: 100%;
    font-family: inherit;
    margin-top: 60px;
}

/* Top section compact */
.footer-top {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Typo resserrée */
.footer-col p {
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 2px 0;
}

.footer-col h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: flex-start;
    margin-top: 0.5rem;
    margin-left: 0.2rem;
}

.social-icon {
    width: 22px;
    height: 22px;
    display: block;
    fill: #6f7f73;
}

.footer-social a {
    display: inline-flex;
    align-items: flex-start;
}
.footer-social-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.9rem;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1.2;
    margin-bottom: 0.1rem;
}

.social-icon {
    width: 18px;
    height: 18px;
    fill: #3535f0; /* vert sauge */
    margin-right: 0.55rem;
    opacity: 0.85;
    vertical-align: middle;
    flex-shrink: 0;
}
.footer-social-link.linkedin .social-icon {
    fill: #1c7bd3!important; /* bleu LinkedIn officiel */
}

.social-label {
    font-size: 0.93rem;
    color: #3b3a3a;
    line-height: 1.35;
}
@media (min-width: 768px) {
    .social-icon {
        width: 22px;
        height: 22px;
        position: relative;
        top: 0; /* ajuste à 0.5px ou 1px si besoin */
    }

    .social-label {
        font-size: 0.96rem;
    }
    .footer-social-link {
        align-items: center;
    }
    /* correction optique spécifique à LinkedIn */
    .footer-social-link.linkedin .social-icon {
        position: relative;
        top: -2px; /* ajuste entre 0.5px et 1px si besoin */
    }
    .footer-social {
        gap : 0.35rem;
    }
}

.footer-social-link:hover .social-icon,
.footer-social-link:hover .social-label {
    opacity: 1;
    color: #b64c01; /* accent */
}

/* Icônes 
N'EXISTE PLUS?*/
.icon {
    margin-right: 6px;
    color: #b5a7b5;
    font-size: 1rem;
}

/* Bouton premium discret */
.rdv-btn {
    /* Uses .btn */
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(204, 85, 0, 0.15);
}

.rdv-btn:hover {
    box-shadow: 0 4px 8px rgba(204, 85, 0, 0.25);
}

/* Bas du footer */
.footer-bottom {
    background-color: #ECE9E4;
    text-align: center;
    padding: 10px 0;
    font-size: 0.85rem;
    color: #2F2F2D;
}

/* Desktop layout */
@media (min-width: 800px) {
    .footer-top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 30px;
    }

    .footer-col {
        flex: 1;
    }

    .footer-btn {
        align-self: center;
    }
}
/* ===========================
   Footer MOBILE PREMIUM — Version équilibrée
=========================== */
@media (max-width: 800px) {

    .footer-top {
        padding: 20px 16px !important;
        gap: 10px !important;
    }

    /* Texte principal légèrement augmenté */
    .footer-col p {
        font-size: 0.90rem !important;
        line-height: 1.35 !important;
    }

    /* Titre d'adresse plus visible mais pas dominant */

    .footer-col h4 {
        font-family: inherit !important;   /* même police que le texte */
        font-size: 1rem !important;        /* lisible mais discret */
        font-weight: 600 !important;       /* subtil, pas massif */
        text-transform: none !important;   /* PAS de majuscules */
        letter-spacing: 0 !important;      /* plus naturel */
        margin-bottom: 4px !important;
        color: #3c3c3c !important;         /* plus doux que le noir */
    }


    /* Icônes légères mais visibles */
    .icon {
        font-size: 1rem !important;
        opacity: 0.85;
        margin-right: 6px !important;
        position: relative;
        top: 1px;
    }

    /* Bouton légèrement plus confortable */
    .rdv-btn {
        padding: 11px 20px !important;
        font-size: 0.95rem !important;
        border-radius: 8px !important;
        width: fit-content !important;
        margin: 8px auto 12px auto !important;
    }

    /* espace AVANT le bouton RV */
    .footer-btn {
        margin-top: 20px !important;   /* était trop serré → maintenant confortable */
    }
}
.contact-details a {
    pointer-events: auto !important;
    cursor: pointer !important;
}
.contact-details p {
    pointer-events: auto !important;
}
.footer-item {
    display: flex;
    align-items: center;
    gap: 4px; /* espace icône ↔ texte */
    margin-bottom: 12px;
}

.footer-email {
    color: #3A3A3A;               /* ton gris premium */
    text-decoration: none;        /* enlève le bleu souligné */
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.footer-email2 {
    color: #3A3A3A;               /* ton gris premium */
    text-decoration: none;        /* enlève le bleu souligné */
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    transition: color 0.25s ease, opacity 0.25s ease;
}

.footer-email:hover {
    color: #b64c01;               /* léger orange brûlé */
    opacity: 0.8;
    text-decoration: underline;   /* soulignement discret au hover */
}

.icon {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* =========================================================
     PAGE BLESSURES — HERO AVEC IMAGE FLOUE + BLOC TEXTE
   ========================================================= */

.blessures-hero {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 1.5rem 1.5rem 8rem;         /* espace équilibré */
    background-image: url("../assets/blessures.jpg");
    background-size: 1500px auto;        /* largeur fixe pour garder le sujet visible */
    background-position: 50% 99%;        /* on voit davantage le haut du corps */
    background-repeat: no-repeat;
}

/* VOILE + FLOU */
.blessures-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(248,247,246,0.05) 0%,
        rgba(248,247,246,0.35) 55%,
        #f8f7f6 100%
    );
    backdrop-filter: blur(3px);
}

/* BLOC TEXTE BLANC */
.blessures-hero-card {
    /* Uses .card .card--white .card--large */
    position: relative;
    max-width: 780px;
    margin: 10rem auto 0;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.blessures-hero-card h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.4rem;
    color: #cc5500;
    margin-bottom: 1.5rem;
}

.blessures-hero-card p {
    font-size: 1.05rem;
    color: #3c3c3c;
    line-height: 1.7;
    margin-bottom: 0.7rem;
}


/* ===============================
   VERSION MOBILE
=============================== */

@media (max-width: 800px) {

    .blessures-hero {
        padding-top: 15rem;                 /* colle au header, pas de bande blanche */
        padding-bottom: 4rem;
        padding-left: 1.3rem;
        padding-right: 1.3rem;

        min-height: 260px;              /* garantit qu'on voit l'image */

        background-image: url("../assets/blessures-mobile.jpg");
        background-size: auto 50%;
        background-repeat: no-repeat;

        /* plus la 2e valeur est grande, plus on descend dans l'image */
        background-position: 50% 0%;   /* sur mobile : on voit bien les mains/nuque */
    }

    .blessures-hero::before {
        background: linear-gradient(
            to bottom,
            rgba(248, 247, 246, 0.05) 0%,
            rgba(248, 247, 246, 0.35) 55%,
            #f8f7f6 100%
        );
        backdrop-filter: blur(0px);
    }

    .blessures-hero-card {
        margin-top: 0rem;               /* bloc blanc plus proche de l'image */
        max-width: 100%;
        padding: 1.3rem 1.3rem;
        border-radius: 18px;
    }

    .blessures-hero-card h2 {
        font-size: 2rem;
    }
}


/* =========================================================
   RAISONS COURANTES — CARTES VERTES
   ========================================================= */

.blessures-reasons {
    max-width: 1100px;
    margin: 0 auto 3.5rem;
    padding: 0 2rem;
}

.blessures-reasons h3 {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    color: #2f2f2d;
}

.reasons-grid {
    /* Uses .grid .grid--3cols */
    gap: 1.5rem;
}

.reasons-grid > * {
    flex: 1 1 calc(33.333% - 1rem);
    min-width: 250px;
}

.reason-card {
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}

.reason-card h4 {
    font-size: 1.05rem;
    color: #2f2f2d;
    margin-bottom: 0.5rem;
}

.reason-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #474747;
}


/* ===============================
   SECTION MON APPROCHE — PREMIUM
=============================== */

/* Conteneur principal */
.blessures-approche {
    max-width: 800px;
    margin: 3rem auto 4rem;
    padding: 0 1.5rem;
}

/* Titre + soulignement discret */
.blessures-approche h3 {
    text-align: center;
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    margin-bottom: 0.8rem;
    color: #2f2f2d;
    position: relative;
}

.blessures-approche h3::after {
    content: "";
    display: block;
    width: 45px;
    height: 2px;
    background-color: rgba(120, 135, 120, 0.35); /* vert doux discret */
    margin: 0.6rem auto 1.8rem;
    border-radius: 2px;
}

/* Bloc doux autour du contenu */
.approche-inner {
    background: rgba(250, 248, 245, 0.6);
    border-radius: 14px;
    padding: 0rem 2rem;
    box-shadow: none;
    border: none;
}

/* Paragraphes */
.approche-inner p {
    font-size: 1rem;
    line-height: 1.7;
    color: #3d3d3d;
    margin-bottom: 1rem;
}

/* Liste premium */
.approche-inner ul {
    list-style: none; /* enlève les puces par défaut */
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.approche-inner li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.6rem;
    color: #3d3d3d;
    line-height: 1.6;
}

/* Puce élégante personnalisée */
.approche-inner li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    background-color: #c7d5c8; /* vert doux premium */
    border-radius: 50%;
    opacity: 0.9;
}


/* =========================================================
   CITATION — FOND VERT DOUX PLEIN ÉCRAN
   ========================================================= */

/* .blessures-quote uses .cta-section .cta-section--light-green */

.blessures-quote .quote-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.quote-deco {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1.2rem;
}

.quote-deco span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f0f5f1;
}

.quote-text {
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #2f2f2d;
    margin-bottom: 0.7rem;
}

.quote-author {
    font-size: 0.95rem;
    color: #4e4e4e;
}


/* =========================================================
   SECTION OBJECTIF + CTA
   ========================================================= */

.blessures-objectif {
    max-width: 800px;
    margin: 3rem auto 1.5rem;
    padding: 0 2rem 2.5rem;
    text-align: center;
}

.blessures-objectif h3 {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    margin-bottom: 1.3rem;
    color: #2f2f2d;
}

.blessures-objectif p {
    font-size: 1rem;
    color: #3c3c3c;
    line-height: 1.7;
    margin-bottom: 1.6rem;
}


/* =========================================================
   RESPONSIVE — GRILLE DES CARTES
   ========================================================= */

@media (max-width: 800px) {
    .reasons-grid > * {
        flex: 1 1 calc(50% - 0.75rem);
    }
}

@media (max-width: 800px) {
    .reasons-grid {
        flex-direction: column;
    }
    
    .reasons-grid > * {
        flex: 1 1 100%;
    }
}

/* Lien CTA (version plus légère / premium) */
.cta-link {
  margin-top: 14px;
}

.cta-link a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;

  color: #514e4e;
  font-weight: 500;
  font-size: 0.95em; /* léger downscale = moins massif */
  text-decoration: none;

  padding-bottom: 2px;
}

.cta-link a:hover {
  border-bottom-color: rgba(129, 120, 120, 0.945);
  opacity: 0.8;
}

.cta-arrow {
  font-size: 0.95em;
}

/* Responsive : garde l'effet “statement” sans être trop massif */
@media (max-width: 768px) {
  .mv-callout {
    padding: 26px 22px;
    border-radius: 22px;
  }

  .mv-callout__text {
    font-size: 1rem;
  }
}

/* -------------------------------------------------- */
/*     SECTION DOULEURS — HERO - MOBILE FIRST (encadré)      */
/* -------------------------------------------------- */

#douleurs {
    padding: 20px 0;
}
@media (max-width: 800px){
/* Conteneur interne */
#douleurs .douleur-page {
    width: 100%;
    display: flex;
    justify-content: center;
}
#douleurs .cp-hero-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    z-index: -2;
}

#douleurs .cp-hero-premium {
    position: relative;
    padding: 40px 40px;
    border-radius: 16px;
    z-index: 1;

    /* IMPORTANT : AUCUN background ici */
    background: none;
}

/* Fade horizontal calibré pour #f8f7f6 (fond réel) */
#douleurs .cp-hero-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
                /* Fade vertical (haut -> bas) */
      background: 
        /* Fade vertical (haut -> bas) */
        linear-gradient(
            to bottom,
            rgba(248,247,246,1) 0%,
            rgba(248,247,246,0) 40px,
            rgba(248,247,246,0) calc(100% - 40px),
            rgba(248,247,246,1) 100%
        ),

        /* Fade horizontal (gauche -> droite) */
        linear-gradient(
            to right,
            rgba(248,247,246,1) 0px,
            rgba(248,247,246,0) 60px,
            rgba(248,247,246,0) calc(100% - 60px),
            rgba(248,247,246,1) 100%
        );

    pointer-events: none;
    z-index: -1;
}


#douleurs .cp-hero-content h1 {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: #c45d04; /* Orange brûlé premium */
    margin-bottom: 12px;
    justify-content: center;
}

#douleurs .cp-hero-content p {
    line-height: 1.55;
    margin-bottom: 12px;
}
.cp-hero-content {
    background: rgba(255,255,255,0.06);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.03);
}
/* Cacher l’image desktop en mobile */
    .cp-hero-visual,
    .cp-hero-visual img,
    .cp-hero-band {
        display: none !important;
    }

}


/* -------------------------------------------------- */
/*                     TABLETTE                       */
/* -------------------------------------------------- */

@media (min-width: 800px) and (max-width: 899px) {

    #douleurs .cp-page {
        width: 85%;
        padding: 40px;
    }

    #douleurs .cp-hero-premium {
        flex-direction: row;
        align-items: center;
        position: relative;
        min-height: 260px;
    }

    #douleurs .cp-hero-content {
        width: 60%;
    }
}

/* -------------------------------------------------- */
/*                     DESKTOP                        */
/* -------------------------------------------------- */

@media (min-width: 800px) {

    
        #douleurs .cp-page {
        padding: 10px 50px 60px;
        max-width: 1100px;
        margin: 0 auto!important;  /* ← essentiel pour garder l’encadré centré */
    }

    #douleurs .cp-hero-content h1 {
        font-size: 2.3rem;
    }
.cp-hero-premium {
    position: relative;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 4px 22px rgba(0,0,0,0.08);
    padding: 40px 26px 40px;
    margin-bottom: 90px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: visible !important;
}

/* Empêche que le texte passe sous l’image */
.cp-hero-premium .cp-hero-content {
    position: relative;
    z-index: 2;
    padding-right: 120px; /* ← espace pour l’image, ajuste au besoin */
}

/* Bande verticale (affichée seulement sur desktop plus bas) */
.cp-hero-band {
    display: none;
}

/* Conteneur-Bloc image : truc clé pour faire déborder */
.cp-hero-visual {
    position: absolute;
    right: -50px;   /* ← débordement à droite */
    top: 50%;               /* centre vertical */
    transform: translateY(-50%); /* ajuste pour un centrage parfait */
    z-index: 3;
    overflow: visible;
}
.cp-hero-premium {
        display: flex;
        align-items: center;  /* ← centre verticalement le texte et l'image */
        position: relative;
    }
    .cp-hero-premium .cp-hero-content {
        padding-right: 200px; /* ← plus d’espace pour l’image */
    }
    .cp-hero-visual img {
        width: 225px;
        max-width: none;
        position: relative;
        z-index: 6 !important;
    }
    .cp-hero-visual {
        position: absolute!important;
        right: -40px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5 !important;
        width: auto;
    }

    /* Cacher l'image mobile en desktop */
.cp-approche-image {
    display: none !important;
}

    /* Bande verticale décorative derrière l’image */
    /* La bande verte derrière l'image */
    .cp-hero-band {
        display: block;
        position: absolute;
        right: -4%;
        top: 6%;
        bottom: 0;
        width: 220px;
        background-color: #DDE3D8;
        border-radius: 12px;
        z-index: 1!important;
    }

    .approche-divider {
        width: 1.5px;                          /* épaisseur fine */
        background-color: rgba(0,0,0,0.18);   /* gris subtil */
        height: 260px;                         /* ajuste la hauteur */
        margin: 0 auto;                        /* centre la ligne */
        border-radius: 2px;
    }

    /* Structure 2 colonnes */
.cp-approche-columns {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left; /* texte à gauche */
}

.cp-approche-columns > *:first-child {
    flex: 0 0 auto;
}

.cp-approche-columns > *:last-child {
    flex: 1 1 auto;
}
}



/* =========================================================
   APPROCHE — FULL WIDTH
   ========================================================= */

/* === SECTION VERTE === */
.cp-approche-premium {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: #d0d7cc;
    padding: 70px 30px 90px;
    text-align: center;
    color: #4A4A48;
}

.cp-approche-premium h2 {
  margin-bottom: 50px;
    color: #3E3E3E; /* gris foncé */
    position: relative;
    display: inline-block; /* nécessaire pour centrer la ligne */
}
/* petite ligne subtile */
.cp-approche-premium h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px; /* distance sous le texte */
    transform: translateX(-50%);

    width: 60px;        /* longueur de la ligne : ajuste selon goût */
    height: 3px;         /* épaisseur subtile */
    border-radius: 3px;  /* arrondi doux */
    background-color: #999b98; /* ton vert-gris subtil comme dans ton exemple */
    opacity: 0.7;        /* encore plus délicat */
}

/* Texte */
.cp-approche-text ul {
    list-style: none;       /* enlever les puces natives */
    padding-left: 0;
    margin-left: 0;
    margin-top: 24px;
}

/* Image */
.cp-approche-image img {
    width: 70%;
    max-width: 240px;
    margin: 0 auto;
    display: block;
    filter: brightness(0.97); /* entre 0.90 et 0.95 */
}
.cp-approche-text ul li {
    position: relative;
    padding-left: 26px;     /* espace pour la puce */
    margin-bottom: 11px;    /* espace vertical */
    line-height: 1.55;
}

.cp-approche-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;               /* alignement vertical parfait */
    
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background-color: #3A3A3A;   /* gris foncé premium */
    opacity: 0.35;               /* subtil comme ton exemple */
}

/* =========================================================
   📱  PAGE DOULEURS CHRONIQUES - RESPONSIVE — MOBILE FIRST
   ========================================================= */

/* ----------- SECTION 1 : HERO PREMIUM (texte plein largeur) ----------- */
@media (max-width: 800px) {

    /* Le conteneur redevient fluide */
    #douleurs .cp-hero-premium {
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 0; /* évite les coins arrondis coupés */
    }

    /* Le texte prend toute la largeur */
    #douleurs .cp-hero-premium .cp-hero-content {
        max-width: 100%;
        margin: 0;
    }

    /* Titre plus mobile-friendly */
    #douleurs .cp-hero-premium h1 {
        font-size: 1.9rem;
        line-height: 1.25;
        text-align: left;
    }
}
/* Sur mobile, cacher la ligne */
@media (max-width: 800px) {
    .approche-divider {
        display: none;
    }
}

@media (max-width: 800px) {

    .cp-approche-columns {
        display: flex;
        max-width: 100%;
        text-align: left;
        flex-direction: column-reverse;
    }

    /* Texte : marges harmonieuses */
    .cp-approche-text {
        margin-bottom: 30px;
        padding: 0 20px;
    }

    /* Image centrée */
    .cp-approche-image {
        text-align: center;
        padding: 0 20px;
        margin-top: 20px;
    }

    .cp-approche-image img {
        max-width: 210px; /* ajuste au besoin */
        width: 100%;
        height: auto;
        margin: 0 auto 32px;
    }

    /* Titre mobile : centré mais légèrement plus compact */
    .cp-approche-premium h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .cp-approche-premium h2::after {
        bottom: -10px;
        width: 50px;
        height: 3px;
        opacity: 0.5;
    }
}

/* -------------------------------------------------- */
/*     SECTION DOULEURS — HERO - MOBILE FIRST (encadré)      */
/* -------------------------------------------------- */

#douleurs {
    padding: 20px 0;
}
@media (max-width: 800px){
/* Conteneur interne */
#douleurs .douleur-page {
    width: 100%;
    display: flex;
    justify-content: center;
}
#douleurs .cp-hero-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    z-index: -2;
}

#douleurs .cp-hero-premium {
    position: relative;
    padding: 40px 40px;
    border-radius: 16px;
    z-index: 1;

    /* IMPORTANT : AUCUN background ici */
    background: none;
}

/* Fade horizontal calibré pour #f8f7f6 (fond réel) */
#douleurs .cp-hero-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
                /* Fade vertical (haut -> bas) */
      background: 
        /* Fade vertical (haut -> bas) */
        linear-gradient(
            to bottom,
            rgba(248,247,246,1) 0%,
            rgba(248,247,246,0) 40px,
            rgba(248,247,246,0) calc(100% - 40px),
            rgba(248,247,246,1) 100%
        ),

        /* Fade horizontal (gauche -> droite) */
        linear-gradient(
            to right,
            rgba(248,247,246,1) 0px,
            rgba(248,247,246,0) 60px,
            rgba(248,247,246,0) calc(100% - 60px),
            rgba(248,247,246,1) 100%
        );

    pointer-events: none;
    z-index: -1;
}


#douleurs .cp-hero-content h1 {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: #c45d04; /* Orange brûlé premium */
    margin-bottom: 12px;
    justify-content: center;
}

#douleurs .cp-hero-content p {
    line-height: 1.55;
    margin-bottom: 12px;
}
.cp-hero-content {
    background: rgba(255,255,255,0.06);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.03);
}
/* Cacher l’image desktop en mobile */
    .cp-hero-visual,
    .cp-hero-visual img,
    .cp-hero-band {
        display: none !important;
    }

}


/* -------------------------------------------------- */
/*                     TABLETTE                       */
/* -------------------------------------------------- */

@media (min-width: 800px) and (max-width: 899px) {

    #douleurs .cp-page {
        width: 85%;
        padding: 40px;
    }

    #douleurs .cp-hero-premium {
        flex-direction: row;
        align-items: center;
        position: relative;
        min-height: 260px;
    }

    #douleurs .cp-hero-content {
        width: 60%;
    }
}

/* -------------------------------------------------- */
/*                     DESKTOP                        */
/* -------------------------------------------------- */

@media (min-width: 800px) {

    
        #douleurs .cp-page {
        padding: 10px 50px 60px;
        max-width: 1100px;
        margin: 0 auto!important;  /* ← essentiel pour garder l’encadré centré */
    }

    #douleurs .cp-hero-content h1 {
        font-size: 2.3rem;
    }
.cp-hero-premium {
    position: relative;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 4px 22px rgba(0,0,0,0.08);
    padding: 40px 26px 40px;
    margin-bottom: 90px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: visible !important;
}

/* Empêche que le texte passe sous l’image */
.cp-hero-premium .cp-hero-content {
    position: relative;
    z-index: 2;
    padding-right: 120px; /* ← espace pour l’image, ajuste au besoin */
}

/* Bande verticale (affichée seulement sur desktop plus bas) */
.cp-hero-band {
    display: none;
}

/* Conteneur-Bloc image : truc clé pour faire déborder */
.cp-hero-visual {
    position: absolute;
    right: -50px;   /* ← débordement à droite */
    top: 50%;               /* centre vertical */
    transform: translateY(-50%); /* ajuste pour un centrage parfait */
    z-index: 3;
    overflow: visible;
}
.cp-hero-premium {
        display: flex;
        align-items: center;  /* ← centre verticalement le texte et l'image */
        position: relative;
    }
    .cp-hero-premium .cp-hero-content {
        padding-right: 200px; /* ← plus d’espace pour l’image */
    }
    .cp-hero-visual img {
        width: 225px;
        max-width: none;
        position: relative;
        z-index: 6 !important;
    }
    .cp-hero-visual {
        position: absolute!important;
        right: -40px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5 !important;
        width: auto;
    }

    /* Cacher l'image mobile en desktop */
.cp-approche-image {
    display: none !important;
}

    /* Bande verticale décorative derrière l’image */
    /* La bande verte derrière l'image */
    .cp-hero-band {
        display: block;
        position: absolute;
        right: -4%;
        top: 6%;
        bottom: 0;
        width: 220px;
        background-color: #DDE3D8;
        border-radius: 12px;
        z-index: 1!important;
    }

    .approche-divider {
        width: 1.5px;                          /* épaisseur fine */
        background-color: rgba(0,0,0,0.18);   /* gris subtil */
        height: 260px;                         /* ajuste la hauteur */
        margin: 0 auto;                        /* centre la ligne */
        border-radius: 2px;
    }

    /* Structure 2 colonnes */
.cp-approche-columns {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left; /* texte à gauche */
}

.cp-approche-columns > *:first-child {
    flex: 0 0 auto;
}

.cp-approche-columns > *:last-child {
    flex: 1 1 auto;
}
}



/* =========================================================
   APPROCHE — FULL WIDTH
   ========================================================= */

/* === SECTION VERTE === */
.cp-approche-premium {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: #d0d7cc;
    padding: 70px 30px 90px;
    text-align: center;
    color: #4A4A48;
}

.cp-approche-premium h2 {
  margin-bottom: 50px;
    color: #3E3E3E; /* gris foncé */
    position: relative;
    display: inline-block; /* nécessaire pour centrer la ligne */
}
/* petite ligne subtile */
.cp-approche-premium h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px; /* distance sous le texte */
    transform: translateX(-50%);

    width: 60px;        /* longueur de la ligne : ajuste selon goût */
    height: 3px;         /* épaisseur subtile */
    border-radius: 3px;  /* arrondi doux */
    background-color: #999b98; /* ton vert-gris subtil comme dans ton exemple */
    opacity: 0.7;        /* encore plus délicat */
}

/* Texte */
.cp-approche-text ul {
    list-style: none;       /* enlever les puces natives */
    padding-left: 0;
    margin-left: 0;
    margin-top: 24px;
}

/* Image */
.cp-approche-image img {
    width: 70%;
    max-width: 240px;
    margin: 0 auto;
    display: block;
    filter: brightness(0.97); /* entre 0.90 et 0.95 */
}
.cp-approche-text ul li {
    position: relative;
    padding-left: 26px;     /* espace pour la puce */
    margin-bottom: 11px;    /* espace vertical */
    line-height: 1.55;
}

.cp-approche-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;               /* alignement vertical parfait */
    
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background-color: #3A3A3A;   /* gris foncé premium */
    opacity: 0.35;               /* subtil comme ton exemple */
}

/* =========================================================
   📱  PAGE DOULEURS CHRONIQUES - RESPONSIVE — MOBILE FIRST
   ========================================================= */

/* ----------- SECTION 1 : HERO PREMIUM (texte plein largeur) ----------- */
@media (max-width: 800px) {

    /* Le conteneur redevient fluide */
    #douleurs .cp-hero-premium {
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 0; /* évite les coins arrondis coupés */
    }

    /* Le texte prend toute la largeur */
    #douleurs .cp-hero-premium .cp-hero-content {
        max-width: 100%;
        margin: 0;
    }

    /* Titre plus mobile-friendly */
    #douleurs .cp-hero-premium h1 {
        font-size: 1.9rem;
        line-height: 1.25;
        text-align: left;
    }
}
/* Sur mobile, cacher la ligne */
@media (max-width: 800px) {
    .approche-divider {
        display: none;
    }
}

@media (max-width: 800px) {

    .cp-approche-columns {
        display: flex;
        max-width: 100%;
        text-align: left;
        flex-direction: column-reverse;
    }

    /* Texte : marges harmonieuses */
    .cp-approche-text {
        margin-bottom: 30px;
        padding: 0 20px;
    }

    /* Image centrée */
    .cp-approche-image {
        text-align: center;
        padding: 0 20px;
        margin-top: 20px;
    }

    .cp-approche-image img {
        max-width: 210px; /* ajuste au besoin */
        width: 100%;
        height: auto;
        margin: 0 auto 32px;
    }

    /* Titre mobile : centré mais légèrement plus compact */
    .cp-approche-premium h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .cp-approche-premium h2::after {
        bottom: -10px;
        width: 50px;
        height: 3px;
        opacity: 0.5;
    }
}

/* ----------- SECTION 1 : HERO PREMIUM — VERSION TABLETTE ----------- */
@media (min-width: 800px) and (max-width: 1100px) {

    #douleurs .douleur-page,
    #douleurs .cp-page {
        max-width: none;
        width: 100%;
        padding: 0;
        margin: 0;
        padding-right: 35px !important; /* crée l’espace à droite */
    }

    #douleurs .cp-hero-content {
        max-width: 100%;
        width: 100%;
    }

    #douleurs .cp-hero-visual {
    right: clamp(-70px, -6vw, -35px) !important;
}

    /* titre tablette : un peu plus compact */
    #douleurs .cp-hero-premium h1 {
        font-size: clamp(2rem, 4vw, 2.8rem);
        line-height: 1.2;
        margin-bottom: 20px;
    }

    #douleurs .cp-approche-premium {
    width: 100vw !important;
    position: relative;
    left: 4%;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}
}

.changement-section h2{
    padding-top:40px;
}
.cp-hero-content h1{
    padding-bottom : 25px;
    color: #3A3A3A;
}
.cp-hero-content p{
    padding-bottom: 25px;
}
.cp-approche-text p{
    padding-bottom: 15px;
}



/* ONCO   - Base de la section 
------------------------------*/

#cancer {
    padding: 4rem 2rem;
    background-color: #FAF9F7; /* blanc chaud */
}

/* Titres */
#oncologie h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.3rem;
    font-weight: 700;
    color: #2F2F2F;
    margin-bottom: 1.5rem;
}

#oncologie h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.5rem;
    margin-top: 2.3rem;
    margin-bottom: 0.75rem;
    color: #324039;
    font-weight: 600;
}

/* Texte */
#oncologie p {
    font-family: Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1.5rem;
}
.oncology-intro p {
    max-width: 950px; /* ajuste la largeur souhaitée */
    margin-left: 2rem;   /* aligné avec le titre */
    margin-bottom: 3rem; /* ne change pas l'espace sous le h2 */
}
.oncology-intro h2 {
    margin-left: 2rem;   /* aligné avec le texte */
}
.oncology-section-title h2 {
    margin-left: 2rem;   /* aligné avec le texte */
    padding-top: 1.5rem;
}

#oncologie ul {
    padding-left: 1.2rem;
    margin-bottom: 1.8rem;
}

#oncologie li {
    margin-bottom: 0.7rem;
}
@media (max-width: 800px) {
    .oncology-intro h2,
    .oncology-intro p,
    .oncology-section-title h2{
        margin-left: 0!important;
    }
}

/* Divider subtil (tu peux réutiliser existant si tu l’as déjà) */
#oncologie .section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0 2.5rem;
}

#oncologie .section-divider .line {
    width: 120px;
    height: 1px;
    background-color: #D0CBC4;
}

#oncologie .section-divider .dot {
    width: 10px;
    height: 10px;
    background-color: #D0CBC4;
    border-radius: 50%;
    margin: 0 10px;
}

/* Grille de cartes */
.oncology-grid {
    /* Uses .grid .grid--2cols */
    margin: 2.5rem 0 3rem;
}

.oncology-grid > * {
    flex: 1 1 calc(50% - 1rem);
    min-width: 300px;
}

.oncology-card {
    background-color: #f1ede6 !important; 
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.oncology-card h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #2F2F2F; 
    position: relative;
    padding-bottom: 0.75rem; /* espace entre le titre et la ligne */
    margin-bottom: 1.2rem;
}
.oncology-card h3::after {
    content: "";
    display: block;
    width: 100px;          /* longueur de la ligne */
    height: 3px;          /* épaisseur */
    background-color: #A7B5A9; /* vert sauge */
    border-radius: 2px;
    margin-top: 0.4rem;
}

.oncology-card-subtitle {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #6E6E6E;
    margin-bottom: 1rem;
}
.oncology-card ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.oncology-card li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.9rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.oncology-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 7px;
    height: 7px;
    background-color: #A7B5A9; /* ton vert sauge premium */
    border-radius: 50%;
}

/* Bloc vert de soutien */
.block-green.oncology-support {
    background-color: #A7B5A9;
    padding: 2.4rem 2rem;
    border-radius: 18px;
    margin: 3rem 0;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.block-green.oncology-support h3,
.block-green.oncology-support p {
    color: #FFFFFF;
}

/* CTA final */
.oncology-cta {
    /* Uses .cta-section .cta-section--white */
    margin-top: 4.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive mobile */
@media (max-width: 800px) {
    #cancer {
        padding: 3rem 1.5rem;
    }

    .oncology-grid {
        flex-direction: column;
    }
    
    .oncology-grid > * {
        flex: 1 1 100%;
    }

    #oncologie h2 {
        font-size: 1.9rem;
    }

    #oncologie h3 {
        font-size: 1.3rem;
    }

    .block-green.oncology-support {
        padding: 2rem 1.5rem;
    }

    .oncology-cta {
        padding: 1.8rem 1.5rem;
    }
}



/* ---------------------------------------------- */
/* SECTION NEUROLOGIE – STYLE PREMIUM HAUT DE GAMME */
/* ---------------------------------------------- */

#neurologiques {
    padding: 4rem 2rem;
    background-color: #FAF9F7; /* blanc chaud premium */
}

/* TITRES -------------------------------------- */

#neurologiques .content-section h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.3rem;
    font-weight: 700;
    color: #c76b01;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

#neurologiques .content-section h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.45rem;
    margin-top: 2.8rem;
    margin-bottom: 1rem;
    color: #324039;
    font-weight: 600;
}

.neuro-small-title {
    font-family: "Playfair Display", serif;
    font-size: 1.35rem;
    color: #324039;
    font-weight: 600;
    margin-bottom: 1rem;
}
.neuro-benefices {
    max-width: 620px;     /* plus étroit = beaucoup plus joli */
    margin: 4.5rem auto 2.5rem auto; /* remonte visuellement */
    text-align: left;   /* centre le bloc entier */
}

.neuro-benefices h3 {
    font-size: 2.1rem!important;
    margin-bottom: 0.8rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.neuro-benefices h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 160px;
    height: 2px;
    background-color: #b4bcb5;
    border-radius: 2px;
}

/* LISTE : centrée mais puces alignées à gauche */
.neuro-benefices .benefice-list {
    display: inline-block;
    text-align: left;
    margin-top: 1rem;
    list-style: none; /* enlève les puces natives */
    padding-left: 0;  /* enlève le retrait des listes */
}

.neuro-benefices li {
    position: relative;         /* nécessaire pour ::before */
    padding-left: 1.2rem;       /* espace pour ta puce custom */
    margin-bottom: 0.6rem;      /* espacement entre les lignes */
}
.neuro-benefices li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    background-color: #a3b3a4; /* vert doux premium */
    border-radius: 50%;
    opacity: 0.9;
}



/* PARAGRAPHES --------------------------------- */

#neurologiques .content-section p {
    font-family: Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1.5rem;
}


/* LISTES -------------------------------------- */

#neurologiques .content-section ul {
    padding-left: 1.2rem;
    margin-bottom: 2rem;
    color :#444;
}

#neurologiques .content-section li {
    margin-bottom: 0.45rem;
    font-size: 1.05rem;
    line-height: 1.6;
    
}

/* ---------------------------------------------- */
/* CARTES VERTES (sections de compréhension, impacts, etc.) */
/* ---------------------------------------------- */

.neuro-card {
    /* Uses .card .card--sage */
    max-width: 330px;
    width: 100%;
    box-shadow: 0 10px 26px rgba(0,0,0,0.10);
    padding: 1.8rem 1.6rem;
}
.neuro-card-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
    margin: 3rem 0;
}

.neuro-card-row > * {
    flex: 1 1 auto;
    min-width: 250px;
}

.neuro-card-row.center-row {
    justify-content: center; /* centre automatiquement les 2 cartes */
}

/* Titre plus doux */
.neuro-card h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.22rem;
    line-height: 1.3;
    margin-left: 0.5rem;
    margin-bottom: 1rem;
    margin-top: 0;
    color: #2E3A35; /* vert foncé élégant */
}
/* Listes */
.neuro-card ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}
/* Puces pleine largeur, alignées et propres */
.neuro-card li {
    position: relative;
    padding-left: 1rem; /* petit retrait pour garder la largeur */
    margin-bottom: 0.55rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #F8F8F8; /* blanc chaud pour contraster juste assez */
}
/* Puce ronde subtile */
.neuro-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background-color: #F8F8F8;
    border-radius: 50%;
    opacity: 0.9;
}

/* BLOCK FINAL (CTA DOUX PREMIUM) */
.neuro-cta {
    /* Uses .cta-section .cta-section--white */
    margin-top: 3rem;
    border-radius: 18px;
}

/* RESPONSIVE MOBILE ---------------------------- */
@media (max-width: 828px) {
    .neuro-card {
        padding: 2rem 1.4rem;
        max-width: 100%;
    }
}

@media (max-width: 800px) {

    #neurologiques {
        padding: 2.5rem 1.5rem;
    }

    #neurologiques .content-section h2 {
        font-size: 1.9rem;
        margin-top: 2.5rem;
    }

    #neurologiques .content-section h3 {
        font-size: 1.28rem;
        margin-top: 2.2rem;
    }




    .neuro-divider {
        transform: none;
        scale: 0.85;
    }

    .neuro-cta {
        padding: 1.6rem 1.3rem;
    }
    .neuro-card-row {
        flex-direction: column;
        align-items: center;
    }

    .neuro-card-row.center-row {
        justify-content: flex-start;
    }
}
/*ICONE*/
/* --- Divider organique : icône + points --- */

.neuro-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;             /* distance entre points et icône */
    margin: 3rem 0;          /* espace autour du divider */
    opacity: 0.9;            /* léger adoucissement optionnel */
}
.neuro-divider .dots-group {
    display: flex;
    align-items: center;
    gap: 35px;
}

@media (max-width: 700px) {

    /* Réduit l'espace entre les points */
    .dots-group {
        display: flex;
        gap: 24px!important; /* au lieu de 8–12px probablement */
    }

    /* Réduit l'espace entre chaque groupe et l'icone */
    .neuro-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px; /* réduit l’écart horizontal global */
    }
}

/* Style général des points */
.dot {
    display: inline-block;
    background-color: #D8D4CD!important;  /* blanc chaud premium */
    border-radius: 50%;
}

/* Tailles organiques */
.dot-small {
    width: 10px;
    height: 10px;
}

.dot-medium {
    width: 13px;
    height: 13px;
}

.dot-tiny {
    width: 6px;
    height: 6px;
}

/* Icône centrale */
.divider-icon img {
    width: 125px;             /* taille de l’icône */
    height: auto;
    opacity: 0.85;           /* douceur visuelle */
}
.neuro-divider .divider-icon img {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}



/* ---------------------------------------------- */
/* SECTION IMPACTS – FOND BEIGE PREMIUM + 2 COLS */
/* ---------------------------------------------- */

.neuro-impacts {
    background-color: #eeebe8; /* beige très doux, élégant */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 1rem 2rem 4rem;
    margin-top: 3rem;
}

.neuro-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* Titre + petit divider premium */

.neuro-section-title {
    font-family: "Playfair Display", serif;
    font-size: 1.7rem;
    color: #2F2F2F;
    margin-bottom: 0.6rem;
}

.neuro-section-divider {
    width: 90px;
    height: 3px;
    background-color: #A7B5A9; /* vert sauge premium */
    border-radius: 4px;
    margin-bottom: 2rem;
}

/* Intro */

.neuro-intro {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #444;
}

/* 2 colonnes élégantes */

.neuro-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 4rem;
    margin-bottom: 2.5rem;
}

.neuro-columns > * {
    flex: 1 1 calc(50% - 2rem);
    min-width: 300px;
}

.neuro-columns ul {
    padding-left: 1.2rem;
}

.neuro-columns li {
    list-style: none; /* retire la puce par défaut */
    position: relative;
    padding-left: 1.2rem;
}

.neuro-columns li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 7px;
    height: 7px;
    background-color: #A7B5A9; /* vert sauge */
    border-radius: 50%;
}

/* Encadré bas */

.neuro-note {
    background-color: #ffffff;
    border-left: 4px solid #A7B5A9;
    padding: 1.8rem 1.6rem;
    border-radius: 10px;
    font-size: 1.05rem;
    line-height: 1.65;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* MOBILE */

@media (max-width: 800px) {

    .neuro-impacts {
        padding: 2.5rem 1.5rem;
    }

    .neuro-columns {
        flex-direction: column;
        gap: 1rem;
    }
    
    .neuro-columns > * {
        flex: 1 1 100%;
    }
}

/* ===============================
   SECTION CANCER
=============================== */

/* SECTION SOUTIEN CORPS & ESPRIT – pleine largeur */
.oncology-support {
    background-color: #A7B5A9; /* vert sauge plein écran */
    width: 100%;
    padding: 6rem 0;
    border-radius: 0;  /* retire tout arrondi */
    box-shadow: none;  /* retire la carte */
}

/* Wrapper interne */
.oncology-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* au lieu de space-between */
    gap: 5rem; /* maintenant, il fonctionne */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}
.oncology-text {
    max-width: 480px; /* au lieu de 550px ou auto */
}

/* Texte */
.oncology-support .oncology-text h3 {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f5f8f1;
    margin-bottom: 1.5rem;
}

.oncology-support .oncology-text p {
    font-family: Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #f5f8f1;
    max-width: 550px;
}

/* Image illustrée */
.oncology-support .oncology-image img {
    width: 100%;
    max-width: 220px;
    opacity: 0.8;
    box-shadow: none!important;
}

.oncology-support {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;

    background-color: #A7B5A9;
    padding: 6rem 0;
}

/* Responsive */
@media (max-width: 800px) {
    .oncology-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    .oncology-support .oncology-image img {
        max-width: 220px;
        margin-top: 1rem;
    }
}

/* =========================================================
   PAGE VIEILLISSEMENT – VERSION SIMPLIFIÉE & FLUIDE
========================================================= */

#vieillissement {
  --sage: #A7B5A9;
  --beige: #EDE6DC;
  --warm: #FAF8F5;
  --ink: #1F2422;
  --muted: #5E6762;
  --accent: #B64C01;

  background: var(--warm);
  color: var(--ink);
}

/* Conteneur */
#vieillissement .aging-container {
  max-width: 900px;               /* plus étroit = meilleure lisibilité */
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* =========================================================
   TYPOGRAPHIE
========================================================= */

#vieillissement h1,
#vieillissement h2,
#vieillissement h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
}

#vieillissement h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0.5rem 0 1rem;
}

#vieillissement h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

#vieillissement p,
#vieillissement li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--muted);
}

#vieillissement strong {
  color: var(--ink);
  font-weight: 600;
  color:#444;
}

/* =========================================================
   HERO – SIMPLE, ÉDITORIAL
========================================================= */

#vieillissement .aging-hero {
  padding: 4rem 0 0.5rem;
}

#vieillissement .aging-lead {
  max-width: 120ch;
  margin-bottom: 1.6rem;
  padding-left: 1rem;
}

/* CTA */
#vieillissement .aging-hero-cta {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

/* Points clés */
#vieillissement .aging-hero-bullets {
  display: grid;
  gap: 0.8rem;
}

#vieillissement .aging-bullet {
  background: #fff;
  border-radius: 14px;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  gap: 0.7rem;
  max-width: 450px;
  margin-left:3rem;
}

/* =========================================================
   BLOC OBJECTIF (SEUL BLOC “CARTE” EN HAUT)
========================================================= */

#vieillissement .aging-hero-card {
  margin-top: 3rem;
  background: #fff;
  padding: 2rem;
  border-radius: 20px;
  border-left: 5px solid var(--sage);
}

#vieillissement .aging-divider-dots {
  display: none; /* on simplifie */
}

#vieillissement .aging-card-list {
  margin-top: 1.2rem;
}

#vieillissement .aging-card-item {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

#vieillissement .aging-icon {
  display: none; /* moins de bruit visuel */
}

/* =========================================================
   SECTIONS – UNE APRÈS L’AUTRE
========================================================= */

#vieillissement .aging-sections {
  padding: 1rem 0 4rem;
}

#vieillissement .aging-section-head {
  margin-bottom: 2rem;
}

/* Anciennes cartes → texte simple */
#vieillissement .aging-grid-3 {
  display: block;
}

#vieillissement .aging-card {
  margin-bottom: 2.2rem;
}
/* ======================================================
   VARIANTE – Cartes texte (Vieillissement)
====================================================== */

.aging-help-cards {
    margin-top: 2.5rem;
}

/* Cartes un peu plus larges, moins “denses” */
.aging-text-card {
    max-width: 720px; /* plus large que neuro-card classique */
    padding: 2rem 1.9rem;
    background-color: #b3c2b5;
}

/* Texte en paragraphe (pas en liste) */
.aging-text-card p {
    margin: 0;
    padding-left: 10px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2E3A35; /* même vert foncé que tes titres */
}

/* Optionnel : rythme vertical plus doux */
@media (max-width: 828px) {
    .aging-text-card {
        max-width: 100%;
        padding: 2.1rem 1.6rem;
    }
}
#vieillissement .neuro-card-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
    margin: 3rem 0 5rem;
}


/* ======================================================
   Mythes / Réalités – Pleine largeur réelle
====================================================== */

.aging-myths-block {
    background-color: #F2EEE7; /* beige doux */
    
    /* FORCER le plein écran */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    padding: 3.25rem 0;
}

/* Contenu centré */
.aging-myths-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.6rem;

    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 0rem;
}


/* Colonnes */
.aging-myths-column h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #1F2422;
}

.aging-myths-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aging-myths-column li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.9rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #3E4542;
}

/* Puce subtile */
.aging-myths-column li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #A7B5A9; /* sauge */
    font-size: 1.2rem;
}

/* Accent très léger pour les réalités */
.aging-myths-column--strong {
    padding-left: 3rem;
    border-left: 3px solid #A7B5A9;
}
.aging-myths-column {
    padding-right: 1.5rem;
}


/* Mobile */
@media (max-width: 768px) {
    .aging-myths-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .aging-myths-column--strong {
        padding-left: 0;
        border-left: none;
        border-top: 3px solid #A7B5A9;
        padding-top: 1.5rem;
    }
}


/* =========================================================
   PEUR DE TOMBER – SECTION PHARE
========================================================= */

#vieillissement .aging-fall {
  margin-top: 4rem;
}

#vieillissement .aging-fall-inner {
  display: block;
  background: transparent;
  padding: 0;
}

#vieillissement .aging-checklist {
  margin-top: 1.2rem;
  list-style: none;
  padding-left: 0;
}

#vieillissement .aging-checklist li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}

#vieillissement .aging-checklist li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--sage);
  font-size: 1.2rem;
}

/* Citation */
#vieillissement .aging-fall-card {
  margin-top: 2.5rem;
  background: #fff;
  padding: 2rem;
  border-radius: 20px;
}

#vieillissement .aging-quote {
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--accent);
  font-family: "Playfair Display", serif;
}

/* =========================================================
   CTA FINAL – CLAIR ET CALME
========================================================= */

#vieillissement .aging-cta {
  margin-top: 4rem;
}

#vieillissement .aging-cta-inner {
  background: #fff;
  border-radius: 20px;
  padding: 2.2rem;
  box-shadow:0 8px 18px rgba(0,0,0,0.05) ;
  display: block;
}

#vieillissement .aging-cta-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {
  #vieillissement .aging-hero-cta {
    flex-direction: column;
  }
}



/* ===============================
   SECTIONS CONTRÔLÉES PAR LE MENU
=============================== */

main > section {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding-bottom: 1.5rem;
    min-height: auto;
}

main > section.active {
    display: block;
    opacity: 1;
}

main > section.fade-in { 
    opacity: 1; 
}

main > section.fade-out { 
    opacity: 0; 
}

/* Ajustements header : plus flexible, pour que le bouton ne déborde pas */
.header-left {
    flex: 0 1 auto;          /* largeur selon le contenu (logo) */
    padding-right: 1.5rem;
}

.header-right {
    flex: 1 1 auto;          /* prend le reste de la place */
    justify-content: flex-end;
    gap: 1rem;               /* espace entre menu, bouton, hamburger */
}

/* Menu un peu plus compact pour laisser de la place au bouton */
.nav-menu ul {
    gap: 1.5rem;
}

.nav-menu ul li a {
    font-size: 0.95rem;
}

/* Bouton rendez-vous dans le header : plus léger */
.header-cta {
    /* Uses .btn .btn--header */
    box-shadow: none;
}


/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 800px) {

    /* Reduce all heading font sizes by 2px on mobile */
    h1 {
        font-size: calc(2.5rem - 2px);
    }
    
    h2 {
        font-size: calc(2rem - 2px);
    }
    
    /* For h3-h6, reduce by 2px from their computed size */
    h3 {
        font-size: calc(1.75rem - 2px); /* Typical browser default for h3 */
    }
    
    h4 {
        font-size: calc(1.5rem - 2px); /* Typical browser default for h4 */
    }
    
    h5 {
        font-size: calc(1.25rem - 2px); /* Typical browser default for h5 */
    }
    
    h6 {
        font-size: calc(1rem - 2px); /* Typical browser default for h6 */
    }

   /* Header : fond clair, pas tout orange */
    .top-banner {
        flex-direction: row;
    }

    .header-left {
        flex: 1;
        padding: 0.8rem 1.2rem;
    }

    .header-left::after {
        display: none; /* on simplifie sur mobile */
    }

    .header-right {
        flex: 1;
        display:flex;
        align-items : center;
        justify-content : flex-end;
        padding: 1rem 1.2rem;
        gap: 1rem;
        background-color: #FAF8F5;  /* 👈 important : plus de gros bloc orange */
    }
    .header-cta {
        padding: 0.45rem 1rem;
        font-size: 0.8rem;
        border-radius: 999px;
        white-space:nowrap;
    }
    .logo h1 {
        font-size: 1.25rem;
    }

    /* Menu coulissant : c'est lui qui devient orange, pas le header */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: #FAF8F5;  /* overlay orange */
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 1000;
        padding-top: 80px;
    }

    .nav-menu.active {
        right: 0;
    }

    /* Bouton plus petit sur mobile, pour rester harmonieux */
    .header-cta {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
        border-radius: 999px;     /* pill plus doux */
    }


    .hamburger {
        display: flex;
    }


    .nav-menu ul {
        flex-direction: column;
        padding: 2rem;
    }

    .nav-menu ul li {
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.3);
    }
    
    /* Hide dropdown button on mobile */
    .nav-menu .dropdown-toggle {
        display: none;
    }
    
    /* Dropdown menu on mobile - always visible with divider */
    .nav-menu .dropdown {
        position: relative;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
    
    .nav-menu .dropdown-menu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: block !important;
    }
    
    /* Add divider title before dropdown menu on mobile with lines */
    .nav-menu .dropdown::before {
        content: "En savoir davantage";
        display: block;
        padding: 1rem 0 0.5rem 0;
        border-top: 1px solid rgba(255,255,255,0.3);
        margin-top: 1rem;
        color: #CC5500;
        font-weight: 600;
        font-size: 1rem;
        text-align: center;
        position: relative;
        /* Left and right lines using background gradients */
        background-image: 
            linear-gradient(to right, #CC5500 0%, #CC5500 30px, transparent 30px),
            linear-gradient(to left, #CC5500 0%, #CC5500 30px, transparent 30px);
        background-size: calc(50% - 80px) 1px, calc(50% - 80px) 1px;
        background-position: left calc(50% + 6px), right calc(50% + 6px);
        background-repeat: no-repeat;
    }
    
    .nav-menu .dropdown-menu li {
        border-bottom: none;
        padding: 0.5rem 0;
        text-align: center;
        position: relative;
    }
    
    /* Add orange dot to the left of each dropdown link */
    .nav-menu .dropdown-menu li a::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #CC5500;
        border-radius: 50%;
        margin-right: 0.5rem;
        vertical-align: middle;
    }
    
    /* Close the divider section after the last dropdown item */
    .nav-menu .dropdown-menu li:last-child {
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        margin-bottom: 1rem;
    }
    
    .nav-menu .dropdown-menu li a {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        text-align: left;
        display: inline-block;
    }

      #accueil {
        padding-top: 1.2rem !important; /* plus serré sur mobile */
    }

  .content-with-image {
        flex-direction: column-reverse !important;
    }

    /* HERO MOBILE */
    .hero {
        padding: 3rem 0 2.5rem;
    }

    .hero-layout {
        flex-direction: column-reverse;
        text-align: center;
    }

    .hero-text h1 {
        font-size: 2.1rem;
    }

    .hero-image img {
        max-width: 280px;
        margin: 0 auto;
    }

    .image-content img {
        max-width: 300px;
    }

    /* Cartes & services */
    #services-cards {
        padding: 3rem 1.5rem;
    }

    .services-wrapper {
        flex-direction: column;
    }
    
    .services-wrapper > * {
        flex: 1 1 100%;
    }

    .service-card {
        padding: 1.5rem;
    }

    .services-intro h2 {
        font-size: 1.9rem;
    }

    .services-intro p {
        font-size: 1rem;
    }

    /* Divider */
    .divider {
        gap: 10px;
        margin: 60px auto;
    }

    .divider .line {
        width: 215px;
        max-width: 75%;
    }

    .divider .dot {
        width: 8px;
        height: 8px;
    }

    /* LISTE TARIFS */
    .tarifs-list-premium li {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 1.2rem;
    }

    .tarifs-list-premium .service-price {
        align-self: flex-end;
    }

    /* SERVICES – padding interne */
    .services-inner {
        padding: 0 1.5rem;
    }

} /* ← FIN DU MEDIA QUERY */


/* ===============================
   CONTACT SECTION
=============================== */

#contact {
    padding: 4rem 2rem;
}

.contact-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.contact-info {
    flex: 0 0 33.333%;
}

.contact-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.3rem;
    color: #2F2F2D;
    margin-bottom: 1.5rem;
}

.contact-info > p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 2rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-details p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-address {
    margin-top: 1rem;
}

.contact-address h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #2F2F2D;
}

.contact-address p {
    font-size: 1rem;
    margin: 0.25rem 0;
}

.contact-map-container {
    flex: 0 0 66.666%;
    width: 700px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.contact-map-container iframe {
    display: block;
    width: 100%;
    height: 450px;
}

@media (max-width: 800px) {
    .contact-map-container {
        width: 100%;
    }
    #contact {
        padding: 3rem 1.5rem;
    }

    .contact-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .contact-info {
        flex: 1 1 100%;
    }

    .contact-info h2 {
        font-size: 1.9rem;
    }

    .contact-map-container {
        flex: 1 1 100%;
    }

    .contact-map-container iframe {
        height: 350px;
    }
}