/* assets/css/intimite-profonde.css */

/* --- Styles Généraux pour la Page Intimité Profonde --- */
.intimite-profonde-page .tool-page-header {
    border-bottom: none; /* Peut-être différent de fondations-solides */
}

/* --- Section Hero (Titre et Image principale) --- */
.ip-hero {
    background-color: var(--white-rock-light); /* Ou une couleur spécifique */
    padding: 0; /* Le padding sera géré par le contenu */
    text-align: center;
    position: relative; /* Pour le positionnement du texte sur l'image si besoin */
}
.ip-hero-image-container {
    max-height: 500px; /* Ajustez selon la hauteur de votre bannière */
    overflow: hidden;
}
.ip-hero-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Pour s'assurer que l'image couvre bien */
    display: block;
}
.ip-hero-content {
    padding: var(--section-padding) var(--section-padding) calc(var(--section-padding) * 0.5);
}
.ip-hero h1 {
    font-size: clamp(3rem, 5.5vw, 4.8rem); /* Ajusté pour un titre impactant */
    color: var(--black-pearl);
    margin-bottom: 0;
    line-height: 1.15;
}
.ip-hero .highlight-text-inline {
    color: var(--walnut);
}

/* ==========================================================================
   AJOUT : Effets de survol (hover) pour les éléments interactifs
   ========================================================================== */

/* 1. Préparation de l'animation sur tous les éléments concernés */
.ip-progression-item,
.ip-image-wrapper-rounded-progression,
.ip-rule-item,
.ip-image-wrapper-rounded,
.ip-level-box,
.ip-features-grid > div,
.ip-first-question-box,
.ip-final-cta-image {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* 2. Définition de l'effet au survol de la souris */
.ip-progression-item:hover,
.ip-image-wrapper-rounded-progression:hover,
.ip-rule-item:hover,
.ip-image-wrapper-rounded:hover,
.ip-level-box:hover,
.ip-features-grid > div:hover,
.ip-first-question-box:hover,
.ip-final-cta-image:hover {
    transform: translateY(-6px); /* Soulève légèrement l'élément */
    box-shadow: 0 12px 35px rgba(var(--black-pearl-rgb), 0.12); /* Rend l'ombre plus prononcée */
    cursor: pointer; /* Change le curseur pour indiquer l'interactivité */
}

/* Cas particulier pour les boîtes sur fond sombre : l'ombre est moins visible, 
   on peut ajouter une bordure claire pour compenser. C'est optionnel mais élégant. */
.ip-features-grid > div:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2); /* Ombre plus visible sur fond sombre */
}

/* --- Contenu Principal --- */
.intimite-profonde-content .content-section {
    /* --- MODIFIÉ --- */
    /* Applique le padding en haut/bas ET sur les côtés gauche/droit */
    padding: var(--section-padding); 
    
    text-align: left; /* Par défaut pour le texte principal */
}
.intimite-profonde-content .content-section.alt-bg-light {
    background-color: var(--white-rock-light);
}
.intimite-profonde-content .content-section.alt-bg-dark {
    background-color: var(--black-pearl);
    color: var(--white-rock-light);
}
.intimite-profonde-content .content-section.alt-bg-dark .section-title-fancy.dark,
.intimite-profonde-content .content-section.alt-bg-dark h3,
.intimite-profonde-content .content-section.alt-bg-dark p,
.intimite-profonde-content .content-section.alt-bg-dark li {
    color: var(--white-rock-light);
}
.intimite-profonde-content .content-section.alt-bg-dark p strong,
.intimite-profonde-content .content-section.alt-bg-dark li strong {
    color: var(--white-rock);
}
.intimite-profonde-content .content-section.alt-bg-dark .section-title-fancy.dark::after {
    background: var(--walnut-light);
}
.intimite-profonde-content .section-title-fancy {
    text-align: center;
    margin-bottom: 2.5rem;
}
.intimite-profonde-content p,
.intimite-profonde-content li {
    font-size: 1.7rem;
    line-height: 1.8;
    max-width: 75ch; /* Pour la lisibilité */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}
.intimite-profonde-content ul, .intimite-profonde-content ol {
    padding-left: 2.5rem; /* Indentation pour les listes */
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
}
.intimite-profonde-content strong {
    color: var(--black-pearl); /* Ou var(--walnut) si vous préférez */
}

/* Section Introduction */
.ip-introduction p {
    text-align: center;
}

/* Section Paradoxe */
.ip-paradox {
    background-color: var(--white-rock); 
}
.ip-paradox .section-title-fancy { margin-bottom: 1.5rem; }
.ip-paradox > p { text-align: center; margin-bottom: 3rem;}
.ip-comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 800px;
    margin: 0 auto;
}
.ip-comparison-item h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.6rem;
    color: var(--walnut);
    text-align: center;
    margin-bottom: 0.5rem;
}
.ip-comparison-item p {
    text-align: center;
    max-width: 60ch;
    margin-bottom: 0.5rem;
}
.ip-comparison-item .ip-emotional-depth {
    font-style: italic;
    color: var(--black-pearl-light);
    margin-bottom: 0.5rem; 
}
.ip-comparison-item:not(:first-child) {
    border-top: 1px dashed var(--quicksand-light);
    padding-top: 1.5rem;
}


/* Section Science */
.ip-science p { text-align: center; }
.ip-pillars-container {
    margin-top: 3rem;
    text-align: center;
}
.ip-pillars-container h3 {
    font-size: 2rem; /* Optionnel: légèrement plus grand pour Courgette */
    font-family: 'Courgette', cursive; /* AJOUTÉ */
    color: var(--walnut);             /* MODIFIÉ */
    font-weight: normal; /* Courgette est souvent mieux sans bold supplémentaire */
    margin-bottom: 1.7rem; 
}

.ip-pillars-list {
    list-style-type: none; 
    padding-left: 0;       
    text-align: center;    
    display: flex;         
    flex-direction: column;
    gap: 1.5rem;           
    align-items: center;   
}

.ip-pillars-list li {
    max-width: 65ch;         
    width: 100%;             
    margin-left: 0;          
    margin-right: 0;         
    margin-bottom: 0;        
    
    background-color: var(--white-rock-light); 
    border: 1px solid var(--quicksand-light); 
    border-radius: var(--border-radius-md);   
    padding: 2rem 2.5rem;                     
    text-align: left;                       
    box-shadow: 0 3px 8px rgba(var(--black-pearl-rgb), 0.04); 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
}

.ip-pillars-list li:hover {
    transform: translateY(-4px) scale(1.01); 
    box-shadow: 0 6px 15px rgba(var(--black-pearl-rgb), 0.08); 
    border-color: var(--quicksand); 
}

.ip-pillars-list li strong { 
    color: var(--walnut);    
    display: block;          
    margin-bottom: 0.5rem;   
    font-size: 1.8rem;       
}
/* --- Styles pour l'Accordéon des Niveaux --- */
.accordion-item {
    border: 1px solid var(--quicksand-light);
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    
    /* --- MODIFICATIONS --- */
    width: 95%; /* Prend 75% de la largeur de son conteneur */
    max-width: 800px; /* Garde une largeur maximale pour les très grands écrans */
}

.accordion-trigger {
    background-color: transparent;
    border: none;
    /* MODIFIÉ: Réduire le padding vertical pour réduire la hauteur */
    padding: 1rem 2rem; /* Exemple: de 1.5rem à 1rem en vertical */
    width: 100%; 
    cursor: pointer;
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 2rem; /* MODIFIÉ: Augmenter l'espace entre titre et icône */
    font: inherit; 
    min-height: auto; /* S'assurer qu'il n'y a pas de hauteur minimale héritée qui l'empêche de rétrécir */
}

.accordion-trigger h3 {
    font-size: 1.6rem; /* MODIFIÉ: Réduire la taille de la police du titre */
    color: var(--black-pearl);
    margin: 0; 
    line-height: 1.9; /* AJOUTÉ: Pour mieux contrôler la hauteur du texte */
}

.accordion-icon {
    display: inline-block;
    width: 18px; /* Optionnel: Légère réduction pour s'adapter au texte plus petit */
    height: 18px;
    border: solid var(--walnut); 
    border-width: 0 2px 2px 0; /* Optionnel: Bordure un peu plus fine pour l'icône plus petite */
    transform: rotate(45deg); 
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0; /* AJOUTÉ: Empêche l'icône de rétrécir si l'espace est limité */
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(-135deg); 
}

.accordion-content {
    padding: 0 2rem 2rem 2rem; 
    /* border-top: 1px solid var(--quicksand-light); /* Optionnel */
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(-135deg); /* Flèche pointant vers le haut lorsque ouvert */
}

.accordion-content {
    padding: 0 2rem 2rem 2rem; /* Padding pour le contenu (pas de padding en haut car le trigger en a déjà en bas) */
    /* border-top: 1px solid var(--quicksand-light); /* Ligne de séparation optionnelle */
}

/* Styles pour les éléments à l'intérieur de .accordion-content (s'ils ont besoin d'être ajustés) */
.accordion-content .level-tagline-preview {
    /* Styles existants de .ip-level-detail .level-tagline-preview */
    font-family: 'Courgette', cursive;
    font-size: 1.2em; /* Ajusté pour être relatif au texte du paragraphe dans le contenu */
    color: var(--walnut);
    display: block;
    margin-top: 1.5rem; /* AJOUT : Crée un espace en haut */
    margin-bottom: 1.5rem;
    text-align: center; /* Centrer la tagline */
}

.accordion-content > p { /* Paragraphe d'introduction dans le contenu */
    text-align: center; /* Centrer le paragraphe d'intro */
    /* Les autres styles sont hérités de .intimite-profonde-content p */
}

.accordion-content .ip-question-example {
    /* Les styles existants devraient bien s'appliquer */
}

.accordion-content h4:not(.ip-question-example h4) { /* Pour "Autres Questions..." */
    /* Les styles existants devraient bien s'appliquer */
}

.accordion-content .ip-question-list-preview {
    /* Les styles existants devraient bien s'appliquer */
}

.ip-progression .section-title-fancy {
    margin-bottom: 3rem;
}

.ip-progression-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: stretch; 
}

/* Style commun pour les 3 boîtes de texte */
.ip-progression-item {
    background-color: var(--white-rock);
    padding: 2.5rem;
    border-radius: var(--border-radius-lg, 15px); /* Coins arrondis, avec une valeur par défaut de 15px */
    box-shadow: 0 6px 18px rgba(var(--black-pearl-rgb), 0.06);
    display: flex;
    flex-direction: column;
}

.ip-progression-item h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    color: var(--black-pearl);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

.ip-progression-item .progression-subtitle {
    display: block;
    font-family: 'Courgette', cursive;
    font-size: 1.8rem;
    color: var(--walnut);
    font-weight: normal;
    margin-bottom: 1.5rem;
}

.ip-progression-item p {
    font-size: 1.6rem;
    color: var(--black-pearl-light);
    margin-bottom: 0;
    line-height: 1.7;
    flex-grow: 1; 
}

/* Positionnement de l'image dans la grille */
.ip-progression-item-image {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* On enlève les styles du .ip-progression-item qui ne s'appliquent pas ici */
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 0; /* On annule le radius sur cet item pour le mettre sur le wrapper */
}

/* Le conteneur direct de l'image, C'EST LUI QUI FAIT LE TRAVAIL */
.ip-image-wrapper-rounded-progression {
    border-radius: var(--border-radius-lg, 15px); /* Coins arrondis, avec une valeur par défaut */
    overflow: hidden; /* TRÈS IMPORTANT: coupe les coins de l'image */
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.1);
    width: 100%;
    height: 100%;
}

/* L'image elle-même, qui remplit son conteneur */
.ip-progression-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Positionnement spécifique des boîtes de texte */
.ip-progression-item-1 { grid-area: 1 / 2 / 2 / 3; }
.ip-progression-item-2 { grid-area: 2 / 2 / 3 / 3; }
.ip-progression-item-3 {
    grid-area: 3 / 1 / 4 / 3;
    text-align: center;
}
.ip-progression-item-3 h3, .ip-progression-item-3 .progression-subtitle {
    text-align: center;
}

/* Responsive pour tablettes et mobiles */
@media (max-width: 768px) {
    .ip-progression-layout {
        grid-template-columns: 1fr;
    }
    
    .ip-progression-item-image,
    .ip-progression-item-1,
    .ip-progression-item-2,
    .ip-progression-item-3 {
        grid-column: auto;
        grid-row: auto;
    }

    .ip-progression-item-image {
        order: -1;
        height: 300px;
    }
}

/* Section Comment Utiliser */
.ip-how-to .ip-levels-intro {
    text-align: center;
    margin-bottom: 8rem;
}
.ip-how-to .ip-levels-intro h3 {
    font-size: 2.4rem; 
    margin-bottom: 1.2rem; 
    font-family: 'Courgette', cursive; 
    color: var(--walnut);             
    font-weight: normal; 
}
.ip-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    max-width: 1000px;
    margin: 0 auto 8rem auto; /* Augmentation de la marge inférieure */
}
.ip-level-box {
    background-color: var(--white-rock);
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    text-align: center;
    box-shadow: 0 5px 15px rgba(var(--black-pearl-rgb), 0.05);
}
.ip-level-image {
    width: 150px; 
    height: 150px;
    object-fit: contain;
    margin: 0 auto 1.8rem auto;
    border-radius: var(--border-radius-sm);
}
.ip-level-box h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.9rem;
    color: var(--black-pearl);
    margin-bottom: 0.5rem;
}
.ip-level-box .ip-level-tagline {
    font-style: italic;
    font-family: 'Courgette', cursive; 
    color: var(--walnut);             
    margin-bottom: 1rem;
    display: block;
}
.ip-level-box p:not(.ip-level-tagline) {
    font-size: 1.5rem;
    text-align: center;
}

/* --- GOLDEN RULES --- */
.ip-golden-rules {
    margin-top: 4rem; 
    text-align: center; 
}

.ip-golden-rules h3 { 
    font-size: 2.2rem; 
    margin-bottom: 3rem; 
}

.ip-golden-rules-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: stretch; /* MODIFIÉ: Étirer les colonnes */
    gap: 3rem; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 var(--section-padding-small, 2rem); 
}

.ip-rules-column {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; 
}

.ip-rules-column-center {
    display: flex; 
    justify-content: center;
    align-items: center; 
}

.ip-image-wrapper-rounded {
    display: block; /* CHANGÉ: block est souvent plus simple à gérer pour un wrapper d'image */
    position: relative; /* Pour s'assurer qu'il établit un contexte de formatage */
    max-width: 300px;      
    width: auto; /* Laisser l'image déterminer la largeur jusqu'à max-width */
                 /* Ou width: 100%; si la colonne parente a une largeur définie que vous voulez remplir */
    margin: 0 auto; /* Pour centrer le wrapper si sa max-width n'est pas atteinte par l'image */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.08);
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix pour border-radius/overflow */
    z-index: 1; /* Pour s'assurer qu'il est au-dessus d'éventuels éléments adjacents non positionnés */
}

.ip-golden-rules-image-portrait {
    display: block; 
    width: 100%; /* L'image prend 100% de la largeur de son wrapper */
    height: auto;
    /* object-fit: contain; /* Commentez temporairement pour voir si ça change quelque chose */
    /* Si vous commentez object-fit, l'image pourrait être rognée si son ratio ne correspond pas.
       Mais cela peut aider à diagnostiquer si c'est lié à la manière dont l'image est dimensionnée. */
}

.ip-rule-item {
    background-color: var(--white-rock); 
    padding: 2rem;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 10px rgba(var(--black-pearl-rgb), 0.05);
    text-align: left; 
}

/* Cibler le dernier item de chaque colonne de règles pour le pousser vers le bas */
.ip-rules-column-left .ip-rule-item:last-child,
.ip-rules-column-right .ip-rule-item:last-child {
    margin-top: auto; /* AJOUTÉ: Pousse cet item vers le bas de la colonne flex */
}

.ip-rule-item h4 {
    font-size: 1.8rem; 
    color: var(--walnut);
    margin-top: 0;
    margin-bottom: 1.2rem;
}

.ip-rule-item ul {
    list-style: disc; 
    padding-left: 1.8rem; 
    margin-bottom: 0; 
}

.ip-rule-item li {
    font-size: 1.5rem; 
    color: var(--black-pearl-light);
    margin-bottom: 0.7rem;
    line-height: 1.6;
}

/* --- Responsive pour la section Golden Rules --- */
@media (max-width: 992px) { 
    .ip-golden-rules-layout {
        grid-template-columns: 1fr 1fr; 
    }
    .ip-rules-column-left { grid-column: 1 / 2; }
    .ip-rules-column-center { grid-column: 2 / 3; grid-row: 1 / span 2; }
    .ip-rules-column-right { grid-column: 1 / 2; grid-row: 2 / 3; margin-top: 2.5rem; }
}

@media (max-width: 768px) { 
    .ip-golden-rules-layout {
        grid-template-columns: 1fr; 
        gap: 2rem;
    }
    .ip-rules-column-center {
        order: -1; 
        margin-bottom: 2rem; 
    }
    .ip-rules-column-right {
        margin-top: 0; 
    }
    .ip-golden-rules-image-portrait { /* L'image elle-même, pas le wrapper */
        max-width: 250px; 
    }
     .ip-image-wrapper-rounded { /* Le wrapper doit aussi s'adapter */
        max-width: 250px;
    }
}
/* FIN GOLDEN RULES */


/* Section Aperçu des Niveaux */
/* --- Conteneur général de la section --- */
.ip-levels-preview {
    background-color: var(--white-rock); /* Fond légèrement différent pour encadrer les cartes */
}

/* --- Conteneur des 3 accordéons --- */
.ip-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* ESPACE PARFAIT entre chaque niveau */
    max-width: 800px;
    margin: 0 auto;
}

/* --- Le style de la "carte" accordéon --- */
.accordion-item {
    background-color: #fff; /* Fond blanc pour l'effet carte */
    border: 1px solid var(--quicksand-light);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 15px rgba(var(--black-pearl-rgb), 0.05);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden; /* Important pour que les coins arrondis s'appliquent bien */
}

.accordion-item:hover {
    border-color: var(--walnut);
    box-shadow: 0 7px 25px rgba(var(--black-pearl-rgb), 0.08);
}

/* --- Le bouton cliquable (trigger) --- */
.accordion-trigger {
    background-color: transparent;
    border: none;
    padding: 2rem 2.5rem; /* Padding ajusté pour moins de hauteur */
    width: 100%; 
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* Aligne le titre à gauche et l'icône à droite */
    align-items: center;
    text-align: left;
    gap: 2rem;
    font: inherit; 
}

/* Style quand l'accordéon est OUVERT */
.accordion-trigger[aria-expanded="true"] {
    background-color: var(--white-rock-light);
}

/* --- Le titre H3 dans le bouton --- */
.accordion-trigger h3 {
    margin: 0;
    line-height: 1.2;
    display: flex;
    flex-direction: column; /* "NIVEAU 1" au-dessus de "Découverte" */
    gap: 0.2rem;
    align-items: flex-start;
}

/* Style pour "NIVEAU X" */
.accordion-trigger .level-prefix {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--black-pearl-light);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Style pour "Découverte", "Connexion", "Fusion" */
.accordion-trigger .level-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    color: var(--black-pearl);
    letter-spacing: 0.03em;
}

/* --- L'icône chevron --- */
.accordion-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: solid var(--walnut); 
    border-width: 0 3px 3px 0;
    transform: rotate(45deg); 
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(-135deg); /* Flèche vers le haut */
}

/* --- Le contenu qui se déplie --- */
.accordion-content {
    padding: 0 2.5rem 2.5rem 2.5rem; /* Padding ajusté */
    border-top: 1px solid var(--quicksand-light);
}

.accordion-content .level-tagline-preview {
    font-family: 'Courgette', cursive;
    font-size: 1.8rem;
    color: var(--walnut);
    display: block;
    margin-bottom: 2rem;
    text-align: center;
}
.ip-question-example {
    background-color: var(--white-rock); /* Fond légèrement contrasté */
    padding: 2rem; /* Augmentation légère du padding pour plus d'aération */
    border-radius: var(--border-radius-sm);
    margin: 1.5rem auto;
    max-width: 70ch;
    border-left: 3px solid var(--quicksand);
}
.ip-question-example h4 {
    font-size: 1.6rem;
    color: var(--walnut);
    margin-bottom: 0.5rem;
    text-align: left;
}
.ip-question-example .question-text strong {
    font-weight: 600; 
}
.ip-question-example .question-rationale {
    font-size: 1.4rem;
    font-style: italic;
    color: var(--black-pearl-light);
    margin-top: 1rem;
    margin-bottom: 0;
}
.ip-level-detail h4:not(.ip-question-example h4) { 
    font-size: 1.8rem;
    color: var(--black-pearl);
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}
.ip-question-list-preview {
    list-style: disc;
}
.ip-question-list-preview li {
    font-size: 1.6rem;
}
.ip-section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--quicksand-light), rgba(0, 0, 0, 0));
    margin: 3rem auto;
    max-width: 300px;
}

/* Section Art de la Progression */
.ip-progression > div { 
    margin-bottom: 2rem;
    text-align: center;
}
.ip-progression h3 {
    font-size: 2rem;
    color: var(--walnut);
    margin-bottom: 0.5rem;
}

/* ==================================================================== */
/* == SECTION TRANSFORMER LES DÉFIS (MISE À JOUR) == */
/* ==================================================================== */

/* L'image principale de la section (pas de changement ici) */
.ip-challenges .ip-section-image {
    display: block;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
    border-radius: var(--border-radius-lg, 15px);
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.08);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.ip-challenges .ip-section-image:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 35px rgba(var(--black-pearl-rgb), 0.15);
    cursor: pointer;
}

/* Le conteneur des deux cartes */
.ip-challenge-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem; /* Espace entre les deux cartes */
    margin-top: 2.5rem;

    /* --- ACTION 1 : On décolle des bords --- */
    /* On définit une largeur maximale et on centre le conteneur */
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
}

/* Style de chaque carte/colonne */
.ip-challenge-column {
    flex: 1;
    min-width: 300px;
    background-color: var(--white-rock);
    padding: 3rem;
    border: 1px solid var(--white-rock-medium);
    display: flex;
    flex-direction: column;

    /* --- ACTION 2 : On arrondit les coins --- */
    /* Cette ligne était déjà là, mais on s'assure qu'elle est bien appliquée */
    border-radius: var(--border-radius-lg, 15px);
    
    /* On prépare une ombre de base */
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.07);

    /* --- ACTION 3 : On prépare l'animation --- */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* --- ACTION 3 : On définit l'effet de survol (hover) --- */
.ip-challenge-column:hover {
    transform: translateY(-6px); /* La carte se soulève */
    box-shadow: 0 12px 35px rgba(var(--black-pearl-rgb), 0.12); /* L'ombre devient plus prononcée */
}

/* Les styles pour le contenu des cartes (pas de changement majeur) */
.ip-challenge-column h3 {
    font-size: 2.2rem;
    color: var(--walnut);
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--quicksand-light);
}
.ip-challenge-column h4 {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--black-pearl);
    margin: 2rem 0 1rem 0;
}
.ip-challenge-column ul {
    list-style: none;
    padding-left: 0;
}
.ip-challenge-column ul li {
    font-size: 1.6rem;
    padding-left: 2rem;
    position: relative;
    margin-bottom: 1.2rem;
    line-height: 1.6;
}
.ip-challenge-column ul li::before {
    content: '■';
    position: absolute;
    left: 0;
    top: 0.1em;
    color: var(--walnut);
    font-size: 0.8em;
}

/* Responsive pour mobile (pas de changement majeur) */
@media (max-width: 768px) {
    .ip-challenge-navigation {
        gap: 1.5rem;
    }
    .ip-challenge-column {
        padding: 2rem;
    }
}

/* Section Débloquer l'Expérience Complète */
.ip-unlock-full .section-title-fancy.dark { margin-bottom: 1rem; }
.ip-unlock-full > p { text-align: center; color: var(--quicksand-light); margin-bottom: 3rem; }
.ip-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.ip-features-grid > div { 
    background-color: var(--black-pearl-light); 
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    text-align: center;
}
.ip-features-grid i {
    color: var(--quicksand-light);
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}
.ip-features-grid h4 {
    font-size: 2rem;
    color: var(--white-rock);
    margin-bottom: 1rem;
}
.ip-features-grid ul {
    padding-left: 0;
    list-style-position: inside; 
}
.ip-features-grid ul li {
    font-size: 1.5rem;
    color: var(--white-rock-medium);
    margin-bottom: 0.5rem;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.ip-guarantee {
    font-style: italic;
    text-align: center;
    color: var(--quicksand-light) !important; 
    max-width: 70ch;
}

/* Section Première Question */
.ip-first-question > p { text-align: center; }
.ip-first-question-box {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    background-color: var(--white-rock-light);
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    margin: 2rem auto;
    max-width: 900px;
}
.ip-first-question-image {
    flex: 1 1 250px; 
    max-width: 300px;
}
.ip-first-question-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
}
.ip-first-question-content {
    flex: 2 1 400px;
}
.ip-first-question-content h3 {
    font-size: 2rem;
    color: var(--walnut);
    margin-bottom: 1rem;
}
.ip-first-question-content .question-text {
    font-size: 1.8rem; 
    margin-bottom: 1.5rem;
}
.ip-cta-prompt {
    text-align: center;
    font-size: 1.8rem !important; 
    margin-top: 2rem;
}

/* Section CTA Final / Formulaire */
#form-intimite-profonde { 
    padding-top: calc(var(--section-padding) * 0.7);
    padding-bottom: var(--section-padding);
}
.ip-final-cta-image {
    max-width: 300px; 
    margin: 0 auto 2rem auto;
}
.ip-final-cta-image img {
    border-radius: var(--border-radius-md);
}
#form-intimite-profonde .download-button-ip {
    display: table; 
    margin: 0 auto 2rem auto;
}
.ip-final-words {
    text-align: center;
    font-family: 'Courgette', cursive; 
    font-size: 1.9rem !important;
    color: var(--quicksand-light) !important;
    max-width: 65ch;
    line-height: 1.7;
}

/* Responsive Adjustments - généraux pour la page */
@media (max-width: 768px) {
    .intimite-profonde-content .content-section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .ip-hero-content h1 {
        font-size: clamp(2.4rem, 7vw, 3.2rem);
    }
    .ip-comparison-grid {
        gap: 1.5rem;
    }
    /* .ip-rules-list a été supprimé, les styles responsives pour .ip-golden-rules sont plus bas */
     .ip-first-question-box {
        flex-direction: column;
    }
    .ip-first-question-image {
        max-width: 250px;
    }
}