/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/

/* --- CONFIGURATION --- */
:root {
    --deep: #1a051a;      /* Le violet presque noir de l'image */
    --gold: #c5a059;      /* L'or du logo */
    --bg-white: #ffffff;
    --grey-light: #f4f4f4;
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* LA commande magique pour bloquer le glissement latéral */
    position: relative;
}

* {
        max-width: 100vw; /* Empêche n'importe quel élément de dépasser la largeur de vue */
        box-sizing: border-box; /* Force le calcul des bordures à l'intérieur de la largeur */
    }

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; background: var(--bg-white); color: #333; line-height: 1.6; }

/* ==========================================================
   NAVIGATION HARMONISÉE (VERSION FINALE SANS ERREUR)
   ========================================================== */

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10000 !important;
}

.nav-logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo-area img { height: 45px; width: auto; }
.nav-logo-area span {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #1a051a;
    font-size: 1.1rem;
    text-transform: uppercase;
}

/* --- LIENS DU MENU --- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-links a {
    text-decoration: none !important;
    color: #666 !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nav-links .contact-btn {
    border: 1px solid #1a051a;
    padding: 8px 18px;
    color: #1a051a !important;
}

/* --- LE DUO ORACLE & LUNE (SYMETRIE PC) --- */
.nav-extra-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

/* Propriétés communes aux deux boutons pour qu'ils soient JUMEAUX */
.oracle-link, .moon-phase-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px;      /* Hauteur identique forcée */
    min-width: 160px;  /* Largeur identique forcée */
    border-radius: 50px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-decoration: none;
    cursor: pointer;
}

/* Look spécifique Oracle */
.oracle-link {
    background: linear-gradient(135deg, #2d0a2d 0%, #1a051a 100%);
    color: #D4AF37 !important;
    border: 2px solid #D4AF37;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

/* Look spécifique Lune */
.moon-phase-container {
    background: rgba(197, 160, 89, 0.05);
    border: 1px solid #c5a059;
    color: #c5a059;
    padding: 0 15px;
}

#moon-icon { font-size: 1.2rem; margin-right: 8px; }
#moon-name { text-transform: uppercase; }

/* ==========================================================
   ADAPTATION MOBILE (IPHONE / ANDROID)
   ========================================================== */
@media (max-width: 768px) {
    nav {
        flex-direction: column !important;
        gap: 12px;
        padding: 15px 5% !important;
    }

    .nav-logo-area { order: 1; width: 100%; justify-content: center; }
    .nav-links { order: 2 !important; width: 100%; justify-content: center; gap: 10px; margin: 5px 0; }
    .nav-extra-mobile { order: 3 !important; width: 100%; justify-content: center; gap: 8px; }

    /* On réduit la taille des jumeaux pour le mobile */
    .oracle-link, .moon-phase-container {
        height: 38px !important;
        min-width: 140px !important;
        font-size: 0.6rem !important;
        padding: 0 10px !important;
    }

    .nav-logo-area img { height: 35px; }
    .nav-links a { font-size: 0.60rem !important; letter-spacing: 1px; }
    #moon-icon { font-size: 1rem !important; }
}
/* --- HOME --- */
/* --------------------- SECTION HERO  --------------------- */
.hero-section {
    padding: 80px 5% 60px 5%;
    text-align: center;
    position: relative;
    overflow: visible !important;
    /* L'effet Astre Profond */
    background: radial-gradient(circle at center, #3d1042 0%, #1a051a 70%, #000000 100%);
    background-color: #1a051a;
    border-bottom: 1px solid var(--gold) !important;
}


/* LE GRAIN (TEXTURE) : On le rend vraiment visible cette fois */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: 0.6; /* Augmenté pour que tu le voies enfin */
    pointer-events: none;
    z-index: 1;
}

/* L'ASTRE CERNÉ D'OR (Le Logo) */
.hero-section img {
    max-width: 170px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    border-radius: 50%; /* Pour que le halo suive bien la forme de l'astre */

    /* LE CERNE D'OR : On combine une bordure fine et un halo puissant */
    border: 1px solid rgba(197, 160, 89, 0.6);
    box-shadow: 0 0 30px rgba(197, 160, 89, 0.5), inset 0 0 15px rgba(197, 160, 89, 0.2);
    filter: drop-shadow(0 0 10px rgba(197, 160, 89, 0.4));

    /* Animation de mouvement */
    animation: floatingLogo 4s ease-in-out infinite;
}

/* LE TITRE ET L'HORIZON */
.hero-section h1 {
    font-family: 'Cinzel', serif;
    color: var(--gold);
    font-size: 3rem;
    letter-spacing: 12px;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    z-index: 2;
}

/* La ligne dorée d'horizon sous le titre */
.hero-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gold); /* Ou #c5a059 si var n'est pas lue */
    z-index: 10; /* Elle passe au-dessus du grain et du fond */
    box-shadow: 0 -2px 10px rgba(197, 160, 89, 0.3); /* Un léger glow pour la voir */
}

.hero-section p {
    max-width: 700px;
    margin: 35px auto 0;
    color: white;
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

/* L'ANIMATION DU PORTAIL */
@keyframes floatingLogo {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-12px) scale(1.02); }
    100% { transform: translateY(0px) scale(1); }
}

/* ---------------------SECTION RÉSONANCES  --------------------- */
.resonance-section {
    padding-top: 70px !important;
    padding-bottom: 100px !important; /* On met la dose pour voir le changement */
    background-color: #ffffff;
    display: block !important;
    height: auto !important; /* Force la section à s'adapter au contenu */
    margin-bottom: 40px !important; /* Crée un vide réel APRÈS la section */
    overflow: visible !important;
}

/* Correction chirurgicale pour Résonance */
.resonance-section::after {
    bottom: -25px !important; /* On la descend un peu plus si besoin */
    z-index: 999 !important;   /* On baisse son z-index : assez pour être devant le fond, mais derrière le menu */
}

/* CADRE DU TITRE : Double bordure fine (effet lettre) */
.resonance-header-frame {
    max-width: fit-content;
    margin: 0 auto 75px auto;
    padding: 20px 50px;
    border: 1px solid #c5a059; /* Bordure extérieure */
    position: relative;
    background: radial-gradient(circle, rgba(26, 5, 26, 0.03) 0%, transparent 100%);
}

/* On utilise le ::before pour la deuxième bordure interne propre */
.resonance-header-frame::before {
    content: "";
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px solid #c5a059;
    pointer-events: none;
}

.resonance-main-title {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    color: #1a051a;
    letter-spacing: 5px;
    margin: 0;
    text-align: center;
}

/* CONTENEUR ET LIGNE DE LIAISON */
.resonance-container {
    display: flex;
    justify-content: center;
    gap: 80px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* LE LIEN ENTRE LES DEUX CADRES */
.resonance-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    width: 220px; /* Longueur du lien */
    height: 1px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
    z-index: 1;
    opacity: 0.7;
}

/* LES BLOCS SOMBRES */
.resonance-card {
    flex: 1;
    position: relative;
    /* Ton nouveau dégradé qui "pète" bien */
    background: radial-gradient(circle at center, #3d1042 0%, #1a051a 70%, #000000 100%) !important;
    background-color: #1a051a;

    border-left: 2px solid #c5a059;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    z-index: 2;
    }

    /* On peut même ajouter un léger reflet au survol pour sublimer ton nouveau fond */
  .resonance-card:hover {
      box-shadow: 0 20px 50px rgba(61, 16, 66, 0.5); /* Rappel du violet brillant */
      border-color: #ffffff; /* La bordure s'illumine légèrement */
      transform: translateY(-20px); /* Ajuste selon ton sens d'asymétrie */
  }

.card-glow {
  position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      /* On utilise un blanc-doré très doux au centre qui s'estompe plus loin */
      background: radial-gradient(circle at 50% , rgba(197, 160, 89, 0.12) 0%, rgba(26, 5, 26, 0) 75%);
    pointer-events: none;
    z-index: 1;
}

.card-content { padding: 50px; position: relative; z-index: 3; }

/* ASYMÉTRIE */
.card-left { transform: translateY(-40px); }
.card-right { transform: translateY(40px); }

/* BOUTON DORÉ AVEC HOVER */
.resonance-btn-gold {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #c5a059;
    color: #c5a059;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.resonance-btn-gold:hover {
    background: #c5a059;
    color: #1a051a;
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.3);
}

/* TYPO */
.resonance-card h3 { color: #c5a059; font-family: 'Cinzel', serif; margin-bottom: 20px; }
.resonance-card p { color: #f0f0f0; line-height: 1.8; }

/* --- NOUVEAU CORRECTIF MOBILE RÉSONANCES --- */
@media (max-width: 900px) {
    /* 1. On force l'empilement vertical propre */
    .resonance-container {
        flex-direction: column !important;
        gap: 30px !important; /* Espace entre les deux blocs noirs */
        align-items: center !important;
        padding: 0 15px !important;
    }

    /* 2. On désactive la ligne de liaison dorée qui ne sert plus à rien en colonne */
    .resonance-container::before {
        display: none !important;
    }

    /* 3. ON ANNULE LES DÉCALAGES (TRÈS IMPORTANT) */
    /* C'est ce qui empêchera les blocs de se monter dessus comme sur ta photo */
    .resonance-card.card-left,
    .resonance-card.card-right {
        transform: none !important;
        width: 100% !important;
        max-width: 500px; /* Pour que ce soit élégant sur tablette aussi */
        margin: 0 auto !important;
    }

    /* 4. On ajuste le texte pour les petits écrans */
    .card-content {
        padding: 35px 25px !important;
        text-align: center; /* Plus lisible sur mobile */
    }

    .resonance-card h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px;
    }

    .resonance-card p {
        font-size: 0.95rem !important;
        line-height: 1.6;
    }

    /* On centre le bouton doré sous le texte */
    .resonance-btn-gold {
        margin-top: 10px;
    }
}



/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* --------------------- SECTION APPROCHE --------------------- */
.approche {
    padding: 100px 5%;
    background: radial-gradient(circle at center, #2d0a30 0%, #1a051a 100%);
    color: white;
    /* On remplace l'ancienne bordure par celle-ci */
    border-top: 4px solid var(--gold) !important;
    border-bottom: 4px solid var(--gold);
    position: relative;
}

.approche-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes sur grand écran */
    gap: 80px;
    align-items: start;
}

.approche h2 {
    font-family: 'Cinzel';
    color: var(--gold);
    margin-bottom: 25px;
    font-size: 1.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
    display: inline-block;
    padding-bottom: 10px;
}

.approche p {
    font-size: 1rem;
    line-height: 1.8;
    color: #e0e0e0;
}

/* Le bouton "En savoir plus" version Luxe */
.btn-approche {
    display: inline-block;
    margin-top: 35px;
    padding: 15px 35px;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    transition: 0.4s all;
}

.btn-approche:hover {
  background-color: #c5a059 !important;
      color: #1a051a !important; /* Texte prune sombre pour le contraste */
      box-shadow: 0 0 15px rgba(197, 160, 89, 0.5) !important;
      transition: all 0.3s ease;
  }

/* --- ADAPTATION MOBILE --- */
@media (max-width: 850px) {
    .approche-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
}

.identity-card {
    display: flex;
    align-items: center; /* C'est cette ligne magique qui aligne tout verticalement */
    gap: 25px;
    padding: 30px; /* Un peu plus d'espace interne pour laisser respirer ton mantra */
    background: radial-gradient(circle at center, #3d1042 0%, #1a051a 70%, #000000 100%);
    border: 1px solid #c5a059;
    border-radius: 4px;
}

/* Le petit cercle photo avec bordure dorée */
.id-photo-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #c5a059;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
}

.id-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Détails du texte */
.id-details {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Aligne les lignes de texte entre elles */
}

.id-label {
    font-size: 0.65rem;
    color: #c5a059;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.id-name {
    font-family: 'Cinzel', serif;
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0;
    letter-spacing: 1px;
}

.id-mantra {
    font-size: 0.85rem;
    color: #ddd;
    font-style: italic;
    margin-top: 5px;
    line-height: 1.4;
}

/* Effet au survol pour le côté interactif */
.identity-card:hover {
    transform: scale(1.02);
    border-color: #ffffff;
    transition: all 0.3s ease;
}

/* --------------------- SECTION ACCOMPAGNEMENTS --------------------- */
/* Conteneur principal */
.pricing-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 60px 20px;
    perspective: 1000px; /* Donne de la profondeur aux mouvements */
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */
    max-width: 1300px; /* Évite que les cartes ne s'étalent trop sur écran géant */
    margin: 0 auto;
}

/* Base commune des cartes */
.pricing-card {
    flex: 1;
    max-width: 350px;
    padding: 40px 30px;
    background: radial-gradient(circle at center, #3d1042 0%, #1a051a 70%, #000000 100%);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 4px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* ombre */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #ffffff;
}

/* --- LA CARTE MENTORAT (Celle qui pète) --- */
.mentorat-card {
    border: 2px solid #c5a059 !important;
    transform: scale(1.05); /* Elle est naturellement plus grande */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(197, 160, 89, 0.2);
    z-index: 5;
}

/* Le petit badge doré au dessus */
.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #c5a059;
    color: #1a051a;
    font-size: 0.7rem;
    font-family: 'Cinzel', serif;
    padding: 5px 15px;
    white-space: nowrap;
    letter-spacing: 1px;
}

/* --- LES EFFETS HOVER --- */

/* Hover sur la centrale : Impact maximum */
.mentorat-card:hover {
    transform: scale(1.08) translateY(-15px) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(197, 160, 89, 0.4);
    border-color: #ffffff !important;
}

/* Hover sur les côtés : Plus calme */
.side-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); /* L'ombre s'accentue au survol */
    border-color: #c5a059;
}

/* Typographie interne */
.card-title {
    font-family: 'Cinzel', serif;
    color: #c5a059;
    margin-bottom: 20px;
}

.card-desc {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* On s'assure que les cartes peuvent bouger sans casser le voisin */
.pricing-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}

/* LA CARTE CENTRALE : On la met en avant par défaut */
.mentorat-card {
    transform: scale(1.05); /* Elle est 5% plus grande */
    border: 2px solid #c5a059 !important; /* Bordure dorée plus épaisse */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 20px rgba(197, 160, 89, 0.2) !important;
    z-index: 2; /* Elle passe légèrement devant les autres */
}

/* LE SURVOL DE LA CENTRALE : Elle s'anime plus fort */
.mentorat-card:hover {
    transform: scale(1.08) translateY(-10px) !important;
    border-color: #ffffff !important; /* Elle s'illumine en blanc/doré */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(197, 160, 89, 0.4) !important;
}

/* On s'assure que toute la section a un fond sombre cohérent */
.accompagnements {
    background-color: #ffffff; /* Ou #1a051a selon ta préférence */
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Le style du titre encadré (identique aux précédents) */
.section-title-wrapper {
    margin-bottom: 15px !important; /* On réduit l'écart ici */
}

.title-frame {
    border: 1px solid #c5a059; /* Ligne extérieure */
    outline: 1px solid #c5a059; /* Ligne intérieure */
    outline-offset: -4px;      /* Crée l'écart pour l'effet double trait */
    padding: 15px 50px;
    display: inline-block;
}

.title-frame h2 {
    font-family: 'Cinzel', serif;
    color: #1a051a;
    font-size: 1.8rem;
    letter-spacing: 7px;
    margin: 0;
    text-transform: uppercase;
}

/* Petit ajustement pour que les cartes ne touchent pas le titre */
.pricing-container {
    margin-top: 20px;
}
.pricing-card .btn-approche:hover {
    background-color: #c5a059 !important;
    color: #1a051a !important;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.5) !important;
    transition: all 0.3s ease;
}

/* --- NOUVEAU CORRECTIF MOBILE ACCOMPAGNEMENTS (CIBLE) --- */
@media (max-width: 850px) {
    /* 1. On force les cartes à s'empiler en colonne */
    .pricing-container {
        flex-direction: column !important;
        gap: 30px !important; /* Espace vertical entre chaque carte */
        align-items: center !important;
        padding: 40px 15px !important;
    }

    /* 2. On ajuste la taille des cartes pour qu'elles prennent la largeur élégamment */
    .pricing-card {
        width: 100% !important;
        max-width: 420px; /* On garde un format élégant sur tablette/mobile */
        flex: none !important; /* On annule la distribution flex pour mobile */
        margin: 0 auto !important;
        padding: 35px 25px !important;
    }

    /* 3. On désactive les décalages de style (la carte centrale plus grande) */
    .mentorat-card {
        transform: scale(1) !important; /* On la remet à la même taille que les autres */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; /* Ombre standard */
    }

    /* 4. On s'assure que le texte respire */
    .pricing-card h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px;
    }

    .pricing-card p {
        font-size: 0.95rem !important;
        line-height: 1.6;
    }

    /* 5. On adapte le titre de la section */
    .title-frame h2 {
        font-size: 1.4rem !important;
        letter-spacing: 3px !important;
        padding: 15px 30px !important;
    }
}

/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* --------------------- SECTIONS TRANSMISSIONS & VOIX --------------------- */
.ressources-section {
    padding: 120px 10%; /* Plus d'espace en haut et en bas */
    background: #f4eef7;
    display: flex;
    justify-content: center; /* Garde bien ça pour le centrage global */
    max-width: 100%; /* Largeur optimale pour ton 21 pouces */
    margin: 0 auto; /* Centre le tout */
    gap: 80px; /* Espace de sécurité entre les deux blocs */
    border-top: 1px solid #c5a059;
}

.ressource-box {
    flex: 1; /* Permet aux deux blocs d'occuper le même espace */
    max-width: 480px; /* Empêche le texte de s'étaler trop horizontalement */
}

.ressource-box h2 {
    font-family: 'Cinzel';
    color: #1a051a;
    font-size: 1.3rem;
    margin-bottom: 25px;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 15px;
}

/* La ligne or sous le titre */
.ressource-box h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--gold);
}

.ressource-box p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
}

/* Suppression des mains et remplacement par un losange or */
.link-list {
    list-style: none;
    padding: 0;
}

.link-list li {
    margin-bottom: 18px;
}

.link-list a {
    text-decoration: none;
    color: #1a051a;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
}

/* Le nouveau symbole : un petit losange doré */
.link-list a::before {
    content: '◆';
    color: var(--gold);
    font-size: 0.7rem;
}

.link-list a:hover {
    color: var(--gold);
    transform: translateX(8px); /* Petit glissement élégant */
}

/* Mobile */
@media (max-width: 850px) {
    .ressources-section {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* Empêche le menu de cacher le début des sections */
section {
    scroll-margin-top: 80px;
}

/* On s'assure que le scroll est fluide et pas brusque */
html {
    scroll-behavior: smooth;
}
/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* --------------------- SECTION ENTRER EN RELATION --------------------- */
.contact-section {
    padding: 0 !important;
    background: radial-gradient(circle at center, #2d0a30 0%, #1a051a 100%);
    color: white;
    text-align: center;
    /* On rend la ligne du haut nette et dorée */
    border-top: 4px solid var(--gold) !important;
}

.contact-container {
    max-width: 600px; /* Un peu plus large pour que le texte respire sur une ligne */
    border: 1px solid rgba(197, 160, 89, 0.3); /* Le petit cadre fin du design */
    padding: 20px;
    border-radius: 15px;
    margin: -20px auto 0 auto; /* La marge négative remonte l'encadré vers le haut de la zone sombre */
}

.contact-section h2 {
    font-family: 'Cinzel';
    color: var(--gold);
    font-size: 1.6rem;
    letter-spacing: 5px;
    margin: 0 !important; /* Supprime TOUT l'espace autour du titre */
      padding: 0 0 5px 0; /* Un tout petit filet de 5px sous le titre */
}

/* Le bouton avec effet de "remplissage" au survol */
.btn-contact {
    display: inline-block;

    margin-top: 0; /* On supprime la marge auto pour contrôler via le paragraphe au-dessus */
    padding: 12px 35px;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem; /* Plus petit */
    letter-spacing: 3px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    z-index: 1;
}

.btn-contact:hover {
    color: #1a051a; /* Le texte devient sombre quand le fond devient or */
    box-shadow: 0 0 30px rgba(197, 160, 89, 0.4);
}

/* L'effet de remplissage fluide */
.btn-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gold);
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-contact:hover::before {
    left: 0;
}

/* --------------------- HARMONISATION DES ESPACES VERTICAUX --------------------- */

/* On réduit l'espace pour TOUTES les sections principales d'un coup */
.resonance-section,
.accompagnements,
.ressources-section,
.contact-section {
    padding-top: 50px !important;    /* Espace réduit entre le haut et le titre */
    padding-bottom: 50px !important; /* Espace réduit entre le contenu et le bas */
}

/* Si tu as des lignes de séparation (liserés or) qui créent du vide en plus */
hr, .separator {
    margin-top: 0;
    margin-bottom: 0;
}

/* Pour le bloc Entrer en Relation spécifiquement */
.contact-container {
    margin-top: 20px; /* On rapproche encore un peu le texte du titre */
}

@media (max-width: 850px) { .check-grid, .approche-container, .services-grid { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem; /* Titre plus raisonnable sur petit écran */
        letter-spacing: 4px;
    }

    .hero-logo-central {
        width: 100px; /* Logo central moins imposant */
        height: 100px;
    }
}
/* ------------------------------------------ fin home ------------------------------------------ */

/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* ------------------------------------------ Approche ------------------------------------------ */
/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* --------------------- MODULE LIVRE APPROCHE --------------------- */
.section-livre-interactif {
    padding: 60px 5%;
    display: flex;
    justify-content: center;
    background: #f4eef7; /* Fond sombre galactique comme ta home */
}

.book-container {
    width: 100%;
    max-width: 850px;
    min-height:400px;
    background: #ffffff;
    padding: 60px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.6);
    color: #1a051a;
    border-radius: 2px;
    /* --- AJOUT DU CADRE DORÉ --- */
    border: 1px solid #c5a059; /* Le filet doré tout autour */
    position: relative;
}

/* --- BOUTON PRINCIPAL (Continuer / Découvrir) --- */
/* --- STYLE DE BASE DES BOUTONS DU LIVRE --- */
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transition fluide et élégante */
    border-radius: 2px;
}

/* --- BOUTON PRINCIPAL (Continuer / Découvrir) --- */
.cta-button {
    background: #1a051a; /* Ton mauve très sombre */
    color: #ffffff;
    border: 1px solid #1a051a;
}

.cta-button:hover {
    background: #c5a059 !important; /* Devient doré au survol */
    border-color: #c5a059 !important;
    color: #1a051a !important; /* Texte sombre pour bien lire sur l'or */
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.4); /* Petit halo lumineux */
    transform: translateY(-2px); /* Effet de léger soulèvement */
}

/* --- BOUTON SECONDAIRE (Retour) --- */
.cta-button.secondary {
    background: transparent;
    border: 1px solid rgba(26, 5, 26, 0.3); /* Bordure mauve discrète */
    color: #1a051a;
    margin-right: 15px;
}

.cta-button.secondary:hover {
    border-color: #c5a059 !important;
    color: #c5a059 !important; /* Le texte et la bordure passent au doré */
    background: rgba(197, 160, 89, 0.05) !important; /* Un très léger voile doré */
}

.book-page { display: none; text-align: center; }
.book-page.active { display: block; animation: fadeIn 0.4s ease; }

/* --- STYLE SPÉCIFIQUE COUVERTURE (PAGE 1) --- */

/* On transforme la page 1 en conteneur flexible quand elle est active */
#p1.active {
    display: flex !important; /* Remplace le 'block' par 'flex' */
    flex-direction: column;
    justify-content: center;  /* Centre le contenu verticalement */
    align-items: center;      /* Centre le contenu horizontalement */
    height: 100%;             /* Prend toute la hauteur du livre */
    min-height: 400px;        /* S'assure d'avoir de l'espace */
}

/* On donne de l'importance au titre de couverture */
#p1 .titre-or {
    font-size: 2.6rem;       /* Un peu plus grand pour l'impact */
    margin-bottom: 80px;     /* On pousse le bouton vers le bas */
    margin-top: 0;
    max-width: 90%;          /* Évite que le titre ne touche les bords */
}

/* On positionne le bouton de couverture */
#p1 .book-nav {
    margin-top: 20px;        /* Petit ajustement final pour descendre le bouton */
    }
.titre-or { font-family: 'Cinzel', serif; color: #c5a059; font-size: 2.2rem; margin-bottom: 20px; }
.texte-livre {
  font-size: 1.1rem;
      line-height: 1.8;
      height: 250px; /* On fixe la hauteur plutôt que de mettre un max */

      /* LA SOLUTION : Toujours afficher la zone de scroll */
      overflow-y: scroll;

      padding-left: 30px;
      padding-right: 15px;
      margin-bottom: 20px;
      text-align: left;

      /* Optionnel : On s'assure que le scroll est fluide */
      scrollbar-gutter: stable;
  }
/* --- PERSONNALISATION DE L'ASCENSEUR (Scrollbar) --- */
.texte-livre::-webkit-scrollbar {
    width: 13px;
}

/* On ajuste l'ascenseur vide pour qu'il soit très discret quand il n'y a pas de texte */
.texte-livre::-webkit-scrollbar-track {
    background: transparent; /* Fond invisible s'il n'y a rien à scroller */
}

.texte-livre::-webkit-scrollbar-thumb {
    background: #c5a059; /* La barre elle-même en doré */
    border-radius: 10px;
}
.citation-box {
    margin: 30px auto;
    padding: 20px;
    border-left: 3px solid #c5a059;
    background: #f9f9f9;
    font-style: italic;
    text-align: left;
    max-width: 450px;
}

.manifeste {
  background-color: #0e0e0e;
  color: #f2f2f2;
  padding: 3rem 2rem;
  font-family: 'Georgia', serif;
}

.titre-violet {
  color: #bb63d8;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.intro-manifeste {
  font-style: italic;
  color: #aaa;
  margin-bottom: 2rem;
}

.principe {
  margin-bottom: 3rem;
}

.principe h3 {
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 0.8rem;
}

.principe p {
  line-height: 1.6;
  color: #ddd;
}

.principe blockquote {
  margin-top: 0.8rem;
  padding-left: 1rem;
  border-left: 3px solid #bb63d8;
  font-style: italic;
  color: #e6b3ff;
}

.book-nav { margin-top: 50px; }

/* Réutilisation de tes styles de boutons de la home */
.cta-button.secondary { background: transparent; border: 1px solid #1a051a; color: #1a051a; margin-right: 15px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* ------- SECTION ACCOMPAGNEMENTS (FOND BLANC) ----------- */
.section-accompagnements {
  background-color: #533f61;
    padding: 100px 5%;
    text-align: center;
    position: relative;
    /* LES LIGNES D'OR */
    /* LA LIGNE DU HAUT CORRIGÉE */
        margin-top: 0px; /* Crée un espace pour que la ligne respire */
        border-top: 4px solid #c5a059; /* Un peu plus épaisse (2px) */

        /* LA LIGNE DU BAS */
        border-bottom: 2px solid #c5a059;

        /* EFFET LUMIÈRE (pour que l'or ne soit pas "plat") */
        box-shadow: 0 -10px 20px rgba(197, 160, 89, 0.2), /* Glow haut */
                    0 10px 20px rgba(197, 160, 89, 0.2);  /* Glow bas */
}

.titre-section-sombre {
    font-family: 'Cinzel', serif;
    color: #1a051a;
    font-size: 2.2rem;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.divider-or {
    width: 60px;
    height: 1px;
    background: #c5a059;
    margin: 0 auto 60px;
}

.cards-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.card-blanche {
    background: #ffffff;
    border: 1px solid rgba(197, 160, 89, 0.2);
    padding: 40px 30px;
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.card-blanche:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.15);
    border-color: #c5a059;
}

.card-icon {
    font-size: 2rem;
    color: #c5a059;
    margin-bottom: 20px;
}

.card-blanche h3 {
    font-family: 'Cinzel', serif;
    color: #1a051a;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.card-blanche p {
    color: #444;
    line-height: 1.8;
    font-size: 0.95rem;
    margin-bottom: 30px;
}

.btn-card-simple {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: #c5a059;
    text-decoration: none;
    letter-spacing: 2px;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

.btn-card-simple:hover {
    border-bottom: 1px solid #c5a059;
}

/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* --------------------- FOOTER --------------------- */
.main-footer {
    background: radial-gradient(circle at center, #2d0a30 0%, #1a051a 100%);
    padding: 60px 5% 40px;
    color: rgba(255,255,255,0.7);
    text-align: center;
}

.footer-logo {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #c5a059;
    letter-spacing: 3px;
    margin-bottom: 30px;
}

.footer-links {
    margin-bottom: 30px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #c5a059;
}

.footer-social p {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin-top: 40px;
}
.btn-urgence-fixe {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #c5a059; /* Ton doré pour le côté précieux/urgent */
    color: #1a051a; /* Texte sombre pour le contraste */
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    z-index: 9999;
    transition: all 0.3s ease;
}

.btn-urgence-fixe:hover {
    transform: scale(1.05) translateY(-5px);
    background: #e5c079; /* Doré plus clair au survol */
}

.btn-urgence-fixe::before {
    content: "Pour une demande de RDV en urgence si pas de plage horaire dans les temps impartis";
    position: absolute;
    bottom: 70px;
    right: 0;
    background: #2d0a2d;
    color: #c5a059;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    border: 1px solid #c5a059;
}

.btn-urgence-fixe:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-5px);
}



/* --- LE BOUTON FIXE DE GAUCHE  --- */
.btn-fixe-gauche {
    /* Positionnement fixe à l'écran */
    position: fixed;
    left: 20px;
    bottom: 30px;
    z-index: 9999; /* Reste au-dessus de tout */

    /* Force le fond en doré signature */
    background: #2d0a2d;
    color: #c5a059;
    style: bold;

    /* Force la couleur du texte et de l'icône */
    fill: #4a3728 !important;  /* Pour l'icône si c'est un SVG */

    /* Supprime le style lien par défaut */
    text-decoration: none !important;

    /* Autres styles du bouton */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 50px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

/* Style au survol (hover) */
.btn-fixe-gauche:hover {
    transform: scale(1.05);
    background-color: #a3854a !important; /* Un doré plus foncé */
    color: #f4f1ee !important; /* Un texte clair juste pour le survol */
}

/* --- CORRECTIF BOUTONS MOBILES (ADIEU LES PATTES DE MOUCHES) --- */
@media (max-width: 768px) {
    /* 1. BOUTON URGENCE (Droit) */
    .btn-urgence-fixe {
        bottom: 15px !important;
        right: 10px !important;
        padding: 10px 15px !important; /* Plus d'espace pour le pouce */
        gap: 8px !important;
        max-width: 200px !important;
        background: #D4AF37 !important; /* On s'assure qu'il flashe bien */
    }

    .texte-urgence {
        font-size: 0.75rem !important; /* On remonte de 0.5rem à 0.75rem pour la lisibilité */
        font-weight: bold;
        letter-spacing: 0.5px;
    }

    /* 2. LA BULLE D'AIDE (Au-dessus de l'urgence) */
    .btn-urgence-fixe::before {
        white-space: normal !important;
        width: 180px !important;
        bottom: 55px !important;
        right: 0 !important;
        font-size: 0.7rem !important;
        padding: 10px !important;
        line-height: 1.4;
    }

    /* 3. BOUTON RENDEZ-VOUS (Gauche) */
    .btn-fixe-gauche {
        bottom: 15px !important;
        left: 10px !important;
        padding: 10px 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* ON RÉAFFICHE LE TEXTE (Fini les icônes seules trop petites) */
    .btn-fixe-gauche .text {
        display: inline-block !important;
        font-size: 0.75rem !important;
        font-weight: bold;
    }

    .btn-fixe-gauche i, .btn-fixe-gauche .icon {
        font-size: 1rem !important;
    }
}
/* --------------------- RESPONSIVE LIVRE --------------------- */
@media (max-width: 768px) {
    .book-container {
        min-height: auto; /* Le cadre s'adapte au contenu sur mobile */
        padding: 30px 20px; /* Moins de vide sur les côtés */
        width: 95%; /* Prend presque toute la largeur du téléphone */
    }

    .titre-or {
        font-size: 1.2rem !important; /* Réduit le titre pour qu'il ne prenne pas 3 lignes */
        margin-bottom: 20px;
        letter-spacing: 2px;
    }

    .texte-livre {
        font-size: 1rem; /* Texte légèrement plus petit pour mobile */
        padding-left: 10px; /* On réduit les marges internes */
        padding-right: 15px;
        max-height: 300px; /* Ascenseur plus court pour les petits écrans */
    }

    .citation-box {
        margin: 20px 0 20px 10px;
        font-size: 0.95rem;
    }
}
/* ------------------------------------------ FIN Approche ------------------------------------------ */
/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* ------------------------------------------ Accompagnements ------------------------------------------ */
/* --- PAGE ACCOMPAGNEMENTS (DESIGN FACTUEL) --- */

/* CONFIG DE BASE */
:root {
    --mauve-clair: #2d1b2d; /* Ton mauve plus doux */
    --mauve-fonce: #1a051a; /* Ton mauve de base */
    --or: #c5a059;
}

.body-accompagnements {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: white;
}

/* BANDEAU D'APPEL */
.hero-bandeau {
    height: 40vh;
    background: radial-gradient(circle at center, #3d1042 0%, #1a051a 70%, #000000 100%);
    background-color: #1a051a;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 5%;

}

.hero-title {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: var(--or);
    margin: 0;
}

.separateur-or-4px {
    width: 80px;
    height: 4px;
    background: var(--or);
    margin: 20px auto;
}

/* SECTION 1 : LES PORTES */
.section-claire-services {
    background-color: #f9f7f4; /* Fond papier clair */
    color: #1a051a;
    padding: 60px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- ASYMÉTRIE DU DÉBUT --- */
.intro-asym-container {
    display: flex;
    gap: 40px;
    margin-bottom: 85px;
}

.feuillet-intro {
    background: white;
    padding: 40px;
    width: 350px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 2px solid #c5a059;
}

.f-cadre { transform: rotate(-1.5deg); margin-top: 20px; }
.f-lien { transform: rotate(2deg); }

.section-portes-claire {
    background-color: #f4f1ee; /* Ton fond clair/papier */
    padding: 85px 5% 20px 5%; /* RÉDUIT : On passe de 120px à 20px en haut pour remonter tout le bloc */
    color: #1a051a;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- LES 2 PORTES ASYMÉTRIQUES (CADRE/LIEN) --- */
.portes-intro-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    padding: 0 5% 60px 5%; /* On a mis 0 en haut au lieu de 20px */
    margin-top: 0px;     /* Ajoute cette ligne pour remonter les cartes */
    background-color: #f4f1ee;
    width: 100%;
    box-sizing: border-box;
}

.porte-asym {
    background: #ffffff;
    padding: 50px;
    width: 380px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border-top: 4px solid #c5a059;
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Ajoute cette ligne */
    }

  .porte-asym:hover {
        transform: scale(1.02) rotate(0deg) !important; /* La carte se redresse et grossit un poil */
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

.cadre { transform: rotate(-2deg); margin-top: 30px; }
.lien { transform: rotate(1deg); }

/* --- FIXATION CHIRURGICALE DU CONTENU DES SLIDES --- */
.slides-wrapper {
    height: 170px;       /* Force une hauteur fixe pour que les cartes soient alignées */
    overflow-y: auto;    /* Active l'ascenseur si le texte dépasse */
    padding-right: 10px; /* Espace pour ne pas coller à la barre */
    margin-bottom: 10px; /* Espace avant les points de navigation */

}

/* Style de l'ascenseur (fin et doré pour ton univers) */
.slides-wrapper::-webkit-scrollbar {
    width: 4px;
}

.slides-wrapper::-webkit-scrollbar-thumb {
    background: #c5a059; /* Ton doré habituel */
    border-radius: 10px;
}

/* --- LES 3 ARCHES SERVICES --- */
.services-arches-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    width: 100%;
}

.arche-fixe {
    background: #ffffff;
    width: 280px;
    padding: 60px 30px;
    border: 1px solid #c5a059;
    border-radius: 150px 150px 0 0; /* Forme Arche parfaite */
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; /* Fluidité totale */
}

.arche-fixe:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.2); /* Ombre dorée plus présente */
    border-color: #c5a059; /* Bordure qui s'illumine */
}

.arche-header {
    font-size: 2rem;
    color: #c5a059;
    margin-bottom: 20px;
}

.arche-fixe h3 {
    font-family: 'Cinzel', serif;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.label-service {
    font-size: 0.7rem;
    color: #c5a059;
    letter-spacing: 4px;
    display: block;
    margin-bottom: 25px;
}

.btn-arche {
    margin-top: 30px;
    display: inline-block;
    text-decoration: none;
    color: #1a051a;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    border-bottom: 1px solid #c5a059;
    padding-bottom: 5px;
}

/* --- LES 2 PORTES ASYMÉTRIQUES (CADRE/LIEN) --- */
/* LE CONTENEUR : C'est lui qui force le côte à côte */
.portes-intro-container {
    display: flex;             /* Aligne les enfants horizontalement */
    flex-direction: row;       /* Force la ligne */
    justify-content: center;   /* Centre le groupe de cartes */
    align-items: flex-start;   /* Aligne par le haut */
    gap: 40px;                 /* Espace entre les deux cartes */
    padding: 20px 5% 60px 5%;
    background-color: #f4f1ee;
    width: 100%;
    box-sizing: border-box;
}

/* STYLE DES CARTES */
.porte-asym {
  background: #ffffff;
  padding: 40px;
  width: 380px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.05);
  border-top: 4px solid #c5a059;
  transition: transform 0.4s ease, box-shadow 0.4s ease;

  /* CETTE LIGNE EST LA CLÉ */
  position: relative !important; /* Indispensable pour le z-index */
      z-index: 50 !important;       /* Un chiffre énorme pour passer devant tout */
}

/* Les 3 Portes */
.separation-titre-portes {
  text-align: center;
      padding: 60px 0 20px 0; /* AUGMENTE le premier chiffre (ici 60px) pour pousser les arches vers le bas */
      background-color: #f4f1ee;
      margin-top: -70px !important;
}

.titre-section-portes {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    color: #c5a059; /* Ton Or */
    letter-spacing: 12px; /* Très espacé pour le côté sacré */
    margin: 10px 0;
    text-transform: uppercase;
}

.ligne-or-fine {
    width: 40px;
    height: 1px;
    background-color: rgba(197, 160, 89, 0.5);
    margin: 0 auto;
}

/* L'ASYMÉTRIE (Inclinées et décalées en hauteur) */
.porte-asym.cadre {
    transform: rotate(-2.5deg);
    margin-top: -20px;          /* Plus basse */
}

.porte-asym.lien {
    transform: rotate(2deg);
    margin-top: -90px;             /* Plus haute */
}

/* GESTION DES TEXTES (SLIDES) */
.slides-wrapper {
    position: relative;
    min-height: 140px;         /* Réserve l'espace pour que la carte ne bouge pas */
}

.slide-item {
    position: absolute;        /* Empile les textes au même endroit */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.slide-item.active {
    position: relative;        /* Le texte actif "pousse" les murs de la carte */
    opacity: 1;
    visibility: visible;
}

/* POINTS DE NAVIGATION */
.navigation-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.dot {
    width: 8px;
    height: 8px;
    border: 1px solid #c5a059;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active { background-color: #c5a059; }

/* --- LES 3 ARCHES SERVICES --- */
.services-arches-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    width: 100%;
}

.arche-fixe {
    background: #ffffff;
    width: 280px;
    padding: 60px 30px 10px 30px; /* On met 0 en bas (le 3ème chiffre) */
    border: 1px solid #c5a059;
    border-radius: 150px 150px 0 0; /* Forme Arche parfaite */
    text-align: center;
    transition: transform 0.4s ease;
}

.arche-fixe:hover {
    transform: translateY(-15px); /* Uniquement un petit saut au survol */
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.15);
}

.arche-header {
    font-size: 2rem;
    color: #c5a059;
    margin-bottom: 20px;
}

.arche-fixe h3 {
    font-family: 'Cinzel', serif;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.label-service {
    font-size: 0.7rem;
    color: #c5a059;
    letter-spacing: 4px;
    display: block;
    margin-bottom: 25px;
}

.btn-arche {
    margin-top: 30px;
    display: inline-block;
    text-decoration: none;
    color: #1a051a;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    border-bottom: 1px solid #c5a059;
    padding-bottom: 5px;
}
/* SECTION 2 : ASYMÉTRIE */
.section-asymetrique {
    background-color: #533f61;
    padding: 100px 5%;
    border-top: 4px solid var(--or);
}

.grid-asym {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
}

.card-asym {
    background: white;
    color: var(--mauve-fonce);
    padding: 40px;
    width: 300px;
    box-shadow: 10px 10px 0px var(--or);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-asym:hover {
    transform: translateY(-8px); /* La carte monte légèrement */
    box-shadow: 15px 15px 0px #c5a059; /* L'ombre "bloc" s'accentue */
}

/* --- HARMONISATION DES BOUTONS ET LIENS --- */

/* Style pour le lien "Explorer les programmes" */
.link-gold, .card-asym a {
    color: #c5a059; /* Ton Or */
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.link-gold:hover, .card-asym a:hover {
    border-bottom: 1px solid #c5a059;
    letter-spacing: 2px; /* Petit effet d'étirement au survol */
}

/* Style spécifique pour le bouton "PRENDRE CONTACT" */
/* --- BOUTONS UNIFIÉS (CONTACT & PROGRAMMES) --- */
.btn-action-asym {
    display: inline-block;
    margin-top: 25px;
    padding: 15px 30px; /* Un peu plus d'espace pour respirer */
    background-color: rgba(197, 160, 89, 0.05); /* Un léger voile or pour aider à voir le bouton */
    color: #c5a059 !important;

    /* On force une bordure solide et visible de tous les côtés */
    border: 1px solid #c5a059 !important;

    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;

    transition: all 0.4s ease-in-out;
    cursor: pointer;
    box-sizing: border-box; /* Pour être sûr que la bordure ne dépasse pas */
}

.btn-action-asym:hover {
    background-color: #c5a059;
    color: #1a051a !important;
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
    transform: translateY(-3px);
}

/* On supprime l'ancien style bleu s'il reste des traces */
.card-asym a {
    text-decoration: none;
}



/* --- ADAPTATION MOBILE (Écrans de moins de 768px) --- */
@media (max-width: 768px) {

    /* 1. On empile les cartes du haut et on retire les rotations gênantes */
    .portes-intro-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 20px; /* On annule la marge négative sur mobile */
    }

    .porte-asym.cadre, .porte-asym.lien {
        width: 90%;       /* Prend presque toute la largeur du téléphone */
        transform: none;  /* On les remet droites pour plus de clarté */
        margin-top: 0;
    }

    /* 2. On empile les 3 Arches */
    .services-arches-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .arche-fixe {
        width: 85%;
        padding: 40px 20px;
    }

    /* 3. On empile la section sombre du bas */
    .grid-asym {
        flex-direction: column;
        align-items: center;
    }

    .card-asym {
        width: 90%;
        box-shadow: 5px 5px 0px var(--or); /* Ombre plus petite sur mobile */
    }

    /* 4. On ajuste la taille des titres pour que ça ne déborde pas */
    .grand-titre {
        font-size: 2rem;
    }

}


/* --- CORRECTIF MOBILE TITRE ACCOMPAGNEMENTS --- */
@media screen and (max-width: 768px) {
    .grand-titre {
        /* On réduit la taille pour que les 16 lettres tiennent */
        font-size: 2.8rem !important;

        /* On réduit un peu l'espacement entre les lettres pour gagner de la place */
        letter-spacing: 1px !important;

        /* On s'assure qu'il ne déborde pas du tout */
        display: block;
        width: 100%;
        text-align: center;
        padding: 0 10px;
    }
}

/* --------------------- SECTION CONTACT (FOOTER) --------------------- */
.contact-section {
    padding: 80px 5% !important;
    background: radial-gradient(circle at center, #2d0a30 0%, #1a051a 100%);
    color: white;
    text-align: center;

    /* LA LIGNE DORÉE QUE TU CHERCHES */
    border-top: 1px solid #c5a059 !important;
    position: relative;
    margin-top: 0;
}

.contact-container {
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 40px;
    border-radius: 15px;
}

.contact-section h2 {
    font-family: 'Cinzel', serif;
    color: #c5a059;
    font-size: 1.8rem;
    letter-spacing: 5px;
    margin-bottom: 20px;
}

/* --- LIGNE DORÉE SUR LE FOOTER ACCOMPAGNEMENT --- */
.main-footer {
    border-top: 4px solid #c5a059 !important; /* La ligne dorée */
    background: #1a051a !important; /* On force le fond sombre pour la ligne */
    padding: 60px 5% 40px 5% !important;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
/* ------------------------------------------ FIN Accompagnements ------------------------------------------ */
/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* ------------------------------------------ Guidance (CODE COMPLET) ------------------------------------------ */
.section-guidance {
    background: linear-gradient(rgba(12, 2, 12, 0.4), rgba(12, 2, 12, 0.4));
    background-size: 85%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
}

.guidance-header {
    text-align: center;
    margin-bottom: 25px;
    padding-top: 20px;
}

.guidance-header h1 {
    font-family: 'Cinzel', serif;
    letter-spacing: 5px;
    color: #c5a059;
    text-shadow: 0 0 15px rgba(197, 160, 89, 0.5);
}

/* LE TAPIS ET L'ÉVENTAIL */
.eventail-container {
    position: relative;
    width: 1100px;
    height: 550px;
    margin: 0 auto;
    background: url('images/Bckgrnd-Tapis-Tirage.png') no-repeat center center;
    background-size: contain;
    display: flex;
    justify-content: center;
    perspective: 2000px;
}

/* STRUCTURE DES CARTES */
.carte-divine {
    position: absolute;
    width: 150px;
    height: 250px;
    cursor: pointer;
    top: 40%;
    margin-top: -160px;
    transition: z-index 0.3s;
}

/* POSITIONNEMENT EN ÉVENTAIL */
.carte-divine.c1 { transform: rotate(-12deg) translateX(-310px) translateY(80px); z-index: 6; }
.carte-divine.c2 { transform: rotate(-7deg)  translateX(-190px) translateY(15px); z-index: 5; }
.carte-divine.c3 { transform: rotate(-2deg)  translateX(-60px); z-index: 4; }
.carte-divine.c4 { transform: rotate(2deg)   translateX(90px); z-index: 3; }
.carte-divine.c5 { transform: rotate(7deg)   translateX(200px) translateY(15px); z-index: 2; }
.carte-divine.c6 { transform: rotate(12deg)  translateX(310px) translateY(80px); z-index: 1; }

.carte-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    background: white;
    border: 2px solid #c5a059;
    border-radius: 8px;
}

/* ANIMATIONS AU SURVOL ET CLIC */
.carte-divine:hover { z-index: 100 !important; }
.carte-divine:hover .carte-inner { transform: translateY(-30px) scale(1.05); }
.carte-divine.is-flipped .carte-inner { transform: translateY(-40px) rotateY(180deg) scale(1.1); }
.carte-divine.is-flipped { z-index: 110 !important; }

/* RECTO / VERSO */
.carte-recto, . {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    box-sizing: border-box;
}

.carte-recto {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
}

.carte-recto h3 {
    font-size: 0.9rem;
    color: #4a3728;
    text-transform: uppercase;
    text-align: center;
}

/* 1. On neutralise la 3D complexe qui s'emmêle les pinceaux */
.carte-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* On enlève preserve-3d ici pour stabiliser le rendu */
    transform-style: flat !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    background: white;
    border: 2px solid #c5a059;
    border-radius: 8px;
}

/* 1. On désactive la rotation complexe qui sème la pagaille */
.carte-divine.is-flipped .carte-inner {
    transform: translateY(-40px) scale(1.1) !important; /* Plus de rotateY ici */
}

/* 2. On cache le recto quand c'est cliqué */
.carte-divine.is-flipped .carte-recto {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3. On affiche le verso SANS rotation (donc texte à l'endroit) */
.carte-verso {
    background: #f4f1ee;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    /* --- LE FIX --- */
    transform: none !important; /* On force le texte à rester à 0° */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

/* 4. Affichage du verso quand actif */
.carte-divine.is-flipped .carte-verso {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2;
}

/* 5. Sécurité pour le texte */
.slides-wrapper {
    width: 100%;
    height: 180px;
    overflow-y: auto;
    padding: 10px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    transform: none !important; /* Interdiction formelle de pivoter */
}

/* Style de l'ascenseur doré */
.slides-wrapper::-webkit-scrollbar { width: 3px; }
.slides-wrapper::-webkit-scrollbar-thumb { background: #c5a059; border-radius: 10px; }

/* GESTION DES SLIDES */
.slide-item { display: none; }
.slide-item.active { display: block; }

/* LES DOTS (POINTS DE NAVIGATION) */
.dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-bottom: 8px;
    width: 100%;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #c5a059;
    cursor: pointer;
    background: transparent;
    transition: all 0.3s ease;
}

.dot.active {
    background: #c5a059;
}

.btn-rdv-carte {
    display: inline-block;
    background-color: #c5a059; /* Ton doré */
    color: white !important;    /* Texte blanc */
    text-decoration: none !important; /* Supprime le souligné bleu */
    padding: 8px 15px;
    font-family: 'Cinzel', serif;
    font-size:10px;
    letter-spacing: 1px;
    border-radius: 2px;
    transition: background 0.3s;
    text-transform: uppercase;
    margin-top: 5px;
}

.btn-rdv-carte:hover {
    background-color: #a3854a; /* Un doré plus foncé au survol */
    color: white !important;
}
/* ------------------------------------------ FIN Guidance ------------------------------------------ */
/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* ------------------ responsive --------------- */


@media (max-width: 768px) {
/* ------ GUIDANCES GRID CARTES 2X3 AJUSTÉE ------- */
  .eventail-container {
    width: 100% !important; /* Ici, on reprend toute la largeur du téléphone */
    max-width: none !important;
    height: auto !important;
    min-height: 520px !important; /* Hauteur ajustée pour 2 lignes */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 12px !important; /* On resserre un peu l'écart */
    padding: 60px 10px 30px 10px !important;
    margin-top: 20px !important;
    /* On force le tapis en fond pour qu'il soit bien présent */
    background: url('images/Bckgrnd-Tapis-Tirage.png') no-repeat center center !important;
    background-size: cover !important;
  }

  .carte-divine {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    /* RÉDUCTION ICI : 130px au lieu de 160px */
    max-width: 150px !important;
    height: 200px !important;    /* Hauteur réduite aussi */
    margin: 0 auto !important;
  }

  .carte-divine .carte-inner {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Ajustement du texte pour les petites cartes */
  .carte-divine .titre-carte {
    font-size: 9px !important;  /* Police très fine pour mobile */
    line-height: 1.2 !important;
    position: relative !important;
    top: auto !important;
    margin-top: 5px !important;
    padding: 0 5px !important;  /* Évite que le texte colle aux bords */
  }
  /* Si tu as des numéros (I, II, III...) */
    .carte-recto h3 {
      font-size: 10px !important;
      margin-bottom: 5px !important;
    }
/* --- SOINS ENERGETIQUES MOBILE --- */

.section-soins {
    padding: 20px 10px !important;
    height: auto !important;
    min-height: auto !important;
}

.autel-container {
    /* STRUCTURE CONSERVÉE */
    width: 95% !important;
    max-width: 500px !important;
    height: 600px !important; /* Ta hauteur fixe */
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    /* CORRECTION ICI : Centre les boutons verticalement sur le bois */
    justify-content: center !important;

    border: 1px solid #c5a059 !important;
    border-radius: 15px;

    /* ESPACEMENT */
    gap: 8px !important;
    padding: 15px 10px !important;

    /* FOND BOIS */
    background: url('images/Bckgrnd-Autel-Soins.png') repeat-y center center !important;
    background-size: cover !important;
}

.objet-rituel {
    position: relative !important;
    top: initial !important;
    left: initial !important;
    right: initial !important;
    bottom: initial !important;
    transform: none !important;

    width: 95% !important;
    max-width: 350px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(12, 2, 12, 0.7) !important;
    border: 1px solid #c5a059 !important;
    padding: 15px !important;
    border-radius: 12px !important;
    z-index: 10;
}

.img-objet {
    width: 35px !important;
    height: auto !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.label-objet {
    font-size: 0.8rem !important;
    text-align: left !important;
    margin: 0 !important;
    color: #c5a059 !important;
    letter-spacing: 0.5px !important;
}

/* INFO-BULLE SOUS LE BOUTON */
.objet-rituel .info-bulle {
    display: none; /* Toujours s'assurer qu'elle est cachée au repos */
    position: absolute !important;
    top: 105% !important;
    left: 0 !important;
    width: 85% !important;
    height: 180px !important;
    padding: 10px !important;
    transform: none !important;
    margin-top: 5px !important;
    background: #fff !important;
    border: 1px solid #c5a059 !important;
    z-index: 999 !important;
    overflow-y: scroll !important;
}

.objet-rituel.active .info-bulle {
    display: block !important;
}

.objet-rituel .info-bulle p {
    color: #1a051a !important;
    font-size: 12px !important;
    padding: 10px !important;
    text-shadow: none !important;
}
} /* <--- IL MANQUE CETTE ACCOLADE ICI POUR FERMER LE @MEDIA */

/* ------------------------------------------ FIN RESPONSIVE ------------------------------------------ */
/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/

/* ------------------------------------------ SOIN ------------------------------------------ */
/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* ============================================================
   SECTION AUTEL & INFO-BULLES (VERSION NETTOYÉE)
   ============================================================ */

/* 1. LE CONTENANT GLOBAL */
.section-soins {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px 0; /* Ton réglage validé pour l'aération */
    background: linear-gradient(rgba(12, 2, 12, 0.4), rgba(12, 2, 12, 0.4));
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    z-index: 1; /* On garde la section à un niveau très bas */
}

/* 2. LE PLATEAU (L'AUTEL) */
.autel-container {
    position: relative;
    width: 950px;
    height: 580px;
    margin: 0 auto;
    background: url('images/Bckgrnd-Autel-Soins.png') no-repeat center center;
    background-size: contain;
}

/* 3. LES OBJETS (IMAGES ET LABELS) */
.objet-rituel {
    position: absolute;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10; /* Niveau de base */
    transition: transform 0.3s ease;
}

.img-objet {
    width: 125px; /* Ta taille préférée */
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

.label-objet {
    display: block;
    margin-top: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: #c5a059;
    letter-spacing: 1px;
}

/* Positions exactes sur le bois */
.item-cristal  { top: 20%; left: 20%; }
.item-sauge    { top: 15%; left: 42%; }
.item-pendule  { top: 20%; right: 20%; }
.item-huile    { bottom: 20%; left: 20%; }
.item-diapason { bottom: 15%; left: 42%; }
.item-pierre   { bottom: 20%; right: 20%; }

/* 4. LES INFO-BULLES (L'ENCADRÉ UNIQUE) */
.objet-rituel .info-bulle {
    display: none; /* Caché par défaut */
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
    /* Dimensions forcées pour l'ascenseur */
    width: 320px !important;
    height: 300px !important;
    background: white !important;
    border: 2px solid #c5a059 !important;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    /* L'ascenseur doré toujours présent */
    overflow-y: scroll !important;
    overflow-x: hidden;
}

/* Personnalisation du scroll doré */
.objet-rituel .info-bulle::-webkit-scrollbar { width: 5px; }
.objet-rituel .info-bulle::-webkit-scrollbar-thumb { background: #c5a059; border-radius: 10px; }

/* Le texte (Noir, Net, Sans Ombre) */
.section-soins .info-bulle p {
    color: #1a051a !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-shadow: none !important;
    margin: 0 0 15px 0;
    text-align: left;
}

/* 5. GESTION DES POSITIONS DES BULLES */
/* Objets du HAUT -> Bulle en DESSOUS */
.item-cristal .info-bulle,
.item-sauge .info-bulle,
.item-pendule .info-bulle {
    bottom: auto !important;
    top: 90% !important; /* Ajuste ce % pour descendre la bulle */
}
/* Objets du BAS -> Bulle au DESSUS */
.item-huile .info-bulle,
.item-diapason .info-bulle,
.item-pierre .info-bulle {
    top: auto !important;
    bottom: 90% !important; /* Ajuste ce % pour monter la bulle */
}

/* 6. ÉTAT ACTIF (AU CLIC) */
.objet-rituel.active .info-bulle {
    display: block !important;
}

.objet-rituel.active {
  /* L'objet cliqué monte un peu mais reste sous le menu */
    z-index: 100 !important;
}

/* Désactive le hover pour ne pas interférer avec le clic */
.objet-rituel:hover .info-bulle { display: none; }
.objet-rituel.active:hover .info-bulle { display: block !important; }

/* --- GESTION DES SLIDES DANS LES BULLES --- */
.slides-wrapper {
    position: relative;
    width: 100%;
}

.slide-item, .slide-item2 {
    display: none; /* On cache tout par défaut */
}

.slide-item.active, .slide-item2.active {
    display: block !important; /* On affiche uniquement l'actif */
}

/* --- STYLE DES DOTS (POINTS) --- */
.dots-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.dot {
    width: 10px;
    height: 10px;
    border: 1px solid #c5a059;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #c5a059; /* Point plein quand actif */
    box-shadow: 0 0 5px #c5a059;
}

/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* ----------------------------------------- MENTORAT PC ------------------------------------------------ */

.section-mentorat {
    position: relative;
    width: 100%;
    height: 600px; /* Hauteur réduite pour ne pas manger tout l'écran */
    background: #1a1a1a; /* Fond de secours */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.bureau-container {
    position: relative;
    width: 1000px; /* Largeur fixe pour stabiliser le placement */
    height: 550px;
    background: url('images/Bckgrnd-Buro.png') no-repeat center center;
    background-size: contain; /* L'image s'adapte sans être coupée */
}
.item-mentorat {
    position: absolute;
    cursor: pointer;
    z-index: 10;
}
/* On monte l'élément entier au-dessus du lot quand il est cliqué */
.item-mentorat.active {
    z-index: 9999 !important;
}
.item-mentorat:hover .label-objet {
    background: #c5a059 !important;
    color: #fff !important;
    transform: translateY(-3px);
}
/* La classe qui sera ajoutée au clic via JS */
.item-mentorat.active .info-bulle {
    display: block !important;
    z-index: 10000 !important;
}
/* Affichage au survol (PC) */
.item-mentorat:hover .info-bulle {
    display: none;
}

/* Pour les objets du haut, la bulle s'affiche DESSOUS */
.item-livre1 .info-bulle,
.item-livre2 .info-bulle {
    bottom: auto !important;
    top: 120% !important; /* Elle s'ouvre vers le bas */
}

/* --- PLACEMENT PRÉCIS SUR LES OBJETS --- */
.item-livre1   { top: 20%; left: 18%; }   /* Livre Ken Robinson */
.item-livre2   { top: 18%; right: 12%; }  /* Livre Jung */
.item-livre3   { top: 42%; left: 35%; }   /* Livre Dauphin */
.item-phone    { top: 42%; left: 58%; }   /* Téléphone */
.item-notes    { bottom: 15%; left: 20%; } /* Carnet Notes */
.item-filofax { bottom: 15%; right: 15%; } /* Filofax Marron */

/* --- RESTAURATION DES STYLES (Padding + Bordure) --- */
.label-objet {
    background: rgba(12, 2, 12, 0.85) !important;
    color: #c5a059 !important;
    padding: 8px 18px !important; /* Retour du padding */
    border: 1px solid #c5a059 !important; /* Retour de la bordure dorée */
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* --- STYLE DES INFO-BULLES --- */
.info-bulle {
    display: none;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    background: rgba(12, 2, 12, 0.95); /* Fond sombre */
    border: 1px solid #c5a059;
    padding: 20px;
    color: #ffffff !important; /* TEXTE BLANC (Vision nocturne OK lol) */
    border-radius: 8px;
    z-index: 100;
    text-align: left;
    max-height: 250px; /* Tu peux ajuster selon tes textes */
    overflow-y: auto;  /* L'ascenseur s'active si le texte dépasse */
    padding-right: 10px; /* Un peu d'espace pour ne pas coller à la barre de scroll */
}

.info-bulle, .info-bulle p {
    color: #ffffff !important; /* Blanc pur pour la lisibilité */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* On force le style du texte pour qu'il soit propre */
.info-bulle p {
    font-family: 'Inter', sans-serif;
    font-size: 13px; /* Un peu plus grand que les cartes car la bulle est plus large */
    line-height: 1.6;
    margin-bottom: 12px;
}

.info-bulle {
    z-index: 10000 !important; /* On s'assure qu'elle est au-dessus du titre */
}

.icon-mobile {
    display: none; /* Cache les icônes sur PC */
}

/* On personnalise la barre pour qu'elle soit discrète et dorée */
/* Personnalisation du scroll pour coller à la charte */
.info-bulle::-webkit-scrollbar {
    width: 7px; /* Plus fin, plus élégant */
}
.info-bulle::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.info-bulle::-webkit-scrollbar-thumb {
    background: #c5a059;
    border-radius: 10px;
}

.info-bulle .btn-rdv-carte {
    display: block;
    width: fit-content;
    margin: 15px auto 0 auto;
    background: #c5a059;
    color: #0c020c !important; /* Texte sombre sur fond doré */
    padding: 10px 20px;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    border-radius: 4px;
    text-align: center;
}

.close-bulle {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #c5a059;
    cursor: pointer;
    line-height: 1;
}
.close-bulle:hover { color: #fff; }

/* --- SECTION MOBILE --- */
@media (max-width: 768px) {
    .section-mentorat { height: auto; padding: 60px 20px; }
    .bureau-container {
        background: none; /* On enlève l'image encombrante sur mobile */
        height: auto; width: 100%;
        display: flex; flex-direction: column; gap: 15px;
    }
    .item-mentorat { position: relative !important; width: 100%; left: auto !important; top: auto !important; bottom: auto !important; right: auto !important; }
    .label-objet { width: 100%; text-align: center; }

    .icon-mobile {
            display: inline-block; /* Les icônes apparaissent enfin ! */
            margin-right: 10px;
        }

        .info-bulle {
          /* 1. On force le centrage fixe au milieu de l'écran */
          position: fixed !important;
          top: 50% !important;
          left: 50% !important;
          bottom: auto !important; /* Annule le 'bottom' du PC pour livre3, phone, etc. */
          transform: translate(-50%, -50%) !important;

          /* 2. On augmente la taille de l'encadré */
          width: 90vw !important;      /* Presque toute la largeur du téléphone */
          max-width: 450px !important;
          height: auto !important;
          max-height: 80vh !important; /* Très haute pour voir tout le texte */

          /* 3. Visuel et Scroll */
          background: rgba(12, 2, 12, 0.98) !important;
          padding: 30px 20px !important;
          border: 2px solid #c5a059 !important; /* Bordure plus marquée */
          overflow-y: auto !important; /* Permet de scroller DANS la bulle si texte long */
          z-index: 999999 !important;
          display: none;
      }

      /* On s'assure qu'aucune règle PC ne vient décaler la bulle mobile */
      .item-livre1 .info-bulle, .item-livre2 .info-bulle {
          top: 50% !important;
      }

    /* On ajoute un petit bouton "Fermer" ou une croix en haut de la bulle si tu veux */

    /* Optionnel : on peut choisir de n'afficher la bulle qu'au clic sur mobile avec un peu de JS */
}

/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* --------------------------- PAGE CONTACT ------------------------------------ */
/* 1. FOND DE PAGE (On oublie le blanc !) */
.page-contact {
    background: #f4eef7 !important; /* Ton mauve choisi */
    /* ICI : On utilise padding au lieu de margin pour que le mauve reste collé au haut */
    padding-top: 10px !important;
    padding-bottom: 0px !important;
    min-height: 100vh;
}

/* 2. LE BANDEAU HERO (Annonce Contact) */
.hero-contact {
    height: 200px;
    background: radial-gradient(circle at center, #3d1042 0%, #1a051a 70%, #000000 100%);
    background-color: #1a051a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0px; /* Espace pour le menu */
}

/* Ligne de séparation élégante sous le bandeau titre */
.hero-section {
    border-bottom: 1px solid #c5a059 !important;

}

.hero-contact h1 {
    font-family: 'Cinzel', serif !important;
    color: #c5a059 !important;
    font-size: 3.5rem !important;
    letter-spacing: 8px !important;
    margin: 0 !important;
}

.introduction-ton {
    color: #fff !important;
    font-style: italic;
    font-size: 1.1rem;
    max-width: 700px;
    line-height: 1.5;
}

/* 3. LE CONTENEUR (Violet sombre, pas marron !) */
.contact-container {
    background: #2d0a2d !important; /* Violet sombre texturé */
    border: 1px solid #c5a059 !important;
    border-radius: 15px !important;
    max-width: 850px !important;
    margin: 60px auto 0 !important;
    padding: 50px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7) !important;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 4. LES TEXTES INTERNES */
.contact-info {
    text-align: center;
    color: #fff !important;
}

.contact-info h3 {
    font-family: 'Cinzel', serif !important;
    color: #c5a059 !important;
    margin-bottom: 20px;
}

.orientation-bloc {
    background: rgba(197, 160, 89, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
}

.email-direct span {
    color: #c5a059;
    font-weight: bold;
}

/* 5. LE FORMULAIRE */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form input, .contact-form textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(197, 160, 89, 0.4) !important;
    padding: 15px !important;
    color: #fff !important;
    border-radius: 5px !important;
    font-family: inherit;
}

/* 6. LE BOUTON MAUVE CLAIR */
.contact-form button {
    background: #9d769d !important; /* Mauve clair */
    color: #fff !important;
    border: none !important;
    padding: 18px 40px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: bold !important;
    letter-spacing: 3px !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    border-radius: 5px !important;
    align-self: center; /* Centré pour plus de classe */
}

.contact-form button:hover {
    background: #b58db5 !important;
    transform: scale(1.05);
}

/* 7. L'ESPACE FINAL (Avant le footer) */
.spacer-footer {
    height: 40px !important; /* L'écart de sécurité */
    width: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }
    .hero-contact h1 { font-size: 2.5rem; }
    .contact-container { padding: 30px; margin-top: -20px; }

    .contact-container p {
        font-size: 0.9rem !important; /* On réduit juste un poil */
        padding: 0 10px; /* On donne un peu de marge interne */
        line-height: 1.5;
    }

    .contact-container h2 {
        font-size: 1.4rem !important; /* Pour que le titre ne l'écrase pas */
    }
}

/* Template Design by Bella Ismérie 01/03/2026
   Propriété exclusive - Toute reproduction sans accord est interdite.
*/
/* --------------------------- PROGRAMMES PC --------------------------- */

.page-programmes {
    background: #f4eef7 !important; /* FORÇAGE DU MAUVE */

    min-height: 100vh;
}

/* On rend le fond du container invisible pour ne plus voir le rectangle */
.page-programmes .portes-intro-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.programmes-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.section-title-gold {
    font-family: 'Cinzel', serif;
    color: var(--gold);
    font-size: 2.5rem;
    letter-spacing: 4px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.programmes-subtitle {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.programmes-subtitle span {
    display: block;
    margin-top: 10px;
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.statut {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
}
.statut.ouvert {
    background: rgba(0, 255, 0, 0.1);
    color: #44ff44;
    border: 1px solid #44ff44;
}
.statut.ferme {
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
    border: 1px solid #555;
}

.programmes-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Plus d'espace pour l'Odyssée */
    padding: 0 20px;
}

.section-programmes {
    width: 100%;
    display: flex;
    flex-direction: column; /* FORCE LE TITRE AU-DESSUS DE L'IMAGE */
    align-items: center;    /* CENTRE LE TOUT HORIZONTALEMENT */
    justify-content: center;
    background: radial-gradient(circle at center, #2d0a30 0%, #1a051a 100%);
    padding: 80px 0;
}

/* Cette règle ne s'appliquera QUE sur la page des programmes */
.page-programmes .section-portes-claire {
    background: transparent !important;
}

/* On en profite pour régler tes espaces de barre de progression ici aussi */
.page-programmes .progression-container {
    gap: 10px !important;
    margin-top: 30px;
}

.chemin-container {
    position: relative;
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    /* On utilise TON dégradé en fond derrière l'image */
    background: radial-gradient(circle at center, #2d0a30 0%, #1a051a 100%);
    border-radius: 15px;
    overflow: visible;
    border: 1px solid rgba(197, 160, 89, 0.2);
}

/* On remet l'image en pleine clarté par-dessus le fond */
.chemin-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('images/Bacgrnd-chemin.png') no-repeat center center;
    background-size: cover;
    opacity: 0.8; /* Légère transparence pour laisser deviner ton violet en dessous */
    z-index: 1;
    border-radius: 15px; /* L'image reste bien sagement dans les bords arrondis */
}

.borne-etape {
    position: absolute;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    z-index: 10;
}

/* Lorsqu'une étape est active, elle passe au premier plan absolu */
.borne-etape.active {
    z-index: 9999 !important;
}

/* On s'assure que les bulles ont une position bien définie */
.borne-etape .info-bulle {
    z-index: 10000 !important;
    position: absolute;
    /* Ajoute une couleur de fond bien opaque pour ne pas voir le chiffre 2 en transparence */
    background: var(--deep);
    pointer-events: auto; /* Permet de cliquer dans la bulle */
}

.numero-borne {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: #c5a059; /* Ton Or */
    /* LE SECRET : On crée un "halo" sombre très serré autour du chiffre
         pour qu'il se détache de la forêt sans assombrir toute la photo */
      text-shadow:
          -2px -2px 0 #1a051a,
           2px -2px 0 #1a051a,
          -2px  2px 0 #1a051a,
           2px  2px 0 #1a051a,
           0px 0px 15px rgba(197, 160, 89, 0.6); /* Petit glow or */
      transition: transform 0.3s ease;
    border: 2px solid var(--gold);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(26, 5, 26, 0.6);
}

.label-etape {
    color: white;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: rgba(26, 5, 26, 0.6); /* Petit bandeau discret sous le texte */
    padding: 2px 8px;
    border-radius: 3px;
    margin-top: 5px;
}

/* Positions ajustées selon ta courbe de sentier */
.etape-1 { bottom: 65%; left: 35%; }
.etape-2 { bottom: 65%; left: 55%; }
.etape-3 { top: 60%; right: 31%; }
.etape-4 { top: 60%; right: 55%; }

/* 1. LA STRUCTURE COMMUNE (Identique pour les 4 portes) */
.borne-etape .info-bulle {
    display: none;              /* CACHÉ PAR DÉFAUT (Sécurité) */
    position: absolute;
    width: 380px !important;    /* Taille fixe harmonisée */
    height: 480px !important;   /* Hauteur fixe harmonisée */
    padding: 30px !important;
    overflow-y: auto !important; /* L'ascenseur si le texte dépasse */
    background: rgba(26, 5, 26, 0.98) !important; /* Ultra-lisible */
    border: 1px solid #c5a059 !important;
    border-radius: 12px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.8);
    z-index: 10000 !important;
    flex-direction: column;
    gap: 15px;

    /* Reset des positions */
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none !important;
}

/* 2. L'AFFICHAGE AU CLIC */
.borne-etape.active .info-bulle {
    display: flex !important;   /* REVIENT AU CLIC */
}

/* 3. LE PLACEMENT PRÉCIS (Ajusté pour ta roue) */
/* Portes du HAUT */
.etape-1.active .info-bulle { top: -50px; left: -280px; }
.etape-2.active .info-bulle { top: -50px; left: 45px; }

/* Portes du BAS */
.etape-3.active .info-bulle { bottom: -50px; left: 45px; }
.etape-4.active .info-bulle { bottom: -50px; left: -280px; }

/* 4. FINITIONS (Bouton et Scroll) */
.info-bulle a.btn-rdv-carte {
    margin-top: auto !important;
    display: block !important;
    text-align: center;
}

.info-bulle::-webkit-scrollbar { width: 5px; }
.info-bulle::-webkit-scrollbar-thumb { background: #c5a059; border-radius: 10px; }

/* barre de progression */
.progression-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px; /* Espace entre les cartes, la barre et la forêt */
}

.progression-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
    font-family: 'Cinzel', serif;
}

.progression-titre {
    color: #1a051a; /* Ton violet très sombre */
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.progression-pourcentage {
  color: #c5a059; /* Or pour le chiffre */
  font-weight: bold;
  font-size: 1.3rem;
}

.barre-externe {
  width: 100%;
  height: 16px; /* Un peu plus épaisse */
  background: #e0d5e2; /* Un mauve très clair pour le fond de la barre */
  border-radius: 20px;
  border: 2px solid #1a051a; /* Bordure sombre pour bien la voir */
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

.barre-interne {
  height: 100%;
  background: linear-gradient(90deg, #c5a059, #8e6d31); /* Dégradé d'or */
  border-radius: 20px;
    position: relative;
    transition: width 1.5s ease-in-out; /* Effet de remplissage fluide au chargement */
}

.barre-glow {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: scan-barre 2s infinite;
}

@keyframes scan-barre {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progression-legende {
    color: #4a4a4a; /* Gris foncé pour le texte descriptif */
    font-size: 0.95rem;
    font-style: italic;
    text-align: center;
    margin-top: 0px;
    line-height: 1.4;
    opacity: 0.8;
}

@media (max-width: 768px) {
  .progression-container {
        margin: 20px auto;
    }
    /* 1. On réduit la section pour le mobile */
    .section-programmes {
        padding: 40px 15px;
    }

    /* 2. Le container perd sa hauteur fixe et son image de fond complexe */
    .chemin-container {
        width: 100%;
        height: auto; /* La hauteur s'adapte au nombre de programmes */
        background: none; /* On enlève l'image de forêt qui serait trop petite */
        border: none;
        display: flex;
        flex-direction: column;
        gap: 30px;
        overflow: visible;
    }

    /* 3. On enlève le positionnement absolu : les chiffres se suivent verticalement */
    .borne-etape {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        display: flex;
        flex-direction: row; /* Chiffre à gauche, texte à droite */
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid rgba(197, 160, 89, 0.2);
    }

    .numero-borne {
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
        margin-right: 15px;
    }

    /* 4. L'info-bulle sur mobile prend tout l'écran */
    .borne-etape.active .info-bulle {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 10000;
        box-shadow: 0 0 100px rgba(0,0,0,0.9);
    }

    /* Inversion pour l'étape 2 et 3 : le chiffre passe à droite */
    .etape-2, .etape-3 {
        flex-direction: row-reverse !important; /* Inverse l'ordre : texte puis chiffre */
        text-align: right;
    }

    /* On ajuste les marges pour que ce soit propre après l'inversion */
    .etape-2 .numero-borne, .etape-3 .numero-borne {
        margin-right: 0 !important;
        margin-left: 15px; /* La marge passe à gauche du chiffre */
    }

    /* On aligne les labels à droite pour le 2 et le 3 */
    .etape-2 .label-etape, .etape-3 .label-etape {
        align-items: flex-end;
        width: 100%;
    }
  }

    /* --- SECTION DES ESCALES (LE MENU DE CARTES) --- */
    .section-menu-details {
        background-color: #f4eef7 !important; /* Le fond mauve clair */
        padding: 100px 20px;
        width: 100%;
        display: block;
        position: relative;
    }

    .titre-menu {
        font-family: 'Cinzel', serif;
        color: var(--gold);
        text-align: center;
        margin-bottom: 60px;
        font-size: 2.5rem;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    /* LA GRILLE DES CARTES */
    .grid-programmes {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap; /* Pour que ça passe à la ligne tout seul */
        gap: 40px;
        justify-content: center; /* Centre les cartes horizontalement */
    }

    /* LA CARTE INDIVIDUELLE */
    .carte-programme-detail {
        background: #ffffff !important;
        border: 1px solid rgba(197, 160, 89, 0.4); /* Bordure dorée subtile */
        padding: 40px;
        flex: 1 1 450px; /* Largeur flexible : minimum 450px */
        max-width: 550px;
        position: relative;
        box-shadow: 0 15px 35px rgba(26, 5, 26, 0.08); /* Ombre légère */
        transition: transform 0.3s ease;
    }

    .carte-programme-detail:hover {
        transform: translateY(-5px); /* Petit effet de survol sympa */
    }

    /* LE PETIT BADGE AVEC LE NUMÉRO (1, 2, 3...) */
    .badge-etape {
        position: absolute;
        top: -25px;
        right: 30px;
        background: #1a051a;
        color: #c5a059;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Cinzel', serif;
        font-size: 1.4rem;
        border: 2px solid #c5a059;
        border-radius: 50%; /* Cercle parfait */
        z-index: 10;
    }

    /* TYPOGRAPHIE INTERNE */
    .sous-titre-menu {
        color: #c5a059;
        font-size: 0.9rem;
        text-transform: uppercase;
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
    }

    .nom-programme-titre {
        font-family: 'Cinzel', serif;
        color: #1a051a;
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    /* --- LE CONTENEUR DU LIVRE --- */
.menu-book-container {
    max-width: 1100px;
    margin: 60px auto;
    background: #ffffff;
    border: 12px solid #1a051a;
    border-radius: 8px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    position: relative;
    min-height: 650px; /* On assure une hauteur stable */
    overflow: hidden;
    margin-bottom: 100px !important; /* Crée un espace propre en dessous du livret */
}

/* On cache les boutons radio qui servent de "mémoire" de page */
input[name="menu-page"] { display: none; }

/* --- LES FEUILLETS (2 PAGES CHACUN) --- */
.menu-spread {
    display: flex;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

/* Logique d'affichage : Si le bouton 1 est coché, montre le feuillet 1, etc. */
#page1:checked ~ .menu-book-container #spread1,
#page2:checked ~ .menu-book-container #spread2,
#page3:checked ~ .menu-book-container #spread3,
#page4:checked ~ .menu-book-container #spread4,
#page5:checked ~ .menu-book-container #spread5,
#page6:checked ~ .menu-book-container #spread6,
#page7:checked ~ .menu-book-container #spread7 {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}

/* Style des pages */
.menu-page {
    flex: 1;
    padding: 60px;
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
}

.page-left { border-right: 1px solid rgba(0,0,0,0.05); }

/* --- LES VRAIES FLÈCHES (LES LABELS) --- */
.nav-arrow {
    position: absolute;
    bottom: 30px;
    background: #1a051a;
    color: #c5a059;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    border: 1px solid #c5a059;
    transition: 0.3s;
    z-index: 100;
}

.nav-arrow:hover { background: #c5a059; color: #1a051a; }
.next { right: 30px; }
.prev { left: 30px; }


/* Empêche le bouton de s'étirer et le décale de la flèche */
.page-left .btn-menu-gold {
    width: fit-content !important; /* Le bouton ne prend que la place de son texte */
    margin-left: 80px !important;  /* Espace pour la flèche retour */
    display: inline-block !important;
}

/* Empêche le bouton de droite de s'étirer aussi */
.page-right .btn-menu-gold {
    width: fit-content !important;
    margin-right: 80px !important; /* Espace pour la flèche suivante */
    display: inline-block !important;
}

/* Tes badges et boutons (On garde ton style chic) */
.badge-etape {
    position: absolute; top: 25px; right: 25px;
    background: #1a051a; color: #c5a059;
    width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif; border: 1px solid #c5a059;
}

.btn-menu-gold {
    display: inline-block;
    margin-top: auto;
    padding: 12px 28px;
    background-color: #1a051a;
    color: #c5a059;
    border: 1px solid #c5a059;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease; /* Indispensable pour l'effet fluide */
    cursor: pointer;
}
/* L'effet au survol qui avait disparu */
.btn-menu-gold:hover {
    background-color: #c5a059 !important;
    color: #1a051a !important;
    transform: translateY(-3px);
}



    /* --- ADAPTATION MOBILE --- */
    @media (max-width: 768px) {
        /* 1. Le conteneur perd sa rigidité et s'adapte à son contenu empilé */
        .menu-book-container {
            flex-direction: column !important; /* Force l'empilement vertical */
            min-height: auto !important;     /* Laisse la hauteur s'adapter */
            border-width: 6px !important;    /* Bordure plus fine */
            height: auto !important;         /* Remet dans le flux normal */
            overflow: visible !important;     /* Laisse le contenu dépasser */
            margin: 20px auto !important;    /* Réduit les marges */
        }

        /* 2. On casse la superposition absolue pour aligner les feuillets */
        .menu-spread {
            position: relative !important;   /* Remet dans le flux */
            opacity: 1 !important;           /* Toujours visible */
            pointer-events: auto !important;  /* Toujours cliquable */
            display: none !important;        /* Caché par défaut */
            flex-direction: column !important;
            height: auto !important;
            width: 100% !important;
            top: auto !important;
            left: auto !important;
        }

        /* 3. On ne montre que le feuillet ACTIF (grâce à tes boutons radio) */
        #page1:checked ~ .menu-book-container #spread1,
    #page2:checked ~ .menu-book-container #spread2,
    #page3:checked ~ .menu-book-container #spread3,
    #page4:checked ~ .menu-book-container #spread4,
    #page5:checked ~ .menu-book-container #spread5,
    #page6:checked ~ .menu-book-container #spread6,
    #page7:checked ~ .menu-book-container #spread7 {
            display: flex !important; /* Affiche le feuillet sélectionné */
        }

        /* 4. Style des pages empilées */
        .menu-page {
            padding: 40px 20px !important;
            width: 100% !important;
            flex: none !important;
            min-height: auto !important;
            border-right: none !important;
            border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* Petit trait de séparation */
        }

        /* Page de droite (Oracle) à centrer */
        .page-right {
            justify-content: center;
            align-items: center;
        }

        /* 5. Ajustement des éléments internes */
        .btn-menu-gold {
            margin: 30px auto 0 !important; /* Centre les boutons */
            width: fit-content !important;
            text-align: center;
        }

        /* 6. Les flèches restent fixes en bas pour feuilleter */
        .nav-arrow {
            bottom: 15px !important;
            z-index: 100 !important;
            opacity: 1 !important;
        }
        .next { right: 15px !important; }
        .prev { left: 15px !important; }

        /* Mobile : Plus besoin de décaler les boutons par rapport aux flèches */
        .page-left .btn-menu-gold,
        .page-right .btn-menu-gold {
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }




    /* ============================================================
       STYLE DE L'ORACLE BELLA
       ============================================================ */

    /* --- L'ESPACE DE DIVINATION ORACLE --- */
    .oracle-wrapper {
        background-color: #1a051a;
        color: white;
        min-height: 85vh;
        padding: 60px 20px;
        text-align: center;
        font-family: 'Cinzel', serif;
    }

    /* Titre réduit */
    .oracle-main-title {
        color: #c5a059;
        font-size: 1.8rem !important;
        letter-spacing: 3px;
        margin-bottom: 10px;
    }

    .instruction-text {
        font-size: 1rem;
        opacity: 0.8;
        margin-bottom: 30px;
    }

    /* Phrase d'intention douce */
    .ritual-phrase {
        font-family: 'Playfair Display', serif;
        font-size: 1.3rem;
        text-transform: none !important;
        font-style: italic;
        color: #ffffff;
        line-height: 1.6;
        margin-bottom: 30px;
    }

    /* Mélange accentué */
    @keyframes cardShuffle {
        0% { transform: translate(0, 0) rotate(0); }
        25% { transform: translate(-60px, 20px) rotate(-15deg); }
        50% { transform: translate(60px, -20px) rotate(15deg); }
        75% { transform: translate(-30px, -25px) rotate(-10deg); }
        100% { transform: translate(0, 0) rotate(0); }
    }

    .shuffling {
        animation: cardShuffle 0.6s ease-in-out infinite;
        opacity: 0.9;
    }

    /* Étalement centré */
    #spread-area {
        position: relative;
        max-width: 900px;
        height: 250px;
        margin: 50px auto;
    }

    .card-item {
        position: absolute;
        width: 80px;
        height: 130px;
        background: linear-gradient(135deg, #c5a059, #1a051a);
        border: 2px solid #c5a059;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* Animation de vol au centre */
    .card-flying {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(2) !important;
        z-index: 9999 !important;
        transition: all 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Résultat */
    .result-layout {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        margin-top: 40px;
        flex-wrap: wrap;
    }

    #card-image {
        width: 200px;
        border: 2px solid #c5a059;
        border-radius: 10px;
    }

    #card-image.reversed { transform: rotate(180deg); }

    /* --- LA BOX D'INTERPRÉTATION (CORRIGÉE) --- */
    .interpretation-box {
        display: block !important;
        max-width: 450px;
        text-align: left;
        border: 1px solid #c5a059 !important; /* Bordure dorée */
        padding: 25px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        text-transform: none !important; /* ICI : STOP LES MAJUSCULES */
        margin-top: 20px !important;
        color: white;
        line-height: 1.6;
    }

    /* Force le texte intérieur en minuscules */
    #card-interpretation {
        text-transform: none !important;
        color: white !important;
        line-height: 1.6 !important;
    }

    /* --- COULEURS DIAGNOSTIC / CONSEIL --- */
    .label-diag, .diag-style {
        color: #ffcc00 !important; /* OR */
        font-weight: bold !important;
        text-transform: uppercase !important;
    }

    .label-conseil, .conseil-style {
        color: #d1b3ff !important; /* LAVANDE */
        font-weight: bold !important;
        text-transform: uppercase !important;
    }

    .button-group { display: flex; gap: 15px; justify-content: center; }

    /* --- PHASE 4 : RÉSULTAT AÉRÉ --- */

    /* On descend l'invitation au retour et les boutons */
    .post-draw-actions {
        margin-top: 80px; /* Espace important sous la carte et l'interprétation */
        text-align: center;
        border-top: 1px solid rgba(197, 160, 89, 0.2); /* Petit trait de séparation subtil */
        padding-top: 40px;
    }

    .return-invite {
        font-size: 1.1rem;
        color: #c5a059;
        font-style: italic;
        margin-bottom: 30px; /* Espace avant les boutons */
    }

    /* --- ÉVENTAIL : EFFET DE SURVOL --- */
    #spread-area .card-item {
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition douce */
        z-index: 10;
    }

    #spread-area .card-item:hover {
        transform: translateY(-40px); /* La carte s'élève de 40px */
        z-index: 100; /* Passe au-dessus des autres */
        box-shadow: 0 10px 25px rgba(197, 160, 89, 0.5); /* Aura lumineuse au survol */
    }

    /* --- AJUSTEMENTS RESPONSIVE (MOBILE) --- */
    @media (max-width: 768px) {

        /* On réduit un peu la hauteur de l'éventail pour laisser de la place */
        #spread-area {
            height: 320px; /* Plus haut car on va avoir deux lignes */
            margin: 20px auto;
            max-width: 100%;
        }

        /* Ajustement des boutons de résultat pour qu'ils ne se chevauchent pas */
        .post-draw-actions .button-group {
            flex-direction: column; /* Boutons l'un au-dessus de l'autre sur mobile */
            gap: 15px;
            align-items: center;
        }

        .result-layout {
            flex-direction: column; /* Carte au-dessus du texte sur mobile */
            gap: 20px;
        }

        .interpretation-box {
            width: 90%; /* On utilise toute la largeur disponible */
            margin: 0 auto;
        }
    }






/* Empêche la sélection du texte sur tout le site */
body {
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
}

/* On laisse quand même les inputs (formulaire contact) utilisables */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}