/* =================================== */
/* 1. VARIABLES & STYLES GÉNÉRAUX      */
/* =================================== */

/* :root est un endroit idéal pour déclarer des variables globales */
:root {
    /* Palette "Mer Sombre" */
    --background-dark: #0f172a; /* Un bleu très sombre, presque noir */
    --background-wave: #1e293b; /* Un bleu ardoise pour la "vague" */
    --text-light: #e2e8f0;      /* Un blanc cassé, plus doux pour les yeux */
    --text-muted: #94a3b8;      /* Un gris clair pour les textes secondaires */
    --accent-color: #22d3ee;    /* Un cyan/turquoise vif pour les accents (liens, boutons) */
    --accent-color-hover: #67e8f9;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-dark); /* On applique le fond sombre */
    color: var(--text-light);                 /* On applique le texte clair */
    padding-top: 70px; 
    padding-bottom: 100px;
}

/* Création de la couche d'arrière-plan animée */
body::before {
    content: '';
    position: fixed; /* L'arrière-plan reste fixe quand on scrolle */
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; /* On le place derrière tout le contenu */

    /* Le dégradé qui forme la "vague" */
    background: linear-gradient(125deg, 
        var(--background-dark), 
        var(--background-wave), 
        var(--background-dark)
    );
    background-size: 400% 400%; /* On crée un dégradé 4x plus grand que l'écran */

    /* On applique l'animation */
    /* animation: subtle-wave 25s ease-in-out infinite; */
}

/* Définition de l'animation */
@keyframes subtle-wave {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 100% 50%; }
    50%  { background-position: 100% 0%; }
    75%  { background-position: 0% 50%; }
    100% { background-position: 0% 50%; }
}

main {
    transition: padding-top 0.4s ease; /* Pour l'animation du menu mobile */
}

/* =================================== */
/* 2. STYLES DES COMPOSANTS            */
/* =================================== */

/* --- Styles Généraux pour les Titres --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0; /* On annule la marge du haut par défaut */
    margin-bottom: 0.75em; /* On définit une marge du bas contrôlée et proportionnelle */
}

/* --- Header & Navigation --- */
/* --- Header & Navigation --- */
/* --- Header & Navigation --- */
header {
    position: fixed;
    top: 0;    
    width: 100%; 
    z-index: 1000;

    background-color: var(--background-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* On remet la bordure en bas */
}

footer {
    position: fixed; 
    bottom: 0;       
    left: 0;         
    width: 100%;     
    z-index: 1000;   

    padding: 10px 20px; 
    background-color: var(--background-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.8em; 
    color: var(--text-muted);
}

/* --- Style pour le Formulaire de Contact --- */
.contact-form {
    max-width: 750px;  /* Le formulaire ne dépassera pas cette largeur */
    margin: 40px auto; /* Centre le formulaire sur la page et ajoute de l'espace en haut/bas */
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-muted);
}

/* Style pour les champs de saisie et la zone de texte */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%; /* Les champs prennent toute la largeur du formulaire */
    padding: 12px;
    background-color: var(--background-dark);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: var(--text-light);
    font-size: 1em;
    box-sizing: border-box; /* Empêche le padding de casser la mise en page */
}

/* On change la couleur de la bordure quand on clique sur un champ */
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Style pour le bouton d'envoi */
.contact-form button[type="submit"] {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--background-dark);
    padding: 15px 35px;
    border-radius: 50px;
    border: none;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-form button[type="submit"]:hover {
    background-color: var(--accent-color-hover);
}

/* --- Mise en page générale des titres de page --- */
/* --- Mise en page générale des titres de page --- */

/* D'abord, on centre les BLOCS titre et intro */
main > h1,
main > .page-intro {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Ensuite, on applique un style spécifique UNIQUEMENT à l'intro */
main > .page-intro {
    margin-top: 15px;    /* Espace après le h1 */
    margin-bottom: 40px; /* Espace après l'intro */
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--text-muted); /* La couleur grise ne s'applique qu'ici */
}

nav ul {
    list-style-type: none;
    padding: 15px;
    margin: 0;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: var(--text-light); /* Utilisation de notre nouvelle variable */
    font-weight: bold;
}

/* --- Style général des liens --- */
a {
    color: var(--accent-color);
    text-decoration: none; /* On supprime le soulignement par défaut */
}

a:visited {
    color: var(--accent-color); /* On s'assure que les liens déjà visités gardent la même couleur */
}

a:hover {
    color: var(--accent-color-hover); /* On utilise notre variable pour le survol */
    text-decoration: underline; /* On ajoute un soulignement au survol pour la clarté */
}

/* On garde une spécificité pour les liens du menu principal si besoin */
nav a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: bold;
}

nav a:hover {
    color: var(--accent-color);
    text-decoration: none; /* Pas de soulignement pour les liens du menu */
}

/* --- Language Switcher --- */
.language-switcher {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10; /* S'assure qu'il est au-dessus du menu de bureau */
}

.language-switcher img {
    margin-left: 10px;
    vertical-align: middle;
}

/* --- Section Héros --- */
.hero {
    text-align: center;
    padding: 20px 20px;
    /* background-color: var(--background-light-gray); On supprime cette ligne */
}

.hero h1 {
    margin-bottom: 10px;
}

.hero h2 {
    color: var(--text-muted); /* On utilise le gris clair pour le sous-titre */
}



.hero .subtitle {
    max-width: 600px;
    margin: 0 auto 30px auto;
}

/* --- Bouton d'Appel à l'Action (CTA) --- */
a.cta-button {
    background-color: var(--accent-color);
    color: var(--background-dark);
    padding: 12px 30px; /* Augmenté pour plus d'espace */
    border-radius: 40px; /* Une valeur élevée pour un effet "pilule" très moderne */
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

a.cta-button:hover {
    background-color: var(--accent-color-hover);
    color: var(--background-dark);
}

/* --- Carrousel (Vue Ordinateur) --- */
.carousel-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px 20px;
}

.carousel-track {
    display: flex;
    justify-content: space-around;
    /* La transition est déplacée dans la media query car elle n'est utile que sur mobile */
}

.strength-item {
    text-align: center;
    flex-basis: 30%; /* flex-basis est mieux que max-width dans un contexte flex */
    padding: 0 15px;
}

.menu-toggle,
.carousel-button {
    display: none; /* On cache les boutons de menu mobile et carrousel par défaut */
}

/* --- Composant Item de Parcours --- */
.parcours-item {
    background-color: rgba(255, 255, 255, 0.05); /* Un fond très subtil pour délimiter */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}
.parcours-item h2 {
    margin-top: 0;
    color: var(--accent-color);
}
.parcours-meta {
    font-size: 0.9em;
    color: var(--text-muted);
    line-height: 1.5;
}
.page-intro { /* Pour le paragraphe d'intro de la page */
    font-size: 1.1em;
    color: var(--text-muted);
    max-width: 800px;
    margin-bottom: 40px;
}
details {
    margin-top: 20px;
}
summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--accent-color-hover);
}
summary:hover {
    text-decoration: underline;
}
.details-content {
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 10px;
}

/* --- Style pour le sommaire de page (version déroulante) --- */
.page-nav {
    margin: 40px 0; /* Espace avant et après le sommaire */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.page-nav details {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Le titre visible du menu déroulant */
.page-nav summary {
    cursor: pointer;
    padding: 15px 20px;
    font-weight: bold;
    list-style: none; /* Cache la petite flèche par défaut du navigateur */
    transition: color 0.3s;
}
.page-nav summary:hover {
    color: var(--accent-color);
}

/* On ajoute notre propre flèche pour le style */
.page-nav summary::after {
    content: ' ▼'; /* Flèche vers le bas quand le menu est fermé */
    font-size: 0.8em;
    float: right;
    transition: transform 0.3s;
}

/* On fait pivoter la flèche quand le menu est ouvert */
.page-nav details[open] summary::after {
    transform: rotate(180deg);
}

/* La liste des liens à l'intérieur */
.page-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-nav li {
    padding: 0;
}

.page-nav a {
    display: block; /* Pour que toute la zone soit cliquable */
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-muted);
}

.page-nav a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--accent-color);
}

/* --- Style pour les Blocs de Service --- */
.service-block {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.service-block h3 {
    margin-top: 0;
    color: var(--accent-color);
    font-size: 1.5em;
}

.service-block ul {
    padding-left: 20px;
}

.service-block li {
    margin-bottom: 10px;
}

.service-cta {
    text-align: right; /* Aligne le bouton à droite du bloc */
    margin-top: 20px;
}

a.cta-button-small {
    /* On reprend le style du bouton principal mais en plus petit */
    background-color: var(--accent-color);
    color: var(--background-dark);
    padding: 8px 18px; /* Padding réduit */
    font-size: 0.9em;  /* Police réduite */
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

a.cta-button-small:hover {
    background-color: var(--accent-color-hover);
    color: var(--background-dark);
}

/* --- Style pour les Projets du Portfolio --- */
.portfolio-item {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-item h2 {
    margin-top: 0;
    color: var(--accent-color);
}

.portfolio-content {
    display: flex;
    flex-wrap: wrap; /* Permet de passer en colonne sur mobile */
    gap: 30px; /* Espace entre la description et la barre latérale */
}

.portfolio-description {
    flex: 2; /* Prend 2/3 de la largeur disponible */
    min-width: 300px; /* Largeur minimale avant de passer à la ligne */
}

.portfolio-sidebar {
    flex: 1; /* Prend 1/3 de la largeur disponible */
    background-color: rgba(0,0,0,0.2);
    padding: 20px;
    border-radius: 5px;
}

.portfolio-sidebar h4 {
    margin-top: 0;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 10px;
}

/* Style pour la liste des compétences sous forme de "tags" */
.tags-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Espace entre les tags */
}

.tags-list li {
    background-color: var(--background-wave);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.85em;
    color: var(--text-light);
}

/* --- Style pour les anecdotes (Version Améliorée) --- */
.anecdote-item {
    max-width: 650px;  /* On réduit la largeur max pour un effet plus centré */
    margin: 40px auto; /* Marge verticale et centrage horizontal */
    padding: 30px;     /* Marge intérieure généreuse */
    
    background-color: rgba(30, 41, 59, 0.5); /* Un fond bleu ardoise semi-transparent */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--accent-color); /* On garde une bordure d'accentuation à gauche */
    border-radius: 8px; /* Coins arrondis cohérents avec le reste du design */

    font-style: italic;
    color: var(--text-muted);
    text-align: center; /* On centre le texte à l'intérieur de la "case" */
}

/* On s'assure que le paragraphe à l'intérieur n'a pas de marges superflues */
.anecdote-item p {
    margin: 0;
}

/* --- Style pour les boutons du carrousel --- */
.slide-buttons {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px; /* Espace entre les boutons */
    align-items: center;
}

/* Style pour le bouton secondaire (type "fantôme") */
.cta-button-secondary {
    background-color: transparent;
    color: var(--accent-color);
    padding: 10px 20px; /* Un peu plus petit que le bouton principal */
    font-size: 0.9em;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid var(--accent-color); /* On ajoute une bordure */
    transition: all 0.3s;
}

.cta-button-secondary:hover {
    background-color: var(--accent-color);
    color: var(--background-dark);
}

.reload-container {
    text-align: center;
    margin-top: 30px;
}

.button-reload {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s;
}

.button-reload:hover {
    background-color: var(--accent-color);
    color: var(--background-dark);
    border-color: var(--accent-color);
}

.hero h1 {
    font-size: 3.5em; /* On rend le nom de la marque très grand */
    margin-bottom: 0;
    color: var(--text-light);
}
.h1-subtitle {
    font-size: 1.2em;
    margin-top: 2px;
    color: var(--accent-color); /* On utilise la couleur d'accent pour le sous-titre */
    font-weight: normal;
}

/* =================================== */
/* 3. MEDIA QUERIES (STYLES MOBILES)   */
/* =================================== */

/* Pour les tablettes et les mobiles (écrans de 768px de large ou moins) */
@media (max-width: 768px) {

    /* --- STRUCTURE GÉNÉRALE --- */
    header {
        min-height: 60px;
    }

    /* Dans @media (max-width: 768px) { ... } */

    /* --- Typographie Mobile --- */
    /* --- Typographie Mobile (Version Corrigée) --- */
        /* Titre principal des pages (sauf Accueil) */
        main > h1 {
            font-size: 1.8em;
            line-height: 1.3;
        }

        /* Titre de la page d'Accueil (qui est dans la section .hero) */
        .hero h1 {
            font-size: 1.7em;
        }

        /* Titres des blocs sur la page "Mon Parcours" */
        .parcours-item h2 {
            font-size: 1.4em;
        }

        /* Titres des blocs sur la page "Services" */
        .service-block h3 {
            font-size: 1.25em;
        }

    /* --- HÉROS (Mobile) --- */
    .hero h1 {
        font-size: 2.2em;
    }
     .hero h2 {
        font-size: 1.1em;
    }

    /* --- MENU HAMBURGER (Mobile) --- */
    .menu-toggle {
        display: block;
        position: absolute;
        top: 15px;
        left: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1000;
    }
    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-light); /* Couleur claire pour le thème sombre */
        margin: 5px 0;
    }
    nav#main-nav {
    display: none;
    position: absolute;
    top: 0; /* On le repositionne en haut */
    left: 0;
    width: 100%;
    background-color: var(--background-dark);
    padding-top: 60px; /* On remet le padding en haut */
    padding-bottom: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* L'ombre est de nouveau vers le bas */
    }
    nav#main-nav.is-open {
        display: block;
    }
    nav ul li {
        display: block;
        text-align: center;
        margin: 15px 0;
    }
    
    /* --- CARROUSEL (Mobile) --- */
    .carousel-container {
        position: relative;
        width: 90%;
        overflow: hidden;
    }
    .carousel-track {
        width: 500%;
        transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
        display: flex; /* On s'assure qu'il est bien flex ici aussi */
        justify-content: initial; /* On annule le space-around du desktop */
        position: relative; /* Crée un contexte de superposition pour la piste */
        z-index: 1;         /* La met sur la première couche */
    }
    .carousel-slide {
        width: 20%;
        box-sizing: border-box;
        flex-basis: auto; /* On annule le flex-basis du desktop */
        max-width: initial; /* On annule le max-width du desktop */
    }
    .carousel-button {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255,255,255,0.2);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 24px;
        cursor: pointer;
        z-index: 100;
    }
    .carousel-button.prev { left: 10px; }
    .carousel-button.next { right: 10px; }
}