/* --- TOUT EN HAUT DE style.css --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

/* --- VARIABLES DE COULEUR ET POLICES --- */
:root {
    --couleur-fond: #0d1b2a;
    --couleur-texte: #f0f0f0;
    --couleur-accent: #00aaff;
    --couleur-carte: #1c2b3a;
    --font-principale: 'Poppins', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-principale);
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    overflow-x: hidden; /* Empêche le scroll horizontal */
    
    /* --- AJOUTS POUR LE STICKY FOOTER --- */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.no-scroll {
    overflow: hidden;
}

/* --- MODIFICATION RESPONSIVE --- */
/* Utilisation de clamp() pour l'espacement vertical (60px à 100px)
    Ajout d'un max-width pour la lisibilité sur les très grands écrans
*/
section {
    padding: clamp(60px, 8vw, 100px) 10%;
    max-width: 1600px;
    margin: 0 auto;
}

/* --- STYLE DE LA SECTION ACCUEIL --- */
#accueil {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    /* On s'assure qu'il prend tout l'écran */
    min-height: 100vh; 
    padding: 80px 10%;
}

.accueil-contenu h1 {
    /* --- MODIFICATION RESPONSIVE --- */
    /* Taille fluide : min 2.5rem, idéal 6vw, max 4rem */
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--couleur-accent);
}

.accueil-contenu h2 {
    /* --- MODIFICATION RESPONSIVE --- */
    /* Taille fluide : min 1.1rem, idéal 2.5vw, max 1.5rem */
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 400;
    margin-bottom: 20px;
}

.accueil-contenu p {
    /* --- MODIFICATION RESPONSIVE --- */
    /* Taille fluide : min 1rem, idéal 2vw, max 1.1rem */
    font-size: clamp(1rem, 2vw, 1.1rem);
    font-weight: 300;
    max-width: 700px;
}

/* Style de la flèche pour scroller */
.scroll-down-arrow {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 40px;
    border: 2px solid var(--couleur-texte);
    border-radius: 50px;
}

.scroll-down-arrow span {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 2px;
    height: 10px;
    background-color: var(--couleur-texte);
    transform: translateX(-50%);
    animation: scroll-pulse 2s infinite;
}

/* Animation de pulsation pour la flèche */
@keyframes scroll-pulse {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    50% {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Style pour l'animation d'apparition de l'accueil */
.accueil-contenu h1,
.accueil-contenu h2,
.accueil-contenu p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.accueil-contenu .visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- STYLE DE LA SECTION À PROPOS --- */

.a-propos-contenu {
    display: flex;
    align-items: center; /* Aligne verticalement la photo et le texte */
    gap: 50px; /* Espace entre la photo et le texte */
}

.colonne-gauche {
    flex-basis: 35%; /* La colonne de la photo prend 35% de la largeur */
    min-width: 280px; /* Empêche la photo de devenir trop petite */
}

.colonne-droite {
    flex-basis: 65%; /* La colonne du texte prend 65% */
}

.colonne-gauche img {
    width: 100%; /* L'image prend toute la largeur de sa colonne */
    border-radius: 15px; /* Bords arrondis pour un style plus doux */
    height: auto; /* --- AJOUT RESPONSIVE --- */
}

.colonne-droite h2 {
    /* --- MODIFICATION RESPONSIVE --- */
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin-bottom: 20px;
    color: var(--couleur-accent);
}

.colonne-droite p {
    font-size: 1rem;
    line-height: 1.6; /* Améliore la lisibilité du paragraphe */
    margin-bottom: 15px;
}

.highlight {
    color: var(--couleur-accent);
    font-weight: 700;
}

/* Préparation de l'animation d'apparition au scroll */
.colonne-gauche, .colonne-droite {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.colonne-gauche {
    transform: translateX(-50px); /* Décalée à gauche */
}

.colonne-droite {
    transform: translateX(50px); /* Décalée à droite */
}

/* État final quand la section devient visible */
#a-propos.visible .colonne-gauche,
#a-propos.visible .colonne-droite {
    opacity: 1;
    transform: translateX(0);
}

/* --- STYLE DE LA SECTION COMPÉTENCES --- */

#competences h2 {
    text-align: center;
    /* --- MODIFICATION RESPONSIVE --- */
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin-bottom: 50px;
    color: var(--couleur-accent);
}

.competences-grille {
    display: grid;
    /* Crée des colonnes qui font entre 250px et 1fr (fraction de l'espace) */
    /* C'est déjà parfaitement responsive ! Excellent. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.carte-competence {
    background-color: var(--couleur-carte);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid transparent; /* Bordure transparente par défaut */
    transition: transform 0.2s ease, border-color 0.2s ease;
    
    /* Préparation pour l'animation JS */
    opacity: 0;
    transform: translateY(30px);
}

.carte-competence i {
    font-size: 3rem;
    color: var(--couleur-accent);
    margin-bottom: 20px;
}

.carte-competence h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.carte-competence ul {
    list-style: none; /* Supprime les puces */
    padding: 0;
}

.carte-competence ul li {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Effet au survol */
.carte-competence:hover {
    transform: translateY(-10px);
    border-color: var(--couleur-accent);
}

/* Classe pour l'animation d'apparition */
.carte-competence.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- STYLE DE LA SECTION PARCOURS (TIMELINE) --- */

#parcours h2 {
    text-align: center;
    /* --- MODIFICATION RESPONSIVE --- */
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin-bottom: 50px;
    color: var(--couleur-accent);
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* La ligne centrale de la timeline */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--couleur-carte);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    z-index: 1; /* --- AJOUTEZ CETTE LIGNE --- */
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    
    /* Préparation pour l'animation JS */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

    z-index: 5; /* --- AJOUTEZ CETTE LIGNE --- */
}
/* Aligne la moitié des items à droite */
.timeline-item:nth-child(odd) {
    left: 0;
}
/* Aligne l'autre moitié à gauche */
.timeline-item:nth-child(even) {
    left: 50%;
}

/* Les icônes sur la ligne */
.timeline-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    right: -65px; /* -(50px/2 + 40px padding) -- Oups, 25+40=65. C'est bon. */
    top: 15px;
    background-color: var(--couleur-accent);
    border-radius: 50%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -65px;
}

.timeline-content {
    padding: 20px 30px;
    background-color: var(--couleur-carte);
    border-radius: 10px;
    position: relative;
}
.timeline-content h3 {
    font-size: 1.3rem;
    color: var(--couleur-accent);
}
.timeline-content h4 {
    font-size: 1rem;
    font-style: italic;
    margin: 5px 0 10px 0;
}
.timeline-content .btn-modal {
    background-color: var(--couleur-accent);
    color: var(--couleur-fond);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-weight: bold;
}

/* --- STYLE POUR LES MODALES (POP-UP) --- */
.modal {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    overflow-y: auto; /* --- AJOUT RESPONSIVE --- */
}

.modal-content {
    background-color: var(--couleur-carte);
    margin: 7% auto;
    padding: 30px;
    border-radius: 10px;
    width: 60%;
    max-width: 700px;
    position: relative;
}

.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- STYLE DU BOUTON RETOUR EN HAUT --- */

#retour-haut-btn {
    position: fixed; /* Reste visible même en scrollant */
    bottom: 30px;
    right: 30px;
    z-index: 99; /* Pour être au-dessus des autres éléments */
    
    background-color: var(--couleur-accent);
    color: var(--couleur-fond);
    border: none;
    border-radius: 50%; /* Pour en faire un cercle */
    width: 50px;
    height: 50px;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    
    text-decoration: none;
    cursor: pointer;

    /* Caché par défaut */
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

#retour-haut-btn.visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* --- STYLE DU BOUTON CV --- */

.btn-cv {
    display: inline-block; /* Pour qu'il se comporte comme un bloc mais s'adapte au contenu */
    background-color: transparent;
    border: 2px solid var(--couleur-accent);
    color: var(--couleur-accent);
    padding: 12px 25px;
    margin-top: 20px;
    border-radius: 50px; /* Pour un look "pilule" moderne */
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-cv i {
    margin-right: 10px; /* Espace entre l'icône et le texte */
}

/* Effet au survol */
.btn-cv:hover {
    background-color: var(--couleur-accent);
    color: var(--couleur-fond);
}

/* --- STYLE DU PRELOADER --- */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Pour être au-dessus de tout */
    
    background-color: var(--couleur-fond); /* Le même fond que le site */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Pour la transition de disparition */
    transition: opacity 0.75s ease, visibility 0.75s ease;
}

/* Classe que le JS ajoutera pour cacher le preloader */
#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--couleur-carte); /* Cercle de base */
    border-top-color: var(--couleur-accent); /* Couleur de la partie qui tourne */
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- STYLE DE LA SECTION VEILLE --- */

#veille {
    /* Préparation pour l'animation JS */
    opacity: 0;
    transform: translateY(30px);
}

#veille h2 {
    text-align: center;
    /* --- MODIFICATION RESPONSIVE --- */
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin-bottom: 50px;
    color: var(--couleur-accent);
}

.veille-carte {
    background-color: var(--couleur-carte);
    padding: 30px 40px;
    border-radius: 15px;
    max-width: 800px;
    margin: 0 auto; /* Pour centrer la carte */
    border-left: 5px solid var(--couleur-accent);
}

.veille-carte h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.veille-carte p, .veille-carte ul li {
    line-height: 1.7;
}

.veille-carte h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--couleur-accent);
}

.veille-carte ul {
    margin-left: 20px;
}

.veille-carte a {
    color: var(--couleur-accent);
    font-weight: bold;
    text-decoration: none;
}
.veille-carte a:hover {
    text-decoration: underline;
}
#veille.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* --- STYLE POUR L'ARRIÈRE-PLAN DYNAMIQUE PARTICLES.JS --- */

#particles-js {
    position: fixed; /* Fixe l'élément par rapport à la fenêtre */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; /* Place l'élément tout en arrière-plan */
    background-color: var(--couleur-fond); /* On met la couleur de fond ici */
}

/* On s'assure que le contenu textuel passe bien par-dessus */
.accueil-contenu, .scroll-down-arrow {
    position: relative;
    z-index: 1;
}

/* --- STYLE SECTION ET TABLEAU BTS --- */

#bts-cta {
    text-align: center;
    /* padding géré par la règle 'section' globale */
    background-color: rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(30px);
    min-height: auto; 
}

#bts-cta.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#bts-cta h2 {
    /* --- MODIFICATION RESPONSIVE --- */
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--couleur-accent);
    margin-bottom: 15px;
}

#bts-cta p {
    max-width: 600px;
    margin: 0 auto 30px auto;
}

/* Style pour le tableau */
.modal-large {
    width: 80%;
    max-width: 1000px;
}

/* --- AJOUT RESPONSIVE --- */
/* Rendre le tableau scrollable sur mobile */
.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse; /* Fusionne les bordures */
    margin-top: 20px;
    min-width: 600px; /* Force le scroll si moins de place */
}

table th, table td {
    border: 1px solid var(--couleur-accent);
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}

table th {
    background-color: var(--couleur-accent);
    color: var(--couleur-fond);
    font-size: 1.1rem;
}

/* Alternance de couleur pour la lisibilité */
table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- STYLE POUR LE SÉLECTEUR DE THÈME --- */

/* 1. Définition des couleurs du thème clair */
body.light-theme {
    --couleur-fond: #f0f8ff; /* Un blanc légèrement bleuté */
    --couleur-texte: #1c2b3a; /* Le bleu sombre de nos cartes */
    --couleur-carte: #ffffff; /* Blanc pur pour les cartes */
    --couleur-accent: #0077b6; /* Un bleu légèrement différent pour le contraste */
}

/* On ajuste la couleur du tableau en thème clair */
body.light-theme table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}
/* Et celle du bouton CV au survol */
body.light-theme .btn-cv:hover {
    color: #ffffff;
}
/* Fond de la nav en thème clair */
body.light-theme #main-nav {
    background-color: rgba(255, 255, 255, 0.9);
}
/* Inputs de formulaire en thème clair */
body.light-theme #contact-form input, 
body.light-theme #contact-form textarea {
    background-color: #ffffff;
    border-color: #ddd;
}
/* ... etc ... */


/* 2. Style de l'interrupteur */
#theme-switcher {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
    
    background-color: var(--couleur-carte);
    color: var(--couleur-accent);
    border: 1px solid var(--couleur-accent);
    border-radius: 50%;
    width: 50px;
    height: 50px;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

#theme-switcher:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--couleur-accent);
}

/* 3. Logique d'affichage des icônes */
#theme-switcher .fa-sun {
    display: none; /* Le soleil est caché par défaut (thème sombre) */
}
body.light-theme #theme-switcher .fa-sun {
    display: block; /* On affiche le soleil en thème clair */
}
body.light-theme #theme-switcher .fa-moon {
    display: none; /* On cache la lune en thème clair */
}
/* --- STYLE DU SCHÉMA INTERACTIF --- */

.schema-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.schema-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
}

.schema-box i {
    font-size: 2.5rem;
    color: var(--couleur-accent);
    margin-bottom: 10px;
}

.schema-box span {
    font-weight: bold;
}
.schema-box small {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.8;
}

.schema-arrow {
    flex-grow: 1;
    display: flex;
    align-items: center;
    position: relative;
    height: 5px;
    background-color: #444;
    margin: 0 10px;
}
.schema-arrow span {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: bold;
}

.arrow-head {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #444;
}

/* L'animation au survol */
.schema-arrow .arrow-line {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--couleur-accent), var(--couleur-accent));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.5s ease-in-out;
}
/* 1. Définition de l'animation pour la ligne */
@keyframes flow-animation {
    0%   { background-size: 0% 100%; }   /* Début : vide */
    50%  { background-size: 100% 100%; } /* Milieu : plein */
    100% { background-size: 0% 100%; }   /* Fin : se vide */
}

/* 2. Définition de l'animation pour la pointe de la flèche */
@keyframes arrowhead-animation {
    0%   { border-left-color: #444; }
    49%  { border-left-color: #444; }
    50%  { border-left-color: var(--couleur-accent); } /* La pointe se colore quand le flux arrive */
    100% { border-left-color: #444; }
}

/* 3. Application de l'animation à nos éléments */
.schema-arrow .arrow-line {
    animation: flow-animation 3s ease-in-out infinite;
    animation-delay: 1s; /* Petit délai avant de commencer */
}

.arrow-head {
    /* ... (lignes existantes) ... */
    animation: arrowhead-animation 3s ease-in-out infinite;
    animation-delay: 1s; /* Le même délai pour la synchro (ajusté) */
}

/* --- STYLE DU MENU DE NAVIGATION --- */

#main-nav {
    position: fixed; /* Reste fixé en haut de l'écran */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Pour être au-dessus de tout */
    
    background-color: rgba(28, 43, 58, 0.9); /* Notre couleur de carte, semi-transparente */
    backdrop-filter: blur(10px); /* Effet de flou stylé (marche sur les navigateurs modernes) */
    
    padding: 15px 10%;
    
    /* Caché par défaut, prêt pour l'animation */
    transform: translateY(-100%);
    transition: transform 0.4s ease-out;
}

/* Classe que le JS ajoutera pour le faire apparaître */
#main-nav.visible {
    transform: translateY(0);
}

#main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

#main-nav ul li {
    margin: 0 20px;
}

#main-nav ul li a {
    color: var(--couleur-texte);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

#main-nav ul li a:hover {
    color: var(--couleur-accent);
}

/* Style du lien pour la section active */
#main-nav ul li a.active {
    color: var(--couleur-accent);
    border-bottom-color: var(--couleur-accent);
}

/* On ajuste le style du thème clair pour le menu */
body.light-theme #main-nav {
    background-color: rgba(255, 255, 255, 0.9);
}

/* --- STYLE DE LA SECTION CONTACT (FOOTER) --- */

#contact {
    text-align: center;
    /* padding géré par la règle 'section' globale */
    background-color: var(--couleur-carte);
    
    /* Préparation pour l'animation */
    opacity: 0;
    transform: translateY(30px);

    /* --- AJOUT POUR CORRIGER LE Z-INDEX (important) --- */
    position: relative;
    z-index: 2;

    /* --- AJOUT POUR COLLER EN BAS DE PAGE --- */
    margin-top: auto;
}

#contact.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#contact h2 {
    /* --- MODIFICATION RESPONSIVE --- */
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--couleur-accent);
    margin-bottom: 15px;
}

#contact p {
    max-width: 600px;
    margin: 0 auto 30px auto;
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap; /* Pour les petits écrans */
}

.contact-links a {
    color: var(--couleur-texte);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    transition: color 0.3s ease;
}

.contact-links a:hover {
    color: var(--couleur-accent);
}

.contact-links a i {
    margin-right: 10px;
    color: var(--couleur-accent);
}

#contact-form {
    max-width: 700px;
    margin: 30px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#contact-form .form-group {
    display: flex;
    gap: 20px;
}

#contact-form input, #contact-form textarea {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid var(--couleur-carte);
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: var(--font-principale);
    font-size: 1rem;
    transition: border-color 0.3s;
}

#contact-form input:focus, #contact-form textarea:focus {
    outline: none;
    border-color: var(--couleur-accent);
}

#contact-form button {
    cursor: pointer;
    border-width: 2px; /* Assure la cohérence avec le style .btn-cv */
}

#form-status {
    margin-top: 20px;
    font-weight: bold;
}

/* --- STYLE DE LA BARRE DE PROGRESSION --- */

#progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px; /* L'épaisseur de la barre */
    z-index: 1001; /* Doit être au-dessus du menu de navigation */
    background-color: transparent; /* Le conteneur est invisible */
}

#progress-bar {
    height: 100%;
    width: 0%; /* Commence à 0% de largeur */
    background-color: var(--couleur-accent);
}

/* --- RESPONSIVE DESIGN --- */

/* Pour les tablettes et écrans plus petits */
@media (max-width: 1024px) {
    /* Les polices sont gérées par clamp(), plus besoin de les redéfinir ici */

    /* On agrandit un peu les modales pour mieux utiliser l'espace */
    .modal-content {
        width: 80%;
    }
    .modal-large {
        width: 90%;
    }
}


/* Pour les téléphones mobiles */
@media (max-width: 768px) {

    /* --- AJUSTEMENTS GLOBAUX --- */
    /* On réduit les marges latérales */
    section, #bts-cta, #contact {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    /* --- AJOUT RESPONSIVE --- */
    /* Position des boutons en haut à droite */
    #theme-switcher {
        top: 15px;
        right: 15px;
    }
    #retour-haut-btn {
        bottom: 15px;
        right: 15px;
    }

    /* --- MENU DE NAVIGATION --- */
    /* --- MODIFICATION RESPONSIVE --- */
    #main-nav {
        padding: 10px 5%; /* Moins de padding */
    }
    #main-nav ul li {
        margin: 0 10px; /* On resserre les liens du menu */
    }
    #main-nav ul li a {
        font-size: 0.9rem;
    }

    /* --- SECTION ACCUEIL --- */
    /* Les polices sont gérées par clamp() */
    
    /* --- SECTION À PROPOS --- */
    .a-propos-contenu {
        flex-direction: column; /* On empile la photo et le texte */
        gap: 30px;
    }
    .colonne-gauche {
        min-width: unset; /* On enlève le min-width */
    }

    /* --- SECTION PARCOURS (TIMELINE) --- */
    /* On déplace la ligne centrale sur la gauche */
    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%; /* Chaque item prend toute la largeur */
        padding-left: 90px; /* On laisse de la place pour la ligne et l'icône */
        padding-right: 15px;
    }

    /* On place tous les items sur le même côté */
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0;
    }

    /* On repositionne les icônes sur la ligne à gauche */
    /* --- MODIFICATION RESPONSIVE --- (31px - 25px = 6px) */
    .timeline-icon {
        left: 6px; 
    }
    .timeline-item:nth-child(even) .timeline-icon {
        left: 6px;
    }

    /* --- SECTION CONTACT --- */
    .contact-links {
        flex-direction: column; /* On empile les liens de contact */
        gap: 20px;
    }
    .contact-links a {
        font-size: 1rem; /* --- AJOUT RESPONSIVE --- */
    }


    /* --- MODALES --- */
    .modal-content {
        width: 95%;
        margin: 100px auto; /* 40px en haut/bas, centré G/D */
        padding: 20px;
    }
    
    /* --- AJOUT RESPONSIVE --- */
    /* Schéma interactif */
    .schema-container {
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }
    .schema-arrow {
        width: 50px;
        height: 50px; /* --- AJOUT RESPONSIVE --- */
        transform: rotate(90deg); /* On tourne les flèches */
        flex-grow: 0; /* --- AJOUT RESPONSIVE --- */
        margin: 10px 0;
    }
    .schema-box {
        width: 100%; /* --- AJOUT RESPONSIVE --- */
    }
    .schema-box i {
        font-size: 2rem;
    }
    
    /* --- AJOUT RESPONSIVE --- */
    /* Onglets de modales sur mobile */
    .modal-tabs {
        flex-direction: column;
    }
    .modal-tab-btn {
        width: 100%;
        text-align: left;
        border-bottom: 1px solid var(--couleur-carte);
    }
    .modal-tab-btn.active {
        border-bottom-color: var(--couleur-accent);
    }
    
    /* --- AJOUT RESPONSIVE --- */
    /* Iframe */
    .iframe-container {
        height: 300px; /* Moins de hauteur sur mobile */
    }
    /* --- STYLE TABLEAU RESPONSIVE (MODE CARTE) --- */

    /* On s'assure que le tableau lui-même est un bloc */
    #modal-bts table {
        display: block;
        width: 100%;
        min-width: 0; /* Annule tout min-width hérité */
        margin-top: 20px;
        border-collapse: collapse;
    }

    /* On cache les en-têtes du tableau sur mobile */
    #modal-bts table thead {
        display: none;
    }

    /* On s'assure que le tbody est aussi un bloc */
    #modal-bts table tbody {
        display: block;
        width: 100%;
    }

    #modal-bts table tr {
        /* Chaque ligne devient une "carte" */
        display: block;
        width: 100%; /* S'assurer qu'il prend 100% de son parent */
        border: 2px solid var(--couleur-accent);
        border-radius: 8px;
        margin-bottom: 15px;
    }

    #modal-bts table td {
        /* Chaque cellule prend 100% de la largeur */
        display: block;
        width: 100%;
        text-align: left;
        border: none; /* On enlève les bordures de base */
        border-bottom: 1px solid var(--couleur-carte);
        padding: 12px 15px;

        /* --- LIGNES IMPORTANTES POUR LE RETOUR À LA LIGNE --- */
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    #modal-bts table td:last-child {
        border-bottom: none; /* Pas de bordure pour le dernier item */
    }

    /* C'est ici que la magie opère */
    #modal-bts table td::before {
        content: attr(data-label) " :"; /* Affiche le label */
        display: block;
        font-weight: bold;
        color: var(--couleur-accent);
        margin-bottom: 5px;
    }
}

/* --- AJOUT RESPONSIVE --- */
/* Pour les très petits écrans */
@media (max-width: 480px) {
    /* Menu de navigation qui "wrappe" */
    #main-nav ul {
        flex-wrap: wrap;
    }
    #main-nav ul li {
        margin: 5px 10px;
    }

    /* Formulaire de contact empilé */
    #contact-form .form-group {
        flex-direction: column;
        gap: 20px; /* Fonctionne maintenant comme espace vertical */
    }
    
    /* Liens de contact */
    .contact-links a {
        font-size: 0.9rem; /* Encore plus petit pour tenir */
    }
}


/* --- STYLE DES LIENS-SCHÉMAS DANS LE TEXTE --- */

.schema-link {
    display: inline-block;
    padding: 4px 10px;
    margin-left: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid var(--couleur-accent);
    color: var(--couleur-accent);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.schema-link:hover {
    background-color: var(--couleur-accent);
    color: var(--couleur-fond);
}

/* On ajuste pour le thème clair */
body.light-theme .schema-link:hover {
    color: #ffffff;
}

/* --- STYLE DES LIENS DE CONTACT DIRECTS --- */

.contact-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 40px 0;
    color: #888;
}

.contact-separator::before,
.contact-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #444;
}

.contact-separator p {
    margin: 0 20px !important; /* On force la marge pour contrer d'autres styles */
}

/* Les styles .contact-links sont déjà définis plus haut */


/* --- STYLE POUR LES ONGLETS DES MODALES --- */

.modal-tabs {
    display: flex;
    border-bottom: 2px solid var(--couleur-carte);
    margin-bottom: 20px;
}

.modal-tab-btn {
    padding: 10px 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: var(--couleur-texte);
    font-size: 1rem;
    font-weight: bold;
    opacity: 0.6;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* Pour que la bordure active touche la ligne */
}

.modal-tab-btn:hover {
    opacity: 1;
}

.modal-tab-btn.active {
    opacity: 1;
    color: var(--couleur-accent);
    border-bottom-color: var(--couleur-accent);
}

.tab-pane {
    display: none; /* Tous les contenus sont cachés par défaut */
}

.tab-pane.active {
    display: block; /* Seul le contenu actif est visible */
}

/* On ajuste pour le thème clair */
body.light-theme .modal-tab-btn {
    color: var(--couleur-texte);
}
body.light-theme .modal-tab-btn.active {
    color: var(--couleur-accent);
}

/* --- STYLE POUR L'IFRAME DU PROJET --- */

.iframe-container {
    width: 100%;
    height: 450px; /* Tu peux ajuster cette hauteur */
    border: 3px solid var(--couleur-carte);
    border-radius: 8px;
    overflow: hidden; /* Pour que l'iframe à l'intérieur ait les coins arrondis */
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none; /* L'iframe elle-même n'a pas de bordure */
}

/* --- STYLE POUR LES CARTES DU PROJET NAS --- */

.nas-features-grid {
    display: grid;
    /* Crée 2 colonnes, mais passe à 1 seule si l'espace manque */
    /* --- MODIFICATION RESPONSIVE --- (min 200px -> 250px) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.nas-feature-card {
    background-color: var(--couleur-carte);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.nas-feature-card i {
    font-size: 2.5rem;
    color: var(--couleur-accent);
    margin-bottom: 15px;
}

.nas-feature-card h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.nas-feature-card p {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* L'animation "vie" au survol */
.nas-feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--couleur-accent);
}

/* On ajuste pour le thème clair */
body.light-theme .nas-feature-card {
    background-color: rgba(0,0,0,0.05); /* Un gris très léger */
}

/* --- STYLE POUR ONGLETS IMBRIQUÉS (NIVEAU 1) --- */
.tabs-level-1 {
    display: flex;
    border-bottom: 2px solid var(--couleur-carte);
    margin-bottom: 20px;
}

.tabs-level-1 .modal-tab-btn {
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--couleur-texte);
    background-color: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* Pour coller à la ligne */
    transition: all 0.3s ease;
}

.tabs-level-1 .modal-tab-btn:hover {
    opacity: 1;
}

.tabs-level-1 .modal-tab-btn.active {
    opacity: 1;
    color: var(--couleur-accent);
    border-bottom-color: var(--couleur-accent);
}

/* --- STYLE POUR ONGLETS IMBRIQUÉS (NIVEAU 2) --- */
.tabs-level-2 {
    display: flex;
    margin-bottom: 20px;
    background-color: var(--couleur-fond); /* Un peu plus sombre */
    border-radius: 8px;
    padding: 5px;
}

.tabs-level-2 .modal-tab-btn {
    flex: 1; /* Les boutons prennent la même largeur */
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--couleur-texte);
    background-color: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.tabs-level-2 .modal-tab-btn:hover {
    background-color: var(--couleur-carte);
}

.tabs-level-2 .modal-tab-btn.active {
    opacity: 1;
    color: #fff;
    background-color: var(--couleur-accent);
}

/* --- Ajustement pour le thème clair --- */
body.light-theme .tabs-level-2 {
    background-color: #eee;
}
body.light-theme .tabs-level-2 .modal-tab-btn:hover {
    background-color: #ddd;
}
body.light-theme .tabs-level-2 .modal-tab-btn.active {
    color: #fff;
}