/* --- CONFIGURATION GÉNÉRALE --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

/* --- LOGOS & TYPOGRAPHIE --- */
.logo, .tagline-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #0052FF;
    text-decoration: none;
}

.logo-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.hero-logo-img {
    height: 80px; /* Ajustez cette valeur selon la proportion de votre image */
    width: auto;
    display: block;
}

.heart { color: inherit; }

.heart-top{
    color: white; /* Définit la couleur blanche */
    font-variant-emoji: text; /* Force l'iPhone à ne pas transformer le cœur en emoji rouge */
    display: inline-block;
}

.heart-center{
    color: #0052FF; /* Définit la couleur blanche */
    font-variant-emoji: text; /* Force l'iPhone à ne pas transformer le cœur en emoji rouge */
    display: inline-block;
}

/* Ajustement pour mobile */
@media (max-width: 768px) {
    .hero-logo-img {
        height: 60px; /* Légèrement plus petit sur mobile */
    }
}


/* --- BANDEAU TOP --- */
.top-banner {
    background: white;
    text-align: center;
    padding: 15px 20px;
    font-size: 30px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid #e0e0e0;
}

.countdown-wrapper {
    background: #222; /* Fond sombre pour faire ressortir les chiffres */
    color: white;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: 'Montserrat', sans-serif;
    border-bottom: 3px solid #464645;
}

.countdown-title {
    font-weight: 700;
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-timer {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.timer-item {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.timer-item span {
    font-size: 1.7rem;
    font-weight: 900;
    color: #ffc600;
}

.timer-item label {
    font-size: 1.7rem;
    font-weight: 500;
    color: #bbb;
    text-transform: lowercase;
}

/* Version mobile : on réduit un peu la taille si besoin */
@media (max-width: 480px) {
    .countdown-wrapper { gap: 10px; padding: 8px; }
    .countdown-title { font-size: 0.7rem; }
    .timer-item span { font-size: 1.1rem; }
}

/* --- SECTION HERO --- */
.hero {
    background: #0052FF;
    padding: 0;
    color: white;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    align-items: stretch;
}

.hero-text {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centrage horizontal du contenu */
    text-align: center;  /* Centrage du texte */
}

.hero .logo {
    color: white !important;
    font-size: 48px;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- BOUTONS --- */
.btn {
    display: inline-block;
    background: white;
    color: #0052FF;
    padding: 15px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn:hover { transform: scale(1.05); }

.btn-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.btn-white {
    background: white;
    color: #0052FF;
    border: 1px solid #0052FF;
}

/* --- SECTION TAGLINE (TEXTE D'INTRODUCTION) --- */
.tagline {
    background: white;
    padding: 80px 20px;
    text-align: center;
}

.logo-overlap-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px; /* Espace avant le texte d'intro */
}

.tagline-img-logo {
    max-width: 450px; /* Ajustez la taille selon vos besoins */
    width: 100%;
    height: auto;
}

.tagline-intro {
    max-width: 750px;
    margin: 0 auto 30px;
    text-align: left;
}

.tagline-script {
    font-family: 'Brush Script MT', cursive;
    font-size: 60px;
    color: #001A4D;
    position: absolute;
    z-index: 10;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    white-space: nowrap;
}



.tagline-columns {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 750px;
    margin: 0 auto 40px;
    text-align: left;
    align-items: flex-start;
}

.column {
    flex: 1;
    font-size: 15px;
    line-height: 1.8;
}

.tagline-motto {
    font-size: 28px;
    color: #0052FF;
    font-weight: 700;
    max-width: 750px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .hero-content { grid-template-columns: 1fr; }
    .hero-text { padding: 40px 20px; }
    
    .tagline-columns { 
        flex-direction: column; 
        gap: 20px;
    }

    /* Ajustement de la taille du logo sur mobile */
    .tagline-img-logo { max-width: 280px; } 

    /* Les lignes .tagline-logo, .tagline-script et .logo-overlap-container ont été supprimées ici */
    
    /* ... reste du code mobile ... */
}

/* --- SECTION PROJETS --- */
.projects {
    background: linear-gradient(rgba(0, 82, 255, 0.75), rgba(0, 82, 255, 0.75)), url('images/salins.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 80px 20px;
    color: white;
}

.projects h2 {
    text-align: center;
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 50px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 40px;
}

.project-card { padding: 40px 30px; }
.green { background: #3dc2b0; }
.orange { background: #FF9500; }
.red { background: #52262C; }

/* Augmente la taille des titres H3 dans la grille des projets */
.project-card h3 {
    font-size: 2rem; /* Taille augmentée (était par défaut plus petite) */
    font-weight: 900; /* Force l'aspect très gras */
    line-height: 1.1; /* Resserre les lignes pour un effet plus compact */
    margin-bottom: 15px; /* Espace avec le texte en dessous */
    text-transform: uppercase; /* Force les majuscules */
}

/* Ajustement pour les petits écrans (mobiles) */
@media (max-width: 480px) {
    .project-card h3 {
        font-size: 1.6rem; /* Un peu plus petit sur mobile pour éviter que ça ne dépasse */
    }
}

.project-link {
    color: #FFFFFF !important;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    text-transform: uppercase;
}


/* Design spécifique pour le popup équipe */
/* --- MISE À JOUR POPUP ÉQUIPE --- */
.team-modal-content {
    max-width: 500px;
    padding: 0 !important;
    background: #0052FF; /* Couleur de fond identique au texte */
    border: none;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.team-modal-body {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* --- MISE À JOUR DU CONTAINER IMAGE --- */
.team-modal-img-container {
    width: 100%;
    height: 550px; 
    flex-shrink: 0;
    position: relative;
    background: #0052FF; /* Même bleu que le texte au lieu de #eee */
    overflow: hidden;
}

.team-modal-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* Garde le visage en haut */
    display: block;
}

/* On s'assure que le bouton fermer reste visible sur l'image */
.team-modal-content .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
    color: white;
    background: rgba(0, 0, 0, 0.3); /* Petit fond sombre pour la visibilité */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding-bottom: 4px; /* Ajustement visuel pour centrer le X */
}

/* Dégradé Overlay */
/* Le dégradé qui fait la transition */
.team-overlay-gradient {
    position: absolute;
    bottom: -1px; /* On descend d'un pixel pour couvrir la jointure */
    left: 0;
    right: 0;
    height: 150px; 
    /* Le dégradé part de transparent vers le bleu opaque en bas */
    background: linear-gradient(to bottom, transparent, #0052FF); 
    z-index: 1;
}
/* Dégradé Overlay - Ajusté pour être plus bas */


.team-modal-text {
    position: relative;
    padding: 0 30px 40px 30px; /* On enlève le padding top */
    color: white;
    background: #0052FF; 
    z-index: 2;
    margin-top: -1px; /* Colle parfaitement au conteneur de l'image */
}

.team-modal-text h3 {
    margin-bottom: 10px;
    font-size: 2rem;
    font-weight: 900;
}

.team-modal-text p {
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-line; /* Respecte les paragraphes du texte de Steve */
}

/* Masquer le nom au survol pour les profils par défaut */
.mini-tile img[src*="default_profil"] + .mini-name {
    display: none !important;
}

/* Optionnel : changer le curseur pour indiquer que ce n'est pas cliquable */
.mini-tile:has(img[src*="default_profil"]) {
    cursor: default;
}


/* Personnalisation de la barre de défilement pour Chrome/Safari */
.team-modal-text::-webkit-scrollbar {
    width: 5px;
}
.team-modal-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

@media (max-width: 480px) {
    .team-modal-img-container {
        height: 400px; /* Plus court sur mobile pour voir le texte rapidement */
    }
    .team-modal-content {
        margin: 5% auto; /* Moins de marge en haut sur mobile */
        width: 95%;
    }
}

/* test dégradé */
/* --- SECTION VALUES (CORRIGÉE POUR RESPONSIVE) --- */
.values { 
    background: #FFF5E6; 
    padding: 80px 20px; 
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes par défaut */
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.value-card {
    padding: 40px 25px 0 25px; /* Augmentation du padding pour mobile */
    color: white;
    min-height: 400px; /* Utilisation de min-height au lieu d'aspect-ratio */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.value-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.value-card h3 {
    font-size: 2.0rem;
    line-height: 1.3;
    margin-bottom: 15px;
}

.value-card .question {
    margin-bottom: 10px;
}

.value-link {
    border-top: 3px solid rgba(255, 255, 255, 0.6);
    width: 100%;
    padding: 20px 0;
    color: white !important;
    font-weight: 700;
    text-decoration: none;
    margin-top: auto; /* Pousse le lien en bas de la carte */
}

.yellow { background: #FFB800; }
.pink { background: #ff96ba; }
.cyan { background: #00C9B7; }
.orange-bright { background: #FF6B35; }

/*popup */
       
        .modal {
            display: none; 
            position: fixed; 
            z-index: 9999; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            background-color: rgba(0,0,0,0.7); 
            backdrop-filter: blur(4px);
			overflow-y: auto;
        }

        .modal-content {
            background-color: #FFB800; /* Jaune vif pour correspondre au carré */
            margin: 10% auto;
            padding: 40px;
            border: 2px solid #FFFFFF;
            width: 90%;
            max-width: 550px;
            border-radius: 20px;
            position: relative;
            text-align: left;
            color: #FFFFFF;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            color: #000;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
        }

        .modal-content h3 {
            font-size: 1.8rem;
            font-weight: 900;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .modal-content p {
            font-size: 1.1rem;
            line-height: 1.6;
            font-weight: 500;
        }
/*popup fin */



/* --- FOOTER --- */
.main-footer {
    background-color: white;
    padding: 60px 20px 30px;
    border-top: 1px solid #e0e0e0;
}

.footer-container {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto 40px;
}

.footer-column { color: #0052FF; font-size: 14px; }

.footer-bottom {
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #eee;
    padding-top: 20px;
    width: 100%;
}

/* --- MEDIA QUERIES (RESPONSIVE) --- */

@media (max-width: 768px) {
    .hero-content { grid-template-columns: 1fr; }
    .hero-text { padding: 40px 20px; }
    
    .tagline-columns { 
        flex-direction: column; 
        gap: 20px;
    }

    .tagline-logo { font-size: 60px; }
    .tagline-script { font-size: 40px; }
    .logo-overlap-container { height: 110px; }

    /* Fix pour la grille de valeurs sur mobile */
    .values-grid {
        grid-template-columns: 1fr; /* 1 colonne sur smartphone */
    }
    
    .value-card {
        min-height: auto; /* S'adapte au contenu */
        padding-bottom: 20px;
    }

    .footer-container { 
        flex-direction: column; 
        gap: 30px; 
        text-align: center; 
    }
}

/* --- SECTION EQUIPE (35 TUILES) --- */
/* --- SECTION MINIATURES --- */
.team-mini-section {
    padding: 50px 10px;
    background: #fff;
    text-align: center;
    overflow: hidden; /* Empêche tout débordement bizarre */
}
/* Espace entre la phrase d'intro et la grille des colistiers */
.team-mini-section p {
    margin-bottom: 30px; /* Ajustez la valeur (20px, 40px...) selon l'espace voulu */
}

.team-mini-grid {
    display: grid;
    /* 7 colonnes fixes sur PC */
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    max-width: 900px;
    margin: 0 auto;
}

/* --- MODIFICATION POUR LES TUILES PAR DÉFAUT --- */
.mini-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    /* On utilise le bleu du site pour faire ressortir le logo blanc */
    background: #e3e3e3; 
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Masquer le nom au survol pour les profils par défaut */
.mini-tile img[src*="default_profil"] + .mini-name {
    display: none !important;
}

/* Optionnel : changer le curseur pour indiquer que ce n'est pas cliquable */
.mini-tile:has(img[src*="default_profil"]) {
    cursor: default;
}

/* --- MODIFICATION POUR LES TUILES --- */
.mini-tile img {
    width: 100%;
    height: 100%;
    /* 'cover' permet à la photo de remplir toute la tuile sans déformation */
    object-fit: cover; 
    display: block;
    transition: transform 0.3s ease;
}

/* Règle spécifique pour les profils par défaut (logos) */
/* On cible les images qui contiennent "default_profil" dans leur nom de fichier */
.mini-tile img[src*="default_profil"] {
    object-fit: contain;
    padding: 20%; /* On garde un peu de marge pour le logo par défaut */
    background: #e3e3e3;
}

.mini-tile:hover img {
    transform: scale(1.1); /* Petit effet de zoom au survol */
}

.mini-name {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 82, 255, 0.85);
    color: white;
    font-size: 10px;
    padding: 3px 0;
    font-weight: bold;
    /* On cache le nom par défaut pour la propreté, il apparaît au survol */
    opacity: 0;
    transition: opacity 0.2s;
}

.mini-tile:hover .mini-name {
    opacity: 1;
}

/* RESPONSIVE : IMPORTANT POUR LE SCROLL MOBILE */
@media (max-width: 768px) {
    .team-mini-grid {
        grid-template-columns: repeat(5, 1fr); /* 5 colonnes sur tablette */
    }
}

@media (max-width: 480px) {
    .team-mini-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur mobile */
    }
}