/* ====================================================================

        SECTION 1 : GRID PRINCIPALE DE LA PAGE

   ==================================================================== */


/* -- GRILLE 2 COLONNES (PHOTO VS TEXTE) -- */

/* Layout asymétrique : photo 1/3, texte 2/3 pour équilibre visuel */

.grid-2-col-about {
    display: grid;                    /* Utilise CSS Grid */
    grid-template-columns: 1fr 2fr;   /* Ratio 1:2 (33% photo, 67% texte) */
    gap: 4rem;                       /* Grand espace entre colonnes */
    align-items: start;              /* Alignement en haut pour cohérence */
}


/* ====================================================================

    SECTION 2 : COLONNE PHOTO (GAUCHE)

   ==================================================================== */

/* -- CONTENEUR DE L'IMAGE -- */
.image-box-apropos {
    text-align: center;              /* Centre l'image horizontalement */
    padding-top: 2rem;               /* Espacement supérieur */
    position: sticky;                /* Reste visible au défilement sur desktop */
    top: 20px;                      /* Position de "collage" depuis le haut */
}

/* -- PHOTO DE PROFIL -- */
.profile-photo {
    width: 100%;                     /* S'adapte à la largeur du conteneur */
    max-width: 250px;                /* Limite la taille maximale */
    height: auto;                    /* Conserve les proportions */
    border-radius: 50%;              /* Forme ronde pour effet chaleureux */
    border: 5px solid var(--primary); /* Bordure colorée de 5px */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Ombre portée pour profondeur */
}

/* -- CARTE DE CONTACT (SOUS LA PHOTO) -- */
.contact-card-about {
    margin-top: 2rem;                /* Espacement depuis la photo */
    padding: 1.5rem;                 /* Espacement interne */
    background-color: var(--bg-light); /* Fond léger pour distinction */
    border-radius: 8px;              /* Coins arrondis */
    box-shadow: var(--shadow-subtle); /* Ombre légère (variable définie ailleurs) */
}

/* -- STYLES DU NOM DANS LA CARTE -- */
.contact-card-about .h4-like {
    font-size: 1.5rem;               /* Taille intermédiaire */
    font-family: var(--font-heading); /* Police de titres pour importance */
    color: var(--primary-dark);      /* Couleur foncée pour contraste */
    margin-bottom: 0.2rem;           /* Petit espace sous le nom */
}



/* ====================================================================

    SECTION 3 : COLONNE TEXTE (DROITE)

   ==================================================================== */

/* -- TITRE DE SECTION -- */
.text-content-apropos .section-title {
    border-bottom: 2px solid var(--accent); /* Ligne de séparation colorée */
    padding-bottom: 0.5rem;           /* Espace entre texte et ligne */
    margin-bottom: 2rem;              /* Espace avant le contenu */
    font-size: 2.2rem;                /* Taille généreuse */
}

/* -- TEXTE D'INTRODUCTION (LEAD) -- */
.lead-text-apropos {
    font-size: 1.15rem;              /* Légèrement plus grand que le texte normal */
    color: var(--text-dark);         /* Couleur foncée pour lisibilité */
    font-weight: 500;                /* Poids moyen (demi-gras) */
    margin-bottom: 1.5rem;           /* Espacement après */
}

/* -- BLOC D'EXPERTISE -- */
.expertise-block {
    background-color: var(--bg-light); /* Fond distinctif */
    padding: 1.5rem;                 /* Espacement interne */
    border-left: 5px solid var(--primary); /* Bordure gauche colorée */
    border-radius: 5px;              /* Coins légèrement arrondis */
    margin: 2rem 0;                  /* Espacement vertical */
}

/* -- LISTE À PUCE PERSONNALISÉE -- */
.list-check-apropos {
    list-style: none;                /* Supprime les puces par défaut */
    padding-left: 0;                 /* Supprime le padding gauche */
}

.list-check-apropos li {
    margin-bottom: 0.8rem;           /* Espace entre items */
    position: relative;              /* Pour positionner le pseudo-élément */
    padding-left: 25px;              /* Espace pour l'icône */
}

/* -- PSEUDO-ÉLÉMENT POUR L'ICÔNE DE VALIDATION -- */
.list-check-apropos li::before {
    content: '\f00c';                /* Code Unicode Font Awesome pour ✓ */
    font-family: 'Font Awesome 6 Free'; /* Police des icônes */
    font-weight: 900;                /* Poids "solid" pour l'icône */
    color: var(--accent);            /* Couleur dorée/sable */
    position: absolute;              /* Positionnement absolu par rapport au li */
    left: 0;                         /* Alignement à gauche */
    top: 0;                          /* Alignement en haut */
}

/* -- MESSAGE FINAL (ITALIQUE) -- */
.final-message {
    margin-top: 3rem;                /* Grand espace avant */
    font-style: italic;              /* Italique pour distinction */
    font-weight: 600;                /* Demi-gras pour importance */
    color: var(--primary-dark);      /* Couleur verte foncée */
    border-top: 1px dashed var(--border-light); /* Ligne pointillée de séparation */
    padding-top: 1rem;               /* Espace au-dessus de la ligne */
}



/* ====================================================================

    SECTION 4 : FAQ - CLARIFICATION DES TITRES

   ==================================================================== */

/* -- GRILLE DU CONTENU FAQ -- */
.faq-content-grid {
    display: grid;                    /* CSS Grid pour layout */
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes égales pour les définitions */
    gap: 2rem;                       /* Espacement régulier */
    margin-top: 3rem;                /* Espace depuis le titre */
}

/* -- ÉLÉMENT TITRE (PREMIÈRE LIGNE) -- */
.faq-item-title {
    grid-column: 1 / -1;             /* S'étend sur toutes les colonnes (1 à -1) */
    text-align: center;              /* Centrage du contenu */
    margin-bottom: 1rem;             /* Espace avant les définitions */
}

.faq-item-title .pratique-title {
    margin-bottom: 1.5rem;          /* Petit espace sous le titre */
}

.faq-item-title i {
    color: var(--primary);
}

/* -- CONTENEUR DE CHAQUE DÉFINITION -- */
.faq-item-content {
    background-color: var(--white);  /* Fond blanc pur */
    padding: 1.5rem;                 /* Espacement interne */
    border-radius: 8px;              /* Coins arrondis */
    border: 1px solid var(--border-light); /* Bordure très légère */
    box-shadow: var(--shadow-subtle); /* Ombre douce pour relief */
}

/* -- TITRE DE CHAQUE DÉFINITION -- */
.accordion-title-faq {
    font-size: 1.2rem;               /* Taille légèrement augmentée */
    color: var(--accent);            /* Couleur dorée/sable pour distinction */
    margin-bottom: 0.8rem;           /* Espace avant la description */
    border-bottom: 2px solid var(--bg-light); /* Ligne de séparation subtile */
    padding-bottom: 5px;             /* Espace entre texte et ligne */
}



/* ====================================================================

    SECTION 5 : RESPONSIVE DESIGN

   ==================================================================== */

/* -- BREAKPOINT TABLETTE (≤ 992px) -- */
@media (max-width: 992px) {
    /* Adaptation de la grille principale */
    .grid-2-col-about {
        grid-template-columns: 1fr;   /* Passe à une seule colonne */
    }
    
    /* Désactivation du sticky sur mobile/tablette */
    .image-box-apropos {
        position: static;             /* Retour au flux normal */
    }
    
    /* Réduction de la taille de la photo */
    .profile-photo {
        max-width: 200px;            /* Photo plus petite */
    }
    
    /* Masquage de la carte de contact sur mobile pour simplicité */
    .contact-card-about {
        display: none;               /* Cachée sur petits écrans */
    }
    
    /* Adaptation de la grille FAQ */
    .faq-content-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes sur tablette */
    }
    
    /* Le titre continue de prendre toute la largeur */
    .faq-item-title {
        grid-column: 1 / -1;
    }
}

/* -- BREAKPOINT MOBILE (≤ 600px) -- */
@media (max-width: 600px) {
    /* Passage à une seule colonne pour la FAQ */
    .faq-content-grid {
        grid-template-columns: 1fr;   /* 1 colonne sur mobile */
    }
}