/* --- STYLE SPÉCIFIQUE "L'ÉQUIPE" (Thème Clair) --- */
:root {
    --page-bg: #ffffff;
    --section-bg: #f8f9fa; /* Gris très léger pour alterner */
    --text-main: #2c3e50;
    --text-light: #666;
    --primary-green: #2e5c46; /* Votre Vert Forêt */
    --accent-green: #7ab596;  /* Votre Vert Sauge */
}

body {
    background-color: var(--page-bg);
    color: var(--text-main);
    font-family: 'Lato', sans-serif;
    margin: 0;
}

img {
    /* Empêche de glisser-déposer l'image sur le bureau */
    -webkit-user-drag: none;
    user-drag: none;
    /* Empêche la sélection bleue quand on clique dessus */
    user-select: none;
    -webkit-user-select: none;
}

/* En-tête de la page */
.page-intro {
    text-align: center;
    padding: 80px 20px 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.page-intro h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: var(--primary-green);
    margin-bottom: 20px;
}

.page-intro p {
    font-size: 1.2rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* --- PROFILS (Un en haut, un en bas) --- */

/* Conteneur global d'un profil */
.profile-section {
    padding: 80px 0;
    border-bottom: 1px solid #eee;
}

/* Alternance de fond pour casser la monotonie */
.profile-section:nth-child(even) {
    background-color: var(--section-bg);
}

.container-profile {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-start; /* Aligne le haut */
    gap: 60px;
}

/* Inverse l'ordre image/texte pour le 2ème profil */
.profile-section:nth-child(even) .container-profile {
    flex-direction: row-reverse;
}

/* Colonne Photo */
.profile-visual {
    flex: 1;
    max-width: 400px;
    text-align: center;
    position: relative;
}

/* --- CORRECTIF IMAGE --- */
.profile-img-container {
    width: 300px; /* Taille du cercle */
    height: 300px;
    border-radius: 50%;
    overflow: hidden; /* Coupe ce qui dépasse */
    margin: 0 auto 25px auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 3px solid var(--primary-green);
    background-color: #f0f0f0; /* Fond gris si l'image n'est pas carrée */
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* "contain" pour ne pas couper, "cover" pour remplir */
    /* Pour votre photo rectangulaire, mettez object-fit: contain; si vous voulez voir toute l'image, mais ça laissera des bandes. 
       Si vous voulez zoomer sans couper la tête, il faut recadrer l'image avant. 
       Pour l'instant, je laisse 'cover' mais je centre l'image */
    object-position: center top; /* Centre horizontalement, cale en haut verticalement */
    transition: all 0.3s ease;
}
/* ---------------------- */

.profile-visual:hover .profile-img {
    transform: scale(1.05);
}

/* Les réseaux sociaux sous la photo */
.social-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.social-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex; justify-content: center; align-items: center;
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.3s;
}
.social-btn:hover {
    background-color: var(--primary-green);
    color: #fff;
    border-color: var(--primary-green);
}

/* Colonne Texte */
.profile-content {
    flex: 1.5;
    padding-top: 10px; /* Petit décalage optique */
}

.role-tag {
    display: inline-block;
    background-color: var(--accent-green);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.profile-name {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin: 0 0 20px 0;
    color: var(--text-main);
}

.bio-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 30px;
    text-align: justify;
}

/* Bloc "Détails / Skills" */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background: white;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
/* Si on est sur section grise, le bloc détails reste blanc pour ressortir */

.detail-item h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--primary-green);
    margin: 0 0 5px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.detail-item p {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
}

/* Responsive Mobile */
@media (max-width: 900px) {
    .container-profile {
        flex-direction: column !important; /* Tout empiler sur mobile */
        align-items: center;
        gap: 30px;
    }
    .profile-visual { max-width: 300px; }
    .details-grid { grid-template-columns: 1fr; }
    .page-intro h1 { font-size: 2.5rem; }
}