/* ==========================================================================
   1. FONTS & VARIABLES
   ========================================================================== */

/* --- IMPORT POLICES --- */
@font-face {
    font-family: 'Aquavit';
    /* Assurez-vous que les fichiers sont dans le dossier "fonts" */
    src: url('fonts/Aquavit.otf') format('opentype'),
         url('fonts/Aquavit.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Articulat CF';
    src: url('fonts/ArticulatCF.otf') format('opentype'),
         url('fonts/ArticulatCF.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- VARIABLES GLOBALES --- */
:root {
    /* PALETTE */
    --main-blue: #5354e0;
    --main-yellow: #ffbc00;
    --white: #ffffff;
    --light-bg: #f8f8ff;
    
    --bg-color: var(--white);
    --text-color: var(--main-blue);
    
    /* TYPOGRAPHIE */
    --font-main: 'Articulat CF', 'Helvetica', 'Arial', sans-serif; 
    --font-display: 'Aquavit', 'Arial Black', sans-serif;
    
    /* LAYOUT */
    --spacing-container: 1200px;
    --border-radius-block: 20px;
}

/* ==========================================================================
   2. RESET & GLOBAL STYLES
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* --- UTILITIES --- */
.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   3. COMPONENTS (BUTTONS, ETC.)
   ========================================================================== */

/* Boutons Généraux */
.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--main-blue);
    color: var(--white);
    border: 2px solid var(--main-blue);
    border-radius: 50px;
    
    /* MODIFIÉ : Police Aquavit + Graisse 600 */
    font-family: var(--font-display); 
    font-weight: 600; 
    
    margin-top: 1rem;
    transition: all 0.3s;
    cursor: pointer;
}
.btn-primary:hover { 
    background-color: var(--white);
    color: var(--main-blue);
}

/* Bouton Outline (ex: CV) */
.btn-outline {
    background: transparent;
    border: 2px solid var(--main-blue);
    color: var(--main-blue);
    border-radius: 50px;
    padding: 10px 24px;
}
.btn-outline:hover { background: var(--main-blue); color: var(--white); }


/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */
.main-header {
    position: fixed; top: 0; left: 0; right: 0; height: 90px;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px);
    
    /* LAYOUT GRID : 3 Colonnes pour un centrage parfait */
    display: grid;
    /* 1fr (espace gauche) | auto (menu) | 1fr (espace droite) */
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    
    padding: 0 40px; z-index: 1000;
    border-bottom: 1px solid rgba(83, 84, 224, 0.1);
}

/* Colonne 1 : Logo calé à gauche */
.main-header > *:first-child {
    justify-self: start;
}

/* Colonne 2 : Menu centré */
.main-header > *:nth-child(2) {
    justify-self: center;
}

/* Colonne 3 : Bouton Settings calé à droite */
.main-header > *:last-child {
    justify-self: end;
    display: flex;
    justify-content: flex-end;
}

/* Éléments internes du Header */
.header-logo {
    height: 35px; 
    width: auto;
    display: block;
    transition: 0.3s;
}
.header-logo:hover { opacity: 0.8; transform: scale(1.02); }

.header-center ul { display: flex; gap: 40px; }
.header-center a {
    font-family: var(--font-display); 
    /* LAISSÉ EN BOLD (Impactant, ~700) comme demandé */
    font-weight: bold; 
    text-transform: uppercase;
    font-size: 1.1rem; color: var(--main-blue);
}
.header-center a:hover { opacity: 0.7; }

#settings-btn { 
    background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--main-blue); 
    margin-left: auto; /* Sécurité supplémentaire */
}


/* ==========================================================================
   5. SETTINGS MODAL & TOGGLES (RESPONSIVE CORRIGÉ)
   ========================================================================== */
dialog {
    border: 2px solid var(--main-blue);
    border-radius: var(--border-radius-block);
    box-shadow: 0 10px 25px rgba(83, 84, 224, 0.2);
    padding: 30px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    
    /* CORRECTION ICI : Largeur fluide pour le mobile */
    width: 90%; 
    max-width: 400px; 
    
    background: var(--white);
    color: var(--main-blue);
    margin: 0; /* Sécurité pour certains navigateurs */
}
dialog::backdrop { background: rgba(83, 84, 224, 0.2); backdrop-filter: blur(2px); }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.modal-header h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 0; }
#close-modal { color: var(--main-blue); background: none; border: none; cursor: pointer; font-size: 1.2rem; }

/* Liste des paramètres */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Conteneur d'une ligne (Texte - Toggle - Texte) */
.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--main-blue);
    gap: 10px; /* Petit espace de sécurité */
}

/* Style des labels de texte extérieurs */
.option-label {
    flex: 1; 
    text-align: center;
    font-size: 0.95rem;
    user-select: none;
    line-height: 1.2; /* Permet d'éviter de trop gros décalages si ça passait sur 2 lignes */
}
.setting-item .option-label:first-child { text-align: right; }
.setting-item .option-label:last-child { text-align: left; }


/* --- STYLE DES TOGGLES --- */
.toggle-switch {
    position: relative;
    width: 80px; 
    height: 34px; 
    flex-shrink: 0; /* Important : empêche le bouton de s'écraser sur mobile */
}

.toggle-switch input { display: none; } 

/* LE BOUTON (Conteneur) */
.toggle-btn {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 34px;
    transition: 0.3s;
    background-color: transparent;
    border: 2px solid var(--main-blue);
}

/* LE ROND (Curseur) */
.toggle-btn:before {
    position: absolute;
    content: "";
    height: 24px; width: 24px;
    left: 3px; bottom: 3px; 
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
    background-color: var(--main-blue);
}

/* --- ÉTAT ACTIVÉ --- */
input:checked + .toggle-btn {
    background-color: var(--main-blue); 
}

input:checked + .toggle-btn:before {
    /* Déplacement vers la droite : 80 - 24 - 3 - 3 = 50px */
    transform: translateX(46px); 
    background-color: var(--white);
}

/* --- AJUSTEMENTS MOBILE SPÉCIFIQUES --- */
@media (max-width: 500px) {
    dialog {
        padding: 20px; /* Moins de marge interne pour gagner de la place */
    }
    
    .modal-header h3 {
        font-size: 1.3rem;
    }
    
    .option-label {
        font-size: 0.8rem; /* Texte plus petit pour "Professionnel/Académique" */
    }
    
    /* On réduit légèrement la taille du bouton sur très petit écran */
    .toggle-switch {
        width: 70px;
        height: 30px;
    }
    .toggle-btn:before {
        width: 20px; height: 20px;
        left: 3px; bottom: 3px;
    }
    input:checked + .toggle-btn:before {
        /* Recalcul pour 70px : 70 - 20 - 3 - 3 = 44px */
        transform: translateX(40px); 
    }
}

/* ==========================================================================
   6. HOMEPAGE: HERO SECTION
   ========================================================================== */

/* --- HERO SECTION (Version 85vh pour inciter au scroll) --- */
.hero {
    min-height: 85vh; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 90px; /* Compensation Header */
    background-color: var(--white);
}

/* 1. On ajuste l'animation pour qu'elle corresponde à la taille du motif */
@keyframes drift { 
    from { background-position: 0 0; } 
    /* IMPORTANT : Cette valeur doit être identique au background-size ci-dessous */
    to { background-position: 120px 120px; } 
}


/* Dans la section du pattern (ex: section 6) */
.bg-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-image: url('images/pattern.svg'); 
    background-repeat: repeat; 
    background-size: 120px 120px; 
    opacity: 0.10; 
    
    /* MODIFICATION ICI : On le met tout au fond du conteneur */
    z-index: 0; 
    
    /* TRÈS IMPORTANT : Permet de cliquer sur les cartes "à travers" le motif */
    pointer-events: none; 
    
    animation: drift 20s linear infinite; 
}

/* Dans la section 8 (Projets) */
.projects-grid {
    position: relative; 
    /* MODIFICATION : On s'assure que les cartes sont bien au-dessus */
    z-index: 10; 
    
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 50px; 
    justify-content: center;
}

.hero-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.bg-logo-transparent {
    position: absolute;
    top: 55%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; 
    max-width: 700px;
    opacity: 1; 
    z-index: 1;    
    pointer-events: none;

    animation: levitation 6s ease-in-out infinite;
}

/* Animation de Lévitation qui respecte le centrage */
@keyframes levitation {
    0%, 100% {
        /* Position initiale : Centré parfaitement */
        transform: translate(-50%, -50%);
    }
    50% {
        /* Mi-parcours : On monte de 20px (tout en restant centré horizontalement) */
        transform: translate(-50%, calc(-50% - 20px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-logo-transparent {
        animation: none;
    }
}

.main-title {
    position: relative;
    z-index: 2;
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: 0.9;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--font-display);
    color: var(--main-blue);
    margin: 0;
    width: 100%;
    
    /* MODIFIÉ : Très impactant (>600) */
    font-weight: 900;
}


/* --- LIEN ACTIF (Page en cours) --- */
.header-center a.active {
    position: relative;
    color: var(--main-blue); /* S'assure qu'il reste de la bonne couleur */
}

/* Le soulignement (on utilise ::after pour pouvoir l'animer ou le styliser finement) */
.header-center a.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; /* Décalage sous le texte */
    width: 100%;
    height: 3px; /* Épaisseur du trait */
    background-color: var(--main-blue); /* Couleur du trait */
    border-radius: 2px;
}


/* ==========================================================================
   7. HOMEPAGE: SPLIT SECTION (Présentation & Skills)
   ========================================================================== */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px; 
    padding: 100px 20px;
    align-items: stretch; 
}

/* Bloc Gauche : BLEU PLEIN */
.col-left {
    background-color: var(--main-blue);
    color: var(--white);
    padding: 50px;
    border-radius: var(--border-radius-block);
    box-shadow: 0 20px 40px rgba(83, 84, 224, 0.2);
    display: flex; 
    flex-direction: column;
}

.col-left .section-label { color: rgba(255,255,255,0.9); }
.col-left p { font-size: 1.1rem; margin-bottom: 30px; font-weight: 300; }

.col-left .btn-primary {
    align-self: flex-end; 
    margin-top: auto; 
    background-color: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    padding: 10px 30px;
}
.col-left .btn-primary:hover {
    background-color: var(--white);
    color: var(--main-blue);
}

/* Bloc Droite : BLANC CONTOUR */
.col-right {
    background-color: var(--white);
    border: 2px solid var(--main-blue); 
    border-radius: var(--border-radius-block);
    padding: 50px;
    color: var(--main-blue);
    display: flex; 
    flex-direction: column;
    justify-content: center; 
}
.col-right .section-label { color: var(--main-blue); }

.section-label {
    display: block; font-family: var(--font-display); font-size: 1.8rem;
    margin-bottom: 25px; color: var(--main-blue);
    
    /* MODIFIÉ : Graisse 600 */
    font-weight: 600;
}

/* Tags Cloud */
.tags-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.tag {
    background-color: transparent;
    color: var(--main-blue);
    border: 1px solid var(--main-blue);
    padding: 8px 20px;
    border-radius: 50px;
    font-family: var(--font-main);
    font-weight: 600; /* Toujours bien en 600 */
    font-size: 0.9rem;
    transition: all 0.2s;
}
.tag:hover { background-color: var(--main-blue); color: var(--white); transform: translateY(-2px); }


/* ==========================================================================
   8. HOMEPAGE: PROJECTS SECTION (CORRIGÉ DESKTOP & MOBILE)
   ========================================================================== */
.featured-projects { 
    position: relative; 
    padding: 100px 0; 
    min-height: 80vh; 
    overflow: hidden; 
}

/* --- DÉFILEMENT INFINI (SEAMLESS LOOP) --- */

/* 1. Configuration de base du Rail */
.watermark-track {
    position: absolute;
    left: 0;
    display: flex;
    width: max-content;
    z-index: 0;
    pointer-events: none;
    
    /* On lance l'animation */
    animation: infiniteScroll 20s linear infinite;
}

/* 2. Positionnement DESKTOP (Par défaut) */
.track-1 {
    top: 50%; 
    /* Le centrage vertical est géré dans l'animation (voir plus bas) */
}

.track-2 {
    display: none; /* Caché sur PC */
}

/* 3. Style du texte (Jaune) */
.bg-text-watermark {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22vw;
    white-space: nowrap;
    
    color: var(--main-yellow); 
    opacity: 0.2; 
    
    padding-right: 0.5em; 
}

/* 4. Animation (CORRECTION ICI) */
/* On force le maintien du centrage vertical (-50%) pendant tout le mouvement */
@keyframes infiniteScroll {
    0% { 
        transform: translate(0, -50%); 
    }
    100% { 
        transform: translate(-50%, -50%); 
    }
}


/* --- GRILLE & CARTES --- */
.projects-grid {
    position: relative; 
    z-index: 2;
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 50px; 
    justify-content: center;
}

.project-card {
    position: relative; 
    background: transparent; 
    transition: transform 0.3s;
    cursor: pointer; 
    border-radius: var(--border-radius-block); 
    overflow: hidden;
}
.project-card:hover { transform: translateY(-10px); }

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

.card-info { 
    padding: 25px; 
    background-color: var(--main-blue); 
    color: var(--white);
    border-radius: 0 0 var(--border-radius-block) var(--border-radius-block);
}

.card-info h3 { 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    font-family: var(--font-display); 
    font-size: 1.5rem; 
    font-weight: 600;
}

.card-info p { 
    font-size: 0.95rem; 
    color: rgba(255,255,255, 0.8); 
    margin-bottom: 20px; 
}

.mini-tag {
    font-size: 0.75rem; 
    text-transform: uppercase; 
    background: rgba(255,255,255, 0.2);
    border: 1px solid rgba(255,255,255, 0.4); 
    color: var(--white);
    padding: 5px 12px; 
    border-radius: 20px; 
    margin-right: 5px;
}

.card-link { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; 
}


/* --- AJUSTEMENTS MOBILE (Dual Track) --- */
@media (max-width: 900px) {
    
    /* Ligne 1 : Derrière la première carte */
    .track-1 {
        top: 25%; 
    }

    /* Ligne 2 : Derrière la deuxième carte */
    .track-2 {
        display: flex;
        top: 75%;
        
        /* Inverse le sens pour le style */
        animation-direction: reverse; 
    }
    
    .bg-text-watermark {
        font-size: 30vw; 
        opacity: 0.2;
    }
}

/* ==========================================================================
   CORRECTIF BAS DE PAGE PROJET (SECTION "AUTRES PROJETS")
   ========================================================================== */

/* On cible spécifiquement la section du bas pour annuler la hauteur de 80vh */
.other-projects.featured-projects {
    min-height: auto !important; /* Laisse le contenu décider de la hauteur */
    padding-bottom: 15px; /* Un peu d'espace avant le footer pour que ce soit joli */
}

/* Optionnel : Ajustement du texte défilant pour cette version réduite */
.other-projects .bg-text-watermark {
    font-size: 15vw; /* On réduit un peu la taille du texte "PROJETS" ici */
}

/* ==========================================================================
   9. PAGE PROJETS: FILTRES & GRID (CORRIGÉ)
   ========================================================================== */
.filter-bar-container {
    width: 100%; 
    background: var(--white); 
    border-bottom: 1px solid rgba(83, 84, 224, 0.1);
    padding: 25px 40px; 
    position: relative; 
    z-index: 100; 
    margin-top: 90px;
}

.filter-header { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    gap: 15px; 
}

.filter-label { 
    font-size: 0.9rem; 
    text-transform: uppercase; 
    color: var(--main-blue); 
    letter-spacing: 1px; 
    font-weight: 600; 
}

#filter-toggle-btn {
    background: none; 
    border: 2px solid var(--main-blue); 
    border-radius: 50%;
    width: 40px; 
    height: 40px; 
    cursor: pointer; 
    font-size: 1rem; 
    transition: 0.3s; 
    color: var(--main-blue);
    display: flex; /* Centrage de l'icône */
    align-items: center;
    justify-content: center;
}
#filter-toggle-btn:hover { background: var(--main-blue); color: var(--white); }

/* --- LE PANNEAU COULISSANT --- */
.filter-panel { 
    max-height: 0; 
    opacity: 0; /* On cache visuellement */
    overflow: hidden; 
    transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.3s; 
    margin-top: 0;
}

.filter-panel.open { 
    /* CORRECTION ICI : On met 500px pour être large sur Desktop aussi */
    max-height: 500px; 
    opacity: 1; 
    margin-top: 30px; 
}

.filter-form {
    display: flex; 
    gap: 60px; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    padding-bottom: 20px;
}

.filter-group { display: flex; flex-direction: row; align-items: center; gap: 15px; }
.filter-group label { 
    font-size: 0.9rem; 
    font-weight: 600; 
    color: var(--main-blue); 
    white-space: nowrap; 
    font-family: var(--font-display); 
}

.filter-group select {
    padding: 10px 15px; 
    border: 2px solid #e0e0ff; 
    border-radius: 8px;
    min-width: 180px; 
    font-family: var(--font-main); 
    cursor: pointer;
    background-color: var(--white); 
    color: var(--main-blue); 
    font-weight: 600;
}
.filter-group select:hover { border-color: var(--main-blue); }


/* --- GRILLE & DÉCORATION --- */
.projects-page-content { padding: 60px 0 100px; position: relative; }

.projects-grid-large {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 100px 60px; 
    position: relative; 
    z-index: 2;
}

.projects-grid-large article:nth-child(4n - 3)::before {
    content: "PROJETS"; position: absolute; top: 50%; left: 50%; transform: translate(-30%, -50%);
    font-family: var(--font-display); font-size: 12rem; color: rgba(83, 84, 224, 0.05);
    z-index: -1; pointer-events: none; white-space: nowrap;
}
.projects-grid-large article:nth-child(4n - 1)::before {
    content: ""; position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%) rotate(10deg);
    width: 300px; height: 300px;
    background-image: url('images/logo/logo.svg');
    background-size: contain; background-repeat: no-repeat; opacity: 0.1; z-index: -1; pointer-events: none;
}


/* --- RESPONSIVE MOBILE (Regroupé pour la propreté) --- */
@media (max-width: 900px) {
    /* GRILLE */
    .projects-grid-large {
        grid-template-columns: 1fr !important; 
        gap: 60px; 
        padding: 0 20px; 
    }
    
    /* DÉCO */
    .projects-grid-large article:nth-child(4n - 3)::before,
    .projects-grid-large article:nth-child(4n - 1)::before {
        display: none;
    }

    /* FILTRES */
    .filter-panel.open {
        max-height: 800px; /* Encore plus grand pour le mobile empilé */
    }

    .filter-form {
        flex-direction: column; 
        align-items: stretch; 
        gap: 30px; 
    }

    .filter-group {
        flex-direction: column; 
        align-items: flex-start;
        gap: 10px;
    }

    .filter-group select {
        width: 100%;
        max-width: none; 
    }
}

/* MESSAGE AUCUN RÉSULTAT */
.no-results-message {
    grid-column: 1 / -1; /* Prend toute la largeur de la grille */
    text-align: center;
    padding: 60px 0;
    display: none; /* Caché par défaut via le JS, mais on le sécurise ici */
}

.no-results-message h2 {
    font-family: var(--font-display); /* Ta police Aquavit */
    color: var(--main-blue);
    font-size: 2.5rem;
    font-weight: 700; /* Épais */
    margin-bottom: 10px;
}

.no-results-message p {
    color: var(--main-blue);
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Support Mode Malvoyant (Automatique grâce aux variables, mais on force au cas où) */
body.mode-malvoyant .no-results-message h2,
body.mode-malvoyant .no-results-message p {
    color: #ffff00 !important;
}


/* BOUTON RESET */
#reset-filters-btn {
    background: none;
    border: 2px solid var(--main-blue);
    border-radius: 50%;
    width: 40px; height: 40px;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
    color: var(--main-blue);
    
    display: flex; align-items: center; justify-content: center;
    margin-right: 10px; /* Espace entre les deux boutons */
    
    /* Par défaut, on peut le cacher si tu veux qu'il n'apparaisse que quand on filtre, 
       mais le laisser visible tout le temps est plus simple */
}

#reset-filters-btn:hover {
    background: var(--main-blue);
    color: var(--white);
    transform: rotate(180deg); /* L'icône tourne au survol ! */
}


/* ==========================================================================
   10. PAGE DÉTAIL PROJET (VERSION FINALE - CTA CENTRÉ)
   ========================================================================== */

.project-hero {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    padding: 140px 40px 80px; 
    align-items: center; 
    position: relative;
}

/* --- SECTION ÉTAPES DE CRÉATION --- */
.project-steps { 
    position: relative; 
    padding: 100px 0; 
    overflow: hidden; 
    background-color: var(--white);
}

/* Logo en Fond */
.step-bg-logo {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 600px; 
    height: 600px;
    background-image: url('images/logo/background_logo.webp'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

.steps-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
    position: relative;
    z-index: 2;
}

.step-card {
    background: var(--white); 
    padding: 30px; 
    border-radius: var(--border-radius-block);
    border: 2px solid #e0e0ff; 
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}

.step-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--main-blue); 
}

/* --- CONTENEUR IMAGE ADAPTATIF --- */
.step-img { 
    width: 100%;
    aspect-ratio: 16 / 9; 
    overflow: hidden; 
    border-radius: 10px; 
    margin-bottom: 20px; 
    background: #f0f0f5;
}

/* SÉLECTEURS ADAPTATIFS (VOISINS) */
.layout-portrait .step-img,
main.layout-portrait ~ .project-steps .step-img {
    aspect-ratio: 5 / 7; 
}

.layout-mobile .step-img,
main.layout-mobile ~ .project-steps .step-img {
    aspect-ratio: 9 / 16; 
}

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

.step-card h3 { 
    font-size: 1.3rem; 
    margin-bottom: 10px; 
    font-family: var(--font-display); 
    color: var(--main-blue); 
    font-weight: 600; 
}

.step-card p { font-size: 0.95rem; color: #444; }

/* --- SECTION DÉTAILS TEXTUELS --- */
.project-details {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 80px; 
    padding: 80px 40px; 
    border-top: 2px solid #e0e0ff;
}

.detail-col-left h2 { 
    font-size: 1.8rem; 
    text-transform: uppercase; 
    margin-bottom: 20px; 
    color: var(--main-blue); 
    font-family: var(--font-display); 
    font-weight: 600;
}

.detail-col-right h3 { 
    font-size: 1.8rem; 
    margin-bottom: 20px; 
    line-height: 1.4; 
    color: var(--main-blue); 
    font-weight: 600;
    font-family: var(--font-display);
    text-transform: uppercase;
}

.academic-focus {
    background: var(--main-blue); 
    color: var(--white);
    padding: 60px; 
    margin: 40px auto; 
    width: 90%; 
    max-width: 1200px;
    border-radius: var(--border-radius-block);
}

.academic-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
}

.academic-col h4 {
    font-size: 1.4rem; 
    text-transform: uppercase; 
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.3); 
    padding-bottom: 10px; 
    display: inline-block;
    font-family: var(--font-display); 
    font-weight: 600;
}

.academic-col ul li { margin-bottom: 10px; list-style: disc; margin-left: 20px; }

/* --- BLOC CTA (CENTRÉ & RÉDUIT) --- */
.project-cta {
    display: flex; 
    /* MODIF : Centre les éléments verticalement et horizontalement */
    align-items: center;
    justify-content: center;
    gap: 60px; /* Espace fixe entre le texte et le bouton */

    background: var(--white); 
    border: 2px solid var(--main-blue); 
    
    /* MODIF : Le bloc s'adapte à son contenu */
    width: fit-content;
    max-width: 90%; /* Sécurité pour mobile */
    /* MODIF : Marges auto à gauche/droite pour centrer le bloc */
    margin: 60px auto 30px; 
    
    padding: 40px 80px; /* Padding ajusté pour l'équilibre */
    border-radius: var(--border-radius-block); 
    color: var(--main-blue);
    text-align: center;
}

.cta-content h3 { 
    font-size: 1.8rem; 
    margin-bottom: 5px; 
    font-family: var(--font-display); 
    font-weight: 600;
}

.project-cta .btn-primary { 
    margin-top: 0; 
    background-color: var(--main-blue); 
    color: var(--white); 
    border-color: var(--main-blue); 
    white-space: nowrap; /* Empêche le texte du bouton de se couper */
}

.project-cta .btn-primary:hover { 
    background-color: transparent; 
    color: var(--main-blue); 
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .project-hero, 
    .steps-grid, 
    .project-details, 
    .academic-grid, 
    .project-cta { 
        grid-template-columns: 1fr; 
        text-align: center; 
        gap: 40px; 
    }
    .project-cta { 
        flex-direction: column; 
        gap: 20px;
        padding: 40px; /* Moins de padding sur mobile */
        width: 90%; /* Prend plus de place sur petit écran */
    }
}


/* ==========================================================================
   11. PAGE À PROPOS
   ========================================================================== */
.about-intro {
    display: grid; grid-template-columns: 1fr 0.8fr 1fr; align-items: center; gap: 40px; padding: 120px 40px 80px;
}
.about-col-text h2 {
    font-family: var(--font-display); font-size: 2rem; margin-bottom: 20px; text-transform: uppercase; color: var(--main-blue); 
    /* MODIFIÉ : Graisse 600 */
    font-weight: 600;
}
.about-col-text p { margin-bottom: 15px; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.img-wrapper img {
    width: 100%; border-radius: 200px 200px 20px 20px; box-shadow: 0 20px 40px rgba(83, 84, 224, 0.15);
}

.timeline-section { padding: 100px 0; background-color: var(--light-bg); }
.timeline-flow { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; }
.timeline-step {
    flex: 1; background: var(--white); padding: 30px 20px; border-radius: var(--border-radius-block);
    border: 1px solid #e0e0ff; text-align: center; transition: transform 0.3s;
    position: relative; box-shadow: 0 4px 15px rgba(83, 84, 224, 0.05);
    display: flex; flex-direction: column; justify-content: center;
}
.timeline-step:hover { transform: translateY(-5px); border-color: var(--main-blue); }
.step-icon { font-size: 2.5rem; margin-bottom: 15px; color: var(--main-blue); }
.timeline-step h3 { 
    font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 5px; text-transform: uppercase; color: var(--main-blue); 
    /* MODIFIÉ : Graisse 600 */
    font-weight: 600;
}
.date-tag {
    display: inline-block; background: #e0e0ff; color: var(--main-blue);
    font-size: 0.8rem; padding: 4px 10px; border-radius: 4px; margin-bottom: 15px;
    font-weight: 700; align-self: center;
}
.timeline-connector { display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 2rem; flex-shrink: 0; padding: 0 10px; }

.dual-cta-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 100px 40px; }
.cta-block {
    background: var(--white); padding: 50px; border: 2px solid #e0e0ff;
    border-radius: var(--border-radius-block); text-align: center; transition: transform 0.3s;
}
.cta-block:hover { transform: translateY(-5px); border-color: var(--main-blue); }
.cta-block h3 { 
    font-size: 1.8rem; margin-bottom: 15px; font-family: var(--font-display); color: var(--main-blue); 
    /* MODIFIÉ : Graisse 600 */
    font-weight: 600;
}

@media (max-width: 900px) {
    .about-intro { grid-template-columns: 1fr; text-align: center; }
    .text-right, .text-left { text-align: center; }
    .about-intro .about-col-img { order: -1; margin-bottom: 30px; }
    .timeline-flow { flex-direction: column; align-items: center; gap: 10px; }
    .timeline-step { width: 100%; }
    .timeline-connector { transform: rotate(90deg); margin: 10px 0; }
    .dual-cta-section { grid-template-columns: 1fr; gap: 30px; }
}


/* ==========================================================================
   12. PAGE CONTACT (RESPONSIVE CORRIGÉ)
   ========================================================================== */
.contact-section {
    display: grid; 
    grid-template-columns: 1fr 1.2fr; 
    gap: 80px; 
    padding: 140px 40px 100px; 
    min-height: 80vh;
}

.contact-info { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    gap: 60px; 
}

.info-group h1, .info-group h2 {
    font-family: var(--font-display); 
    font-size: 2.5rem; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    line-height: 1.1; 
    color: var(--main-blue);
    font-weight: 600;
}
.info-group h2 { font-size: 1.8rem; }
.info-group p { font-size: 1.1rem; max-width: 450px; }

.contact-link-item {
    font-weight: 600; 
    font-size: 1.1rem; 
    display: flex; 
    align-items: center; 
    gap: 15px;
    padding: 10px 0; 
    border-bottom: 1px solid transparent; 
    width: fit-content; 
    transition: 0.3s; 
    color: var(--main-blue);
}
.contact-link-item:hover { opacity: 0.7; padding-left: 10px; }

.contact-form-wrapper {
    background: var(--white); 
    padding: 50px; 
    border-radius: var(--border-radius-block);
    border: 2px solid var(--main-blue); 
    box-shadow: 0 10px 40px rgba(83, 84, 224, 0.05);
}

.contact-form-wrapper h2 { 
    font-family: var(--font-display); 
    margin-bottom: 30px; 
    font-size: 1.8rem; 
    color: var(--main-blue); 
    font-weight: 600;
}

.main-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { 
    font-size: 0.9rem; 
    color: var(--main-blue); 
    font-weight: 600;
}

.form-group input, .form-group textarea {
    padding: 15px; 
    border: 2px solid #e0e0ff; 
    border-radius: 8px; 
    font-family: var(--font-main);
    font-size: 1rem; 
    background: #fafafa; 
    transition: 0.3s; 
    color: var(--main-blue);
    width: 100%; /* Sécurité */
}
.form-group input:focus, .form-group textarea:focus {
    background: var(--white); 
    border-color: var(--main-blue); 
    outline: none;
}

.full-width { 
    width: 100%; 
    margin-top: 10px; 
    cursor: pointer; 
    border: 2px solid var(--main-blue); 
    font-size: 1rem; 
}

/* --- RESPONSIVE MOBILE (< 900px) --- */
@media (max-width: 900px) {
    .contact-section { 
        grid-template-columns: 1fr; 
        /* CORRECTION : On réduit le padding latéral à 20px pour éviter le décalage */
        padding: 120px 20px 60px; 
        gap: 50px; 
        width: 100%; /* Assure que la grille ne dépasse pas */
    }
    
    .contact-info { 
        text-align: center; 
        align-items: center; 
        width: 100%;
    }
    
    .info-group p {
        margin: 0 auto; /* Centre le paragraphe */
    }

    .contact-link-item { 
        margin: 0 auto; 
    }
    
    /* CORRECTION : On réduit le padding interne du formulaire sur mobile */
    .contact-form-wrapper {
        padding: 30px 20px; 
        width: 100%;
    }

    .form-row { 
        grid-template-columns: 1fr; 
        gap: 15px;
    }
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.main-footer {
    background-color: var(--white);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid var(--main-blue);
    color: var(--main-blue);
    font-size: 1rem; 
}

.footer-left a, .footer-right a { font-weight: bold; font-family: var(--font-display); }

.footer-left, .footer-right {
    display: flex;
    gap: 40px; 
    align-items: center;
}

.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.footer-center img {
    height: 35px; 
    width: auto;
    margin-bottom: 5px;
}

.copyright { font-size: 0.8rem; opacity: 0.7; }

/* Ajustement Mobile Footer */
@media (max-width: 900px) {
    .main-footer {
        flex-direction: column;
        gap: 25px; 
        padding: 40px 20px;
        text-align: center;
    }
    
    .footer-left, .footer-right {
        gap: 20px;
        flex-wrap: wrap; 
        justify-content: center;
    }
}


/* SÉCURITÉ AFFICHAGE LOGO FOOTER */
.footer-logo {
    height: 35px;
    width: auto;
    display: block;
    /* Si le logo est blanc sur blanc, on le verra quand même (utile pour tester) */
    /* background-color: rgba(0,0,0,0.1); */ 
}

.footer-logo-link {
    display: inline-block;
    margin-bottom: 5px;
}


/* ==========================================================================
   14. ANIMATIONS & MODE SWITCHING
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Modes Pro / Académique */
.only-pro, .only-academic { display: none; }
body.mode-pro .only-pro { display: block; animation: fadeIn 0.5s; }
body.mode-academic .only-academic { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* ==========================================================================
   15. REGLAGES RESPONSIVE (PROGRESSIF & MOBILE)
   ========================================================================== */

/* --- ÉTAPE 1 : Laptops Standards (1350px) --- */
@media (max-width: 1350px) {
    .header-logo { height: 30px; }
    .header-center ul { gap: 25px; }
    .header-center a { font-size: 1rem; }
}

/* --- ÉTAPE 2 : Tablettes Paysage / Petits Laptops (1100px) --- */
@media (max-width: 1100px) {
    .header-logo { height: 26px; }
    .header-center ul { gap: 15px; }
    .header-center a { font-size: 0.9rem; }
    .main-header { padding: 0 25px; }
}

/* --- ÉTAPE 3 : TABLETTES & PETITS ÉCRANS (900px) --- */
/* C'est ici qu'on gère ton écran actuel (889px) */
@media (max-width: 900px) {

    /* HEADER : On garde une taille confortable ici ! */
    .main-header {
        padding: 0 20px; 
        height: 80px; /* Hauteur confortable */
    }
    
    .header-logo { height: 28px; }
    
    .header-center ul { 
        gap: 15px; /* Espace correct */
    }
    .header-center a {
        /* CORRECTION : On remet une taille lisible */
        font-size: 0.9rem; 
        font-weight: 700;
    }
    
    #settings-btn { font-size: 1.2rem; }


    /* LAYOUT GÉNÉRAL : On passe en mode empilé (1 colonne) */
    .hero {
        min-height: 70vh;
        padding-top: 80px; 
    }
    .main-title { font-size: 13vw; }

    .split-section {
        grid-template-columns: 1fr !important;
        gap: 40px;
        padding: 50px 30px;
    }

    .col-left, .col-right {
        padding: 30px;
        text-align: center;
    }
    
    .col-left .btn-primary {
        align-self: center;
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }

    .tags-cloud { justify-content: center; }

    .projects-grid {
        grid-template-columns: 1fr !important;
        padding: 0 40px; /* Plus d'espace sur les côtés en tablette */
        gap: 50px;
    }

    .card-image img { height: 300px; } /* Belle image en tablette */
    
    .main-footer {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
        text-align: center;
    }
    .footer-left {
        flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px;
    }
    .footer-center, .footer-right { width: 100%; justify-content: center; }
}

/* --- ÉTAPE 4 : VRAI MOBILE (Téléphones < 600px) --- */
/* C'est seulement ici qu'on réduit tout pour faire rentrer sur iPhone/Android */
@media (max-width: 600px) {
    
    .main-header {
        padding: 0 10px;
        height: 70px;
    }
    
    .header-logo { height: 24px; }
    
    .header-center ul { gap: 8px; } /* On serre fort */
    
    .header-center a {
        font-size: 0.75rem; /* C'est petit, mais nécessaire sur téléphone */
    }
    
    #settings-btn { font-size: 1rem; }

    /* Ajustements layout téléphone */
    .hero { min-height: 80vh; }
    
    .split-section { padding: 40px 15px; }
    
    .projects-grid { padding: 0 15px; } /* Moins de marge sur petit écran */
    
    .card-image img { height: 220px; }
}


/* ==========================================================================
   16. MODE ACCESSIBILITÉ (MALVOYANT) - FINAL
   ========================================================================== */
body.mode-malvoyant {
    /* BASES : Fond Noir / Texte Jaune */
    --bg-color: #111111 !important;    /* Gris très foncé presque noir */
    --text-color: #ffff00 !important;  /* Jaune pur */
    --main-blue: #ffff00 !important;
    --main-yellow: #ffff00 !important;
    --white: #000000 !important;
    --light-bg: #000000 !important;
    background-color: #111111 !important; /* Sécurité */
}

/* --- 1. HEADER (FOND NOIR / TEXTE JAUNE) --- */
body.mode-malvoyant .main-header {
    background: #000000 !important; /* Plus de transparence, fond noir total */
    border-bottom: 2px solid #ffff00 !important; /* Ligne jaune de séparation */
    backdrop-filter: none !important;
}

body.mode-malvoyant .header-center a,
body.mode-malvoyant #settings-btn,
body.mode-malvoyant .logo-link {
    color: #ffff00 !important;
}

/* --- 2. TEXTES GÉNÉRAUX (SUR FOND NOIR -> JAUNE) --- */
body.mode-malvoyant h1, 
body.mode-malvoyant h2, 
body.mode-malvoyant h3, 
body.mode-malvoyant p, 
body.mode-malvoyant span, 
body.mode-malvoyant li, 
body.mode-malvoyant a,
body.mode-malvoyant .section-label {
    color: #ffff00 !important;
}

/* --- 3. BLOCS JAUNES (CARTES, BOUTONS, TAGS -> TEXTE NOIR) --- */
/* On cible tous les éléments qui doivent être des "blocs" de couleur */
body.mode-malvoyant .card-info,
body.mode-malvoyant .btn-primary,
body.mode-malvoyant .tag,
body.mode-malvoyant .mini-tag,
body.mode-malvoyant .toggle-label,
body.mode-malvoyant .col-left { 
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
    color: #000000 !important; /* Le texte DEVIENT NOIR */
}

/* On force la couleur NOIRE pour tout ce qui est DANS ces blocs jaunes */
body.mode-malvoyant .card-info *,
body.mode-malvoyant .col-left *,
body.mode-malvoyant .btn-primary,
body.mode-malvoyant .tag,
body.mode-malvoyant .mini-tag {
    color: #000000 !important;
    font-weight: 700 !important; /* On graisse pour la lisibilité sur jaune */
}

/* Exception pour le bouton contact dans la colonne gauche (contour noir) */
body.mode-malvoyant .col-left .btn-primary {
    border: 2px solid #000000 !important;
}

/* --- 4. MODALE PARAMÈTRES --- */
body.mode-malvoyant dialog {
    background-color: #000000 !important;
    border: 2px solid #ffff00 !important;
}
body.mode-malvoyant .modal-header h3,
body.mode-malvoyant .option-label,
body.mode-malvoyant #close-modal {
    color: #ffff00 !important;
}
/* Le switch activé (rond) */
body.mode-malvoyant input:checked + .toggle-btn {
    background-color: #ffff00 !important;
}
body.mode-malvoyant input:checked + .toggle-btn:before {
    background-color: #000000 !important;
}

/* --- 5. DIVERS & IMAGES --- */
/* Images en noir et blanc pour ne pas perturber */
body.mode-malvoyant img {
    filter: grayscale(100%) contrast(120%);
}
/* Le Watermark PROJETS en contour uniquement */
body.mode-malvoyant .bg-text-watermark {
    color: transparent !important;
    -webkit-text-stroke: 1px #ffff00 !important;
    opacity: 0.3 !important;
}
body.mode-malvoyant .bg-pattern {
    display: none !important; /* On retire le bruit visuel pour les malvoyants */
}

/* --- SUPPORT MODE MALVOYANT PAGE ACTUELLE SOULIGNEE --- */
body.mode-malvoyant .header-center a.active {
    color: #ffff00 !important;
}
body.mode-malvoyant .header-center a.active::after {
    background-color: #ffff00 !important; /* Trait jaune en mode accessibilité */
}

/* ==========================================================================
   16. MODE ACCESSIBILITÉ - CURSEUR ADAPTÉ
   ========================================================================== */

body.mode-malvoyant {
    /* On remplace le curseur personnalisé par une version XXL et contrastée */
    /* N'oublie pas de régler le point chaud (hotspot) si besoin, ici 0 0 */
    cursor: url('images/curseur/curseur_survol_malvoyant.png') 0 0, auto !important;
}

/* On s'assure que les éléments cliquables ont aussi un curseur très visible */
body.mode-malvoyant a, 
body.mode-malvoyant button, 
body.mode-malvoyant .project-card, 
body.mode-malvoyant .carousel-btn {
    /* Soit une image de main XXL, soit on force le 'pointer' système 
       qui s'adapte parfois aux réglages d'OS de l'utilisateur */
    cursor: url('images/curseur/curseur_survol_malvoyant.png') 20 0, pointer !important;
}


/* ==========================================================================
   17. PAGES TRACES (LAYOUT & CARROUSEL - VERSION FINALE)
   ========================================================================== */

/* --- LAYOUT GLOBAL --- */
.trace-hero {
    display: grid;
    gap: 60px; 
    padding: 140px 40px 80px; 
    align-items: start; 
    min-height: 85vh;
    max-width: 1600px; 
    margin: 0 auto;
}

/* VARIATIONS DE GRILLE */
.trace-hero.layout-landscape { grid-template-columns: 1fr 1.5fr; }
.trace-hero.layout-portrait  { grid-template-columns: 1fr 1fr; }
.trace-hero.layout-mobile    { grid-template-columns: 1.2fr 0.8fr; }

/* --- COLONNE TEXTE --- */
.trace-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative; 
    height: 100%;
}

.btn-back {
    display: inline-flex; 
    align-items: center; 
    gap: 10px;
    font-family: var(--font-display); 
    font-weight: 600;
    color: var(--main-blue); 
    font-size: 0.9rem; 
    transition: 0.3s;
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 2rem; 
    width: fit-content;
}

.btn-back:hover { 
    opacity: 0.7; 
    transform: translateX(-5px); 
}

.trace-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.5vw, 4rem); 
    line-height: 1.1;
    color: var(--main-blue);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.trace-meta {
    display: flex; 
    gap: 15px; 
    align-items: center;
    font-family: var(--font-main); 
    font-weight: 600;
    color: rgba(83, 84, 224, 0.6); 
    margin-bottom: 2.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-wrap: wrap;
}

.trace-description {
    font-size: 1.05rem; 
    line-height: 1.8;
    color: var(--main-blue);
    margin-bottom: 3rem;
    max-width: 600px;
}
.trace-description p { margin-bottom: 1.2rem; }

.trace-tags { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
}

/* --- VISUEL & CARROUSEL --- */
.trace-visual {
    position: relative;
    width: 100%;
    display: flex;
}

/* 1. LANDSCAPE : Aligné au titre (on descend pour compenser le bouton back) */
.layout-landscape .trace-visual {
    align-items: flex-start; 
    margin-top: 5rem; /* Aligne le haut du carrousel avec le début du texte */
}

/* 2. MOBILE : Centré en largeur sur l'espace blanc */
.layout-mobile .trace-visual {
    align-self: center; 
    justify-content: flex-start; /* Centre le carrousel horizontalement */
}

/* 3. PORTRAIT : On garde le centrage vertical standard */
.layout-portrait .trace-visual {
    align-self: center; 
    align-items: center;
}

.carousel-container {
    position: relative;
    width: 100%;
    background: #f0f0f5; 
    border-radius: var(--border-radius-block);
    box-shadow: 0 20px 50px rgba(83, 84, 224, 0.15);
    overflow: hidden;
}

/* GESTION DES RATIOS */
.layout-landscape .carousel-container { aspect-ratio: 16 / 9; }
.layout-portrait .carousel-container  { aspect-ratio: 5 / 7; max-height: 80vh; width: auto; }
.layout-mobile .carousel-container    { aspect-ratio: 9 / 16; max-height: 80vh; width: auto; }

.carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); width: 100%; height: 100%; }
.carousel-slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.carousel-slide img, .carousel-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* BOUTONS NAVIGATION */
.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95); border: none;
    width: 45px; height: 45px; border-radius: 50%;
    color: var(--main-blue); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: 0.3s; z-index: 10;
}
.carousel-btn:hover { background: var(--main-blue); color: var(--white); transform: translateY(-50%) scale(1.1); }
.btn-prev { left: 15px; }
.btn-next { right: 15px; }

/* INDICATEURS (DOTS) */
.carousel-dots {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 10; padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2); border-radius: 20px; backdrop-filter: blur(4px);
}
.dot { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: 0.3s; }
.dot.active { background: var(--white); transform: scale(1.3); }

/* --- RESPONSIVE MOBILE (< 900px) --- */
@media (max-width: 900px) {
    .trace-hero.layout-landscape,
    .trace-hero.layout-portrait,
    .trace-hero.layout-mobile {
        display: flex; 
        flex-direction: column;
        padding: 110px 20px 60px;
        gap: 20px;
    }

    .trace-content { 
        display: contents; 
    } 

    /* 1. LE BOUTON : En haut */
    .btn-back { 
        order: 1; 
        margin: 0 auto 10px !important;
        display: flex !important;
        justify-content: center;
    }

    /* 2. LE CARROUSEL : Au milieu */
    .trace-visual { 
        order: 2; 
        width: 100%;
        max-width: 450px; 
        margin: 0 auto 20px;
        justify-content: center;
        margin-top: 0; 
    } 

    /* 3. LE CONTENU TEXTUEL : En bas */
    .trace-title, 
    .trace-meta, 
    .trace-description, 
    .trace-tags { 
        order: 3; 
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* CORRECTION ICI : On force les métadonnées à rester à l'horizontale */
    .trace-meta { 
        flex-direction: row !important; /* Force l'alignement horizontal */
        justify-content: center !important; 
        flex-wrap: wrap; /* Permet de passer à la ligne si l'écran est trop petit */
        gap: 10px;
        margin-bottom: 20px;
    }

    /* Optionnel : On fait de même pour les tags si tu les veux en ligne */
    .trace-tags {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px;
    }

    .trace-title { font-size: 2.2rem; margin-bottom: 15px; }
    .trace-description { margin-bottom: 25px; }

    .layout-portrait .carousel-container,
    .layout-mobile .carousel-container {
        max-height: 500px; 
        width: 100%; 
    }
}

/* =========================================
   CORRECTIF ACCESSIBILITÉ - CARROUSEL
   ========================================= */

/* Cible les boutons du carrousel UNIQUEMENT lorsque le corps de page
   a une classe indiquant le mode malvoyant/contraste élevé.
   Adaptez '.mode-malvoyant' au nom réel de votre classe si différent.
*/
body.mode-malvoyant .carousel-btn,
body.high-contrast .carousel-btn {
    /* Force un fond blanc opaque pour un contraste maximal */
    background-color: var(--white, #ffffff) !important;
    
    /* Force la couleur de l'icône (utilisez votre couleur principale foncée) */
    color: var(--main-blue, #000000) !important;
    
    /* S'assure que le bouton est totalement opaque */
    opacity: 1 !important;
    
    /* Ajoute une ombre pour bien délimiter le bouton du fond */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* Optionnel : Gérer l'état de survol pour qu'il reste cohérent */
body.mode-malvoyant .carousel-btn:hover,
body.high-contrast .carousel-btn:hover {
    /* On garde les mêmes couleurs, on applique juste un léger agrandissement si désiré */
    transform: translateY(-50%) scale(1.1) !important;
    background-color: var(--white, #ffffff) !important;
    color: var(--main-blue, #000000) !important;
}

/* =========================================
   CORRECTIF ACCESSIBILITÉ - TEXTE ACADÉMIQUE
   ========================================= */

/* Cible les paragraphes (<p>) et les éléments de liste (<li>) à l'intérieur 
   de la section académique (.academic-focus) lorsque le mode contrasté est actif sur le body.
   
   On force leur couleur en NOIR pour qu'ils soient lisibles sur le fond jaune.
   Remplacez '.mode-malvoyant' ou '.high-contrast' par la classe réelle utilisée sur votre site.
*/
body.mode-malvoyant .academic-focus p,
body.mode-malvoyant .academic-focus li,
body.high-contrast .academic-focus p,
body.high-contrast .academic-focus li {
    color: #000000 !important; /* Force le texte en noir absolu */
}


/* ==========================================================================
   XXX. PERSONNALISATION DU CURSEUR (FUN ZONE)
   ========================================================================== */

/* 1. Curseur par défaut pour tout le site */
body {
    /* Syntaxe : url('chemin/vers/image.png') [position X] [position Y], fallback;
       - Le chemin doit être correct par rapport à ton fichier CSS.
       - 'auto' est le curseur par défaut du navigateur si l'image échoue.
    */
    cursor: url('images/curseur/cursuer_survol_blanc.png'), auto;
}

/* 2. (Optionnel) Curseur différent pour les éléments cliquables */
/* C'est une bonne pratique UX de changer le curseur au survol des liens 
   pour indiquer qu'on peut cliquer. Tu peux utiliser une autre image fun 
   ou simplement remettre le curseur 'pointer' (la petite main) classique.
*/
a, 
button, 
.btn-primary, 
.project-card, 
.carousel-btn,
.btn-back {
    /* Option A : Une image "main qui clique" personnalisée */
    cursor: url('images/curseur/pointer_bleu.png'), pointer;
    
    /* Option B : La petite main classique (plus sûr pour l'UX) 
    cursor: pointer;*/
}