/* --- START OF FILE fondations-solides.css --- */

/* --- Styles Généraux pour la Page Fondations Solides --- */

/* Ajustement pour l'en-tête de page spécifique à "Fondations Solides" */
.fondations-solides-page .tool-page-header {
    border-bottom: none; /* Supprime la bordure inférieure de l'en-tête de page commun */
}

/* --- Section d'Introduction (Hero) --- */

/* Styles pour la section d'introduction principale (hero banner) */
.fs-intro-hero {
    background-color: var(--white-rock-light); /* Couleur de fond claire */
    color: var(--black-pearl); /* Couleur de texte principale foncée */
    padding: calc(var(--section-padding) * 1.1) var(--section-padding) 1.5rem; /* Espacement intérieur, légèrement plus grand en haut */
    text-align: center; /* Alignement du texte au centre */
}

/* Styles pour le titre principal H1 dans la section hero */
.fs-intro-hero h1 {
    font-size: clamp(3.2rem, 6vw, 5rem); /* Taille de police responsive */
    color: var(--black-pearl); /* Couleur du texte */
    margin-bottom: 0.5rem; /* Marge en bas */
    line-height: 1.1; /* Hauteur de ligne */
}

/* Styles pour le texte mis en évidence (couleur noyer) dans la section hero */
.fs-intro-hero .highlight-text-inline {
    color: var(--walnut); /* Couleur noyer pour le texte mis en évidence */
}

/* Styles pour le sous-titre dans la section hero */
.fs-intro-hero .tool-subtitle {
    font-size: clamp(1.6rem, 2.7vw, 2.1rem); /* Taille de police responsive */
    color: var(--black-pearl-light); /* Couleur de texte légèrement plus claire */
    max-width: 65ch; /* Largeur maximale pour la lisibilité */
    margin: 0 auto 2rem auto; /* Centrage horizontal et marge en bas */
}

/* Styles pour le séparateur décoratif sous le sous-titre de la section hero */
.fs-intro-hero .fs-divider {
    background: linear-gradient(to right, var(--walnut), var(--quicksand)); /* Dégradé de couleurs */
    height: 3.5px; /* Hauteur du séparateur */
    width: 70px; /* Largeur du séparateur */
    margin: 1.5rem auto 0 auto; /* Centrage horizontal et marge au-dessus */
}

/* --- Contenu Principal --- */

/* Styles pour les sections de contenu de la page "Fondations Solides" */
.fondations-solides-content .content-section {
    padding-top: var(--section-padding);  /* Espacement intérieur en haut */
    padding-bottom: var(--section-padding); /* Espacement intérieur en bas */
}

/* Style pour les sections avec un fond clair alternatif */
.fondations-solides-content .content-section.alt-bg-light {
    background-color: var(--white-rock-light);  /* Couleur de fond claire */
}

/* Style pour les sections avec un fond sombre alternatif */
.fondations-solides-content .content-section.alt-bg-dark {
    background-color: var(--black-pearl); /* Couleur de fond foncée */
    color: var(--white-rock-light); /* Couleur de texte claire par défaut pour cette section */
}

/* Ajustement des couleurs pour les titres et textes dans les sections à fond sombre */
.fondations-solides-content .content-section.alt-bg-dark .section-title-fancy.dark,
.fondations-solides-content .content-section.alt-bg-dark h3,
.fondations-solides-content .content-section.alt-bg-dark p {
    color: var(--white-rock-light); /* Assure que ces éléments sont clairs sur fond sombre */
}

/* Ajustement de couleur pour le texte en gras dans les sections à fond sombre */
.fondations-solides-content .content-section.alt-bg-dark p strong {
    color: var(--white-rock); /* Texte en gras légèrement plus clair pour ressortir */
}

/* Ajustement de couleur pour le séparateur sous les titres "fancy" dans les sections à fond sombre */
.fondations-solides-content .content-section.alt-bg-dark .section-title-fancy.dark::after {
    background: var(--walnut-light); /* Couleur du séparateur ajustée pour fond sombre */
}

/* Style général pour centrer les images dans les conteneurs d'image de section */
.section-image-container img { /* Style général pour centrer les images dans ces conteneurs */
    display: block; /* Permet d'utiliser margin auto pour centrer */
    margin-left: auto; /* Centre horizontalement */
    margin-right: auto; /* Centre horizontalement */
}

/* --- Section Introduction Spécifique --- */

/* Styles pour l'image principale dans la section d'introduction spécifique */
.fs-introduction .fs-main-image-container img {
    max-width: 700px; /* Largeur maximale de l'image */
    margin-bottom: 2.5rem; /* Marge en bas de l'image */
    border-radius: var(--border-radius-md); /* Coins arrondis */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animation douce au survol */
}

/* Effet au survol de l'image principale */
.fs-introduction .fs-main-image-container img:hover {
    transform: scale(1.02); /* Léger agrandissement */
    box-shadow: 0 6px 18px rgba(4, 16, 31, 0.1); /* Ombre portée */
}

/* Styles pour les paragraphes dans la section d'introduction spécifique */
.fs-introduction p {
    font-size: 1.7rem; /* Taille de police */
    line-height: 1.8; /* Hauteur de ligne pour la lisibilité */
    max-width: 75ch; /* Largeur maximale */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    text-align: center;  /* Alignement du texte au centre */
    margin-bottom: 1.5rem;  /* Marge en bas */
}

/* Marge spécifique pour le premier paragraphe */
.fs-introduction p:first-of-type {
    margin-top: 2rem;  /* Marge au-dessus du premier paragraphe */
}

/* Supprime la marge du dernier paragraphe */
.fs-introduction p:last-of-type {
    margin-bottom: 0; /* Pas de marge en bas pour le dernier paragraphe */
}

/* --- Section Pourquoi Crucial --- */

/* Styles pour le titre de la section "Pourquoi Crucial" */
.fs-why-crucial .section-title-fancy {
    margin-bottom: 1.5rem; /* Marge en bas réduite */
    text-align: center; /* Alignement du texte au centre */
}

/* Styles pour le texte sous le titre de la section "Pourquoi Crucial" */
.fs-why-crucial .sub-text { 
    text-align: center; /* Alignement du texte au centre */
    font-size: 1.8rem; /* Taille de police */
    margin-bottom: 2rem; /* Marge en bas */
    color: var(--black-pearl-light); /* Couleur du texte */
}

/* Styles pour la liste des bénéfices */
.benefits-list-fs {
    list-style: none; /* Supprime les puces par défaut */
    padding-left: 0; /* Supprime le retrait par défaut */
    max-width: 700px; /* Largeur maximale de la liste */
    margin: 0 auto 2.5rem auto; /* Centrage horizontal et marge en bas */
}

/* Styles pour chaque élément de la liste des bénéfices */
.benefits-list-fs li {
    display: flex; /* Utilisation de flexbox pour aligner icône et texte */
    align-items: flex-start; /* Aligne les éléments en haut */
    font-size: 1.65rem; /* Taille de police */
    color: var(--black-pearl-light); /* Couleur du texte */
    margin-bottom: 1.2rem; /* Marge en bas */
    line-height: 1.7; /* Hauteur de ligne */
}

/* Styles pour les icônes (SVG Feather) dans la liste des bénéfices */
.benefits-list-fs li svg { /* Cibler le SVG pour l'icône Feather */
    color: var(--walnut); /* Couleur de l'icône */
    width: 22px; /* Largeur de l'icône */
    height: 22px; /* Hauteur de l'icône */
    stroke-width: 2px; /* Épaisseur du trait de l'icône */
    margin-right: 1.6rem;  /* Marge à droite de l'icône */
    flex-shrink: 0; /* Empêche l'icône de rétrécir si le texte est long */
    margin-top: 0.2em; /* Ajustement vertical pour un meilleur alignement avec le texte */
}

/* Styles pour la boîte de mise en évidence (highlight box) */
.highlight-box-fs {
    background-color: var(--white-rock); /* Couleur de fond */
    border-left: 4px solid var(--walnut); /* Bordure décorative à gauche */
    padding: 1.8rem 2.2rem; /* Espacement intérieur */
    margin: 2rem auto 0 auto; /* Marge au-dessus et centrage horizontal */
    border-radius: var(--border-radius-sm); /* Coins arrondis */
    max-width: 70ch; /* Largeur maximale */
    font-size: 1.7rem; /* Taille de police */
    font-style: italic; /* Texte en italique */
    color: var(--black-pearl); /* Couleur du texte */
    text-align: center; /* Alignement du texte au centre */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animation douce au survol */
}

/* Effet au survol de la boîte de mise en évidence */
.highlight-box-fs:hover { /* NOUVELLE RÈGLE AJOUTÉE */
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.08); /* Ombre légèrement plus prononcée */
}

/* --- Section Art de la Conversation --- */

/* Styles pour le titre de la section "Art de la Conversation" */
.fs-art-of-conversation .section-title-fancy { 
    margin-bottom: 1rem;  /* Marge en bas réduite */
    text-align: center; /* Alignement du texte au centre */
}

/* Styles pour le paragraphe d'introduction de la section "Art de la Conversation" */
.fs-art-of-conversation > p { 
    text-align: center; /* Alignement du texte au centre */
    max-width: 75ch; /* Largeur maximale */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    margin-bottom: 3rem; /* Marge en bas */
}

/* Grille pour afficher les principes de la conversation */
.principles-grid-fs {
    display: grid; /* Utilisation de CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); /* Colonnes responsives */
    gap: 2rem; /* Espace entre les boîtes de principe */
    max-width: 1050px;  /* Largeur maximale de la grille */
    margin-left: auto;   /* Centrage horizontal */
    margin-right: auto;  /* Centrage horizontal */
}

/* Styles pour chaque boîte de principe de conversation */
.principle-box-fs {
    background-color: var(--white-rock); /* Couleur de fond */
    padding: 2.5rem; /* Espacement intérieur */
    border-radius: var(--border-radius-md); /* Coins arrondis */
    text-align: center; /* Alignement du texte au centre par défaut */
    box-shadow: 0 5px 15px rgba(var(--black-pearl-rgb), 0.05); /* Ombre portée légère */
    display: flex;  /* Utilisation de flexbox */
    flex-direction: column;  /* Empile les éléments verticalement */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animation douce au survol */
}

/* Effet au survol d'une boîte de principe */
.principle-box-fs:hover { /* NOUVELLE RÈGLE AJOUTÉE */
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.08); /* Ombre légèrement plus prononcée */
}

/* Styles pour les icônes dans les boîtes de principe */
.principle-box-fs i {
    color: var(--walnut); /* Couleur de l'icône */
    width: 3rem; /* Largeur de l'icône */
    height: 3rem; /* Hauteur de l'icône */
    stroke-width: 1.5px; /* Épaisseur du trait */
    margin: 0 auto 1rem auto; /* Centrage horizontal et marge en bas */
}

/* Styles pour les titres H3 dans les boîtes de principe */
.principle-box-fs h3 {
    font-size: 1.9rem; /* Taille de police */
    color: var(--black-pearl); /* Couleur du texte */
    margin-bottom: 1rem; /* Marge en bas */
}

/* Styles pour les paragraphes dans les boîtes de principe */
.principle-box-fs p { 
    font-size: 1.5rem; /* Taille de police */
    color: var(--black-pearl-light); /* Couleur du texte */
    margin-bottom: 1rem; /* Marge en bas */
    text-align: left; /* Paragraphes alignés à gauche pour une meilleure lisibilité */
}

/* Styles pour les listes à puces dans les boîtes de principe */
.principle-box-fs ul {
    list-style: disc; /* Puces de type disque */
    padding-left: 2rem;  /* Retrait pour les puces */
    text-align: left; /* Texte de la liste aligné à gauche */
    font-size: 1.5rem; /* Taille de police */
    color: var(--black-pearl-light); /* Couleur du texte */
}

/* Styles pour chaque élément de liste dans les boîtes de principe */
.principle-box-fs ul li {
    margin-bottom: 0.5rem; /* Marge en bas de chaque item */
}

/* --- Section 3 Conversations Fondamentales (Approche Idée 1) --- */

/* Section parente pour les trois conversations fondamentales */
.fs-three-conversations { /* La section parente des conversations */
    /* background-color: var(--white-rock-light); /* Déjà géré par .alt-bg-light si appliqué à la section */
}

/* Styles pour le titre de la section des trois conversations */
.fs-three-conversations .section-title-fancy { 
    margin-bottom: 3rem;  /* Marge en bas */
    text-align: center; /* Alignement du texte au centre */
}

/* Conteneur pour chaque bloc de conversation individuelle */
.conversation-content-wrapper { /* Conteneur pour chaque bloc de conversation */
    max-width: 1000px;  /* Largeur maximale */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    margin-bottom: 3rem;  /* Marge en bas */
    padding: 0 2rem;  /* Espacement intérieur horizontal */
}

/* Supprime la marge du dernier conteneur de conversation */
.conversation-content-wrapper:last-of-type {
    margin-bottom: 0;
}

/* Séparateur horizontal entre les blocs de conversation */
.conversation-content-separator {
    border: 0; /* Supprime la bordure par défaut */
    height: 1px; /* Hauteur du séparateur */
    background-color: var(--quicksand-light); /* Couleur du séparateur */
    width: 70%;  /* Largeur du séparateur */
    margin: 3.5rem auto;  /* Marge verticale et centrage horizontal */
}

/* Cache le dernier séparateur horizontal */
.conversation-content-wrapper:last-of-type + .conversation-content-separator { /* Pour cacher le dernier HR */
    display: none; /* Cache l'élément */
}
/* S'il n'y a pas de HR après le dernier, cette règle n'est pas nécessaire, 
   mais elle est bonne à avoir si vous décidez d'en mettre un par erreur. */
/* Cache le séparateur à l'intérieur du dernier wrapper de conversation s'il existe */
.fs-three-conversations > .conversation-content-wrapper:last-child > .conversation-content-separator {
    display: none; /* Cache l'élément */
}


/* Styles pour les éléments internes de .conversation-content-wrapper */

/* En-tête de chaque conversation (image + titre) */
.conversation-content-wrapper .conversation-header {
    display: flex; /* Utilisation de flexbox */
    align-items: center; /* Alignement vertical des éléments */
    gap: 1.5rem; /* Espace entre l'image et le titre */
    margin-bottom: 1.5rem; /* Marge en bas de l'en-tête */
    padding-bottom: 1.5rem; /* Espacement avant la bordure inférieure */
    border-bottom: 1px solid var(--quicksand-light); /* Ligne de séparation */
}

/* Styles pour l'image dans l'en-tête de conversation */
.conversation-content-wrapper .conversation-image img {
    width: 120px;  /* Largeur de l'image */
    height: 120px; /* Hauteur de l'image */
    object-fit: contain; /* Assure que toute l'image est visible, peut ajouter des espaces vides */
    border-radius: var(--border-radius-sm); /* Coins arrondis */
}

/* Styles pour le titre H3 dans l'en-tête de conversation */
.conversation-content-wrapper .conversation-header h3 {
    font-family: 'Bebas Neue', sans-serif; /* Police de caractères */
    font-size: 3.8rem; /* Taille de police */
    color: var(--walnut); /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
    line-height: 1.1; /* Hauteur de ligne */
}

/* Styles pour le sous-texte (span) dans le titre H3 de conversation */
.conversation-content-wrapper .conversation-header h3 span { 
    display: block; /* Affichage en bloc pour prendre sa propre ligne */
    font-size: 0.65em; /* Taille de police relative au H3 parent */
    color: var(--black-pearl-light); /* Couleur du texte */
    letter-spacing: 0.05em; /* Espacement entre les lettres */
    margin-bottom: 0.2em; /* Marge en bas */
}

/* Paragraphe d'introduction pour chaque conversation */
.conversation-content-wrapper .conversation-intro {
    font-style: italic; /* Texte en italique */
    color: var(--black-pearl-light); /* Couleur du texte */
    margin-bottom: 2.5rem; /* Marge en bas */
    font-size: 1.7rem; /* Taille de police */
    text-align: center; /* Alignement du texte au centre */
    max-width: 70ch;    /* Largeur maximale */
    margin-left: auto;  /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
}

/* Titre H4 "Sujets à explorer :" */
.conversation-content-wrapper h4 { /* "Sujets à explorer :" */
    font-weight: 600; /* Graisse du texte */
    color: var(--black-pearl); /* Couleur du texte */
    font-size: 1.9rem; /* Taille de police */
    margin-bottom: 1.5rem; /* Marge en bas */
    margin-top: 2rem;   /* Marge au-dessus */
    text-align: center;  /* Alignement du texte au centre */
}

/* Listes ordonnées (numérotées) des sujets à explorer */
.conversation-content-wrapper ol {
    padding-left: 0;  /* Supprime le retrait par défaut */
    margin-bottom: 2.5rem;  /* Marge en bas */
    max-width: 75ch;  /* Largeur maximale */
    margin-left: auto;   /* Centrage horizontal */
    margin-right: auto;  /* Centrage horizontal */
    list-style-position: inside;  /* Positionne les numéros à l'intérieur du flux de texte */
}

/* Éléments de la liste ordonnée */
.conversation-content-wrapper ol li {
    font-size: 1.55rem; /* Taille de police */
    color: var(--black-pearl-light); /* Couleur du texte */
    margin-bottom: 1rem;  /* Marge en bas de chaque item */
    line-height: 1.7; /* Hauteur de ligne */
    text-align: left;  /* Texte aligné à gauche */
}

/* Texte en gras dans les éléments de liste */
.conversation-content-wrapper ol li strong {
    color: var(--black-pearl); /* Couleur pour le texte en gras */
}

/* LA BOÎTE BLANCHE POUR LES DÉTAILS */

/* Grille pour afficher les boîtes "exemple" et "signaux d'alerte" côte à côte */
.details-grid { 
    display: grid; /* Utilisation de CSS Grid */
    grid-template-columns: 1fr 1fr;  /* Deux colonnes de largeur égale */
    gap: 3rem;  /* Espace entre les colonnes */
}

/* Cible les div enfants directes de .details-grid (.example-box et .signals-box) */
.details-grid > div { /* Cible .example-box et .signals-box */
    display: flex;  /* Utilisation de flexbox */
    flex-direction: column;  /* Empile les éléments verticalement */
    justify-content: center; /* Centre le contenu verticalement */
}

/* Styles pour la boîte d'exemple de question */
.example-box {
    background-color: var(--white-rock-light); /* Couleur de fond */
    padding: 2rem;  /* Espacement intérieur */
    border-radius: var(--border-radius-sm); /* Coins arrondis */
    border: 1px solid var(--quicksand-light);  /* Bordure subtile */
    border-top: 3px solid var(--quicksand);   /* Bordure supérieure décorative */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column;  /* Empile les éléments verticalement */
    align-items: center;   /* Centre les éléments horizontalement */
    text-align: center;    /* Alignement du texte au centre */
    justify-content: center;  /* Centre le contenu verticalement */
    gap: 0;  /* Pas d'espace supplémentaire entre les éléments flex (géré par les marges individuelles) */
	box-shadow: 0 4px 10px rgba(var(--black-pearl-rgb), 0.05); /* Ombre portée optionnelle */
}

/* Icône principale dans la boîte d'exemple */
.example-box .example-question-main-icon { 
    color: var(--walnut);  /* Couleur de l'icône */
    width: 32px;           /* Largeur de l'icône */
    height: 32px; /* Hauteur de l'icône */
    stroke-width: 1.5px; /* Épaisseur du trait */
    margin-bottom: 1rem;   /* Marge en bas */
}

/* En-tête (label) de la question d'exemple */
.example-box .example-question-header {
    margin-bottom: 1rem;  /* Marge en bas */
}

/* Label "Exemple de question :" */
.example-box .example-question-label { 
    font-family: 'Outfit', sans-serif;  /* Police de caractères */
    font-size: 1.8rem;  /* Taille de police */
    color: var(--walnut);  /* Couleur du texte */
    font-weight: 600;  /* Graisse du texte */
    display: block;  /* Affichage en bloc */
}

/* Contenu textuel de la question d'exemple */
.example-box .example-question-content {
    font-size: 1.5rem;  /* Taille de police */
    color: var(--black-pearl-light);  /* Couleur du texte */
    line-height: 1.6; /* Hauteur de ligne */
    max-width: 45ch;  /* Largeur maximale */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    text-align: center;  /* Alignement du texte au centre */
    padding-left: 0; /* Pas de padding à gauche (si hérité) */
    margin-bottom: 0;  /* Pas de marge en bas */
}

/* Styles pour la boîte des signaux d'alerte */
.signals-box {
    background-color: #fff7f8;  /* Couleur de fond rosé clair */
    border: 1px solid #f5c6cb;       /* Bordure rosée */
    border-top: 5px solid #e74c3c;  /* Bordure supérieure rouge vif */
    padding: 2rem; /* Espacement intérieur */
    border-radius: var(--border-radius-sm); /* Coins arrondis */
    display: flex;  /* Utilisation de flexbox */
    flex-direction: column;  /* Empile les éléments verticalement */
    align-items: center;   /* Centre les éléments horizontalement */
    text-align: center;    /* Alignement du texte au centre */
    justify-content: center;  /* Centre le contenu verticalement */
    box-shadow: 0 4px 10px rgba(var(--black-pearl-rgb), 0.05); /* Ombre portée optionnelle */
}

/* Icône principale dans la boîte des signaux d'alerte */
.signals-box .alert-signals-main-icon { 
    color: #c0392b;  /* Couleur rouge foncé pour l'icône */
    width: 32px;  /* Largeur de l'icône */
    height: 32px; /* Hauteur de l'icône */
    stroke-width: 1.5px; /* Épaisseur du trait */
    margin-bottom: 1rem;  /* Marge en bas */
}

/* Conteneur pour le texte des signaux d'alerte */
.signals-box .alert-signals-text { 
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Empile les éléments verticalement */
    align-items: center;  /* Centre les éléments horizontalement */
}

/* Titre H5 dans la boîte des signaux d'alerte */
.signals-box h5 { 
    font-size: 1.8rem;  /* Taille de police */
    color: #721c24;  /* Couleur rouge foncé pour le texte */
    margin-top: 0;  /* Pas de marge en haut */
    margin-bottom: 1rem;  /* Marge en bas */
    font-weight: 600; /* Graisse du texte */
}

/* Paragraphe dans la boîte des signaux d'alerte */
.signals-box p { 
    font-size: 1.5rem;  /* Taille de police */
    color: #721c24;  /* Couleur rouge foncé pour le texte */
    line-height: 1.6; /* Hauteur de ligne */
    margin-bottom: 0; /* Pas de marge en bas */
    max-width: 45ch;  /* Largeur maximale */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
}


/* --- Section Guides Pratiques --- */

/* Image dans la section des guides pratiques */
.fs-practical-guides .fs-guide-image-container img {
    max-width: 600px;  /* Largeur maximale de l'image */
    margin-bottom: 2.5rem; /* Marge en bas */
    border-radius: var(--border-radius-md); /* Coins arrondis */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animation douce au survol */
}

/* Effet au survol de l'image des guides pratiques */
.fs-practical-guides .fs-guide-image-container img:hover {
    transform: scale(1.02); /* Léger agrandissement */
    box-shadow: 0 6px 18px rgba(4, 16, 31, 0.1); /* Ombre portée */
}

/* Titre de la section des guides pratiques */
.fs-practical-guides .section-title-fancy { 
    margin-bottom: 3.5rem;  /* Marge en bas */
    text-align: center; /* Alignement du texte au centre */
}

/* Grille pour afficher les guides pratiques */
.guides-grid {
    display: grid; /* Utilisation de CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); /* Colonnes responsives */
    gap: 2.5rem; /* Espace entre les guides */
}

/* Autre grille pour la mise en page des guides (peut-être redondante avec .guides-grid) */
.practical-guides-layout { /* Ou .guides-grid si vous gardez ce nom */
    display: grid; /* Utilisation de CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); /* Colonnes responsives */
    gap: 2rem; /* Espace entre les boîtes de guide */
    max-width: 1050px; /* Largeur maximale */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    margin-top: 3rem; /* Marge au-dessus pour espacer de l'image/titre */
}

/* Styles pour chaque boîte de guide pratique */
.guide-box {
    background-color: var(--white-rock);  /* Couleur de fond */
    padding: 2.5rem; /* Espacement intérieur */
    border-radius: var(--border-radius-md); /* Coins arrondis */
    text-align: center;  /* Alignement du texte au centre par défaut */
    box-shadow: 0 5px 15px rgba(var(--black-pearl-rgb), 0.05);  /* Ombre portée légère */
    display: flex;  /* Utilisation de flexbox */
    flex-direction: column; /* Empile les éléments verticalement */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animation douce au survol */
}

/* Effet au survol d'une boîte de guide */
.guide-box:hover { /* NOUVELLE RÈGLE AJOUTÉE */
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 8px 25px rgba(var(--black-pearl-rgb), 0.08); /* Ombre légèrement plus prononcée */
}

/* Icônes dans les boîtes de guide */
.guide-box i { 
    display: block; /* Assure que margin auto fonctionne pour centrer */
    color: var(--walnut); /* Couleur de l'icône */
    width: 3rem;   /* Largeur de l'icône */
    height: 3rem;  /* Hauteur de l'icône */
    stroke-width: 1.5px; /* Épaisseur du trait */
    margin: 0 auto 1.2rem auto; /* Centrage horizontal et marge en bas */
}

/* Titres H3 dans les boîtes de guide */
.guide-box h3 {
    font-size: 1.9rem; /* Taille de police */
    text-align: right; /* Alignement du texte au centre */
    color: var(--black-pearl); /* Couleur du texte */
    margin-bottom: 1.5rem; /* Marge en bas */
}

/* Paragraphes descriptifs dans les boîtes de guide */
.guide-box > p { 
    font-size: 1.5rem; /* Taille de police */
    color: var(--black-pearl-light); /* Couleur du texte */
    margin-bottom: 1.5rem; /* Marge en bas, avant une éventuelle liste */
    text-align: left; /* Paragraphes alignés à gauche */
}

/* Listes (ordonnées ou non) dans les boîtes de guide */
.guide-box ol, .guide-box ul {
    list-style-position: outside; /* Positionne les puces/numéros à l'extérieur du contenu */
    padding-left: 2rem;  /* Retrait pour les puces/numéros */
    font-size: 1.5rem; /* Taille de police */
    color: var(--black-pearl-light); /* Couleur du texte */
    text-align: left;  /* Items de liste alignés à gauche */
    margin-top: 0; /* Supprime la marge supérieure par défaut */
    flex-grow: 1; /* Permet à la liste de prendre l'espace vertical restant si les boîtes ont la même hauteur */
}

/* Éléments de liste dans les boîtes de guide */
.guide-box ol li, .guide-box ul li {
    margin-bottom: 0.8rem; /* Marge en bas de chaque item */
    line-height: 1.6; /* Hauteur de ligne */
}

/* Texte en gras au début des items de liste ordonnée */
.guide-box ol li strong { 
    color: var(--black-pearl); /* Couleur pour le texte en gras */
}

/* --- Section CTA Final --- */

/* Image dans la section d'appel à l'action final */
.fs-final-cta .fs-cta-image-container img {
    max-width: 450px;  /* Largeur maximale de l'image */
    margin-bottom: 1.5rem; /* Marge en bas */
    border-radius: var(--border-radius-md); /* Coins arrondis */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animation douce au survol */
}

/* Effet au survol de l'image du CTA final */
.fs-final-cta .fs-cta-image-container img:hover {
    transform: scale(1.02); /* Léger agrandissement */
    box-shadow: 0 6px 18px rgba(4, 16, 31, 0.1); /* Ombre portée */
}

/* Paragraphes dans la section du CTA final */
.fs-final-cta p {
    max-width: 65ch; /* Largeur maximale */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    text-align: center; /* Alignement du texte au centre */
    font-size: 1.7rem; /* Taille de police */
    margin-bottom: 1.5rem; /* Marge en bas */
}

/* Paragraphe de conclusion ("final words") avec une police cursive */
.fs-final-cta p.final-words {
    font-family: 'Courgette', cursive; /* Police de caractères cursive */
    font-size: 1.6rem; /* Taille de police */
    margin-top: 2.5rem; /* Marge au-dessus */
    margin-bottom: 2.5rem; /* Marge en bas */
    line-height: 1.6; /* Hauteur de ligne */
}

/* Bouton de téléchargement dans le CTA final */
.fs-final-cta .download-button-fs {
    margin: 1.5rem auto 0 auto; /* Marge au-dessus et centrage horizontal */
    display: table;  /* Astuce pour centrer un élément inline-block/flex avec margin auto */
}

/* Titre "fancy" (avec style Courgette) dans la section du CTA final à fond sombre */
.fs-final-cta .section-title-fancy.dark {
    font-family: 'Courgette', cursive; /* Police de caractères cursive */
    font-size: clamp(3rem, 5vw, 4.2rem); /* Taille de police responsive */
    text-align: center; /* Alignement du texte au centre */
    color: var(--walnut); /* Couleur noyer pour le titre */
    margin-bottom: 2.5rem; /* Marge en bas */
}

/* Ajustement pour le séparateur sous le titre fancy dans le CTA final (si nécessaire) */
.fs-final-cta .section-title-fancy.dark::after {
    /* La couleur est déjà var(--walnut-light) via les règles de .alt-bg-dark */
    /* Le centrage est géré par la règle de base de .section-title-fancy::after */
}

/* Espace à droite de l'icône dans le bouton de téléchargement */
.fs-final-cta .download-button-fs > i,
.fs-final-cta .download-button-fs > svg { /* Cible l'icône <i> OU le svg généré par Feather */
    margin-right: 0.8rem; /* Espace à droite de l'icône */
}

/* Ajustement vertical du texte dans les boutons CTA avec dégradé */
.btn-cta-gradient .btn-text {
    position: relative; /* Permet un positionnement fin */
    top: -1.5px; /* Déplace légèrement le texte vers le haut pour un meilleur alignement visuel */
}

/* --- Responsive Adjustments --- */

/* Ajustements pour écrans de taille moyenne et petite (tablettes, mobiles) */
@media (max-width: 768px) {
    /* Réduit le padding latéral des sections de contenu */
    .fondations-solides-content .content-section {
        padding-left: 2rem; /* Padding à gauche réduit */
        padding-right: 2rem; /* Padding à droite réduit */
    }

    /* Responsive pour la nouvelle structure des conversations */
    /* En-tête de conversation passe en mode colonne */
    .conversation-content-wrapper .conversation-header {
        flex-direction: column; /* Empile image et titre verticalement */
        align-items: center;  /* Centre les éléments horizontalement */
        text-align: center; /* Centre le texte de l'en-tête */
    }

    /* Ajuste la taille du titre H3 de conversation pour mobile */
    .conversation-content-wrapper .conversation-header h3 { 
        font-size: 3rem;  /* Taille de police réduite */
    }

    /* Ajuste la taille de l'image de conversation pour mobile */
    .conversation-content-wrapper .conversation-image img { 
        width: 100px;  /* Largeur réduite */
        height: 100px; /* Hauteur réduite */
    }
    
    /* La grille des détails (.example-box, .signals-box) passe à une seule colonne */
    .details-grid { 
        grid-template-columns: 1fr;  /* Une seule colonne */
    }

    /* Ajuste la liste ordonnée des sujets pour mobile */
    .conversation-content-wrapper ol {
        max-width: 100%;  /* Prend toute la largeur disponible */
        padding-left: 1rem;  /* Léger padding à gauche */
        padding-right: 1rem; /* Léger padding à droite */
    }

    /* Réduit le padding latéral du conteneur de conversation pour mobile */
    .conversation-content-wrapper {
        padding: 0 1rem; /* Padding horizontal réduit */
    }
}

/* --- END OF FILE fondations-solides.css --- */