html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    color: #333;
    background-color: #ffffff;
}

.container {
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

li:hover {
    color: #e59d2c;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.4);
    transform: scale(1.05); 
}

/* Header */
header {
    background-color: #fff;
    padding: 10px 10vh;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    font-weight: bold;
    text-transform: uppercase;
}

.logo img {
    max-height: 50px; /* Ajustez la taille du logo */
}

/* --- HERO SECTION --- */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    /* La marge s'adapte : 28vh sur grand écran, mais diminue fluidement sur petit écran */
    margin: clamp(10vh, 15vw, 28vh) 0 0 0; 
}

.hero-container {
    width: 95%;
    display: flex;
    justify-content: center;
    position: relative;
}

/* Le rectangle beige */
.hero-card {
    background-color: #E7E3D8;
    width: 100%;
    /* La hauteur s'adapte à la largeur (vw) sur petit écran pour ne pas écraser l'avatar */
    height: clamp(220px, 45vw, 60vh); 
    border-radius: clamp(25px, 4vw, 50px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* L'image de l'avatar (Version Ultra-Responsive) */
.avatar {
    position: absolute;
    bottom: 0; 
    z-index: 10;
    height: auto;         
    /* L'avatar diminue proportionnellement à l'écran sans jamais devenir trop petit ni trop grand */
    max-height: clamp(280px, 60vw, 85vh);     
    max-width: clamp(150px, 50vw, 90%);       
    object-fit: contain;  
}

/* --- TEXTES FLOTTANTS (IMPOSSIBLE / POSSIBLE) --- */
.text-left {
    position: absolute;
    top: -22vh; /* Remonte fluidement */
    left: 0;
    height: 20vh; /* Taille fluide */
    max-width: 40%; 
    object-fit: contain; 
    object-position: left bottom; 
    z-index: 5; 
}

.text-right {
    position: absolute;
    top: -22vh;
    right: 0;
    height: 20vh;
    max-width: 40%;
    object-fit: contain;
    object-position: right bottom; 
    z-index: 5;
}

/* --- CONTENU INTERNE DU CADRE BEIGE --- */
.hero-card-internal-content {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
    height: 100%;
    padding: 0 clamp(10px, 3vw, 3vh); /* Padding fluide */
    position: relative;
    z-index: 5; 
    box-sizing: border-box; 
}

/* Bloc de gauche (Software Engineering) */
.hero-left-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.hero-left-block h1 {
    font-family: 'Oswald', 'Impact', sans-serif;
    /* La taille s'adapte parfaitement entre un téléphone (20px) et un PC (7vh) */
    font-size: clamp(18px, 4vw, 7vh); 
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    line-height: 1; 
    color: #000;
}

.hero-left-block p {
    font-size: clamp(12px, 2vw, 4vh); 
    font-weight: normal;
    margin: 1vh 0 0 0; 
    color: #000;
}

/* Bloc de droite (Nom + CV) */
.hero-right-block {
    height: 80%; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: flex-end; 
    text-align: right;
}

.hero-right-block p {
    font-size: clamp(14px, 2.5vw, 5vh); 
    font-weight: normal;
    margin: 0;
    color: #000;
}

/* Le Bouton CV */
.resume-button {
    background-color: #000; 
    color: #fff; 
    font-size: clamp(10px, 1.2vw, 2.5vh); 
    font-weight: bold;
    text-transform: uppercase; 
    padding: clamp(8px, 1vw, 1.5vh) clamp(15px, 2vw, 3vh); 
    border-radius: 30px; 
    text-decoration: none; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    z-index: 11; 
}

.resume-button:hover {
    background-color: #e59d2c;
    box-shadow: 0 5px 15px rgba(229, 157, 44, 0.4);
    transform: scale(1.05); 
}

/* ==========================================================================
   --- AJUSTEMENTS RESPONSIVES (RÉDUITS AU MINIMUM) ---
   ========================================================================== */

@media (max-width: 700px) {
    header nav ul {
        gap: 8px; /* Rapproche les liens du menu */
    }
    
    header nav a {
        font-size: 10px; /* Réduit le texte du menu sur mobile */
    }

    .hero-left-block {
        padding-bottom: 20px; /* Ton ajustement précédent pour éviter que le texte touche le bas */
    }
}

@media (max-width: 500px) {
    header {
        padding: 10px 5vh;
    }

    header nav a {
        font-size: 7px; /* Réduit le texte du menu sur mobile */
    }
}


/* ==========================================================================
   --- SKILLS SECTION ---
   ========================================================================== */

.skills-section {
    padding: 4vh 1vh; 
}

.skills-container {
    display: flex;
    justify-content: space-around; /* ou space-between */
    align-items: center;
    
    /* 1. LA SOLUTION EST ICI : on empêche le passage à la ligne */
    flex-wrap: nowrap; 
    
    gap: 1vw; /* Utilise 'vw' pour que l'écart rétrécisse aussi sur petit écran */
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 8px; /* J'ai un peu réduit l'espace pour aider sur mobile */
    transition: transform 0.3s ease; 
    cursor: default; 
    
    /* Permet à l'élément de rétrécir s'il n'y a plus de place */
    flex-shrink: 1; 
}

.skill-item:hover {
    transform: translateY(-5px); 
}

/* Les icônes des langages */
.skill-item img {
    /* 2. On rend la taille fluide selon la largeur de l'écran (vw) */
    /* La taille idéale est 4vw, mais pas moins de 15px et pas plus de 7vh */
    width: clamp(15px, 4vw, 7vh);
    
    filter: grayscale(100%) opacity(0.7); 
    transition: filter 0.3s ease;
}

.skill-item:hover img {
    filter: grayscale(0%) opacity(1);
}

/* 3. Il faut aussi ajouter le style pour le texte (span) pour qu'il rétrécisse */
.skill-item span {
    font-weight: bold;
    /* Le texte s'adapte aussi à la largeur de l'écran */
    font-size: clamp(8px, 1.2vw, 16px);
    color: #a0a0a0; 
}



/* ==========================================================================
   --- ABOUT ME SECTION ---
   ========================================================================== */

.about-section {
    padding: 15vh 0; /* Espace généreux en haut et en bas */
    background-color: #ffffff; /* Fond blanc pour contraster avec le beige précédent */
    text-align: center; /* Centre tout le contenu (titre, texte, bouton) */
}

.about-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments enfants */
}

/* Le titre "ABOUT ME" */
.section-title {
    /* Utilise une police condensée similaire à Impact ou Bebas Neue si tu en as une, 
       sinon on force l'épaisseur et la compression du texte */
    font-family: 'Oswald', 'Impact', sans-serif; 
    font-size: clamp(40px, 4vw, 50px); /* Taille fluide */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -1px; /* Rapproche légèrement les lettres */
    margin: 0 0 3vh 0;
    color: #000;
}

/* Le paragraphe */
.about-text {
    max-width: 1000px; /* Crucial : empêche le texte d'être trop large sur grand écran */
    font-size: clamp(14px, 1.5vw, 20px); /* Taille lisible et fluide */
    line-height: 1.6; /* Espace entre les lignes pour respirer */
    color: #333;
    margin: 0 0 5vh 0; /* Espace avant le bouton */
    padding: 0 20px; /* Marge de sécurité pour mobile */
}

/* Le bouton "WATCH NOW" */
.watch-button {
    background-color: #d69e46; /* La couleur dorée/orange de ton design */
    color: #fff;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: bold;
    text-transform: uppercase;
    padding: clamp(12px, 1.5vw, 15px) clamp(30px, 3vw, 40px);
    border-radius: 30px; /* Ovale */
    
    /* L'effet "Glow" (Ombre de la même couleur que le bouton, mais floutée) */
    box-shadow: 0 10px 25px rgba(214, 158, 70, 0.4); 
    transition: all 0.3s ease;
}

/* Animation au survol */
.watch-button:hover {
    background-color: #e4ded2; /* Légèrement plus foncé au survol */
    transform: translateY(-3px); /* Le bouton se soulève un peu */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); /* L'ombre s'agrandit */
    color: #000;
}



/* ==========================================================================
   --- PROFESSIONAL EXPERIENCE SECTION (CAROUSEL) ---
   ========================================================================== */

.experience-section {
    padding: 10vh 0;
    background-color: #ffffff; /* Fond de page */
    overflow: hidden; /* Empêche tout débordement indésirable sur l'axe Y */
}

/* --- LE RAIL DE DÉFILEMENT (TRACK) --- */
.experience-track {
    display: flex;
    gap: 3vw; /* Espace entre les cartes */
    padding: 2vh 0 4vh 0; /* Padding pour ne pas couper les ombres portées */
    
    /* La magie du scroll horizontal commence ici */
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Force l'alignement sur l'axe X */
    scroll-behavior: smooth;
    
    /* Cache la barre de défilement pour un look "App" très propre */
    scrollbar-width: none; /* Firefox */
}

.experience-section h2 {
    margin-left: 5vh;
}

.experience-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* --- LES CARTES D'EXPÉRIENCE --- */
.experience-card {
    flex: 0 0 80%; 
    background-color: #e4ded2; 
    border-radius: 30px; 
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1); 
    display: flex; 
    flex-direction: row; /* S'assure que par défaut c'est côte à côte */
    align-items: stretch; /* "stretch" permet à l'image et au texte de prendre la même hauteur */
    padding: 30px;
    margin-left: 5vh;
    scroll-snap-align: center;
    
    /* LA CORRECTION MAGIQUE EST ICI : */
    height: auto; /* Permet à la carte de grandir avec le texte */
    min-height: 62vh; /* Garde une belle hauteur par défaut sur grand écran */
}

/* --- L'IMAGE DANS LA CARTE --- */
.card-image-holder {
    flex: 0 0 clamp(150px, 25vw, 300px); /* Un peu plus large au minimum pour ne pas trop l'écraser */
    border-radius: clamp(15px, 2vw, 30px);
    overflow: hidden;
    margin-right: clamp(15px, 3vw, 40px);
}

.card-image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- LE TEXTE DANS LA CARTE --- */
.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.card-content h3 {
    font-size: clamp(20px, 2.5vw, 40px); /* J'ai réduit le max (100px était un peu énorme) */
    font-weight: bold;
    color: #000;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.1;
}

.card-content h4 {
    font-size: clamp(14px, 1.7vw, 25px); /* J'ai ajusté les valeurs pour plus de lisibilité */
    font-weight: bold;
    color: #ffffff; /* Ajusté pour qu'il se voit bien sur ton fond beige */
    margin: 5px 0 0 0;
    text-transform: uppercase;
}

.card-date {
    font-size: clamp(12px, 1.2vw, 16px);
    color: #e59d2c; 
    font-weight: bold;
    margin: 15px 0; /* Ajoute de l'espace en haut et en bas de la date */
}

.card-desc {
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.6;
    color: #444;
    margin: 0 0 10px 0; /* Ajoute un petit espace entre tes différents "-->" */
}

/* Un espaceur invisible pour que la dernière carte ne colle pas au bord droit */
.scroll-spacer {
    flex: 0 0 5vw; 
}


/* ==========================================================================
   --- RESPONSIVE CARTE EXPÉRIENCE ---
   ========================================================================== */

/* Quand l'écran devient trop étroit (tablette et mobile) */
@media (max-width: 900px) {
    .experience-card {
        flex-direction: column; /* L'IMAGE PASSE AU-DESSUS DU TEXTE */
        flex: 0 0 80%; /* La carte prend plus de place sur l'écran */
        padding: 20px;
        margin-left: 5vh; /* Ajuste la marge pour mobile */
    }

    .card-image-holder {
        width: 100%;
        max-width: 100%;
        height: 250px; /* On donne une hauteur fixe à l'image pour qu'elle soit belle en bandeau */
        margin-right: 0; /* On enlève la marge de droite */
        margin-bottom: 20px; /* On ajoute une marge en bas avant le texte */
        flex: none; /* Empêche l'image de s'écraser */
    }

    /* Ajustements mineurs du texte pour mobile */
    .card-content h3 {
        font-size: 22px;
    }
    
    .card-content h4 {
        font-size: 16px;
    }

    .card-desc {
        font-size: 14px;
    }
}





/* ==========================================================================
   --- PROJECTS SECTION (FAN EFFECT) ---
   ========================================================================== */

.projects-section {
    padding: 10vh 0;
    background-color: #ffffff; /* Fond blanc selon ton design */
}

/* Utilitaires de texte pour cette section */
.text-center {
    text-align: center;
}

.projects-description {
    max-width: 1000px;
    margin: 0 auto 8vh auto; /* Espace en bas avant l'éventail */
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.6;
    color: #333;
    padding: 0 20px;
}

.choose-text {
    margin-top: 8vh;
    font-size: clamp(16px, 1.5vw, 20px);
    color: #333;
    font-weight: 500;
}

/* --- LE CONTENEUR DE L'ÉVENTAIL --- */
.cards-fan-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* On donne une hauteur fixe fluide pour que les cartes absolues ne débordent pas */
    height: clamp(300px, 40vh, 500px); 
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}

/* --- LE STYLE DE BASE DES CARTES --- */
.project-card {
    position: absolute; 
    
    /* LA CORRECTION EST ICI : On abaisse les minimums à 90px et 130px */
    width: clamp(90px, 22vw, 280px);
    height: clamp(130px, 30vw, 350px);
    border-radius: clamp(10px, 2vw, 25px); /* Les bords s'arrondissent moins sur petit écran */
    
    background-color: #E7E3D8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    cursor: pointer;
    
    --x: 0px; 
    --y: 0px; 
    --r: 0deg; 
    
    transform: translate(var(--x), var(--y)) rotate(var(--r));
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.1), 
                box-shadow 0.6s ease, 
                z-index 0s; 
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- LES POSITIONS SPÉCIFIQUES DE L'ÉVENTAIL --- */
/* On utilise 'vw' même pour le Y pour que la courbure s'aplatisse sur petit écran */

.card-1 { --x: -28vw; --y: 6vw; --r: -15deg; z-index: 1; }
.card-2 { --x: -14vw; --y: 2vw; --r: -7.5deg; z-index: 2; }
.card-3 { --x: 0px;   --y: 0px; --r: 0deg;   z-index: 3; }
.card-4 { --x: 14vw;  --y: 2vw; --r: 7.5deg; z-index: 2; }
.card-5 { --x: 28vw;  --y: 6vw; --r: 15deg;  z-index: 1; }

/* --- L'EFFET AU SURVOL (HOVER) --- */
.project-card:hover {
    /* Le soulèvement (Y) utilise aussi des 'vw' pour ne pas sortir de l'écran sur mobile */
    transform: translate(var(--x), calc(var(--y) - 4vw - 10px)) rotate(0deg) scale(1.15);
    z-index: 10; 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); 
}


/* ==========================================================================
   --- RESPONSIVE POUR L'ÉVENTAIL ---
   ========================================================================== */




/* ==========================================================================
   --- PROJECT DETAILS SLIDER ---
   ========================================================================== */

.project-details-section {
    padding: 15vh 5vh;
    background-color: #f5f5f5; /* Fond légèrement gris pour séparer du blanc de l'éventail */
}

.relative-container {
    position: relative; /* Indispensable pour positionner les flèches */
    max-width: 1400px;
}

/* --- LA FENÊTRE ET LE RAIL --- */
.slider-window {
    width: 80%; /* Laisse de la place pour les flèches de chaque côté */
    margin: 0 auto;
    overflow: hidden; /* Cache les projets qui ne sont pas "actifs" */
    border-radius: 25px;
}

.slider-track {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Animation de glissement très douce */
}

/* --- UN PROJET (SLIDE) --- */
.project-slide {
    min-width: 100%; /* Chaque projet prend exactement 100% de la fenêtre */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4vw;
    padding: 2vh 2vw;
    box-sizing: border-box;
}

/* Partie Texte */
.project-info {
    flex: 1;
    text-align: left;
}

.project-info h2 {
    font-family: 'Oswald', 'Impact', sans-serif;
    font-size: clamp(30px, 4vw, 50px);
    text-transform: uppercase;
    margin: 0 0 10px 0;
    color: #000;
}

.tech-stack {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: bold;
    color: #666;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-desc {
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.6;
    color: #333;
}

/* Partie Image */
.project-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.project-image img {
    max-width: 100%;
    height: auto;
    max-height: 400px; /* Évite que l'image ne devienne trop géante */
    object-fit: contain; /* Garde les proportions de tes objets 3D/Rétro */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2)); /* Ajoute une ombre à l'image détourée */
    border-radius: 25px;
}

/* --- LES BOUTONS (FLÈCHES) --- */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(200, 200, 200, 0.5); /* Gris semi-transparent */
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Devient noir au survol */
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

/* --- RESPONSIVE POUR LE SLIDER --- */
@media (max-width: 850px) {
    .project-slide {
        flex-direction: column-reverse; /* Met l'image AU-DESSUS du texte sur mobile */
        text-align: center;
    }
    
    .project-info {
        text-align: center;
    }
    
    .project-image {
        justify-content: center;
        margin-bottom: 30px;
    }
    
    .slider-window {
        width: 100%; /* Prend toute la largeur sur mobile */
        padding: 0 15px;
    }
    
    /* On cache les flèches sur mobile ou on les rend plus petites */
    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}




/* ==========================================================================
   --- SKILLS & INTERESTS ACCORDION SECTION ---
   ========================================================================== */

.skills-accordion-section {
    padding: 10vh 0;
    background-color: #ffffff;
}

.section-subtitle {
    max-width: 1000px;
    margin: 0 auto 6vh auto;
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.6;
    color: #333;
    padding: 0 20px;
}

/* Le grand cadre beige */
.accordion-layout-frame {
    background-color: #e4ded2;
    border-radius: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligne l'avatar en bas du cadre */
    padding: 30px;
    position: relative;
    overflow: hidden; /* Empêche l'avatar de déborder s'il est trop grand */
    margin: 0 5vh;
}

/* --- LA GRILLE DES BOUTONS (GAUCHE) --- */
.accordion-grid {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes par défaut */
    gap: 40px 60px; /* Espace vertical et horizontal */
    z-index: 2; /* Reste au-dessus de l'avatar si superposition */
    align-self: center;
}

/* --- L'ÉLÉMENT ACCORDÉON --- */
.accordion-item {
    display: flex;
    flex-direction: column;
}

/* Le Bouton Pilule */
.accordion-header {
    background-color: #e59d2c;
    border: none;
    border-radius: 25px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    text-align: left;
}

.accordion-header:hover {
    background-color: #333; /* Légèrement plus foncé au survol */
}

/* Le Cercle Blanc et le symbole +/- */
.icon-circle {
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Le signe + par défaut */
.icon-circle::before {
    content: '+';
    color: #e59d2c;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

/* Quand la div parente (.accordion-item) a la classe .active, le + devient - */
.accordion-item.active .icon-circle::before {
    content: '-';
}

.accordion-title {
    color: #ffffff;
    font-weight: bold;
    font-size: clamp(14px, 1.2vw, 16px);
}

/* --- LE CONTENU (ANIMATION MAGIQUE) --- */
.accordion-content {
    /* Utilise CSS Grid pour animer la hauteur de 0 à la taille du texte de manière fluide */
    display: grid;
    grid-template-rows: 0fr; 
    transition: grid-template-rows 0.4s ease-out;
}

.accordion-inner {
    overflow: hidden; /* Cache le texte quand la row est à 0fr */
}

.accordion-inner p {
    margin: 0;
    padding: 15px 10px; /* Espace autour du texte déroulé */
    color: #333;
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.5;
}

/* L'état "Ouvert" */
.accordion-item.active .accordion-content {
    grid-template-rows: 1fr; /* S'ouvre pour laisser passer le contenu */
}

/* --- L'AVATAR (DROITE) --- */
.accordion-avatar-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: -60px; /* Astuce pour que l'avatar "repose" sur le bord bas du cadre */
    margin-right: -20px;
}

.accordion-avatar-container img {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .accordion-layout-frame {
        flex-direction: column;
        align-items: center;
        padding-bottom: 0; /* Enlève le padding du bas pour l'avatar */
    }
    
    .accordion-grid {
        width: 100%;
        margin-bottom: 30px;
    }

    .accordion-avatar-container {
        justify-content: center;
        margin-right: 0;
        margin-bottom: 0;
    }
    
    .accordion-avatar-container img {
        max-height: 350px;
    }
}

@media (max-width: 600px) {
    .accordion-grid {
        grid-template-columns: 1fr; /* Passe à 1 seule colonne sur téléphone ! */
    }
}



/* ==========================================================================
   --- LANGUAGES SECTION ---
   ========================================================================== */

.languages-section {
    padding: 10vh 2vh;
    background-color: #ffffff; /* Fond blanc */
}

/* Le conteneur relatif qui sert de repère */
.map-container {
    position: relative;
    max-width: 1000px; /* Limite la taille max de la carte sur grand écran */
    margin: 0 auto;    /* Centre la carte */
    width: 100%;
}

.base-map {
    width: 100%;
    height: auto;
    display: block; /* Évite un petit espace vide sous l'image */
}

/* --- LE STYLE DES ÉTIQUETTES (BOX) --- */
.lang-label {
    position: absolute;
    background-color: #ffffff;
    border-radius: 30px; /* Bords très arrondis, forme de pilule */
    padding: clamp(8px, 1vw, 15px) clamp(15px, 2vw, 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Ombre douce pour faire ressortir */
    cursor: pointer;
    
    /* Animation fluide pour le hover */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27), box-shadow 0.3s ease;
    z-index: 5;
}

.lang-title {
    font-weight: bold;
    font-size: clamp(12px, 1.2vw, 16px);
    color: #000;
}

.lang-level {
    font-size: clamp(10px, 0.9vw, 14px);
    color: #555;
    margin-top: 2px;
}

/* --- L'ANIMATION DE SURVOL (HOVER) --- */
.lang-label:hover {
    /* Important : On doit garder le translate(-50%, -50%) pour qu'elle grossisse depuis son centre */
    transform: translate(-50%, -50%) scale(1.15); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Passe par-dessus les autres si elles sont proches */
}

/* --- LE POSITIONNEMENT SUR LA CARTE --- */
/* J'ai estimé les pourcentages par rapport à ton image. 
   Tu devras peut-être ajuster légèrement ces chiffres (ex: 45% -> 47%) 
   en fonction de la découpe exacte de ton image png. */

.label-en {
    top: 54%; 
    left: 14%;
    /* Centre exactement le point 21%,45% au milieu de la boite */
    transform: translate(-50%, -50%); 
}

.label-fr {
    top: 30%;
    left: 58%;
    transform: translate(-50%, -50%);
}

.label-ar {
    top: 60%;
    left: 45%;
    transform: translate(-50%, -50%);
}

.label-zh {
    top: 59%;
    left: 85%;
    transform: translate(-50%, -50%);
}

/* --- RESPONSIVE POUR LA CARTE --- */
@media (max-width: 600px) {
    /* Sur téléphone, la carte devient très petite. 
       On ajuste l'ombre et on réduit l'effet de scale pour ne pas cacher toute l'image */
    .lang-label {
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
    .lang-label:hover {
        transform: translate(-50%, -50%) scale(1.05); 
    }
}




/* ==========================================================================
   --- FOOTER / CONTACT SECTION ---
   ========================================================================== */

.footer-section {
    padding: 0vh 0 0vh 0; /* Un peu moins d'espace en bas pour clore la page */
    background-color: #ffffff;
}

.footer-card {
    background-color: #E7E3D8; /* Le beige de ton design */
    border-radius: clamp(20px, 4vw, 40px); /* Bords arrondis */
    position: relative;
    display: flex;
    justify-content: flex-end; /* Pousse le contenu textuel/images vers la droite */
    align-items: center; /* Centre verticalement */
    padding: clamp(30px, 5vw, 60px);
    overflow: hidden; /* Empêche l'avatar de dépasser en bas */
    min-height: 280px;
    margin: 0 5vh;
}

/* --- L'AVATAR DU FOOTER --- */
.footer-avatar {
    position: absolute;
    bottom: 0;
    left: 5%; /* Décalé du bord gauche */
    height: clamp(250px, 45vh, 420px); /* Taille fluide de l'avatar */
    width: auto;
    z-index: 2;
    cursor: pointer;
}

/* --- LE CONTENU (DROITE) --- */
.footer-content {
    position: relative;
    z-index: 3;
    width: 65%; /* Prend 65% de l'espace à droite */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne le contenu à gauche par rapport à sa propre boîte */
    gap: 40px; /* Espace entre le slogan et les réseaux sociaux */
}

/* L'image du slogan */
.slogan-img {
    width: 100%;
    max-width: 800px; /* Évite que l'image ne devienne gigantesque sur grand écran */
    height: auto;
    object-fit: contain;
}

/* --- ZONE CONTACT & RÉSEAUX SOCIAUX --- */
.contact-title {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.8vw, 22px);
    margin: 0 0 15px 0;
    color: #000;
}

.social-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* L'animation des logos (Gris -> Couleur) */
.social-icon img {
    width: clamp(25px, 2.5vw, 35px); /* Taille fluide des logos */
    height: auto;
    
    /* Le filtre : gris et légèrement transparent par défaut */
    filter: grayscale(100%) opacity(0.5); 
    
    /* Transition fluide pour TOUTES les modifications */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27); 
}

/* Au survol du lien */
.social-icon:hover img {
    filter: grayscale(0%) opacity(1); /* Revient en couleurs complètes */
    transform: translateY(-5px) scale(1.15); /* Se soulève et grossit de 15% */
}

/* ==========================================================================
   --- RESPONSIVE POUR LE FOOTER ---
   ========================================================================== */

@media (max-width: 900px) {
    .footer-card {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 50px;
        padding-bottom: 300px; /* Énorme espace en bas pour laisser de la place à l'avatar */
    }

    .footer-content {
        width: 100%;
        align-items: center; /* Centre le slogan et les réseaux sur mobile */
        text-align: center;
    }

    .footer-avatar {
        left: 50%;
        transform: translateX(-50%); /* Centre l'avatar parfaitement sur l'axe X */
        height: 300px;
    }
    
    .contact-title {
        text-align: center;
    }
}




/* ==========================================================================
   --- SCROLL REVEAL ANIMATIONS ---
   ========================================================================== */

/* État de départ (caché et légèrement descendu) */
.reveal {
    opacity: 0;
    transform: translateY(60px); 
    /* La courbe cubic-bezier donne un effet de freinage très élégant à la fin du mouvement */
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* État d'arrivée (visible et à sa place d'origine) */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Optionnel : Des classes pour décaler l'animation si plusieurs éléments apparaissent en même temps */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }