/* VARIABLES GLOBALES ET RESET */
:root {
    --color-dark-bg: #0d1117; /* Fond très sombre */
    --color-secondary-bg: #161b22; /* Fond pour les cartes */
    --color-text-light: #c9d1d9; /* Texte principal clair */
    --color-text-secondary: #8b949e; /* Texte secondaire */
    --color-accent: #007acc; /* Couleur d'accent (bleu/cyan pour la tech) */
    --color-accent-hover: #005f99; 
    --color-danger: #e34c26; /* Rouge pour les alertes ou l'accentuation spécifique */
    --color-highlight: #ffaa00; /* Or/Jaune pour les titres majeurs */
    --color-border: #30363d; /* Bordures subtiles */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

body {
    font-family: var(--font-primary);
    background-color: var(--color-dark-bg);
    color: var(--color-text-light);
    line-height: 1.6;
}

/* UTILITAIRES */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    color: var(--color-text-light);
    margin-bottom: 15px;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--color-accent-hover);
}

/* BOUTONS */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-dark-bg);
    border: 2px solid var(--color-accent);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* HEADER ET NAVIGATION */
.header {
    background-color: var(--color-secondary-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    margin: 0;
    font-size: 1.5em;
    color: var(--color-accent);
}

.header ul {
    list-style: none;
    display: flex;
}

.header ul li a {
    color: var(--color-text-light);
    margin-left: 25px;
    padding: 5px 0;
}
.header ul li a:hover {
    color: var(--color-highlight);
    border-bottom: 2px solid var(--color-highlight);
}

/* SECTION HERO (ACCUEIL) */
.hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 100px 0;
}

.hero .container {
    max-width: 800px;
}

.hero h1 {
    font-size: 3.5em;
    margin-bottom: 10px;
    color: var(--color-highlight);
}

.hero .subtitle {
    font-size: 1.5em;
    color: var(--color-text-secondary);
    margin-bottom: 40px;
}

.hero-actions a {
    margin: 0 10px;
}

/* SECTIONS GÉNÉRALES */
section {
    padding: 80px 0;
    border-bottom: 1px solid var(--color-border);
}

.section-content {
    padding: 80px 0;
    border-bottom: 1px solid var(--color-border);
}

.section-secondary {
    background-color: var(--color-secondary-bg);
}


/* --- STYLES SPÉCIFIQUES --- */

/* SECTION À PROPOS (index.html) */
.about-summary {
    background-color: var(--color-secondary-bg);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.about-summary ul {
    list-style-type: '» ';
    padding-left: 25px;
    margin-top: 15px;
    color: var(--color-text-light);
}
.about-summary ul li {
    margin-bottom: 10px;
}

/* SECTION COMPÉTENCES CLÉS (index.html) */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.skill-card {
    background-color: var(--color-dark-bg);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: transform 0.3s, border-color 0.3s;
    text-align: center;
}
.skill-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
}
.skill-card h4 {
    color: var(--color-accent);
    font-size: 1.1em;
    margin-bottom: 10px;
}
.skill-card p {
    color: var(--color-text-secondary);
    font-size: 0.9em;
}

/* SECTION CERTIFICATS (certificats.html) */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.cert-card {
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    background-color: var(--color-secondary-bg);
}

/* Styles pour le grand certificat professionnel */
.main-certification-card {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}


/* SECTION EXPÉRIENCE (experience.html) */
.job-card {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.job-achievements {
    line-height: 1.5;
}
.job-achievements li {
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}
.job-achievements li span {
    color: var(--color-text-light);
}

/* SECTION PROJETS & DOCUMENTS (projets.html & documents.html) */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.project-card {
    background-color: var(--color-secondary-bg);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.3s, transform 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

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

.project-card h4 {
    color: var(--color-highlight); 
    margin-top: 0;
}

.project-tags {
    margin-top: 10px;
    margin-bottom: 15px;
}

.project-tags span {
    display: inline-block;
    background-color: var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 5px;
}

.project-link {
    display: inline-block;
    margin-top: 15px;
    font-weight: bold;
}

/* STYLES pour les visionneuses PDF */
.pdf-viewer {
    width: 100%;
    height: 600px; /* Grande taille pour la page documents */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
}
.pdf-viewer embed {
    display: block;
}

/* SECTION FORMATION (formation.html) - Flexbox pour F5 Viewer et Programme */

/* Flex container pour l'affichage côte à côte (desktop) */
.formation-content-layout {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

/* F5 Viewer Column (Left) */
.formation-viewer-column {
    flex: 1;
    min-width: 300px;
}

/* Program Details Column (Right) */
.formation-program-column {
    flex: 2;
}

/* Styles spécifiques à l'embed F5 dans la formation */
.document-viewer-small {
    padding: 15px;
    border: 1px dashed var(--color-border);
    border-radius: 5px;
    background-color: var(--color-dark-bg);
}

.pdf-viewer-embed {
    width: 100%;
    height: 350px; 
    overflow: hidden;
}


/* TIMELINE (FORMATION & EXPÉRIENCE) */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 40px auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--color-accent);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    background-color: var(--color-secondary-bg); 
    margin-bottom: 30px; 
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    right: -8px;
    background-color: var(--color-dark-bg);
    border: 4px solid var(--color-accent);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Placement à gauche (pour alterner) */
.timeline-item:nth-child(even) {
    left: 0;
}

/* Placement à droite */
.timeline-item:nth-child(odd) {
    left: 50%;
}

/* Flèche à droite */
.timeline-item:nth-child(odd)::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    left: 30px;
    border: medium solid var(--color-secondary-bg);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--color-secondary-bg) transparent transparent;
}

/* Flèche à gauche */
.timeline-item:nth-child(even)::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    right: 30px;
    border: medium solid var(--color-secondary-bg);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--color-secondary-bg);
}

.timeline-item:nth-child(odd)::after {
    left: -8px;
}

.meta {
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: 5px;
}

.label-info { /* Style pour les labels comme ANSSI SecNumÉdu */
    background-color: var(--color-dark-bg);
    padding: 10px;
    border-left: 3px solid var(--color-highlight); /* Or/Jaune pour la reconnaissance */
    margin-top: 15px;
    border-radius: 5px;
    font-size: 0.95em;
    color: var(--color-text-secondary);
}

.sub-timeline h6.timeline-title {
    color: var(--color-accent);
    margin-top: 20px;
    border-bottom: 1px dotted var(--color-border);
    padding-bottom: 5px;
}
.sub-timeline ul {
    list-style-type: none;
    padding-left: 0;
}

.sub-timeline li {
    margin-bottom: 10px;
    padding-left: 15px;
    position: relative;
    color: var(--color-text-secondary);
}
.sub-timeline li span {
    color: var(--color-text-light);
}

.sub-timeline li::before {
    content: '»'; /* Utiliser une puce différente */
    color: var(--color-accent);
    font-weight: bold;
    position: absolute;
    left: 0;
}


/* FOOTER */
footer {
    background-color: var(--color-secondary-bg);
    color: var(--color-text-secondary);
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.9em;
}


/* MEDIA QUERY pour la réactivité */
@media screen and (max-width: 768px) {
    /* Header pour mobile */
    .header .container {
        flex-direction: column;
    }

    .header h1 {
        margin-bottom: 10px;
    }
    
    .header ul {
        justify-content: center;
        flex-wrap: wrap; /* Permet aux liens de passer à la ligne */
    }
    .header ul li a {
        margin: 5px 10px;
        font-size: 0.9em;
    }
    
    /* Hero pour mobile */
    .hero h1 {
        font-size: 2.5em;
    }
    
    .hero .subtitle {
        font-size: 1.2em;
    }
    
    .hero-actions a {
        display: block;
        margin: 10px 0;
    }

    /* Timeline pour mobile (mode colonne simple) */
    .timeline::after {
        left: 31px;
    }
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    .timeline-item:nth-child(odd), 
    .timeline-item:nth-child(even) {
        left: 0;
    }
    /* Correction de la flèche de l'item pair/impair pour le mobile */
    .timeline-item:nth-child(odd)::before,
    .timeline-item:nth-child(even)::before {
        border: medium solid var(--color-secondary-bg);
        border-width: 10px 10px 10px 0;
        border-color: transparent var(--color-secondary-bg) transparent transparent;
        left: 60px;
        right: auto; /* Annule le 'right: 30px' du desktop */
    }
    /* Déplacement du point de cercle sur la ligne */
    .timeline-item::after, .timeline-item:nth-child(odd)::after {
        left: 23px;
        right: auto;
    }

    /* Formation content stacking */
    .formation-content-layout {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Ensure columns take full width on mobile */
    .formation-viewer-column,
    .formation-program-column {
        min-width: 100%;
        flex: none; /* Remove flex weighting on mobile */
    }
    .pdf-viewer-embed {
        height: 400px; /* Légèrement plus haut sur mobile pour la lisibilité */
    }
}