/* =========================================
   1. RESET & BASES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Akkurat Mono", "Courier New", monospace;
    background: #f4f4f4;
    color: #111;
    line-height: 1.6;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

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

ul { list-style: none; }

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.highlight {
    color: #007AFF;
    font-weight: bold;
}

/* =========================================
   2. HEADER & SELECTEUR LANGUE
   ========================================= */
.main-header {
    padding: 2em 0;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    z-index: 50;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 5px 10px;
    border-radius: 4px;
}
.logo span { color: #007AFF; }

/* BOUTONS LANGUE (Carrés) */
.lang-selector {
    position: fixed;
    top: 2em; right: 2em;
    z-index: 50;
    display: flex;
    gap: 10px;
}

.lang-selector button {
    width: 40px; height: 40px;
    padding: 0;
    border-radius: 0; /* Carré */
    background: #ffffff;
    border: 1px solid #000000;
    color: #000000;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-selector button:hover {
    background: #000000;
    color: #ffffff;
}

/* =========================================
   3. HERO SECTION (Eraser Image)
   ========================================= */
.section-hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.hero-canvas-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* Image de fond (remplace la vidéo) */
#hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

#hero-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    cursor: crosshair;
}

.hero-content-layer {
    position: relative;
    z-index: 10;
    text-align: center;
    pointer-events: none; /* Laisse passer la souris vers le canvas */
}

/* On réactive la souris sur les éléments interactifs */
.hero-content-layer h1, 
.hero-content-layer p, 
.hero-btns {
    pointer-events: auto; 
}

/* Style partagé pour créer l'effet de cadre */
.hero-content h1, 
.hero-content p {
    background-color: rgba(0, 0, 0, 0.6); /* Fond noir à 60% d'opacité */
    padding: 15px 25px; /* Espace à l'intérieur du cadre */
    border-radius: 10px; /* Coins arrondis comme un bouton */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Fine bordure blanche subtile */
    
    /* Important pour que le cadre colle au texte et ne prenne pas toute la largeur */
    width: fit-content; 
    max-width: 100%; /* Sécurité pour mobile */
    box-sizing: border-box;
    
    /* Centrage si nécessaire (sinon retirer) */
    margin-left: auto;
    margin-right: auto;
}

/* Tes styles originaux conservés et ajustés */
.hero-content h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 0.5em; /* Espacement sous le titre */
    line-height: 1.1;
    color: #ffffff !important;
}

.hero-content p {
    font-size: 1.2rem;
    color: #ffffff !important;
    margin-bottom: 2em;
}

.hero-btns {
    display: flex;
    gap: 1em;
    justify-content: center;
}

/* --- BOUTONS CARRÉS (Modification demandée) --- */

/* Bouton Principal (Voir projets) */
.btn-primary {
    padding: 12px 24px;
    border-radius: 0; /* Angles droits */
    background: #000;
    color: #fff;
    border: 1px solid #000;
    
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: 0.3s;
    cursor: pointer;
}
.btn-primary:hover {
    background: #333;
}

/* Bouton Secondaire (Me contacter) */
.btn-secondary {
    padding: 12px 24px;
    border-radius: 0; /* Angles droits */
    
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-secondary:hover {
    background: #000000;
    color: #ffffff;
}

/* =========================================
   4. AUTRES SECTIONS
   ========================================= */
section:not(.section-hero) { padding: 6em 0; }

.section-title {
    font-size: 2rem;
    margin-bottom: 1.5em;
    text-transform: uppercase;
    border-left: 4px solid #007AFF;
    padding-left: 15px;
}

.bg-alt { background: #eaeaea; }

/* Grid Projets */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2em;
}

.project-card {
    background: #fff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}
.project-card:hover { transform: translateY(-5px); }
.tech-tags { display: block; margin-top: 1em; font-size: 0.8rem; color: #888; font-style: italic; }
.project-link { display: inline-block; margin-top: 15px; color: #007AFF; font-weight: bold; }

/* Contact Form */
.contact-card form { display: flex; flex-direction: column; gap: 1em; max-width: 500px; }
input, textarea { padding: 15px; border: 1px solid #ddd; background: #fff; font-family: inherit; border-radius: 4px; width: 100%; }
textarea { resize: vertical; min-height: 150px; }
.btn-submit { padding: 15px; background: #007AFF; color: white; border: none; cursor: pointer; font-weight: bold; text-transform: uppercase; width: fit-content; }

/* Footer */
.main-footer { text-align: center; padding: 2em 0 6em 0; background: #111; color: #666; font-size: 0.9rem; }
.main-footer a { color: #fff; text-decoration: underline; }

/* =========================================
   5. MENU DOCK (Barre Nav)
   ========================================= */
.mode + .nav-dock-container { --color-pure: #000; --color-primary: #e8e8e8; --color-secondary: #212121; --muted: #b8b8b8; }
.mode:checked + .nav-dock-container { --color-pure: #fff; --color-primary: #212121; --color-secondary: #fff; --muted: #383838; }

.nav-dock-container {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center; justify-content: center;
    max-width: 95%;
}

.wrap {
    --round: 30px; --p-x: 5px; --p-y: 5px; --w-label: 75px;
    display: flex;
    align-items: center;
    padding: var(--p-y) var(--p-x);
    position: relative;
    background: var(--color-primary);
    border-radius: var(--round);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    overflow-x: auto; 
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.wrap::-webkit-scrollbar { display: none; }
.wrap input { display: none; }

.label {
    cursor: pointer;
    font-size: 0.75rem; font-weight: 600;
    color: var(--color-secondary);
    width: var(--w-label); min-width: var(--w-label);
    text-align: center; padding: 12px 0;
    z-index: 2;
    transition: color 0.25s ease;
    user-select: none;
    display: flex; justify-content: center; align-items: center;
}
.wrap input:checked + label { color: var(--color-pure); }

.slidebar {
    position: absolute;
    height: calc(100% - (var(--p-y) * 2));
    width: var(--w-label);
    border-radius: 20px;
    background: var(--muted);
    z-index: 0;
    left: var(--p-x);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.rd-1:checked ~ .slidebar { transform: translateX(0); }
.rd-2:checked ~ .slidebar { transform: translateX(100%); }
.rd-3:checked ~ .slidebar { transform: translateX(200%); }
.rd-4:checked ~ .slidebar { transform: translateX(300%); }
.rd-5:checked ~ .slidebar { transform: translateX(400%); }
.rd-6:checked ~ .slidebar { transform: translateX(500%); }

.nav-dock-container .theme {
    margin-left: 10px; width: 36px; height: 36px; min-width: 36px;
    border-radius: 50%;
    background: var(--color-secondary); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: sticky; right: 0; z-index: 5;
}
.mode:checked + .nav-dock-container .theme span.light { display: none; }
.mode + .nav-dock-container .theme span.light { display: flex; }
.mode:checked + .nav-dock-container .theme span.dark { display: flex; }
.mode + .nav-dock-container .theme span.dark { display: none; }

/* =========================================
   6. DARK MODE (Complet)
   ========================================= */
body:has(#theme-mode:checked) { background-color: #121212; color: #e0e0e0; }
body:has(#theme-mode:checked) .bg-alt { background-color: #0d0d0d; }
body:has(#theme-mode:checked) .project-card, 
body:has(#theme-mode:checked) input, 
body:has(#theme-mode:checked) textarea { background-color: #1e1e1e; color: #fff; border-color: #333; }

/* Adaptation des Boutons en Dark Mode */
/* Me Contacter : Fond Noir, Bordure Blanche, Texte Blanc */
body:has(#theme-mode:checked) .btn-secondary {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
}
body:has(#theme-mode:checked) .btn-secondary:hover {
    background: #fff;
    color: #000;
}

/* Voir Projets : Fond Blanc, Bordure Blanche, Texte Noir */
body:has(#theme-mode:checked) .btn-primary {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}
body:has(#theme-mode:checked) .btn-primary:hover {
    background: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
    .section-hero h1 { font-size: 2.5rem; }
    .nav-dock-container { bottom: 15px; } 
    .wrap { padding-right: 50px; }
}

/* =========================================
   TIMELINE STYLES
   ========================================= */
.timeline {
    margin: 0 auto;
    width: 100%;
    max-width: 800px; /* Largeur idéale pour la lecture */
}

/* Boutons Expand/Collapse */
.btn-group {
    display: flex;
    gap: 10px;
    margin-bottom: 2em;
    justify-content: flex-end;
}

.btn-timeline {
    background-color: transparent;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.btn-timeline:hover {
    background-color: #000;
    color: #fff;
}

/* Structure Timeline */
.timeline__item {
    position: relative;
    padding-bottom: 2em;
}

/* La ligne verticale */
.timeline__item:not(:last-child):before {
    content: "";
    background-color: #ccc;
    display: block;
    position: absolute;
    top: 1em; left: 2em; /* Alignement avec la flèche */
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    z-index: 0;
}

.timeline__item-header {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1; /* Au-dessus de la ligne */
}

/* Flèche cliquable */
.timeline__arrow {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-right: 15px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease;
    color: #111;
}

.timeline__arrow:hover { color: #007AFF; }
.timeline__arrow-icon { transition: transform 0.3s ease; transform: rotate(-90deg); }
.timeline__arrow[aria-expanded="true"] .timeline__arrow-icon { transform: rotate(0); }

/* Le point sur la timeline */
.timeline__dot {
    background-color: #007AFF;
    border-radius: 50%;
    width: 12px; height: 12px;
    margin-right: 15px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #eaeaea; /* Petit halo pour couper la ligne */
}

/* Textes */
.timeline__meta { display: flex; flex-direction: column; }
.timeline__date { font-size: 0.85rem; color: #666; font-weight: bold; text-transform: uppercase; }
.timeline__title { font-size: 1.1rem; margin: 0; line-height: 1.2; }

/* Contenu dépliable */
.timeline__item-body {
    height: 0;
    overflow: hidden;
    margin-left: 60px; /* Décalage pour aligner sous le texte */
    transition: height 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.timeline__item-body-content {
    padding: 15px;
    background: #fff;
    border-left: 3px solid #007AFF;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* État déplié */
.timeline__item-body--expanded .timeline__item-body-content {
    opacity: 1;
    transform: translateY(0);
}

/* --- DARK MODE ADAPTATION --- */
body:has(#theme-mode:checked) .timeline__arrow { color: #fff; }
body:has(#theme-mode:checked) .btn-timeline { border-color: #fff; color: #fff; }
body:has(#theme-mode:checked) .btn-timeline:hover { background: #fff; color: #000; }
body:has(#theme-mode:checked) .timeline__item:not(:last-child):before { background-color: #444; }
body:has(#theme-mode:checked) .timeline__dot { box-shadow: 0 0 0 4px #0d0d0d; } /* Halo couleur fond dark */
body:has(#theme-mode:checked) .timeline__date { color: #aaa; }
body:has(#theme-mode:checked) .timeline__item-body-content { background: #1e1e1e; color: #ddd; }


/* =========================================
   SKILLS STACK (STYLE CAPTURE D'ÉCRAN)
   ========================================= */
.skills-stack-container {
    display: flex;
    flex-direction: column;
    gap: 4em; /* Espace vertical entre les lignes Frontend/Backend... */
    margin-top: 2em;
}

.skill-row {
    display: grid;
    /* La colonne titre fait 200px, le reste prend la place */
    grid-template-columns: 200px 1fr; 
    align-items: center; /* Centrage vertical */
}

/* Le titre à gauche (ex: FRONTEND) */
.skill-category-name {
    font-family: "Impact", "Arial Black", sans-serif; /* Police très grasse comme la capture */
    font-size: 2rem;
    text-transform: uppercase;
    color: #888; /* Gris comme sur l'image */
    letter-spacing: 1px;
    line-height: 1;
}

/* La liste d'icônes à droite */
.skill-icons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espace entre les icônes */
    align-items: center;
}

/* Conteneur de l'icône + Tooltip */
.skill-icon-box {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

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

/* Taille des icônes */
.skill-icon-box i {
    font-size: 3rem; /* Grosses icônes comme sur l'image */
    display: block;
}

/* Petite infobulle au survol (Optionnel mais classe) */
.tooltip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #007AFF;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: "Akkurat Mono", monospace;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.skill-icon-box:hover .tooltip {
    opacity: 1;
}

/* RESPONSIVE : Sur mobile, on empile tout */
@media (max-width: 768px) {
    .skill-row {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 20px;
        text-align: center;
    }
    .skill-icons-list {
        justify-content: center;
    }
}

/* --- DARK MODE SPECIFICS --- */
/* Pour Linux qui est noir de base, on le passe en blanc en mode sombre */
body:has(#theme-mode:checked) .devicon-linux-plain {
    color: #fff;
}

/* Adaptation des icônes personnalisées (IonIcons) */
.custom-icon {
    font-size: 3rem; /* Même taille que les devicons */
    color: #333; /* Noir par défaut */
    transition: color 0.3s ease;
}

/* Couleur Spécifique pour la Cybersécurité (Vert ou Bleu) */
.cyber-icon {
    color: #007AFF; /* Ton bleu principal */
}

/* Dark Mode pour les custom icons et logos sans couleur (GitHub, Linux, IBM) */
body:has(#theme-mode:checked) .custom-icon,
body:has(#theme-mode:checked) .devicon-github-original,
body:has(#theme-mode:checked) .devicon-linux-plain,
body:has(#theme-mode:checked) .devicon-ibm-plain {
    color: #fff;
}


/* =========================================
   SKILLS STACK (ALIGNEMENT STRICT & FIABLE)
   ========================================= */
.skills-stack-container {
    display: flex;
    flex-direction: column;
    gap: 3em; /* Espace vertical entre les lignes */
    margin-top: 3em;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.skill-row {
    display: flex; /* On utilise Flex pour aligner gauche/droite */
    align-items: center; /* Centrage vertical */
    width: 100%;
    /* Optionnel : Bordure pour déboguer l'alignement (à retirer après) */
    /* border-bottom: 1px dashed #ddd; */
    padding-bottom: 10px;
}

/* COLONNE 1 : LE TITRE (Largeur Bloquée) */
.skill-category-name {
    /* C'EST ICI QUE TOUT SE JOUE : */
    flex: 0 0 350px; /* On impose une largeur de 350px fixe */
    width: 350px;    /* Sécurité supplémentaire */
    min-width: 350px; /* Sécurité ultime */
    
    text-align: left; /* Texte aligné à gauche */
    
    font-family: "Impact", "Arial Black", sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap; /* Interdit le retour à la ligne */
}

/* COLONNE 2 : LES ICÔNES */
.skill-icons-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px; /* Espace régulier entre les icônes */
    padding-left: 0; /* Pas de marge parasite */
    margin-left: 0;
}

/* LA BOÎTE D'ICÔNE (Carré invisible qui contient l'icône) */
.skill-icon-box {
    width: 70px; /* Largeur fixe pour que chaque icône prenne la même place */
    height: 70px;
    
    display: flex;
    align-items: center;
    justify-content: center; /* Centre l'icône dans le carré */
    
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

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

/* TAILLE DES ICÔNES */
.skill-icon-box i, 
.skill-icon-box ion-icon {
    font-size: 3rem;
    display: block;
    margin: 0; /* On retire les marges par défaut des polices */
}

/* TOOLTIPS & STYLES SECONDAIRES */
.tooltip {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #007AFF;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: "Akkurat Mono", monospace;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    z-index: 10;
}
.skill-icon-box:hover .tooltip { opacity: 1; }

.custom-icon { color: #333; transition: color 0.3s ease; }
.cyber-icon { color: #007AFF; }

body:has(#theme-mode:checked) .custom-icon,
body:has(#theme-mode:checked) .devicon-github-original,
body:has(#theme-mode:checked) .devicon-linux-plain,
body:has(#theme-mode:checked) .devicon-ibm-plain {
    color: #fff;
}

/* MOBILE */
@media (max-width: 900px) {
    .skill-row {
        flex-direction: column; /* Vertical sur mobile */
        gap: 15px;
        align-items: flex-start; /* Tout calé à gauche */
    }
    .skill-category-name {
        width: 100%; /* Plus de largeur fixe */
        flex: auto;
        min-width: 0;
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
    }
    .skill-icons-list {
        gap: 20px;
    }
}

/* =========================================
   SOCIAL SLIDE ICONS (AVEC TEXTE EN DESSOUS)
   ========================================= */
.social-slide-list {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0 auto 2em auto; 
    padding: 0;
}

.social-slide-list li {
    list-style: none;
    margin: 0 15px;
    
    /* Permet d'empiler l'icône et le texte verticalement */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espace entre la bulle et le texte */
}

/* Le rond de l'icône */
.social-slide-list li a {
    width: 60px;
    height: 60px;
    background-color: #fff;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    display: block;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 3px solid #fff;
    z-index: 1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* Le petit texte en dessous */
.network-name {
    font-size: 0.75rem; /* Petit texte (12px) */
    font-family: "Akkurat Mono", monospace; /* Ta police habituelle */
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Styles internes de l'icône (inchangés) */
.social-slide-list li a .icon {
    position: relative;
    color: #262626;
    transition: .5s;
    z-index: 3;
    line-height: 60px; 
    display: inline-block;
}

.social-slide-list li a:hover .icon {
    color: #fff;
    transform: rotateY(360deg);
}

.social-slide-list li a:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .5s;
    z-index: 2;
}

.social-slide-list li a:hover:before {
    top: 0;
}

/* --- COULEURS --- */
.social-slide-list li:nth-child(1) a:before { background: #333; }    /* GitHub */
.social-slide-list li:nth-child(2) a:before { background: #000; }    /* X */
.social-slide-list li:nth-child(3) a:before { background: #ea4335; } /* Gmail */
.social-slide-list li:nth-child(4) a:before { background: #6d4aff; } /* Proton */

/* --- DARK MODE --- */
body:has(#theme-mode:checked) .social-slide-list li a {
    background-color: #1e1e1e;
    border-color: #333;
}
body:has(#theme-mode:checked) .social-slide-list li a .icon { color: #fff; }
body:has(#theme-mode:checked) .network-name { color: #888; } /* Texte gris clair en mode sombre */