/* --- Charte Graphique Absolue (Aithra) --- */
:root {
    --brand-dark-green: #233B38; /* Couleur tirée directement de fond5.png */
    --brand-teal: #00a88f;       /* Vert d'Aithra_Tech.png */
    --text-dark: #1f2937;
    --text-orange: #ed6b41;
    --text-muted: #4b5563;
    --bg-light: #f9fafb;
    --white: #ffffff;
    --orange: #ed6b41;
    
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

/* --- Resets globaux & structure --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.text-center { text-align: center; }

/* --- Typographies --- */
h2 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--brand-dark-green);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.section-desc {
    font-size: 1.125rem;
    color: var(--text-muted);
    max-width: 750px;
    margin: 0 auto 50px auto;
}

/* --- Gestion universelle des images (Anti-bug mobile) --- */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.img-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.img-rounded {
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* --- Navigation --- */
.navbar {
    background-color: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0; /* Un peu plus compact pour entourer le logo */
}

/* --- Bouton de sélection de langue (FR/EN) --- */
.navbar nav .btn-lang {
    text-decoration: none;
    color: var(--brand-dark-green);
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid var(--brand-dark-green);
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 20px;
    transition: all 0.2s ease;
}

.navbar nav .btn-lang:hover {
    background-color: var(--brand-dark-green);
    color: var(--white) !important;
}

/* Ajustement responsive pour mobile */
@media (max-width: 900px) {
    .navbar nav .btn-lang {
        margin: 10px 0 0 0;
        display: inline-block;
    }
}

/* Style dédié pour le nouveau logo officiel en image */
.logo .logo-img {
    height: 28px; /* Hauteur calibrée parfaite pour la barre de navigation */
    width: auto;
    display: block;
}

.navbar nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    margin-left: 30px;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.navbar nav a:not(.btn-nav):hover {
    color: var(--brand-teal);
}

.navbar .btn-nav {
    background-color: var(--brand-dark-green);
    color: var(--white) !important;
    padding: 10px 20px;
    border-radius: 6px;
}

.navbar .btn-nav:hover {
    background-color: var(--brand-teal);
}

/* --- Hero Section (Zéro marge, 3A2 collée à gauche et pleine hauteur) --- */
.hero {
    background-color: var(--brand-dark-green);
    display: flex;
    align-items: stretch;  /* Force l'image et le texte à partager la même hauteur */
    min-height: 550px;     /* Hauteur minimale globale de la section */
    padding: 0 !important; /* Supprime absolument toutes les marges autour de l'image */
    margin: 0;
    overflow: hidden;
}

.hero-img-pattern {
    height: 100%;          /* Occupe toute la hauteur réelle de la section */
    width: auto;           /* Garde les proportions d'origine de l'image */
    width: 280px;           /*On fixe une largeur restreinte pour qu'elle agisse comme un panneau décoratif */
    object-fit: cover;     /* S'assure que le motif remplit l'espace sans déformation */
    display: block;
    flex-shrink: 0;        /* Empêche le texte de compresser la largeur de l'image */
}

/* Conteneur du texte pour gérer l'espace à droite de l'image */
.hero-content-wrapper {
    flex: 1;
    display: flex;
    align-items: center;   /* Centre le texte verticalement par rapport à l'image */
    padding: 60px 80px;    /* Marges intérieures pour que le texte respire */
}

.hero-content {
    max-width: 750px;
    color: var(--white);
    text-align: left;      /* Écritures alignées proprement à gauche */
}

.tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-teal);
    background-color: rgba(255,255,255,0.1);
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
    display: inline-block;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 2.7rem;
    font-weight: 800;
    margin: 20px 0;
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--white);
}

.hero .subtitle {
    font-size: 1.35rem;
    opacity: 0.95;
    margin-bottom: 40px;
}

/* Alignement des piliers techniques : maximum 2 par ligne */
.hero-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Force strictement 2 colonnes de taille égale */
    gap: 16px 40px;                        /* 16px d'espace vertical, 40px d'espace horizontal */
    max-width: 600px;                      /* Limite la largeur de la grille pour un rendu élégant */
    margin-top: 15px;
}

.hero-badges span {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
}


/* --- Ajustement Mobile Épuré --- */
@media (max-width: 900px) {
    .hero {
        flex-direction: column; /* Aligne l'image au-dessus du texte sur petit écran */
    }
    .hero-img-pattern {
        display: none;
    }
    .hero-content-wrapper {
        padding: 40px 20px;
    }
    .hero-content {
        text-align: center; /* Recentre le texte pour un meilleur confort sur mobile */
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .hero-badges {
        grid-template-columns: 1fr; /* Repasse à 1 seul badge par ligne sur mobile */
        gap: 12px 0;
    }
}

/* --- Section Intro / Technologie (Exactement selon le modèle) --- */
.intro {
    background-color: var(--white); /* Section sur fond blanc pour trancher avec le vert du Hero */
    padding: 90px 0;
}

/* En-tête de la section */
.section-header h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--brand-dark-green);
    margin-bottom: 15px;
}

.section-header .section-desc {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.5;
}

/* --- Nouvelle disposition Intro (Image à gauche, Textes à droite) --- */
.intro {
    background-color: var(--white);
    padding: 80px 0;
}

/* Le conteneur principal en Flexbox */
.intro-layout-wrapper {
    display: flex;
    align-items: stretch;    /* On aligne au début (à gauche) et on supprime le conflit de centrage */
    justify-content: flex-start; 
    gap: 40px;               
    margin-top: 40px;
    width: 100%;
}

/* Zone de Gauche (L'image) */
.intro-image-zone {
    /* 🎯 LA MAGIE : force cette colonne à occuper EXACTEMENT la moitié gauche, au pixel près */
    flex: 0 0 calc(40% - 20px); 
    display: flex;
    justify-content: flex-end; /* Colle l'image contre l'axe central */
}

/* La photo de la machine */
.machine-main-img {
    width: auto;
    max-width: 100%;         
    max-height: 50vh;        
    object-fit: contain;   
    border-radius: 12px;
}

/* Zone de Droite (Les écritures) */
.intro-text-zone {
    /* 🎯 LA MAGIE : force cette colonne à occuper EXACTEMENT la moitié droite */
    flex: 0 0 calc(50% - 20px); 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Le texte commence au milieu, mais s'arrête à 480px de large */
    max-width: 480px;        
    text-align: left;
    margin-right: auto;
}

.intro-main-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.highlight-teal {
    color: var(--brand-teal);
    font-weight: 700;
}


/* --- Version Mobile (Empilage vertical classique) --- */
@media (max-width: 900px) {
    .intro-layout-wrapper {
        flex-direction: column; 
        gap: 35px;
    }
    
    /* On réinitialise les largeurs à 100% pour l'écran du téléphone */
    .intro-image-zone, .intro-text-zone {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    
    .intro-image-zone {
        justify-content: center; 
        margin-bottom: 10px;     
    }
    
    .machine-main-img {
        max-width: 100%;
        height: auto;
    }

    .intro-text-zone {
        text-align: center;
    }
    
}

/* --- Section Matériaux avec le Grand A Aithra Centré en Fond --- */
.materials-section {
    position: relative;
    background-color: #000000; /* Le fond noir pur officiel */
    
    /* 🎯 On charge l'image du "A" blanc. 
       background-blend-mode: multiply permet d'assombrir l'image blanche pour la rendre subtile */
    background-image: url('images/Aithra_Ablanc.png');
    background-position: center 25%; /* Centre parfaitement le "A" au milieu de la section */
    background-repeat: no-repeat;       /* Évite que le logo ne se répète en mosaïque */
    background-size: 200%;           /* Ajuste le "A" pour qu'il tienne élégamment dans la section */
    
    /* 💡 C'est ce duo qui crée l'effet de transparence sombre sur l'image blanche : */
    background-blend-mode: luminosity; 
    opacity: 0.95; 

    padding: 100px 0 0 0;
    overflow: hidden;
}

/* Astuce supplémentaire : on ajoute un léger voile sombre par-dessus au cas où l'image flashe trop */
.materials-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Voile noir transparent à 85% */
    z-index: 1;
}

/* On force le conteneur des textes et des grilles à passer DEVANT le fond */
.materials-content {
    position: relative;
    z-index: 2; /* Passe au-dessus du voile noir pour rester 100% blanc et lisible */
}

.materials-section h2 {
    color: var(--white) !important;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.materials-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-teal);
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 5px;
}

.materials-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto 60px auto;
}

/* Grille moderne de présentation des matériaux */
/* --- Structure asymétrique de la liste des matériaux --- */
.materials-asymmetric-rows {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espace vertical entre les 3 lignes */
    max-width: 1000px;
    margin: 0 auto;
}

/* Base commune pour chaque ligne */
.mat-row {
    display: grid;
    gap: 12px; /* Espace horizontal entre les blocs d'une même ligne */
    width: 100%;
}

/* 🎯 Configuration de la Ligne 1 (3 colonnes égales) */
.row-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

/* 🎯 Configuration de la Ligne 2 (4 colonnes égales) */
.row-4-cols {
    grid-template-columns: repeat(4, 1fr);
}

/* 🎯 Configuration de la Ligne 3 (2 colonnes égales) */
.row-2-cols {
    grid-template-columns: repeat(2, 1fr);
    max-width: 660px; /* On réduit légèrement la largeur pour garder l'harmonie visuelle */
    margin: 0 auto;  /* Centre la dernière ligne par rapport aux autres */
}

/* Style des fiches de matériaux individuelles (On garde votre design premium) */
.mat-item {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--brand-teal); 
    padding: 12px 25px;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: left;
}

.mat-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.mat-item span {
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --- Version Mobile : On empile tout sur 1 seule colonne pour la lisibilité --- */
@media (max-width: 900px) {
    .row-3-cols, .row-4-cols, .row-2-cols {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .materials-asymmetric-rows {
        gap: 15px;
        padding: 0 15px;
    }
    .mat-item {
        padding: 15px 20px;
        text-align: center; /* Plus esthétique centré sur mobile */
    }
}

/* --- Liste des caractéristiques (Icones oranges rondes) --- */

.materials-features-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px; /* On resserre pour que les lignes soient élégantes et centrées */
    margin: 0 auto 60px auto; /* Espace avec la grille de matériaux en dessous */
    margin-top: 30px; 
    padding: 10px;
}

.mat-feature-line {
    gap: 20px;
    background-color: rgba(255, 255, 255, 0.02); /* Très léger fond translucide pour chaque ligne */
    padding: 15px 20px;
    border-radius: 8px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    max-width : 80%
    align: center;
}
.mat-feature-line:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border: 3px solid var(--orange);
    transform: translateY(-2px);
}

/* Le texte à côté du rond orange */
.mat-feature-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    line-height: 1.5;
    text-align: center;
}

.mat-feature-text strong {
    color: var(--white); /* Met en valeur l'argument principal en blanc pur */
    font-weight: 700;
    text-align: center;

}

/* --- Ajustement Mobile --- */
@media (max-width: 900px) {
    .mat-feature-line {
        flex-direction: column; /* On empile l'icône et le texte sur petit écran */
        text-align: center;
        gap: 12px;
        padding: 20px;
    }
}


/* --- Section Avantages (Features Grid) --- */
.features {
    background-color: var(--bg-light);
    padding: 100px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.card {
    background-color: var(--white);
    padding: 35px 25px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03);
}

.card-icon { font-size: 1.8rem; margin-bottom: 15px; }
.card h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 10px; color: var(--brand-dark-green); }
.card p { color: var(--text-muted); font-size: 0.95rem; }

/* --- Section Comparaison (Current Tech) --- */
.comparison {
    padding: 100px 0 0 0;
}

.comp-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}


.comp-image img {
    box-shadow: none !important;
    max-width: 40vw;
    padding : 50px 0;
}


.comp-text .highlight-p {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-dark-green);
    margin-bottom: 15px;
}

.comp-text ul {
    list-style: none;
    margin-bottom: 25px;
}

.comp-text ul li {
    padding: 10px 15px;
    background-color: #f3f4f6;
    margin-bottom: 8px;
    border-radius: 6px;
    font-weight: 600;
}

@media (max-width: 900px) {

    /* 🎯 1. Centre le bloc conteneur de l'image et ajoute un peu d'espace */
    .comp-image {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0 !important; /* Annule les paddings qui pourraient décentrer */
    }

    /* 🎯 2. Force l'image à s'agrandir proprement sur mobile au lieu de rester bloquée à 40vw */
    .comp-image img {
        max-width: 85% !important; /* L'image prend 85% de la largeur du téléphone pour être bien visible */
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    /* 1. Centre le bloc conteneur de l'image */
    .comp-image {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0 !important; 
    }

    /* 2. Force l'image à s'agrandir proprement */
    .comp-image img {
        max-width: 85% !important; 
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    /* 3. Centre tous les textes, listes et paragraphes du bloc de description */
    .comp-text {
        text-align: center;
        width: 100%;
    }

    /* 4. Aligne les puces de la liste au centre de manière élégante */
    .comp-text ul {
        display: inline-block; /* Permet de compacter la liste pour pouvoir la centrer */
        text-align: left;      /* Garde le texte aligné à gauche à l'intérieur des boutons pour rester propre */
        width: 100%;
        max-width: 400px;      /* Évite que les puces ne soient trop larges sur mobile */
        margin: 0 auto 25px auto;
        padding: 0;
    }
    
}

/* --- Section Machine --- */
.machine-section {
    background-color: var(--brand-dark-green);
    padding: 100px 0;
}

.machine-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.machine-image img {
    box-shadow: none !important;
}

.machine-section-header h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 15px;
   
}

.machine-text h2 {
    color: var(--white);
}

.machine-text {
    font-weight: 500;
    color: var(--white);
}

.benefits-accent {
    list-style: none;
    margin-top: 25px;
}

.benefits-accent li {
    background-color: var(--white);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 4px solid var(--brand-teal);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    color: var(--brand-dark-green);
}

/* --- Section Équipe & Partenaires --- */
.team { padding: 100px 0; }
.funders-grid { display: flex; justify-content: center; gap: 40px; margin: 40px 0 40px 0; }

.team-pic {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    border: 3px solid #e5e7eb;
    width: 40vw;
    margin: 0 auto;
    margin-bottom: 20px;
}

.team-pic img {
    max-width: 100%;
    height: auto;
    display: block; /* Évite les petits espaces vides sous l'image */
    margin: 0 auto;
}


.member-card {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 25vw;
}

.avatar {
    width: 90px;
    height: 90px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    
    /* 🎯 Les trois lignes magiques de sécurité : */
    overflow: hidden;   /* Coupe tout ce qui dépasse du cercle */
    flex-shrink: 0;     /* Empêche Flexbox de déformer le cercle en rectangle */
    position: relative; /* Stabilise le positionnement des images enfants */
}

.avatar img {
    width: 100% !important;        /* Le !important force le navigateur à jeter les règles de .xp-img */
    height: 100% !important;       /* Le !important élimine le max-height de 30px */
    max-height: none !important;   /* Annulation stricte de la bande de 30px */
    object-fit: cover !important;  /* Fait le crop parfait */
    object-position: center; /* Centre le visage dans le rond */
    display: block;
}


.member-card h3 { font-family: var(--font-heading); font-size: 1.15rem; }
.member-card .role { color: var(--brand-teal); font-weight: 600; font-size: 0.9rem; margin-top: 4px; }

.xp_founders_c{
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 5px; 
    width: 40%; 
    margin: 15px auto 0 auto; /* 15px de vide en haut, auto à gauche/droite pour centrer, 0 en bas */
}

.xp_founders_m{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 5px; 
    width: 60%; 
    margin: 15px auto 0 auto; /* 15px de vide en haut, auto à gauche/droite pour centrer, 0 en bas */
}

/* --- Bouton LinkedIn pour les fiches d'équipe --- */
.linkedin-link {
    display: inline-block;
    margin-top: 20px;          /* Donne de l'air en dessous de la grille de logos */
    color: var(--orange);  /* Utilise le turquoise de votre charte graphique */
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.linkedin-icon {
    width: 26px;               /* Taille parfaite de l'icône */
    height: 26px;
    fill: currentColor;        /* Permet à l'icône de prendre la couleur du lien parent (.linkedin-link) */
    display: block;
    margin: 0 auto;            /* Centre parfaitement l'icône horizontalement */
}

/* Effet au survol : passe au vert foncé de votre charte et grossit légèrement */
.linkedin-link:hover {
    color: var(--orange);
    transform: scale(1.12);
}


/* Le style de base pour toutes tes cases */
.xp_case {
    padding: 0; /* 1. Supprime le padding pour que l'image colle aux bords */
    overflow: hidden; /* 2. Coupe tout ce qui dépasse des limites de la case (comme les arrondis) */
}

/* 🎯 FORCE L'IMAGE À S'ADAPTER À 100% SANS DÉFORMER */
.xp-img {
    max-height: 30px;  /* Le logo ne dépassera 30px de haut */
    max-width: 100%;   /* Sécurité pour qu'un logo très large ne déborde pas sur les côtés */
    width: auto;       /* Conserve les proportions d'origine de l'image (pas de déformation) */
    height: auto;      /* Conserve les proportions d'origine de l'image */
    object-fit: contain; /* Force le navigateur à redimensionner proprement le logo */
    display: block;
}

.xp_case-large {
    grid-column: span 2; 
}

/* --- Section Globale de la Grille --- */
.photo-grid-section {
    padding: 60px 0;
    background-color: #000000; /* À adapter selon ton fond de page */
}

.grid-container {
    max-width: 30vw; /* Largeur max de la grille (ex: 3 cols x 300px) */
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    /* 🎯 Ajout de la bordure extérieure */
    /* border: 3px solid var(--brand-teal); /* Ajuste l'épaisseur (3px) et la couleur (ici le turquoise Aithra) */
    /* Opte pour cette ligne si tes images débordent légèrement de la bordure dans les angles */
    overflow: hidden;
    margin-bottom: 40px;
    background: var(--brand-dark-green);
    border: 10px solid var(--brand-dark-green);
    border-radius: 5%;
}

/* --- Gestion des lignes --- */
.grid-row {
    display: flex;
    width: 100%;
}

/* Centre les éléments uniquement sur la ligne qui en contient 2 */
.grid-row.row-2 {
    justify-content: center;
}

/* --- Gestion des cases (le format carré) --- */
.grid-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* 🎯 Force magique pour rendre la case parfaitement carrée */
}

/* Largeur des cases pour les lignes de 3 éléments (100% / 3) */
.row-3 .grid-item {
    flex: 0 0 33.333%;
}

/* Largeur des cases pour la ligne de 2 éléments (identique aux autres pour garder la même taille) */
.row-2 .grid-item {
    flex: 0 0 33.333%; 
}

/* --- Gestion des images et de l'effet Hover --- */
.grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* S'assure que l'image remplit le carré sans se déformer */
    transition: opacity 0.4s ease; /* Transition douce pour le changement */
}

/* Image par défaut au-dessus */
.grid-item .img-base {
    z-index: 2;
    opacity: 1;
}

/* Image de survol en dessous */
.grid-item .img-hover {
    z-index: 1;
}

/* 🎯 Au survol : on masque l'image par défaut pour laisser apparaître l'autre */
.grid-item:hover .img-base {
    opacity: 0;
}

/* --- Nouvelle Grille d'Équipe Évoluée --- */
.team-grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 20px; /* Espace uniforme entre toutes les cases */
    width: 45vw;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Style de la 9ème case (Texte) */
/* 🎯 Style de la 9ème case (Texte) corrigé pour forcer le contenu à rentrer */
.grid-text-box {
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    align-items: center;        /* Centre verticalement */
    justify-content: center;   /* Centre horizontalement */
    padding: 15px;             /* Réduit de 20px à 15px pour gagner de l'espace vital */
    text-align: center;
    aspect-ratio: 1 / 1;       /* Garde le format carré parfait */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    
    /* 💡 Sécurités anti-débordement : */
    overflow: hidden;          /* Coupe proprement si un mot est trop long */
    word-break: break-word;    /* Coupe les mots ultra-longs si nécessaire */
}

/* On ajuste finement les éléments internes */
.text-box-content {
    width: 100%;
    max-height: 100%;          /* Empêche le bloc interne de dépasser du carré */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;                  /* Gère un espace fixe et serré entre le titre, le texte et le bouton */
}

.text-box-content h4 {
    font-family: var(--font-heading);
    color: var(--brand-dark-green);
    font-size: 1.05rem;        /* Légèrement réduit (était à 1.2rem) */
    font-weight: 700;
    margin: 0;                 /* Supprime les marges floues */
}

.text-box-content p {
    font-family: var(--font-body);
    color: var(--text-muted);
    font-size: 0.8rem;         /* Légèrement réduit (était à 0.9rem) */
    line-height: 1.3;          /* Interligne plus serré pour gagner de la hauteur */
    margin: 0;                 /* Supprime les marges floues */
}

.btn-box-link {
    display: inline-block;
    align-self: center;        /* Évite que le bouton ne prenne 100% de la largeur */
    font-family: var(--font-heading);
    font-size: 0.75rem;        /* Légèrement réduit */
    font-weight: 700;
    color: var(--brand-teal);
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 2px solid var(--brand-teal);
    padding-bottom: 2px;
    margin-top: 4px;
    transition: color 0.2s, border-color 0.2s;
}

.btn-box-link:hover {
    color: var(--brand-dark-green);
    border-color: var(--brand-dark-green);
}

/* --- Adaptation Mobile de la Grille --- */
@media (max-width: 900px) {
    .team-grid-3x3 {
        grid-template-columns: repeat(2, 1fr); /* Passe en 2 colonnes sur tablette */
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .team-grid-3x3 {
        grid-template-columns: 1fr; /* Passe en 1 seule colonne sur smartphone */
        max-width: 320px; /* Aligne la largeur sur la taille standard des photos */
    }
}

/* --- Version Mobile (Responsive) --- */
@media (max-width: 900px) {
    
    /* =================================================== */
    /* 🎯 AGRANDISSEMENT DE LA PHOTO D'ÉQUIPE SUR MOBILE   */
    /* =================================================== */
    .team-pic {
        width: 90% !important;   /* La photo passe de 40% à 90% de la largeur de l'écran du téléphone */
        max-width: 500px;        /* Sécurité pour éviter qu'elle ne devienne trop géante sur les grandes tablettes */
        padding: 10px;           /* On réduit légèrement le cadre blanc pour laisser plus de place à l'image */
        margin: 0 auto 30px auto; /* Centre parfaitement le bloc et ajoute une marge en bas */
    }
    
    .team-pic img {
        width: 100%;
        height: auto;
    }

    /* =================================================== */
    /* 🎯 AGRANDISSEMENT DES MEMBER CARDS SUR MOBILE       */
    /* =================================================== */
    .member-card {
        width: 70% !important;   /* Les cartes passent de 25vw à 90% de la largeur du téléphone */
        max-width: 450px;        /* Évite qu'elles ne deviennent trop larges sur les tablettes */
        padding: 30px 20px;      /* On ajuste légèrement l'espace interne */
        margin: 0 auto;          /* Centre les cartes horizontalement */
    }

    .grid-container {
        width: 70% !important;   /* La photo passe de 40% à 90% de la largeur de l'écran du téléphone */
        max-width: 500px;        /* Sécurité pour éviter qu'elle ne devienne trop géante sur les grandes tablettes */
        padding: 10px;           /* On réduit légèrement le cadre blanc pour laisser plus de place à l'image */
        margin: 0 auto 30px auto; /* Centre parfaitement le bloc et ajoute une marge en bas */
    }

   
}



/* Grille Logos Partenaires */
.soutien-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 60px;
}

.soutien-section h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 1.5px;
    margin-bottom: 40px;
}

.logos-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    flex-wrap: wrap;
}

.partner-logo {
    max-height: 55px;
    width: auto;
    height: 55px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}



/* --- Section Newsletter --- */
.newsletter-section {
    background-color: var(--orange); /* Utilise le orange officiel d'Aithra */
    color: var(--white);
    padding: 60px 0;
}

.newsletter-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.newsletter-text text-align {
    text-align: left;
}

.newsletter-tag {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-dark-green); /* Contraste idéal sur le fond orange */
    background-color: rgba(255, 255, 255, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 12px;
}

.newsletter-section h2 {
    color: var(--white) !important; /* Force le titre en blanc sur fond orange */
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.newsletter-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.5;
}

/* Formulaire en ligne (Input + Bouton collés élégamment) */
.newsletter-field {
    display: flex;
    background: var(--white);
    padding: 6px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.newsletter-field input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--text-dark);
    outline: none;
    background: transparent;
}

.btn-newsletter {
    background-color: var(--brand-dark-green);
    color: var(--white);
    border: none;
    padding: 0 24px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-heading);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-newsletter:hover {
    background-color: #172a26; /* Version encore plus sombre pour le survol */
}

/* --- Version Mobile (Responsive) --- */
@media (max-width: 900px) {
    .newsletter-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
    }
    
    .newsletter-text {
        text-align: center;
    }
    
    .newsletter-field {
        flex-direction: column;
        background: transparent;
        padding: 0;
        gap: 12px;
    }
    
    .newsletter-field input {
        background: var(--white);
        border-radius: 6px;
        padding: 14px;
    }
    
    .btn-newsletter {
        padding: 14px;
        border-radius: 6px;
        font-size: 1rem;
    }
}

/* --- Section Contact --- */
.contact {
    background-color: var(--brand-dark-green);
    color: var(--white);
    padding: 100px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-info h2 { color: var(--white); font-size: 2.5rem; line-height: 1.2; }
.contact-card { margin-top: 35px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 35px; }
.brand-name { font-size: 1.2rem; font-weight: 600; }
.brand-email { font-size: 1.5rem; color: var(--brand-teal); text-decoration: none; font-weight: 700; }

.contact-form { background: var(--white); padding: 40px; border-radius: 8px; color: var(--text-dark); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; font-family: var(--font-body); }
.btn-submit { width: 100%; background-color: var(--brand-teal); color: var(--white); border: none; padding: 14px; font-size: 1rem; font-weight: 700; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
.btn-submit:hover { background-color: #008f7a; }

/* --- Footer --- */
footer { background-color: #172a26; color: #9ca3af; padding: 30px 0; font-size: 0.875rem; }

/* --- Version Mobile (Responsive intelligent) --- */
@media (max-width: 900px) {
    h2 { font-size: 1.8rem; }
    .hero h1 { font-size: 2.4rem; }
    .hero { background-position: center; text-align: center; padding: 100px 0 60px 0; }
    .hero-badges { justify-content: center; }
    .navbar .nav-content { flex-direction: column; gap: 15px; }
    .navbar nav a { margin: 0 10px; }
    
    /* Bascule toutes les grilles sur une seule colonne */
    .intro-grid, .features-grid, .comp-grid, .machine-grid, .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .funders-grid { flex-direction: column; align-items: center; gap: 20px; }
    .logos-flex { gap: 30px; }
    .partner-logo { max-height: 45px; }
}