/* assets/css/anatomie-relation.css */

/* ==========================================================================
   1. SECTION HERO (EN-TÊTE)
   ========================================================================== */

.ar-hero {
    background-color: var(--white-rock-light);
    padding: var(--section-padding) var(--section-padding) 0;
    text-align: center;
}

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

.ar-hero .overline {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--walnut);
}

.ar-hero h1 {
    font-size: clamp(3.2rem, 6.5vw, 5.5rem);
    color: var(--black-pearl); /* On remet la couleur noire d'origine */
    margin-bottom: 0.5rem;
}

/* On ajoute cette nouvelle règle pour cibler UNIQUEMENT le mot dans le span */
.ar-hero h1 .highlight-word {
    color: var(--walnut);
}

.ar-hero .tool-subtitle {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    color: var(--black-pearl-light);
}

.ar-hero-banner {
    margin-top: 3rem;
    /* MODIFICATION : On applique le border-radius et l'overflow au conteneur pour forcer le masquage des coins de l'image. C'est plus fiable. */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.08);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    max-width: 700px; /* Ajouté pour correspondre au max-width de l'image */
    margin-left: auto;
    margin-right: auto;
}

.ar-hero-banner:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 35px rgba(var(--black-pearl-rgb), 0.15);
    cursor: pointer;
}

.ar-hero-banner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    /* MODIFICATION : Le border-radius a été déplacé sur le conteneur parent (.ar-hero-banner) */
}


/* ==========================================================================
   2. STYLES DE CONTENU GÉNÉRAUX
   ========================================================================== */

.anatomie-relation-content .content-section {
    padding: var(--section-padding);
}

.anatomie-relation-content .content-section.alt-bg-light {
    background-color: var(--white-rock-light);
}

.content-section .section-title {
    font-family: 'Bebas Neue', sans-serif; /* <-- CHANGEMENT DE POLICE */
    font-size: clamp(3rem, 5vw, 4.2rem); /* Taille de police responsive */
    color: var(--walnut); /* Couleur du texte */
    text-align: center; /* Alignement centré */
    margin-bottom: 3rem; /* Marge en bas */
    position: relative; /* Nécessaire pour le pseudo-élément ::after */
    padding-bottom: 1.2rem; /* Espace pour le trait en dessous */
    letter-spacing: 0.03em; /* Espacement des lettres pour Bebas Neue */
}

.text-intro .lead-paragraph {
    font-size: 1.9rem;
    max-width: 70ch;
    margin: 0 auto 2rem auto;
    text-align: center;
}

.text-intro .highlight-box {
    background-color: var(--white-rock);
    border-left: 4px solid var(--walnut);
    padding: 1.8rem 2.2rem;
    margin: 2rem auto;
    border-radius: var(--border-radius-sm);
    max-width: 70ch;
    font-size: 1.7rem;
    text-align: center;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.text-intro .highlight-box:hover,
.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--black-pearl-rgb), 0.1);
    cursor: pointer;
}

/* ==========================================================================
   3. SECTION "POURQUOI CRUCIAL"
   ========================================================================== */

.why-crucial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.why-card {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    text-align: center;
    box-shadow: 0 5px 15px rgba(var(--black-pearl-rgb), 0.05);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.why-card i {
    color: var(--walnut);
    width: 3rem;
    height: 3rem;
    stroke-width: 1.5px;
    margin-bottom: 1rem;
}

.why-card h3 {
    font-size: 2rem;
    color: var(--black-pearl);
    margin-bottom: 1rem;
}

.why-card p {
    font-size: 1.6rem;
    color: var(--black-pearl-light);
}

/* ==========================================================================
   4. SECTION DES 5 PHASES
   ========================================================================== */

.phase-card {
    display: flex;
    gap: 2.5rem;
    background-color: var(--white-rock-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: 3rem;
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.07);
    /* AJOUT : Crée un nouveau contexte de rendu qui force le masquage des enfants (l'image) par la règle overflow:hidden. C'est la solution la plus propre. */
    isolation: isolate; 
}

.phase-card:last-child {
    margin-bottom: 0;
}

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

.phase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.phase-content {
    padding: 2.5rem 2.5rem 2.5rem 0;
    flex: 1;
}

.phase-header .phase-number {
    font-weight: 600;
    color: var(--quicksand);
    display: block;
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
}

.phase-header h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    color: var(--black-pearl);
    margin: 0;
    line-height: 1.1;
}

.phase-header .phase-duration {
    font-family: 'Courgette', cursive;
    color: var(--walnut);
    margin-top: 0.3rem;
}

.phase-description {
    font-size: 1.7rem;
    margin: 1.5rem 0;
}

/* --- Style du dépliant <details> --- */
.phase-content details {
    margin-top: 1.5rem;
    background-color: var(--white-rock);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--white-rock-medium);
}

.phase-content summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--walnut);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    list-style: none; /* Cache la flèche par défaut */
}

.phase-content summary::-webkit-details-marker {
    display: none; /* Cache la flèche par défaut sur Safari/Chrome */
}

.phase-content details[open] > summary {
    border-bottom: 1px solid var(--white-rock-medium);
}

/* --- Style du contenu à l'intérieur du dépliant --- */
.phase-details-content {
    font-size: 1.5rem;
    color: var(--black-pearl-light);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), padding 0.3s ease-out;
    padding: 0 1.5rem; /* Padding horizontal uniquement quand fermé */
}

.phase-content details[open] .phase-details-content {
    max-height: 1000px; 
    padding: 1.5rem;
    transition: max-height 1s ease-in-out, padding 0.3s ease-out;
}

.phase-details-content h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--black-pearl);
    margin-top: 1rem;
    margin-bottom: 0.8rem;
}

.phase-details-content h4:first-child {
    margin-top: 0;
}

.phase-details-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.phase-details-content ul li {
    padding-left: 1.8rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.phase-details-content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: -0.1em;
    color: var(--walnut);
    font-size: 1.5em;
}

.phase-details-content p {
    line-height: 1.6;
}

.phase-details-content p > strong {
    color: var(--black-pearl);
}

/* ==========================================================================
   5. SECTION AUTO-DIAGNOSTIC
   ========================================================================== */

.diagnostic-wrapper {
    display: flex;
    gap: 2.5rem;
    background-color: #fff;
    padding: 3rem;
    border-radius: var(--border-radius-lg);
}

.diagnostic-image {
    flex: 1;
    min-width: 300px;
}

.diagnostic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-md);
}

.diagnostic-form {
    flex: 1.5;
}

.diagnostic-form label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    font-size: 1.6rem; /* Police ajustée */
    line-height: 1.5;
}

.diagnostic-form input[type="number"] {
    width: 60px;
    padding: 0.5rem;
    border: 1px solid var(--quicksand-light);
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

.diagnostic-result {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--walnut);
    color: var(--white-rock-light);
    border-radius: var(--border-radius-sm);
    text-align: center;
}

.diagnostic-result h3 {
    font-size: 1.8rem;
}

/* NOUVEAUX STYLES POUR LE QUESTIONNAIRE */
.diagnostic-questions {
    margin-bottom: 2.5rem;
}

.diagnostic-questions ol {
    list-style: none;
    padding-left: 0;
    font-size: 1.6rem;
    color: var(--black-pearl-light);
}

.diagnostic-questions li {
    background-color: var(--white-rock);
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--quicksand-light);
}

.diagnostic-questions li label {
    width: 100%;
    gap: 1.5rem; /* Espace entre le texte et le champ numérique */
}

.diagnostic-submit-btn {
    display: block;
    width: 100%;
    padding: 1.4rem 2rem; /* Légèrement plus haut */
    font-family: 'Outfit', sans-serif; /* Utilise la police des titres pour la cohérence */
    font-size: 1.6rem; /* Taille ajustée pour les majuscules */
    font-weight: 700; /* Police plus grasse pour plus d'impact */
    text-transform: uppercase; /* Met le texte en majuscules */
    letter-spacing: 1.5px; /* Espace les lettres pour un look premium */
    color: var(--white-rock-light); /* Utilise la variable de couleur pour le blanc */
    background: linear-gradient(90deg, var(--walnut), var(--quicksand));
    border: none;
    border-radius: var(--border-radius-md); /* Bords un peu plus arrondis */
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.diagnostic-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(var(--black-pearl-rgb), 0.15);
}

/* NOUVEAUX STYLES POUR LE CONTENEUR SCROLLABLE */
.questions-scroll-container {
    max-height: 450px; /* Hauteur maximale avant que le scroll n'apparaisse */
    overflow-y: auto;  /* Affiche la barre de défilement verticale si nécessaire */
    padding: 0.5rem 1rem 0.5rem 0.5rem; /* Espace intérieur pour que le contenu ne colle pas au bord */
    border: 1px solid var(--white-rock-medium);
    border-radius: var(--border-radius-md);
    background-color: #fff; /* Fond blanc pour bien délimiter la zone */
}

.questions-scroll-container li:last-child {
    margin-bottom: 0;
}

/* Amélioration esthétique : personnalisation de la barre de défilement (pour Chrome/Safari/Edge) */
.questions-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.questions-scroll-container::-webkit-scrollbar-track {
    background: var(--white-rock); /* Couleur de fond de la piste */
    border-radius: 10px;
}

.questions-scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--quicksand); /* Couleur de la barre de défilement */
    border-radius: 10px;
    border: 2px solid var(--white-rock); /* Crée un petit espace autour de la barre */
}

.questions-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--walnut); /* Changement de couleur au survol */
}

/* Pour Firefox */
.questions-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: var(--quicksand) var(--white-rock);
}

/* NOUVEAUX STYLES POUR L'INSTRUCTION DU FORMULAIRE */
.diagnostic-form > p:first-child {
    font-family: 'Courgette', cursive;
    color: var(--walnut);
    text-align: right;
    font-size: 1.7rem;
    padding-right: 1rem; /* Ajoute un petit espace à droite pour que le texte ne colle pas au bord */
    margin-bottom: 1.5rem; /* Ajuste l'espacement avec le bloc de questions */
}


/* ==========================================================================
   6. SECTION TRANSITIONS
   ========================================================================== */

.transitions-wrapper {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.transition-image {
    flex: 1;
}

.transition-image img {
    border-radius: var(--border-radius-md);
}

.transition-content {
    flex: 1.5;
}

.transition-content h3 {
    font-size: 2.2rem;
    color: var(--black-pearl);
    text-align: center;
    margin-top: 0;
}

.transition-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.transition-card {
    background-color: var(--white-rock-light);
    padding: 1.5rem;
    border-radius: var(--border-radius-sm);
}

.transition-card h4 {
    font-size: 1.6rem;
    color: var(--walnut);
}

.transition-card p {
    font-size: 1.4rem;
    color: var(--black-pearl-light);
}

.transitions-section .highlight-box {
    text-align: center;
    border-left-color: var(--walnut);
}

/* ==========================================================================
   7. SECTION CTA FINAL
   ========================================================================== */

.final-cta-section {
    text-align: center;
    padding: var(--section-padding);
}

.final-cta-section.alt-bg-dark {
    background-color: var(--black-pearl);
    color: var(--white-rock-light);
}

.final-cta-section.alt-bg-dark h2 {
    color: var(--white-rock-light);
}

.final-cta-section .cta-image-container {
    max-width: 350px;
    margin: 0 auto 2rem auto;
}

.final-cta-section h2 {
    font-size: 2.8rem;
}

.final-cta-section p {
    max-width: 60ch;
    margin: 1rem auto 2rem auto;
}

.final-cta-section .final-words {
    font-family: 'Courgette', cursive;
}

/* AJOUT : Règle pour arrondir les coins de l'image du CTA final */
.final-cta-section .cta-image-container img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
}


/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .phase-card, .diagnostic-wrapper, .transitions-wrapper {
        flex-direction: column;
    }
    .phase-image {
        flex-basis: 200px; /* Hauteur fixe pour l'image sur mobile */
    }
    .phase-content {
        padding: 1.5rem;
    }
    .transition-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   9. EFFETS DE SURVOL (HOVER) POUR LES IMAGES
   ========================================================================== */

/* 
   Étape 1: On définit la transition sur l'état initial des images.
   Cela garantit que l'animation sera fluide à l'entrée ET à la sortie du survol.
   Nous ciblons toutes les images concernées en une seule règle.
*/
.diagnostic-image img,
.transition-image img,
.final-cta-section .cta-image-container img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s ease-out;
}


/* --- Effet pour les images d'illustration (Auto-diagnostic & Transitions) --- */
/* Même principe ici : le hover sur le conteneur, l'effet sur l'image */
.diagnostic-image:hover img,
.transition-image:hover img {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(var(--black-pearl-rgb), 0.15);
}
.diagnostic-image,
.transition-image {
    cursor: pointer;
}


/* --- Effet pour l'image du CTA final --- */
/* Et enfin, pareil pour le CTA final */
.final-cta-section .cta-image-container:hover img {
    transform: scale(1.05);
}
.final-cta-section .cta-image-container {
    cursor: pointer;
}