:root {
    /* Couleurs principales */
    --primary: #1a2a44;
    --accent: #f28d77;
    --text: #333;
    --light: #f9f9f9;
    --white: #ffffff;

    /* Variables spécifiques au footer (pour faciliter la maintenance) */
    --footer-bg: var(--primary);
    --footer-text: #e0e0e0;
    --footer-heading: #ffffff;
    --footer-accent: var(--accent);
    --footer-border: rgba(255, 255, 255, 0.1);

    /* Animations */
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Reset de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--white);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header & Nav --- */
header {
    background: var(--white);
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}

#nav1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.logo-area img {
    transition: var(--transition);
    cursor: pointer;
    filter: invert(12%) sepia(31%) saturate(2206%) hue-rotate(189deg) brightness(91%) contrast(93%);
}

.logo-area img:hover {
    transform: translateY(-2px);
}

.brand h1 {
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 600;
    line-height: 1;
    margin-top: 5px;
}

.tagline {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#lang-toggle {
    background: var(--primary);
    color: white;
    border: none;
    padding: 15px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: var(--transition);
}

#lang-toggle:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

/* --- Gallery / Carousel Section --- */
.gallery {
    margin-bottom: 60px;
    padding: 0 20px;
    /* Espace sur les côtés pour ne pas coller aux bords de l'écran */
}

.grid {
    display: flex;
    /* Force l'affichage en ligne */
    gap: 20px;
    overflow-x: auto;
    /* Active le défilement horizontal */
    scroll-snap-type: x mandatory;
    /* Aimante les images lors du défilement */
    scroll-behavior: smooth;
    padding-bottom: 15px;
    /* Espace pour la barre de défilement */

    /* Centrage si peu d'images, sinon aligné à gauche pour défiler */
    justify-content: flex-start;
}

/* Centrer le contenu s'il n'y a pas assez d'images pour remplir la largeur */
@media (min-width: 1000px) {
    .grid {
        justify-content: center;
    }
}

.card {
    flex: 0 0 300px;
    /* Largeur fixe de chaque image pour le carrousel */
    scroll-snap-align: center;
    /* L'image s'aimante au centre de l'écran */
}

.card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    display: block;
}

.card img:hover {
    transform: scale(1.02);
}

/* --- Barre de défilement personnalisée (Stylisée) --- */
/* Pour Chrome, Safari et Edge */
.grid::-webkit-scrollbar {
    height: 6px;
    /* Épaisseur de la barre */
}

.grid::-webkit-scrollbar-track {
    background: #eee;
    /* Couleur du fond de la barre */
    border-radius: 10px;
}

.grid::-webkit-scrollbar-thumb {
    background: var(--primary);
    /* Ta couleur bleu marine */
    border-radius: 10px;
    border: 1px solid #eee;
}

.grid::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    /* Devient corail au survol */
}

/* Pour Firefox */
.grid {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #eee;
}

/* --- Sections Contenu --- */
.hero {
    padding: 80px 0 60px;
    text-align: center;
}

.main-title {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.sub-text {
    font-size: 1.15rem;
    max-width: 750px;
    margin: 0 auto 50px;
    color: #555;
    line-height: 1.7;
}

/* --- Sections Contenu --- */
.hero {
    padding: 80px 0 60px;
    text-align: center;
}

.main-title {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--primary);
    font-weight: 700;
}

.sub-text {
    font-size: 1.15rem;
    max-width: 750px;
    margin: 0 auto;
    color: #555;
    line-height: 1.7;
}

/* Avant-dernière section : Colonne gauche compacte */
.info-grid {
    display: grid;
    /* La gauche est limitée à une largeur fixe ou petite fraction, la droite prend le reste */
    grid-template-columns: 400px 1fr;
    gap: 40px;
    margin: 60px 0 100px;
    align-items: start;
}

.info-grid h3,
.last h3 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 4px solid var(--accent);
    padding-left: 18px;
}

.content {
    color: #444;
    font-size: 1rem;
    line-height: 1.8;
}

/* --- DERNIÈRE SECTION (Adaptée à ton HTML) --- */
.last {
    padding-bottom: 120px;
}

.last-flex {
    display: grid;
    /* On reprend exactement le même ratio que l'avant-dernière section */
    grid-template-columns: 400px 1fr;
    gap: 40px;
    align-items: center;
    /* Aligne l'image verticalement par rapport au texte */
}

/* Style de l'image (Garde la cohérence avec les cards) */
.featured-img {
    width: 100%;
    height: 300px;
    /* Légèrement plus haut pour l'équilibre visuel */
    border-radius: 12px;
    box-shadow: 0 15px 45px rgba(26, 42, 68, 0.1);
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.featured-img:hover {
    transform: scale(1.02);
}

/* Style commun des titres H3 */
.info-grid h3,
.last h3 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 4px solid var(--accent);
    padding-left: 18px;
}

.content {
    color: #444;
    font-size: 1rem;
    line-height: 1.8;
}

/* --- Responsive Adapté --- */
@media (max-width: 900px) {

    .info-grid,
    .last-flex {
        grid-template-columns: 1fr;
        /* Tout passe sur une seule colonne */
        gap: 30px;
    }

    .last-flex {
        text-align: left;
    }

    .featured-img {
        height: 250px;
        /* On réduit un peu la hauteur sur mobile */
        width: 100%;
    }

    .info-grid h3,
    .last h3 {
        font-size: 1.15rem;
    }
}

/* --- Footer (Version Finale Flexbox) --- */
#main-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 60px 0 20px 0;
    margin-top: 40px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;

    /* Passage de Grid à Flexbox */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /* Centre les colonnes selon leur largeur réelle avec espacement égal */
    align-items: flex-start;
    gap: 40px;
}

.footer-section {
    /* Largeur variable : s'adapte au contenu, ne force pas de largeur fixe */
    flex: 0 1 auto;
    /* S'assure que le bloc ne se réduit pas plus que son contenu */
    max-width: 300px;
    /* Sécurité pour ne pas avoir de lignes trop longues sur un seul bloc */
}

/* 2. On cible la PREMIÈRE section (Contact) */
.footer-section:first-child {
    flex: 0 0 230px;
    /* Ne grandit pas, ne rétrécit pas, fait 300px */
    width: 230px;
    /* Sécurité */
}

/* 3. On cible la DERNIÈRE section (Cooperation) */
.footer-section:last-child {
    flex: 0 0 230px;
    /* Exactement la même valeur que la première */
    width: 230px;
}

.footer-section h4 {
    color: var(--footer-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
    /* Garde le titre sur une ligne pour définir la largeur propre du bloc */
    white-space: nowrap;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--footer-accent);
}

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    transition: var(--transition);
    white-space: nowrap;
    /* Évite les retours à la ligne de 2 caractères */
}

.contact-list .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.contact-list svg {
    display: block;
}

.contact-list a {
    color: inherit;
    text-decoration: none;
}

.legal-details p {
    font-size: 0.85rem;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--footer-border);
    padding-bottom: 5px;

    white-space: normal;
    /* Autorise le retour à la ligne automatique */
    max-width: 100%;
    /* S'assure de ne pas dépasser la colonne */
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--footer-border);
    border-radius: 50%;
    color: var(--footer-text);
    text-decoration: none;
    transition: var(--transition);
}

.social-icon:hover {
    background: var(--accent);
    transform: translateY(-2px);
    color: var(--white);
}

.footer-bottom {
    text-align: center;
    padding: 25px 20px 0 20px;
    border-top: 1px solid var(--footer-border);
    font-size: 0.75rem;
    opacity: 0.5;
}

/* --- Responsive Global --- */
@media (max-width: 850px) {
    .footer-container {
        /* On empile les éléments en les centrant parfaitement */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-section {
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-list li {
        justify-content: center;
    }

    .social-links {
        justify-content: center;
    }
}