/* ==========================================================================
   ASSETS/CSS/ABOUT.CSS - Styles spécifiques à la page À Propos (Mis à jour)
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* SECTION HERO ABOUT                                                         */
/* -------------------------------------------------------------------------- */

/* Dans assets/css/about.css */

/* SECTION HERO ABOUT */
.about-hero {
    padding-top: 16rem;
    padding-bottom: 6rem;
    background-color: var(--white-rock-light); /* Fallback */
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
    /* Ajout d'une transition pour la couleur du texte */
    transition: background-image 0.5s ease-in-out, color 0.5s ease-in-out;
}

/* Suppression de la décoration ::before qui pourrait interférer */
/* .about-hero::before { ... } */ /* Tu peux commenter ou supprimer cette règle */

/* == Styles pour le Conteneur du Logo Hero == */
.about-hero-logo-container {
    display: inline-block; /* Pour que le margin auto fonctionne */
    margin: 0 auto 2rem; /* Centré et espace en dessous */
    position: relative; /* Pour le z-index du lien si présent */
    z-index: 2; /* Au-dessus de l'overlay ::after */
}

.about-hero-logo-link {
    display: block; /* Le lien prend la taille de l'image */
    text-decoration: none;
}

.about-hero-logo {
    /* RETIRER 'display: block;' d'ici s'il y était */
    max-width: 150px; /* Contrôle la taille max */
    height: auto;
    transition: opacity var(--transition-fast); /* Pour un fondu éventuel */
    /* Pas de display: block ou display: none ici par défaut */
    /* La visibilité sera gérée par les règles spécifiques ci-dessous */
}

/* == Gestion Affichage Logo Dark/Light par défaut (Thème Clair) == */
/* Appliqué lorsque NI hero-theme-dark NI hero-theme-bright n'est présent OU si hero-theme-bright est présent */
.about-hero:not(.hero-theme-dark) .logo-light,
.about-hero.hero-theme-bright .logo-light {
    display: none; /* Cache le logo blanc */
}

.about-hero:not(.hero-theme-dark) .logo-dark,
.about-hero.hero-theme-bright .logo-dark {
    display: block; /* Affiche le logo noir */
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.4)); /* Ombre légère pour lisibilité */
}

/* == Gestion Affichage Logo Dark/Light pour Thème Sombre == */
.about-hero.hero-theme-dark .logo-dark {
    display: none; /* Cache le logo noir sur fond sombre */
}
.about-hero.hero-theme-dark .logo-light {
    display: block; /* Affiche le logo blanc sur fond sombre */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); /* Ombre adaptée */
}

/* == Styles par défaut (Thème Clair) == */
.about-hero .title {
    font-size: clamp(4.5rem, 6vw, 6rem); /* Taille peut-être un peu plus grande */
    margin-bottom: 1rem;
    color: var(--black-pearl); /* Texte foncé par défaut */
    /* Ajout ombre portée pour lisibilité sur fonds clairs complexes */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}

.about-hero .subtitle {
    font-size: clamp(1.8rem, 2.5vw, 2.1rem); /* Taille ajustée */
    color: var(--black-pearl-light); /* Texte gris foncé par défaut */
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
     /* Ajout ombre portée pour lisibilité sur fonds clairs complexes */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Ajout d'un overlay léger pour tous les fonds, aide à la lisibilité */
.about-hero::after { /* On réutilise ::after */
    content: '';
    position: absolute;
    inset: 0; /* Couvre toute la section */
    background-color: rgba(0, 0, 0, 0.10); /* Très léger overlay noir */
    z-index: 1; /* Entre le fond et le contenu */
    pointer-events: none;
}

/* ========================================================================== */
/* AJOUT : HALOS INDIVIDUELS ET LOCALISÉS POUR LOGO, TITRE ET SOUS-TITRE    */
/* ========================================================================== */

/* --- 1. Préparation des éléments parents --- */
/* On les passe en 'position: relative' pour que leur pseudo-élément 
   puisse être positionné par rapport à eux. */
.about-hero-logo-container,
.about-hero .title,
.about-hero .subtitle {
    position: relative;
}

/* --- 2. Style commun à tous les halos --- */
/* On crée le halo avec ::before et on utilise z-index: -1 pour le placer
   DIRECTEMENT derrière son élément parent, ce qui est beaucoup plus simple. */
.about-hero-logo-container::before,
.about-hero .title::before,
.about-hero .subtitle::before {
    content: '';
    position: absolute;
    z-index: -1; /* Place le halo derrière le texte/logo de son parent */
    transition: background-color 0.4s ease;
    
    /* Le 'blur' est la clé pour l'effet de halo doux */
    filter: blur(25px);
}

/* --- 3. Dimensionnement de chaque halo --- */
/* On définit la taille de chaque halo pour qu'il soit juste un peu plus
   grand que son élément parent. */
.about-hero-logo-container::before {
    inset: -10px; /* Crée un halo 20px plus grand de chaque côté */
    border-radius: 50%; /* Halo circulaire pour le logo */
}
.about-hero .title::before {
    inset: -15px -15px; /* Halo 15px plus grand en haut/bas, 25px sur les côtés */
    border-radius: 10px; /* Adoucit les coins du halo rectangulaire */
}
.about-hero .subtitle::before {
    inset: -20px;
    border-radius: 10px;
}

/* --- 4. Couleur dynamique des halos --- */
/* Par défaut (thème BRIGHT), le halo est blanc et assez subtil */
.about-hero:not(.hero-theme-dark) .about-hero-logo-container::before,
.about-hero:not(.hero-theme-dark) .title::before,
.about-hero:not(.hero-theme-dark) .subtitle::before {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Quand le thème est DARK, le halo devient noir */
.about-hero.hero-theme-dark .about-hero-logo-container::before,
.about-hero.hero-theme-dark .title::before,
.about-hero.hero-theme-dark .subtitle::before {
    background-color: rgba(0, 0, 0, 0.2);
}



/* Le contenu doit être au-dessus de l'overlay */
.about-hero .container {
    position: relative;
    z-index: 3;
}

/* == Styles pour le Thème Sombre (activé par JS via classe) == */
.about-hero.hero-theme-dark .title {
    color: var(--white-rock); /* Texte clair sur fond sombre */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Ombre adaptée */
}

.about-hero.hero-theme-dark .subtitle {
    color: var(--white-rock-medium); /* Texte gris clair sur fond sombre */
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* Ombre adaptée */
}

/* Optionnel : Assombrir un peu plus l'overlay sur les fonds sombres si besoin */
.about-hero.hero-theme-dark::after {
    background-color: rgba(0, 0, 0, 0.30); /* Overlay légèrement plus sombre */
}

/* -------------------------------------------------------------------------- */
/* MISE EN PAGE DE L'HISTOIRE                                                 */
/* -------------------------------------------------------------------------- */

.story-container {
    max-width: 85ch; /* Limite la largeur pour une meilleure lisibilité */
    margin-left: auto;
    margin-right: auto;
}

/* On ajuste la grille pour qu'elle fonctionne dans ce nouvel espace */
.about-core-grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr; /* La colonne image est un peu plus petite */
    gap: 5rem; /* Espace réduit */
    align-items: center;
    margin-top: 2rem;
}

.about-story-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-founders-image {
    width: 90%;
    max-width: 400px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--box-shadow-lg);
    position: relative;
    z-index: 2;
    transform: rotate(2deg);
}

.about-founders-image img {
    width: 100%;
    height: auto;
    display: block;
}

.about-image-decoration {
    position: absolute;
    width: 95%;
    height: 95%;
    background-color: var(--white-rock);
    border-radius: var(--border-radius-lg);
    transform: rotate(-4deg);
    z-index: 1;
    box-shadow: var(--box-shadow-sm);
}

/* --- STYLE POUR LA NOTE DE CONCLUSION --- */
.closing-remark-container {
    margin-top: 4rem; /* Garde l'espace au-dessus */
}

.closing-remark {
    margin-top: 0; /* On retire la marge du dessus car gérée par le conteneur */
    padding: 2.5rem 3rem;
    background-color: var(--white-rock-medium);
    border-radius: var(--border-radius-sm);
    font-style: italic;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.closing-remark strong {
    font-style: normal;
}

.closing-remark::after {
    content: '”';
    font-family: 'Playfair Display', serif;
    position: absolute;
    top: 0rem;
    right: 1.5rem;
    font-size: 8rem;
    line-height: 1;
    color: var(--quicksand);
    z-index: -1;
    opacity: 0.15;
}


/* --- RESPONSIVE POUR LA GRILLE HISTOIRE --- */
@media (max-width: 992px) {
    /* La grille passe à une seule colonne, les max-width gèrent déjà la largeur */
    .about-core-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .about-story-image-container {
        order: -1;
        max-width: 500px;
        margin-top: 2rem; /* Ajout d'un peu d'espace au-dessus de l'image */
    }
}

/* -------------------------------------------------------------------------- */
/* SECTION CONTENU PRINCIPAL - Styles pour espacement et fonds alternés       */
/* -------------------------------------------------------------------------- */

.about-content-section {
    /* On retire le padding global pour le gérer section par section */
    padding-top: 0;
    padding-bottom: 0;
}

.about-section {
    /* SUPPRIMER le margin-bottom s'il existait */
    /* margin-bottom: 6rem; */

    /* AJOUT : Espacement vertical géré par padding */
    padding: 9rem 0;
}

/* Couleur de fond alternée pour les sections paires */
.about-content-section > .about-section:nth-of-type(even) {
    background-color: var(--white-rock); /* Le fond légèrement plus foncé/chaud */
}
/* Les sections impaires utiliseront le fond par défaut du body ou de .about-content-section */
/* Si le fond par défaut n'est pas --white-rock-light, ajoutez ceci : */
.about-content-section > .about-section:nth-of-type(odd) {
    background-color: var(--white-rock-light); /* Assure le fond clair pour les impaires */
}


/* Ajustements des éléments dans les sections */
.about-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    color: var(--black-pearl);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--quicksand-light);
    display: inline-block;
}

.about-section-title.text-center {
    display: block;
    text-align: center;
    border-bottom: none;
}
.about-section-title.text-center::after {
    content: '';
    display: block;
    width: 6rem;
    height: 3px;
    background: linear-gradient(to right, var(--walnut), var(--quicksand));
    margin: 1rem auto 0;
    border-radius: 3px;
}

.about-subsection {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--quicksand-light);
}

.about-subsection h3 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--walnut);
    margin-bottom: 1rem;
}

.about-content-section p {
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--black-pearl-light);
    margin-bottom: 1.5rem;
}
.about-content-section p:last-child {
    margin-bottom: 0;
}

.story-intro {
    font-size: 1.8rem; /* Un peu plus grand que le texte normal */
    line-height: 1.7;
    color: var(--black-pearl); /* Un peu plus foncé pour l'intro */
    margin-bottom: 2.5rem;
    max-width: 75ch; /* Limiter la largeur pour la lisibilité */
    /* text-align: justify; */ /* Optionnel, si vous préférez le texte justifié */
}
.story-intro strong {
    color: var(--walnut); /* Couleur des mots en gras dans l'intro */
}

/* Style pour la citation/phrase mise en exergue */
.story-highlight {
    margin: 3rem auto 3.5rem auto; /* Plus de marges verticales et centrage */
    padding: 2.5rem 3rem;
    background-color: var(--white-rock); /* Fond légèrement différent */
    border-left: 5px solid var(--walnut); /* Bordure colorée distinctive */
    font-family: 'Playfair Display', serif; /* Police plus élégante pour la citation */
    font-size: clamp(1.8rem, 2.2vw, 2.2rem); /* Taille de police adaptée */
    font-style: italic;
    line-height: 1.6;
    color: var(--black-pearl-light); /* Couleur du texte de la citation */
    max-width: 70ch; /* Largeur max */
    box-shadow: var(--box-shadow-sm);
}
.story-highlight p {
    margin-bottom: 0;
}
.story-highlight strong {
    color: var(--walnut-light); /* Couleur des mots en gras dans la citation */
    font-weight: 600; /* S'assurer qu'ils sont bien en gras */
}

/* Style pour les sous-sections dans l'histoire */
.about-subsection.spaced-subsection {
    margin-top: 4rem; /* Augmente l'espace au-dessus des sous-sections */
    margin-bottom: 4rem; /* Augmente l'espace en dessous */
    padding-top: 2rem; /* Espace interne en haut */
    padding-bottom: 1rem; /* Espace interne en bas */
    /* background-color: rgba(248, 246, 242, 0.5); */ /* Fond très subtil si désiré */
    /* border-radius: var(--border-radius-sm); */
}

.about-subsection.spaced-subsection h3 {
    font-size: 2.6rem; /* Titres de sous-section un peu plus grands */
    color: var(--walnut); /* Couleur principale pour les titres */
    margin-bottom: 2rem; /* Plus d'espace sous le titre H3 */
    padding-bottom: 0.8rem;
    border-bottom: 1px dashed var(--quicksand-light); /* Ligne de séparation subtile */
    display: inline-block; /* Pour que la bordure ne prenne pas toute la largeur */
}

.about-subsection.spaced-subsection p {
    font-size: 1.7rem;
    line-height: 1.8; /* Interligne légèrement augmenté pour le confort */
    margin-bottom: 2rem; /* Espace entre les paragraphes */
}
.about-subsection.spaced-subsection p strong {
    /* La couleur est déjà gérée globalement pour strong, mais on peut la spécifier ici si besoin */
    /* color: var(--black-pearl); */
}

/* Style pour le paragraphe de conclusion de l'histoire */
.closing-remark {
    margin-top: 3rem; /* Espace avant ce paragraphe */
    padding: 2rem;
    background-color: var(--white-rock-medium); /* Fond un peu plus marqué */
    border-radius: var(--border-radius-sm);
    font-style: italic;
}
.closing-remark strong {
    font-style: normal; /* Si on ne veut pas que le gras soit aussi en italique */
}


/* -------------------------------------------------------------------------- */
/* GRILLE POUR APPROCHE, VALEURS, POURQUOI NOUS CHOISIR                       */
/* -------------------------------------------------------------------------- */

.about-grid-features {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.feature-item {
    /* background-color: var(--white-rock-light); */ /* Ancienne valeur */
    background-color: white; /* MODIFIE : Fond blanc pour contraster */
    padding: 3.5rem 2.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-sm);
    transition: all var(--transition-fast);
    border-left: 4px solid transparent;
    display: flex;
    flex-direction: column;
    /* min-height: 280px; */
}

.feature-item h3 {
    /* margin-top: 1rem; */ /* A ajuster si l'icône n'est plus flottante */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--black-pearl);
}

.feature-item p {
    flex-grow: 1;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--black-pearl-light);
}

.feature-icon-alt {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--walnut-light), var(--walnut));
    color: white;
    margin-bottom: 1.5rem;
    /* Retiré le float pour une mise en page flex simple */
    /* float: left; */
    /* margin-right: 1.5rem; */
}

.feature-icon-alt i {
    width: 2.2rem;
    height: 2.2rem;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-md);
    border-left-color: var(--walnut);
}

/* Styles spécifiques pour les grilles si besoin */
.values-grid .feature-icon-alt {
   /* background: linear-gradient(135deg, var(--quicksand-light), var(--quicksand)); */
}




/* -------------------------------------------------------------------------- */
/* LISTE VISUELLE DU PROGRAMME                                                */
/* -------------------------------------------------------------------------- */

.program-intro-container { /* Conteneur pour le texte d'intro */
     max-width: 800px; /* Limite la largeur du texte d'intro */
     margin: 0 auto;   /* Centre le texte */
}

.about-program-visual-list {
    display: grid; /* Utiliser Grid pour un alignement facile */
    /* Crée 1 colonne par défaut, s'adaptera avec media queries */
    grid-template-columns: 1fr;
    gap: 1.5rem; /* Espace entre les items */
    max-width: 800px; /* Largeur max de la liste */
    margin: 4rem auto 0; /* Espace au-dessus et centrage */
}

.program-list-item {
    display: flex; /* Aligne icône et contenu horizontalement */
    align-items: center; /* Centre verticalement */
    background-color: var(--white-rock-medium); /* Fond légèrement coloré */
    padding: 2rem 2.5rem; /* Espacement interne */
    border-radius: var(--border-radius-md);
    border-left: 5px solid var(--quicksand); /* Bordure de couleur */
    transition: all var(--transition-fast);
    box-shadow: var(--box-shadow-sm);
}

.program-list-item:hover {
    background-color: white;
    border-left-color: var(--walnut);
    transform: translateX(5px);
    box-shadow: var(--box-shadow-md);
}

.program-item-icon {
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--walnut-light), var(--walnut));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2rem; /* Espace entre icône et texte */
}

.program-item-icon i {
    width: 2.2rem;
    height: 2.2rem;
}

.program-item-content {
    flex-grow: 1; /* Prend l'espace restant */
}

.program-item-content h4 {
    font-size: 1.8rem; /* Taille du titre du module */
    font-weight: 600;
    color: var(--black-pearl);
    margin: 0 0 0.3rem 0; /* Pas de marge basse pour rapprocher la description */
}

.program-item-content span {
    font-size: 1.5rem; /* Taille de la description */
    color: var(--black-pearl-light);
    line-height: 1.4;
}

/* Ajustements responsives pour la liste visuelle */
@media (min-width: 768px) {
    /* Passer à 2 colonnes sur tablette */
    .about-program-visual-list {
         grid-template-columns: 1fr 1fr;
         gap: 2rem;
         max-width: 900px; /* Un peu plus large */
    }
     /* Ajuster padding si besoin */
    .program-list-item { padding: 2rem; }
}

 @media (min-width: 1200px) {
    /* Passer à 3 colonnes sur grand écran */
    .about-program-visual-list {
         grid-template-columns: 1fr 1fr 1fr;
         gap: 2.5rem;
         max-width: 1140px; /* Encore plus large */
    }
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE SPECIFIQUE ABOUT                                                */
/* -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    .about-grid-features {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
        gap: 2.5rem;
    }
    .feature-item {
        padding: 3rem 2rem;
    }
    /* Ajuster le padding des sections sur tablette */
    .about-section {
        padding: calc(var(--section-spacing) * 0.8) 0;
    }
}

@media (max-width: 768px) {
    .about-grid-features {
        grid-template-columns: 1fr;
        max-width: 450px;
        gap: 2rem;
    }
    .feature-item {
         padding: 2.5rem;
    }
    /* Ajuster le padding des sections sur mobile */
    .about-section {
        padding: calc(var(--section-spacing) * 0.7) 0;
    }
}