:root {
    /* Palette Dark Mode "Kothan Romeo" */
    --bg: #111111;          /* Noir mat */
    --card-bg: #161616;     /* Fond des cartes */
    --card-hover: #1d1d1d;  /* Fond au survol */
    --fg: #EDEDED;          /* Texte principal (Blanc cassé) */
    --muted: #888888;       /* Texte secondaire (Gris) */
    --faint: #333333;       /* Bordures subtiles */
    --accent: #ffffff;      /* Blanc pur */
    --font: 'Inter', sans-serif;
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* --- CONTENEUR PRINCIPAL (Élargi pour le menu) --- */
.container {
    max-width: 720px; /* Passé à 720px pour faire tenir le menu */
    margin: 0 auto;
    padding: 80px 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* --- HEADER --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
}
.name { font-size: 1.4rem; font-weight: 700; color: var(--fg); margin-bottom: 4px; letter-spacing: -0.02em; }
.job { font-size: 1.1rem; color: var(--muted); font-weight: 500; margin-bottom: 16px; }
.bio { color: var(--muted); max-width: 420px; font-size: 0.95rem; }

.avatar-placeholder {
    width: 80px; height: 80px;
    background-color: var(--card-bg);
    border-radius: 50%;
    border: 1px solid var(--faint);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--muted);
}

/* --- NAVIGATION (Corrige : Centrée, Espacée, Sans bordure) --- */
.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centré */
    gap: 30px; /* Bien espacé */
    margin-bottom: 60px;
    padding: 0;
    border: none; /* Pas de bordure */
    width: 100%;
}

.nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;
    white-space: nowrap; /* Empêche de passer à la ligne */
}

.nav-links a:hover {
    color: var(--fg);
}

/* Trait de soulignement au survol */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: var(--accent);
    transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.accent-link { color: var(--fg) !important; }

/* --- SECTIONS GLOBALES --- */
.section { margin-bottom: 80px; }
.section-title {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--muted); margin-bottom: 24px; font-weight: 600;
}
.text-muted { color: var(--muted); }

/* About */
.about-container { display: flex; gap: 20px; }
.terminal-icon { font-size: 2rem; color: var(--faint); margin-top: -5px; }

/* --- CERTIFICATIONS --- */
.cert-grid { display: flex; flex-direction: column; gap: 15px; }
.cert-item {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.cert-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cert-title { color: var(--fg); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cert-title ion-icon { color: var(--accent); }
.cert-date { color: var(--muted); font-size: 0.9rem; }
.cert-details { color: var(--muted); font-size: 0.9rem; margin-bottom: 15px; }
.view-cert-link {
    font-size: 0.85rem; color: var(--fg); font-weight: 500;
    display: flex; align-items: center; gap: 6px;
}

/* --- COMPÉTENCES & OUTILS (Capsules) --- */
.skill-block { margin-bottom: 30px; }
.skill-category { display: block; color: var(--fg); font-weight: 500; margin-bottom: 12px; font-size: 0.9rem; }
.skills-flex { display: flex; flex-wrap: wrap; gap: 10px; }

.skill-capsule {
    display: flex; align-items: center; gap: 10px;
    background-color: var(--card-bg);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.skill-capsule ion-icon { font-size: 1.3rem; color: var(--muted); transition: color 0.2s ease; }
.skill-capsule span { font-size: 0.85rem; font-weight: 500; color: var(--muted); transition: color 0.2s ease; }

.skill-capsule:hover {
    background-color: var(--card-hover);
    transform: translateY(-2px);
    border-color: var(--faint);
}
.skill-capsule:hover ion-icon, .skill-capsule:hover span { color: var(--fg); }

/* --- PARCOURS (Timeline) --- */
.timeline-group { margin-top: 20px; }
.timeline-subtitle { display: flex; align-items: center; gap: 10px; color: var(--fg); font-size: 1rem; font-weight: 600; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid var(--faint); }
.timeline-subtitle ion-icon { color: var(--muted); font-size: 1.2rem; }

.timeline-item { display: flex; gap: 0; margin-bottom: 35px; }
.timeline-marker {
    flex-shrink: 0; width: 12px; height: 12px;
    border-radius: 50%; background: var(--card-bg);
    border: 2px solid var(--faint);
    margin-top: 6px; margin-right: 20px; margin-left: 5px;
    position: relative;
}
.timeline-item:not(:last-child) .timeline-marker::after {
    content: ''; position: absolute;
    top: 12px; left: 3px; width: 2px;
    height: calc(100% + 35px); background: var(--faint);
}

.timeline-content { flex-grow: 1; border-radius: 10px; transition: all 0.2s ease; }
.timeline-header { display: flex; justify-content: space-between; margin-bottom: 4px; flex-wrap: wrap; }
.company { color: var(--fg); font-weight: 600; }
.date { color: var(--muted); font-size: 0.85rem; }
.role { color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.description { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

/* Interactivité (Parcours & Certifs) */
.interactive-item { cursor: pointer; }
.timeline-content.interactive-item {
    padding: 15px;
    background-color: transparent;
    border: 1px solid transparent;
    margin-top: -15px; margin-left: -15px; /* Compensation visuelle */
}
.interactive-item:hover {
    background-color: var(--card-bg);
    border-color: var(--faint);
    transform: translateY(-2px);
}

/* --- PROJETS --- */
.project-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.project-card {
    display: flex; align-items: flex-start; gap: 16px;
    text-decoration: none; background: var(--card-bg);
    padding: 20px; border-radius: 10px;
    border: 1px solid transparent; transition: all 0.2s ease;
}
.project-card:hover {
    background: var(--card-hover);
    transform: translateY(-2px);
    border-color: var(--faint);
}
.project-thumb {
    flex-shrink: 0; width: 50px; height: 50px;
    background: var(--bg); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--faint);
}
.project-thumb ion-icon { font-size: 1.5rem; color: var(--muted); transition: color 0.2s; }
.project-card:hover .project-thumb ion-icon { color: var(--fg); }
.project-name { color: var(--fg); font-size: 1rem; margin-bottom: 6px; font-weight: 600; }
.project-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* --- FOOTER --- */
.footer {
    margin-top: 100px; padding-top: 30px;
    border-top: 1px solid var(--faint);
    color: var(--muted); font-size: 0.85rem;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a {
    color: var(--muted); text-decoration: none;
    display: flex; align-items: center; gap: 6px;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--fg); }

/* ========================================= */
/* STYLES DE LA MODALE (Fenêtre Popup) */
/* ========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); z-index: 1000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 20px;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-content-box {
    position: relative; background: var(--card-bg); padding: 10px;
    border-radius: 12px; border: 1px solid var(--faint);
    max-width: 650px; width: 100%; max-height: 90vh;
    display: flex; flex-direction: column;
    transform: scale(0.95); transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content-box { transform: scale(1); }

.close-modal {
    position: absolute; top: -40px; right: 0;
    font-size: 2rem; color: var(--fg);
    cursor: pointer; transition: color 0.2s;
}
.close-modal:hover { color: var(--accent); }

/* Image Certif */
#modal-image { max-width: 100%; max-height: 80vh; border-radius: 8px; display: block; margin: 0 auto; }

/* Texte Rapport Stage */
.hidden-details { display: none; }
#modal-text-container { width: 100%; padding: 25px; overflow-y: auto; }

.modal-title { color: var(--fg); font-size: 1.5rem; margin-bottom: 5px; border-bottom: 1px solid var(--faint); padding-bottom: 15px; margin-bottom: 25px; }
.modal-subtitle { color: var(--accent); font-size: 0.95rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 25px; }

.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media(max-width: 600px) { .modal-grid { grid-template-columns: 1fr; gap: 15px; } }

.modal-column p { color: var(--muted); font-size: 0.95rem; margin-bottom: 6px; }
.modal-column strong { color: var(--fg); }
.modal-column a { color: var(--fg); text-decoration: underline; }

.modal-divider { border: 0; border-top: 1px solid var(--faint); margin: 30px 0; }

.modal-list { list-style: none; padding-left: 5px; }
.modal-list li {
    position: relative; padding-left: 20px; margin-bottom: 8px;
    color: var(--muted); font-size: 0.95rem;
}
.modal-list li::before {
    content: '•'; position: absolute; left: 0;
    color: var(--accent); font-weight: bold;
}

/* Bouton Download */
.download-section { text-align: center; margin-top: 30px; margin-bottom: 10px; }
.download-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background-color: var(--fg); color: var(--bg);
    padding: 12px 24px; border-radius: 6px;
    font-weight: 600; text-decoration: none;
    transition: transform 0.2s, background-color 0.2s;
}
.download-btn:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,255,255,0.15);
}

/* --- STYLES SPÉCIFIQUES PAGE PROJET --- */

/* Bouton Retour */
.back-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--muted); text-decoration: none;
    font-size: 0.9rem; margin-bottom: 40px;
    transition: color 0.2s;
}
.back-link:hover { color: var(--fg); }

/* Header Projet */
.project-header-page { margin-bottom: 50px; border-bottom: 1px solid var(--faint); padding-bottom: 30px; }
.project-title-big { font-size: 2rem; font-weight: 700; color: var(--fg); margin-bottom: 15px; }
.project-meta { display: flex; gap: 10px; }
.tag {
    background: var(--card-bg); color: var(--muted);
    padding: 5px 12px; border-radius: 4px; font-size: 0.8rem;
    border: 1px solid var(--faint);
}

/* Images du projet */
.project-img {
    width: 100%; height: auto; border-radius: 8px;
    margin: 20px 0; border: 1px solid var(--faint);
    /* Petit effet d'ombre pour ressortir */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Liste à puces projet */
.project-list { list-style: none; margin: 20px 0; padding-left: 10px; }
.project-list li {
    position: relative; padding-left: 20px; margin-bottom: 10px;
    color: var(--muted);
}
.project-list li::before {
    content: '➜'; position: absolute; left: 0; color: var(--accent); font-size: 0.8rem;
}

/* Carte Service (pour décrire OMV, Pihole...) */
.service-card {
    background: var(--card-bg); padding: 20px;
    border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--faint);
}
.service-card h4 { color: var(--fg); margin-bottom: 10px; }
/* --- IMAGES PROJET (VERSION PROPRE SANS BORDURE) --- */

/* 1. Le conteneur (La boîte invisible autour de l'image) */
.image-container-box {
    /* On le met en bloc pour pouvoir le centrer */
    display: block;
    
    /* Centrage horizontal parfait */
    margin: 40px auto; 
    
    /* Taille de l'image */
    max-width: 400px; 
    width: 100%;
    
    /* On enlève toutes les bordures et fonds gris */
    border: none;
    background: transparent;
    
    /* Juste une belle ombre pour le relief */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 12px;
    
    /* Interaction */
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. L'image elle-même */
.project-img {
    width: 100%;
    height: auto;
    
    /* "display: block" est CRUCIAL pour éviter une ligne vide sous l'image */
    display: block; 
    
    border-radius: 12px; /* L'image suit l'arrondi */
    margin: 0;
    border: none;
}

/* 3. Effet au survol (Juste le zoom, pas de bordure) */
.image-container-box:hover {
    transform: scale(1.03); /* Zoom léger et fluide */
    box-shadow: 0 15px 40px rgba(0,0,0,0.7); /* L'ombre grandit un peu */
}