/* ==========================================================================
   TABLE OF CONTENTS (STRUCTURE DU FICHIER CSS)
   ==========================================================================
   1.  VARIABLES & CONFIGURATION
   2.  RESET & GLOBAL
   3.  TYPOGRAPHIE & STYLE CYBER H2
   4.  HIGHLIGHTERS (CODE & TAGS)
   5.  SIDEBAR & LOGO
   6.  MAIN WRAPPER & HEADER PAGE
   7.  NAVIGATION "CAPSULE" (BARRE FIXE)
   8.  COMPOSANTS : ACCUEIL & FEATURED (CARTES BLANCHES)
   9.  COMPOSANTS : SKILLS (DETAILS/SUMMARY)
   10. STYLE : PILIERS DE COMPÉTENCES (GRILLES)
   11. COMPOSANTS : PROJETS & IMAGES (LIGHTBOX)
   12. COMPOSANTS : ÉDUCATION & TP
   13. COMPOSANTS : CERTIFICATIONS
   14. BOUTONS SPECIAUX (RONDS & RECTANGLES)
   15. PDF & FOOTER & DIVERS
   16. MODALE CYBER SÉCURITÉ (TERMINAL)
   17. ANIMATIONS
   18. RESPONSIVE / MOBILE (MEDIA QUERIES)
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES & CONFIGURATION
   ========================================================================== */
:root {
    --sidebar-width: 320px;       /* Largeur unique pour tout le site */
    --accent-color: #00bcd4;      /* Bleu néon (Bleu Cyber) */
    --accent-glow: rgba(0, 188, 212, 0.5);
    --new-blue: #00A8C6;          /* Bleu des cartes */
    --text-color-main: #ffffff;
    --text-color-dark: #2c3e50;
    --bg-dark: #1a1a1a;
    --bg-sidebar: #050a10;        /* Fond très sombre menu */
}

/* ==========================================================================
   2. RESET & GLOBAL
   ========================================================================== */
* {
    box-sizing: border-box;
    outline: none;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-color-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    font-size: 14px; 
    line-height: 1.6;
    overflow-x: hidden; /* Évite le scroll horizontal accidentel */
}

/* --- AJOUTS GLOBAUX (CANVAS & CURSEUR) --- */

#network-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* Derrière tout */
    background: #0d1117;
    pointer-events: none;
}

/* FIX CURSEUR : Masquer partout (CORRIGÉ) */
/* L'étoile * cible TOUS les éléments du site sans exception */
*, html, body, a, button, input, textarea, select, .card, .nav-item, .menu-toggle {
    cursor: none !important;
}

/* Le reste de ton code est bon, tu peux le laisser tel quel : */
#cursor-crosshair {
    position: fixed;
    top: 0; left: 0;
    width: 30px; height: 30px;
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, border-color 0.2s ease;
    /* AJOUTE CETTE LIGNE : */
    mix-blend-mode: difference; 
}

#cursor-crosshair::before,
#cursor-crosshair::after {
    content: '';
    position: absolute;
    background-color: #64ffda; /* Cyan Cyber */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

#cursor-crosshair::before { width: 100%; height: 1px; }
#cursor-crosshair::after { width: 1px; height: 100%; }

/* Quand on survole le cadre du PDF, on cache le curseur perso */
iframe:hover, object:hover, embed:hover, .pdf-frame:hover {
    cursor: auto !important; /* Force le curseur système */
}

/* Optionnel : Si tu as une classe spécifique pour ton conteneur PDF */
.pdf-frame:hover ~ #cursor-crosshair {
    opacity: 0; /* Cache la croix */
}

/* Effet au survol (Classe ajoutée par JS) */
body.hovering #cursor-crosshair {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
}
body.hovering #cursor-crosshair::before,
body.hovering #cursor-crosshair::after {
    background-color: #ff5555; /* Rouge alerte */
}

p {
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 400;
}

h1, h2, h3, h4 {
    margin-top: 0;
    font-weight: 700;
}

/* On s'assure que la modale et ses inputs n'affichent PAS le curseur système */
#cyber-modal,
#cyber-modal .terminal-window,
#cyber-modal input,
#cyber-modal button {
    cursor: none !important;
}

/* Scroll Margin */
#competences, #projet, #archives, #rt3, #rt2, #rt1, #cyber, #network, , #acceuil, #rapport, section {
    scroll-margin-top: 120px; 
}

/* ==========================================================================
   3. TYPOGRAPHIE & STYLE CYBER H2 (MODIFIÉ STYLE MENU)
   ========================================================================== */

:root {
    /* CHANGEMENT ICI : On utilise la même police que le Menu (.nav-item) */
    --font-cyber: 'Courier New', 'Courier', monospace;
}

h1, h2, h3, h4 {
    margin-top: 0;
    
    /* Applique la police 'Courier New' */
    font-family: var(--font-cyber);
    
    /* Graisse 600 comme ton menu (ni trop fin, ni trop gras) */
    font-weight: 600; 
    
    text-transform: uppercase;
    
    /* Ajustement : 1px correspond mieux au style "Courier" du menu */
    letter-spacing: 1px; 
}

/* Style spécifique H2 (Titres de section avec barre à gauche) */
h2 {
    color: var(--accent-color);
    font-size: 1.6em; 
    
    /* Espacement */
    margin-top: 60px;
    margin-bottom: 30px;
    
    /* Marqueur vertical */
    padding: 5px 0 5px 20px;
    border-left: 3px solid var(--accent-color);
    border-bottom: none; 
    
    background: transparent; 
    box-shadow: none;
    border-radius: 0;
    
    text-shadow: 0 0 8px var(--accent-glow);
    position: relative;
}

/* Ligne fine en dessous */
h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    opacity: 0.5;
    margin-top: 10px;
}

/* Titre Principal (Bienvenue) */
.page-header h1 {
    font-size: 2.5em; 
    font-weight: 600; 
    text-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
    /* Courier New est large, on réduit légèrement l'espacement ici pour que ça reste élégant */
    letter-spacing: 1px; 
}

/* ==========================================================================
   4. HIGHLIGHTERS (CODE & TAGS)
   ========================================================================== */
code {
    background-color: #e0e0e0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: #c7254e;
    font-size: 0.9em;
    border: 1px solid #d0d0d0;
}

/* Classes utilitaires techniques */
.protocol { color: #2e7d32; font-family: monospace; font-size: 0.95em; }
.service  { color: #e64a19; font-family: monospace; font-size: 0.95em; }
.number   { color: #c7254e; font-family: monospace; font-size: 1.0em; padding-right: 5px; }
.numbert  {
    font-family: 'Segoe UI', sans-serif;
    color: #c7254e;
    font-size: 0.95em;
    background-color: #f4f4f4;
    padding: 0 4px;
    border-radius: 4px;
}

/* ==========================================================================
   5. SIDEBAR & LOGO (Consolidé)
   ========================================================================== */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    color: #8892b0;
    position: fixed;
    left: 0; top: 0;
    border-right: 1px solid rgba(100, 255, 218, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.3s ease;
    box-shadow: 5px 0 15px rgba(0,0,0,0.5);
}

/* --- Logo Zone --- */
.logo-container-cyber {
    position: relative;
    padding: 30px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
    margin-bottom: 20px;
}

/* Ombre respirante sous le logo */
.logo-container-cyber::after {
    content: '';
    display: block;
    width: 40%; height: 10px;
    background: radial-gradient(ellipse at center, rgba(0, 188, 212, 0.4) 0%, transparent 70%);
    margin: 10px auto 0;
    border-radius: 50%;
    animation: shadow-breath 4s ease-in-out infinite;
}

/* --- LE CADRE (Le rond néon fixe) --- */
.profile-circle-frame {
    /* Taille du cercle global (agrandi pour englober les épaules) */
    width: 190px;
    height: 190px;
    
    /* Le style Néon */
    border-radius: 50%;
    border: 2px solid #64ffda;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
    padding: 3px;
    background-color: #111; /* Fond sombre derrière la photo si elle ne remplit pas tout */

    /* Indispensable pour couper ce qui dépasse */
    overflow: hidden;
    
    /* Centrage du cadre lui-même */
    margin: 0 auto 15px auto; /* 15px en bas pour espacer du texte ID */
    position: relative;
    z-index: 1;
}

/* --- L'IMAGE (La photo à l'intérieur) --- */
.sidebar-logo-cyber {
    /* C'EST ICI QU'ON DÉZOOME */
    /* 100% = zoom max (remplit le cercle). */
    /* 85% = un peu d'espace autour (on voit mieux les épaules). */
    width: 110%; 
    height: auto; /* Garde les proportions de la photo */

    /* Centrage parfait de l'image dans le cercle */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* On retire les bordures de l'image car c'est le cadre qui les a */
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.user-id {
    margin-top: 15px;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #64ffda;
    letter-spacing: 1px;
}

/* Navigation Items */
.nav-menu {
    flex: 1;
    padding: 20px 0;
    overflow-y: auto; /* Active le scroll si nécessaire */
    
    /* CACHER LA BARRE DE DÉFILEMENT (SCROLLBAR) */
    
    /* Pour Firefox */
    scrollbar-width: none; 
    
    /* Pour Internet Explorer et Edge */
    -ms-overflow-style: none;  
}

/* Pour Chrome, Safari et Opera */
.nav-menu::-webkit-scrollbar {
    display: none;
}

.nav-label {
    padding: 0 25px;
    font-size: 0.80rem;
    color: #555;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Style unifié des liens (Fusion du style Cyber et HUD) */
.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    color: #a8b2d1;
    text-decoration: none;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    background: transparent;
    width: 100%;
    cursor: pointer; /* Ou 'none' si tu utilises le curseur perso */
}

/* Bouton Dropdown Reset */
button.nav-item {
    border: none;
    text-align: left;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.nav-icon {
    width: 25px;
    text-align: center;
    margin-right: 15px;
    font-size: 1.1rem;
    transition: text-shadow 0.3s;
}

/* Hover & Active States */
.nav-item:hover, .nav-item.active {
    background: rgba(0, 188, 212, 0.1); /* Mix des deux styles */
    color: #fff !important;
    padding-left: 35px; /* Petit effet de glissement "Tech Slide" */
    border-left: 3px solid var(--accent-color);
    text-shadow: 0 0 8px var(--accent-color);
}

.nav-item:hover .nav-icon, .nav-item.active .nav-icon {
    text-shadow: 0 0 5px #64ffda;
}

/* Items Verrouillés */
.nav-item.locked {
    color: #666;
    opacity: 0.7;
}
.nav-item.locked:hover {
    background: rgba(255, 0, 0, 0.1);
    color: #ff5555 !important;
    border-left-color: #ff5555;
    padding-left: 25px; /* Pas de slide pour les locked */
    cursor: not-allowed;
    text-shadow: none;
}

/* Sous-menu */
.dropdown-container {
    background: #020508;
    position: relative;
    padding-left: 0px;
}

.dropdown-arrow {
    margin-left: 15px; /* Tu peux ajuster : 10px, 15px, 20px... */
}

.sub-item {
    font-size: 1rem;
    padding-left: 40px; /* Indentation correcte */
    color: #8892b0;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: none;
    transition: all 0.2s;
    font-family: 'Courier New', monospace;
}

.sub-arrow { margin-right: 8px; color: #555; }

.sub-item:hover {
    color: #64ffda;
    background: transparent;
}
.sub-item:hover .sub-arrow { color: #64ffda; }

/* Status Bas de page */
.sidebar-status {
    padding: 15px 25px;
    border-top: 1px solid rgba(100, 255, 218, 0.1);
    font-family: monospace;
    font-size: 0.75rem;
    background: #020508;
}
.status-row { display: flex; align-items: center; color: #64ffda; margin-bottom: 3px; }
.blink-dot {
    width: 6px; height: 6px;
    background: #27c93f;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px #27c93f;
    animation: blink 2s infinite;
}

/* --- SMARTPHONES (max 768px) --- */
@media (max-width: 768px) {

    /* A. NAVIGATION CAPSULE : MODE ICÔNES UNIQUEMENT */
    .page-nav {
        gap: 10px; /* Espace entre les bulles */
        padding: 5px 10px;
        justify-content: center; /* Centre les icônes */
        width: auto; /* Laisse la largeur s'adapter au contenu */
        max-width: 95%;
    }

    .page-nav-link {
        /* ASTUCE : On met la taille de police à 0 pour cacher le TEXTE */
        font-size: 0; 
        
        /* On ajuste le padding pour faire des boutons carrés/ronds */
        padding: 10px; 
        border-radius: 50%; /* Optionnel : rend les boutons ronds */
        width: 40px;        /* Force une taille fixe */
        height: 40px;
        justify-content: center;
        gap: 0; /* Plus besoin d'espace entre icône et texte */
    }

    /* On rétablit la taille de l'icône (sinon elle disparaît avec font-size: 0) */
    .page-nav-link i {
        font-size: 1.2rem; /* Taille visible de l'icône */
        margin: 0;
    }

    /* B. DÉSACTIVATION DU CURSEUR CUSTOM */
    #cursor-crosshair {
        display: none !important; /* Cache visuellement la croix */
    }

    /* On rétablit le comportement tactile natif */
    *, html, body, a, button, input, textarea, select, .card, .nav-item, .menu-toggle {
        cursor: auto !important; /* Le navigateur gère le touch */
    }
}

/* ==========================================================================
   6. MAIN WRAPPER & HEADER
   ========================================================================== */
.main-wrapper {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    transition: filter 0.3s ease;
}

.main-wrapper.sidebar-active {
    filter: blur(5px) brightness(0.7);
    pointer-events: none;
}

.content {
    padding: 40px;
    max-width: 1100px;
    margin: auto;
}

.page-header {
    border-left: 6px solid var(--accent-color);
    padding: 30px 40px;
    margin-bottom: 40px;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, rgba(0, 188, 212, 0.15) 0%, rgba(26, 26, 26, 0) 100%);
    box-shadow: inset 10px 0 20px -10px rgba(0, 188, 212, 0.3);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: cyber-scan 3s infinite linear;
    pointer-events: none;
    z-index: 1;
}

.page-header h1 {
    color: var(--accent-color);
    font-size: 2.8em;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 188, 212, 0.7), 0 0 20px rgba(0, 188, 212, 0.3);
    position: relative;
    z-index: 2;
}

.page-header .intro-text {
    font-size: 1.1em;
    color: #e0e0e0;
    max-width: 900px;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   7. NAVIGATION "CAPSULE" (STYLE HUD VERT CYBER)
   ========================================================================== */
.page-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px; 
    
    width: fit-content; 
    margin: 0 auto 30px auto; 
    padding: 8px 12px; 
    
    /* FOND : Noir profond semi-transparent */
    background: rgba(5, 10, 16, 0.9); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    
    /* --- CHANGEMENT CLÉ : CONTOUR VERT (#64ffda) --- */
    border: 1px solid #64ffda; 
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.2); /* Lueur verte */
    
    border-radius: 50px; 
    
    position: sticky;
    top: 20px;
    z-index: 990; 
}

.page-nav-link {
    /* --- CHANGEMENT CLÉ : POLICE MENU (Courier New) --- */
    font-family: 'Courier New', 'Courier', monospace; 
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem; /* Un tout petit peu plus gros pour la lisibilité Courier */
    font-weight: 600;
    
    color: #8892b0; /* Gris bleuté par défaut */
    text-decoration: none;
    
    padding: 8px 20px;
    border-radius: 40px; 
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* Bordure invisible pour éviter le décalage au survol */
    border: 1px solid transparent; 
}

.page-nav-link i {
    color: #64ffda; /* Icônes en vert par défaut */
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

/* --- Hover State (Survol) --- */
.page-nav-link:hover {
    color: #ffffff;
    
    /* Fond Vert très léger + Bordure Verte légère */
    background: rgba(100, 255, 218, 0.05); 
    border-color: rgba(100, 255, 218, 0.5);
    
    text-shadow: 0 0 5px #64ffda;
    transform: translateY(-1px);
}

.page-nav-link:hover i {
    transform: scale(1.1); 
    text-shadow: 0 0 8px #64ffda;
}

/* --- Active State (Lien sélectionné) --- */
.page-nav-link.active-link {
    /* Fond Vert semi-transparent */
    background: rgba(100, 255, 218, 0.15); 
    
    /* Texte Vert Néon */
    color: #64ffda; 
    
    /* Bordure Verte Solide */
    border-color: #64ffda;
    
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.25);
    font-weight: 700;
}

.page-nav-link.active-link i {
    color: #64ffda; 
}

/* ==========================================================================
   8. COMPOSANTS : ACCUEIL & FEATURED (Cartes Blanches Cyber)
   ========================================================================== */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* --- La Carte Featured (STYLE BLANC CYBERISÉ) --- */
.featured-card {
    background: #ffffff;
    
    /* MODIFICATION : Bordure Cyan et Lueur au lieu du gris */
    border: 1px solid rgba(0, 188, 212, 0.4); 
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.05); 
    
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: var(--text-color-dark);
}

.featured-card:hover {
    transform: translateY(-5px);
    /* MODIFICATION : Intensité du néon au survol */
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.2); 
}

.card-icon {
    font-size: 3em;
    color: var(--accent-color);
    margin-bottom: 20px;
    text-shadow: none; 
}

/* Titres dans les cartes blanches */
.featured-card h3 {
    /* MODIFICATION : Police Cyber pour les titres */
    font-family: var(--font-cyber); 
    color: #007c8d; /* Bleu foncé lisible */
    text-transform: uppercase;
    font-weight: 700;
    
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
}

/* Description dans les cartes blanches */
.featured-card p, 
.featured-desc {
    color: #555;      
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* --- Style Spécial : Profil Professionnel (Intro Card) --- */
.intro-card {
    background: #ffffff;
    border-left: 5px solid var(--accent-color); /* Barre verticale tech */
    border-top: 1px solid rgba(0, 188, 212, 0.2);
    border-right: 1px solid rgba(0, 188, 212, 0.2);
    border-bottom: 1px solid rgba(0, 188, 212, 0.2);
    
    padding: 30px;
    border-radius: 4px;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 40px;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.05);
}

.intro-card h2 {
    color: #2c3e50;
    font-family: var(--font-cyber);
    font-size: 1.5rem;
    border-bottom: 1px dashed #ccc; /* Ligne pointillée technique */
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-left: none; /* Annule le style H2 global */
    padding-left: 0;
}

/* --- Tags System --- */
.tech-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.tag {
    font-size: 0.75em;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #555;
}

/* Semantic Colors for Tags */
.tag-security { color: #d32f2f; border-color: #ffcdd2; background: #ffebee; }
.tag-network  { color: #1565c0; border-color: #bbdefb; background: #e3f2fd; }
.tag-system   { color: #2e7d32; border-color: #c8e6c9; background: #e8f5e9; }

/* Bouton "Voir le rapport" */
.btn-featured {
    margin-top: auto;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.3s;
    background-color: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    cursor: pointer;
}

.btn-featured:hover {
    background-color: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.3);
    transform: translateY(-2px);
}

.section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    margin: 60px 0;
}

/* ==========================================================================
   9. COMPOSANTS : SKILLS (DETAILS/SUMMARY)
   ========================================================================== */
.skills-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

details {
    background-color: #ffffff;
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    overflow: hidden; /* Empêche le débordement du contenu */
}

summary {
    padding: 20px;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--text-color-dark);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    transition: background-color 0.2s;
}

summary:hover {
    background-color: rgba(0, 188, 212, 0.05);
}

/* Flèche animée */
summary::after {
    content: "▼";
    font-size: 0.8em;
    color: var(--accent-color);
    transition: transform 0.3s;
    margin-left: auto;
}

details[open] summary::after {
    transform: rotate(180deg);
}

.skill-detail {
    padding: 30px;
    border-top: 1px solid #ddd;
    background-color: #ffffff;
    color: var(--text-color-dark);
}

.skill-detail p {
    font-size: 14px; 
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
}

.skill-detail h3 {
    color: #007c8d;
    margin-top: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    font-size: 1.3em;
    font-weight: 700;
}

.skill-detail ul {
    padding-left: 20px;
}

.skill-detail li {
    font-size: 14px; 
    margin-bottom: 10px;
    color: #333;
}

.skill-detail strong {
    color: #007c8d;
    font-weight: 700;
}
/* ==========================================================================
   10. STYLE : PILIERS DE COMPÉTENCES (STYLE BLANC)
   ========================================================================== */

/* 1. La Grille */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* 2. La Carte (FOND BLANC) */
.card {
    background: #ffffff;             
    border: 1px solid #e1e4e8;                
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    border-top: 1px solid #e1e4e8; /* Reset bordure top si nécessaire */
    color: var(--text-color-dark);
}

/* Effet au survol */
.card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.2);
}

/* 3. L'icône */
.card .card-icon {
    font-size: 2.5em;
    color: var(--accent-color);
    margin-bottom: 20px;
    text-shadow: none; 
}

/* 4. Textes (EN SOMBRE) */
.card h3 {
    color: var(--text-color-dark);
    margin: 0 0 15px 0;
    font-size: 1.3em;
    font-weight: 700;
}

.card p {
    color: #555;   
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* 5. Les Tags (Style Pastel pour fond blanc) */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 25px;
}

.tag-blue, .tag-green, .tag-red {
    font-size: 0.75em;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* Couleurs adaptées au fond blanc */
.tag-blue  { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.tag-green { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.tag-red   { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }

/* 6. Le Bouton "Explorer" */
.card-btn {
    display: inline-block;
    padding: 8px 25px;
    border-radius: 50px;
    
    /* Fond transparent, Texte Bleu, Bordure Bleue */
    background: transparent;
    color: var(--accent-color); 
    border: 1px solid var(--accent-color);
    
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.3s;
    width: auto;
    cursor: pointer;
}

.card-btn:hover {
    background: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.3);
}

/* ==========================================================================
   11. COMPOSANTS : PROJETS & IMAGES
   ========================================================================== */
.project-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 40px;
    margin-top: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: var(--text-color-dark);
}

/* Force la couleur sombre pour les textes dans la carte projet */
.project-card p,
.project-card h4, 
.project-card li {
    color: #333;
}

/* EXCEPTION : Réinitialisation du style H2 Cyber pour les projets */
.project-card h2 {
    background: none;
    border-left: none;
    box-shadow: none;
    text-shadow: none;
    text-transform: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: none;
    font-size: 1.6em;
    color: #333; /* Priorité sur la couleur accentuée globale */
}
.project-card h2::before, .project-card h2::after { display: none; }

.project-card h3 {
    color: #007c8d;
    margin-top: 30px;
    font-size: 1.3em;
}

.project-card strong {
    color: #007c8d;
    font-weight: 700;
}

.project-card p {
    font-size: 14px; 
    line-height: 1.6;
    margin-bottom: 15px;
}

.project-card ul {
    list-style-type: none;
    padding-left: 0;
}

.project-card li {
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    font-size: 14px; 
}

.project-card li::before {
    content: "▶";
    color: #333;
    position: absolute;
    left: 0;
    font-size: 0.8em;
    top: 3px;
}

/* --- IMAGES & LÉGENDES --- */
figure {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

figcaption {
    margin-top: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    color: #555;
    font-size: 1em;
    text-align: center;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 5px;
    display: inline-block;
}

.project-img {
    width: 70%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    margin: 0 auto;
    border: 1px solid #e2e8f0;
    display: block;
    cursor: zoom-in;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.tech-list { margin-bottom: 15px; }
.tech-list li { margin-bottom: 8px; }

/* --- LIGHTBOX (ZOOM IMAGE) --- */
#lightbox {
    position: fixed;
    z-index: 10000; /* Doit être au-dessus de tout (Sidebar = 1000) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

#lightbox.active {
    display: flex;
    opacity: 1;
}

#lightbox-img {
    max-width: 90%;
    max-height: 85%;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 2px solid white;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    object-fit: contain;
}

#lightbox.active #lightbox-img {
    transform: scale(1);
}

#lightbox-caption {
    position: absolute;
    bottom: 30px;
    color: #eee;
    font-family: sans-serif;
    font-size: 1.1em;
    text-align: center;
    width: 100%;
    text-shadow: 1px 1px 3px black;
}

#lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10001;
}
#lightbox-close:hover {
    color: var(--accent-color);
}

/* ==========================================================================
   12. COMPOSANTS : ÉDUCATION & TP
   ========================================================================== */
.year-block {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: none; 
    position: relative; 
}

/* On cache la ligne pour le tout dernier bloc de la page */
.year-block:last-child::after {
    display: none;
}

.year-title {
    color: var(--accent-color);
    font-size: 1.8em;
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 5px solid var(--accent-color);
}

.year-title-small {
    color: var(--accent-color);
    font-weight: 700;
    text-transform: uppercase; 
    letter-spacing: 1px;
    border-left: 4px solid var(--accent-color);
    padding: 10px 0 10px 15px;
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(0, 188, 212, 0.7);
    box-shadow: inset 10px 0 20px -10px rgba(0, 188, 212, 0.3);
    background: linear-gradient(90deg, rgba(0, 188, 212, 0.1) 0%, rgba(0, 0, 0, 0) 80%);
    border-radius: 0 4px 4px 0;
    position: relative;
    overflow: hidden;
}

.year-title-small::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: cyber-scan 3s infinite linear;
}

.semester-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.semester-card {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    color: var(--text-color-dark);
}

.semester-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}

.semester-card h3 {
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

.semester-card p {
    color: #666;
    font-size: 0.95em;
    margin-bottom: 20px;
    height: 40px; 
}

/* Bouton Drive */
.drive-btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #f1f3f4;
    color: #333;
    padding: 10px 0;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s, color 0.3s;
    border: 1px solid #ddd;
}

.drive-btn:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* Accordéon */
.semester-accordion {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    color: #333;
}

.accordion-header {
    padding: 20px;
    cursor: pointer;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
}

.accordion-header:hover { background: #f9f9f9; }

.header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.semester-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
}

.mini-tags { display: flex; gap: 5px; }
.badge {
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
}
.badge-blue   { background-color: #2196F3; }
.badge-green  { background-color: #4CAF50; }
.badge-orange { background-color: #FF9800; }
.badge-red    { background-color: #F44336; }
.badge-purple { background-color: #9C27B0; }
.badge-yellow { background-color: #FBC02D; color: #333; }

.arrow-icon {
    transition: transform 0.3s ease;
    color: #888;
}
.accordion-header.active .arrow-icon { transform: rotate(180deg); }

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fafafa;
    border-top: 1px solid #eee;
}

.content-inner { padding: 20px; }

.content-inner ul {
    margin-bottom: 20px;
    padding-left: 20px;
    color: #555;
}

.content-inner p strong { color: #000; font-weight: 700; }
.content-inner ul li { color: #333; }

/* ==========================================================================
   13. COMPOSANTS : CERTIFICATIONS
   ========================================================================== */
.cert-grid {
    display: grid;
    /* auto-fill permet de remplir la ligne tant qu'il y a de la place */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* CARTE EN FOND BLANC */
.cert-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    
    /* Ombre pour détacher la carte blanche du fond noir */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    border: 1px solid #e1e4e8;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Effet au survol */
.cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 188, 212, 0.2);
    border-color: var(--accent-color);
}

/* Logo */
.cert-logo {
    width: 150px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px;
}

/* Titre */
.cert-card h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
    color: var(--text-color-dark);
    font-weight: 700;
}

/* Organisme */
.cert-issuer {
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Date */
.cert-date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 20px;
    font-style: italic;
}

/* Description (Force la couleur grise) */
.cert-card p {
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Bouton Verify */
.btn-verify {
    margin-top: auto;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    
    background: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: none;
}

.btn-verify:hover {
    background-color: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.3);
    transform: translateY(-2px);
}

/* BADGES */
.status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
}
.status-valid   { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.status-pending { background: #fff3e0; color: #ef6c00; border: 1px solid #ffe0b2; }

/* ==========================================================================
   14. BOUTONS SPECIAUX
   ========================================================================== */

/* BOUTONS RONDS */
.round-btn-container {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.round-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    text-decoration: none;
    color: #ffffff !important;
    font-size: 24px;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.round-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* BOUTONS RECTANGLES */
.btn-container {
    margin-top: 20px;
    margin-bottom: 40px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.custom-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    border-radius: 50px;
    
    text-decoration: none;
    color: #ffffff !important;
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.15em;
    
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-btn i { margin-right: 10px; font-size: 1.2em; }
.custom-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }

/* Couleurs Communes */
.btn-report { background: linear-gradient(135deg, #2196F3, #00bcd4); }
.btn-drive  { background: linear-gradient(135deg, #1FA463, #16804c); }
.btn-github { background: linear-gradient(135deg, #24292e, #444d56); }

/* ==========================================================================
   15. PDF & FOOTER & DIVERS
   ========================================================================== */

/* --- PDF FRAME --- */
.pdf-frame {
    width: 100%;
    height: 80vh;
    min-height: 500px;
    border: 2px solid #333;
    margin-top: 40px;
    border-radius: 8px;
    background: #fff;
}

.btn-pdf {
    display: inline-block;
    background-color: var(--accent-color);
    color: white !important;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    margin: 20px 0;
    transition: background-color 0.3s;
}
.btn-pdf:hover { background-color: #0097a7; }

/* --- FOOTER CYBER PRO --- */
.site-footer {
    position: relative;
    background: #050a10; /* Fond très sombre */
    padding: 0;
    margin-top: 80px;
    border-top: 1px solid rgba(100, 255, 218, 0.1);
}

/* Ligne Néon décorative */
.cyber-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #64ffda, transparent);
    opacity: 0.7;
    box-shadow: 0 0 10px #64ffda;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    justify-content: space-between; /* Ecarte les éléments */
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Colonnes */
.footer-col {
    flex: 1;
    min-width: 250px;
}
.right-col { text-align: right; }

/* Identité Visuelle */
.footer-identity {
    font-family: 'Courier New', monospace;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
}
.cmd-symbol { color: #64ffda; margin-right: 5px; }
.cursor-blink { animation: blink 1s infinite; }

.footer-role {
    color: #8892b0;
    font-size: 0.9rem;
    margin-top: 5px;
}

/* Liens Sociaux (Icônes simples) */
.social-col {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.cyber-link {
    color: #8892b0;
    font-size: 1.5rem; /* Gros icônes */
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
}

.cyber-link:hover {
    color: #64ffda;
    transform: translateY(-3px);
    text-shadow: 0 0 8px rgba(100, 255, 218, 0.6);
}

/* Status Système */
.system-status {
    font-family: monospace;
    color: #64ffda;
    font-size: 0.8rem;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(100, 255, 218, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
}

.status-dot {
    width: 8px; height: 8px;
    background-color: #27c93f;
    border-radius: 50%;
    box-shadow: 0 0 5px #27c93f;
}

.copyright {
    color: #555;
    font-size: 0.8rem;
}

/* --- BOUTON RETOUR EN HAUT (STYLE CYBER) --- */
#backToTop {
    display: none; /* Géré par le JS */
    position: fixed;
    bottom: 30px; 
    right: 30px;
    z-index: 999;
    
    /* Forme & Taille */
    width: 50px; 
    height: 50px;
    border-radius: 8px; /* Coins légèrement arrondis (plus tech que rond) */
    
    /* Couleurs & Verre */
    background: rgba(5, 10, 16, 0.9); /* Fond sombre quasi opaque */
    color: #64ffda; /* Flèche verte */
    border: 1px solid #64ffda; /* Bordure néon */
    backdrop-filter: blur(5px);
    
    /* Ombres & Glow */
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.2);
    
    /* Alignement icône */
    display: flex; /* Sera écrasé par le JS 'display: flex' quand visible */
    align-items: center; 
    justify-content: center;
    
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Typo icône */
    font-size: 1.2rem;
}

/* Effet au survol */
#backToTop:hover {
    background: rgba(100, 255, 218, 0.1); /* Fond vert léger */
    transform: translateY(-5px); /* Lévitation */
    box-shadow: 0 0 20px rgba(100, 255, 218, 0.6); /* Glow intense */
    color: #fff; /* Flèche blanche */
}

/* Classe ajoutée par JS pour le montrer */
#backToTop.show {
    display: flex;
    animation: fadeInUp 0.5s;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   16. MODALE CYBER SÉCURITÉ
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center; align-items: center;
    z-index: 20000; /* Très haut pour passer au dessus de tout */
}

.terminal-window {
    width: 400px; max-width: 90%;
    background-color: #0c0c0c;
    border: 1px solid #2196F3;
    box-shadow: 0 0 25px rgba(33, 150, 243, 0.4);
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
    animation: openWindow 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.terminal-header {
    background: #1a1a1a; padding: 10px; display: flex; align-items: center;
    border-bottom: 1px solid #333;
}
.red-dot, .yellow-dot, .green-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.red-dot { background: #ff5f56; } .yellow-dot { background: #ffbd2e; } .green-dot { background: #27c93f; }

.terminal-title { margin-left: 10px; color: #888; font-size: 0.8rem; letter-spacing: 1px; }

.terminal-body { padding: 30px; color: #2196F3; }
.lock-icon { text-align: center; font-size: 3rem; margin-bottom: 20px; color: #fff; text-shadow: 0 0 10px #2196F3; }
.status-text { margin: 5px 0; font-size: 0.9rem; opacity: 0.8; }

.input-container { display: flex; align-items: center; background: #000; border: 1px solid #333; padding: 10px; margin-top: 20px; }
.prompt-char { color: #27c93f; margin-right: 10px; font-weight: bold; }
#cyber-pass { background: transparent; border: none; color: #fff; width: 100%; font-family: inherit; font-size: 1.1rem; }

.message-log { height: 25px; margin-top: 15px; font-size: 0.85rem; text-align: center; font-weight: bold; }

.terminal-footer { display: flex; justify-content: space-between; margin-top: 25px; gap: 15px; }
.cyber-btn {
    flex: 1; padding: 10px; border: 1px solid #2196F3;
    background: rgba(33, 150, 243, 0.1); color: #2196F3;
    font-family: inherit; font-weight: bold; cursor: pointer;
    transition: all 0.3s; text-transform: uppercase;
}
.cyber-btn:hover { background: #2196F3; color: #000; box-shadow: 0 0 15px #2196F3; }
.cyber-btn.cancel { border-color: #ff5555; color: #ff5555; background: rgba(255, 85, 85, 0.1); }
.cyber-btn.cancel:hover { background: #ff5555; color: #000; box-shadow: 0 0 15px #ff5555; }

/* ==========================================================================
   17. ANIMATIONS
   ========================================================================== */
/* ANIMATION CASCADE (STAGGERED) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(200px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    will-change: opacity, transform; 
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes cyber-scan {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes float-logo {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } 
}

@keyframes shadow-breath {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); opacity: 0.6; } 
}

@keyframes openWindow {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ==========================================================================
   18. MEDIA QUERIES (RESPONSIVE GLOBAL)
   ========================================================================== */
/* Bouton Menu Mobile (Caché par défaut sur PC) */
.menu-toggle { display: none; }

/* --- TABLETTES & PETITS LAPTOPS (max 1024px) --- */
@media (max-width: 1024px) {
    /* --- BOUTON BURGER --- */
    .menu-toggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 15px; left: 15px; z-index: 1001;
        background-color: rgba(26, 26, 26, 0.9);
        color: var(--accent-color);
        border: 1px solid var(--accent-color); border-radius: 5px;
        width: 45px; height: 45px; cursor: pointer;
        backdrop-filter: blur(5px);
    }
    .menu-toggle i { font-size: 1.2rem; }

    /* --- SIDEBAR MOBILE --- */
    .sidebar {
        width: 260px;
        transform: translateX(-100%); /* Caché par défaut */
        background-color: #050a10 !important;
        padding-top: 20px;
    }
    .sidebar.active { transform: translateX(0); }

    /* --- CONTENU --- */
    .main-wrapper {
        margin-left: 0;
        width: 100%;
        padding-top: 80px;
    }
    
    .content { padding: 20px; }

    /* Grilles en 1 colonne */
    .featured-grid, .cards-container, .cert-grid, .semester-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; }
}

/* --- SMARTPHONES (max 768px) --- */
@media (max-width: 768px) {

    /* 1. BARRE DE NAVIGATION (CONTENEUR) */
    .page-nav { 
        width: 95%; 
        max-width: 400px;
        margin: 10px auto 20px auto; /* Centré */
        padding: 5px; 
        gap: 12px; /* Espacement entre les bulles */
        
        display: flex;
        justify-content: center; /* Centre les icônes */
        flex-wrap: nowrap;
        overflow-x: auto; /* Scroll horizontal si ça déborde */
        
        /* Esthétique */
        background: rgba(5, 10, 16, 0.95);
        border-radius: 50px;
    }
    .page-nav::-webkit-scrollbar { display: none; }

    /* 2. BOUTONS (BULLES RONDES) */
    .page-nav-link { 
        /* FORCE LA FORME RONDE */
        width: 45px !important; height: 45px !important;
        min-width: 45px !important; /* Empêche l'écrasement */
        border-radius: 50% !important;
        padding: 0 !important;
        
        /* CACHE LE TEXTE "COMPÉTENCES" ETC */
        font-size: 0 !important; 
        color: transparent !important;
        overflow: hidden !important; /* Coupe tout ce qui dépasse */
        
        /* ALIGNEMENT ICÔNE */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        flex: 0 0 auto; /* Ne s'étire pas */
        border: 1px solid rgba(100, 255, 218, 0.3);
    }
    
    /* 3. ICÔNES (VISIBLES) */
    .page-nav-link i {
        font-size: 1.3rem !important; /* Taille icône */
        color: #64ffda !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Active State Mobile */
    .page-nav-link.active-link {
        background: rgba(100, 255, 218, 0.2);
        border-color: #64ffda;
        box-shadow: 0 0 8px rgba(100, 255, 218, 0.4);
    }
    .page-nav-link.active-link i { color: #fff !important; }

    /* 4. RESTE DU LAYOUT MOBILE */
    .page-header h1 { font-size: 1.8em; }
    .project-img { width: 100% !important; }
    .btn-container { justify-content: center; }
    .terminal-window { width: 95%; }

    /* Footer */
    .footer-container { flex-direction: column; text-align: center; }
    .right-col { text-align: center; }

    /* 5. DÉSACTIVATION CURSEUR PERSO */
    #cursor-crosshair { display: none !important; opacity: 0 !important; }
    * { cursor: auto !important; }
}

/* ==========================================================================
   17. ANIMATIONS
   ========================================================================== */
@keyframes cyber-scan {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes float-logo {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } 
}

@keyframes shadow-breath {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); opacity: 0.6; } 
}

@keyframes openWindow {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ==========================================================================
   18. RESPONSIVE / MOBILE (METHODE DOUBLE MENU)
   ========================================================================== */

/* 1. PAR DÉFAUT (PC) : ON CACHE LE MENU MOBILE */
.nav-tel {
    display: none !important;
}

/* On s'assure que le menu PC est visible */
.nav-pc {
    display: flex !important;
}

/* Bouton Menu Burger (Caché sur PC) */
.menu-toggle { display: none; }


/* --- TABLETTES & PETITS PC (max 1024px) --- */
@media (max-width: 1024px) {
    /* (Ton code Burger / Sidebar existant reste ici...) */
    .menu-toggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 15px; left: 15px; z-index: 1001;
        background-color: rgba(26, 26, 26, 0.9);
        color: var(--accent-color);
        border: 1px solid var(--accent-color); border-radius: 5px;
        width: 45px; height: 45px; cursor: pointer;
        backdrop-filter: blur(5px);
    }
    .menu-toggle i { font-size: 1.2rem; }

    .sidebar {
        width: 260px;
        transform: translateX(-100%);
        background-color: #050a10 !important;
        padding-top: 20px;
    }
    .sidebar.active { transform: translateX(0); }

    .main-wrapper { margin-left: 0; width: 100%; padding-top: 80px; }
    .content { padding: 20px; }
    
    .featured-grid, .cards-container, .cert-grid, .semester-grid {
        grid-template-columns: 1fr;
    }
    .footer-content { flex-direction: column; text-align: center; }
}


/* --- SMARTPHONES (max 768px) --- */
@media (max-width: 768px) {

    /* A. BASCULE DES MENUS (SWAP) */
    
    /* On CACHE le menu PC (celui avec le texte) */
    .nav-pc {
        display: none !important;
    }

    /* On AFFICHE le menu Mobile (celui sans texte) */
    .nav-tel {
        display: flex !important;
        
        /* Style du conteneur mobile */
        width: 95%;
        max-width: 400px;
        margin: 10px auto 20px auto;
        padding: 5px 10px;
        gap: 15px; /* Espace entre les bulles */
        
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto; /* Scroll si besoin */
        background: rgba(5, 10, 16, 0.95);
        border-radius: 50px;
        
        /* Cache la scrollbar */
        scrollbar-width: none; 
    }
    .nav-tel::-webkit-scrollbar { display: none; }

    /* B. STYLE DES BOUTONS MOBILES (BULLES RONDES) */
    .nav-tel .page-nav-link {
        width: 45px !important;
        height: 45px !important;
        border-radius: 50% !important; /* Cercle parfait */
        padding: 0 !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        border: 1px solid rgba(100, 255, 218, 0.3);
        background: transparent;
    }
    
    /* C. STYLE DE L'ICÔNE MOBILE */
    .nav-tel .page-nav-link i {
        font-size: 1.3rem !important;
        color: #64ffda !important;
        margin: 0 !important;
    }
    
    /* Active State Mobile */
    .nav-tel .page-nav-link.active-link {
        background: rgba(100, 255, 218, 0.2);
        box-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
    }
    .nav-tel .page-nav-link.active-link i {
        color: #fff !important;
    }

    /* D. RESTE DU MOBILE (Curseur, etc.) */
    #cursor-crosshair { display: none !important; }
    * { cursor: auto !important; }
    
    .page-header h1 { font-size: 1.8em; }
    .project-img { width: 100% !important; }
    .terminal-window { width: 95%; }
}

/* ==========================================================================
   GESTION RESPONSIVE DES PDF
   ========================================================================== */

/* --- PAR DÉFAUT (PC) --- */
.pdf-container-pc {
    display: block;
    width: 100%;
}

.pdf-container-mobile {
    display: none; /* Caché sur PC */
}

/* Style de la frame PC (déjà présent normalement, mais je redonne pour être sûr) */
.pdf-frame {
    width: 100%;
    height: 80vh;
    min-height: 500px;
    border: 2px solid #333;
    border-radius: 8px;
    background: #fff;
}


/* --- VERSION MOBILE (max 768px) --- */
@media (max-width: 768px) {
    
    /* 1. On cache la visionneuse qui bug */
    .pdf-container-pc {
        display: none !important;
    }

    /* 2. On affiche la carte Mobile */
    .pdf-container-mobile {
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Style de la Carte Mobile */
    .mobile-pdf-card {
        background: rgba(5, 10, 16, 0.9);
        border: 1px solid var(--accent-color);
        border-radius: 12px;
        padding: 30px 20px;
        text-align: center;
        width: 100%;
        box-shadow: 0 0 15px rgba(100, 255, 218, 0.1);
    }

    .pdf-icon-mobile {
        font-size: 3rem;
        color: var(--accent-color);
        margin-bottom: 15px;
    }

    .mobile-pdf-card h3 {
        color: #fff;
        margin-bottom: 10px;
        font-family: 'Courier New', monospace;
    }

    .mobile-pdf-card p {
        color: #8892b0;
        font-size: 0.9rem;
        margin-bottom: 25px;
    }

    /* Bouton Mobile Cyber */
    .cyber-btn-mobile {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 25px;
        background: var(--accent-color); /* Fond plein pour visibilité */
        color: #050a10; /* Texte sombre */
        font-weight: bold;
        text-decoration: none;
        border-radius: 50px;
        box-shadow: 0 0 15px rgba(100, 255, 218, 0.4);
        transition: transform 0.2s;
    }

    .cyber-btn-mobile:active {
        transform: scale(0.95);
    }
}