body {
    background: #f5f5f5;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.dark-mode {
    background: #1a1a1a;
    color: #f5f5f5;
}
h1 {
    font-weight: bold;
    font-size: x-large;
    letter-spacing: .02rem;
}
h2, h3 {
    font-weight: bold;
    font-size: larger;
    /*text-decoration: underline;*/
}
.cv-container {
    max-width: 1200px;
    margin: 2rem auto;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.08);
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.dark-mode .cv-container {
    background: rgba(42, 42, 42, 0.9);
    color: #f5f5f5;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.3);
}

/* Animation douce des tabs */
.nav-tabs .nav-item .nav-link {
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

/* Effet de "lift" au survol de l'onglet */
.nav-tabs .nav-item:hover .nav-link {
    transform: translate3d(0, -.125rem, 0);
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .08);
}


.cv-left {
    background: transparent;
    min-height: 100%;
    transition: background-color 0.3s ease;
}
body.dark-mode .cv-left {
    background: transparent;
}
.photo-wrapper {
    width: 140px;
    height: 140px;
    border-radius: .5rem;
    overflow: hidden;
    background: #d9d9d9;
}
.section-title-sm {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.cv-main-title {
    font-weight: 700;
    letter-spacing: .02rem;
}
@media (min-width: 992px) {
    .cv-left {
        min-height: 100%;
    }
}
.photo-offset-top {
    object-position: 65% 25%;
    transform: scale(1.2);
}

/* Section en-tête unifiée */
.cv-header {
    background: transparent;
    padding: 2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.dark-mode .cv-header {
    background: transparent;
}

/* Toggle mode sombre */
.theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}
.theme-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
body.dark-mode .theme-toggle-btn {
    background: #2a2a2a;
    border-color: #555;
    color: #ffd700;
}
.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

/* Ajustements pour le mode sombre */
body.dark-mode .text-dark {
    color: #f5f5f5 !important;
}
body.dark-mode .link-primary {
    color: #8ab4f8 !important;
}
body.dark-mode .border-dark-subtle {
    border-color: #555 !important;
}
body.dark-mode .btn-outline-secondary {
    color: #f5f5f5;
    border-color: #888;
}
body.dark-mode .btn-outline-secondary:hover {
    background-color: #888;
    border-color: #888;
    color: #1a1a1a;
}

/* === Personnalisation des tabs === */

/* Container des tabs */
.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

/* Mode sombre - bordure des tabs */
body.dark-mode .nav-tabs {
    border-bottom-color: #555;
}

/* Texte des onglets (body / cv-container) */
.nav-tabs .nav-link,
.nav-tabs .nav-link.disabled {
    color: inherit;
}

/* Onglet actif */
.nav-tabs .nav-link.active {
    color: inherit;
    background-color: transparent;
    border: 1px solid #dee2e6;
    border-bottom-color: transparent;
    margin-bottom: -1px; /* Oui je triche pour retirer la bordure du bas, pourquoi tu fouines ? 👀 */
}

/* Mode sombre - onglet actif */
body.dark-mode .nav-tabs .nav-link.active {
    background-color: transparent;
    border-color: #555;
    border-bottom-color: transparent;
}

/* Hover sur mes onglets inactifs */
.nav-tabs .nav-link:not(.active):hover {
    color: #8ab4f8;
    background-color: rgba(0, 0, 0, 0.05);
    border-color: transparent;
}

/* Hover sur mes onglets inactifs - mode sombre */
body.dark-mode .nav-tabs .nav-link:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* === Tabs Bootstrap : affichage empilé sur la version mobile === */
@media (max-width: 596px) {

    /* On autorise le retour à la ligne et on centre le contenu */
    .nav-tabs .nav-link,
    .nav-tabs .nav-link.disabled {
        white-space: normal;          /* override du nowrap Bootstrap */
        display: flex;
        flex-direction: column;       /* icône au-dessus du texte */
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.25rem;
        font-size: 0.9rem;
        padding-top: 0.5rem;
        /*padding-bottom: 0.5rem;*/
    }

    /* Les items prennent 100 % de largeur => 1 onglet par ligne */
    .nav-tabs.nav-justified {
        flex-wrap: wrap;
    }

    .nav-tabs.nav-justified .nav-item {
        flex: 0 0 100%;
    }

    /* Légère réduction de la taille des SVG sur mobile */
    .nav-tabs .nav-link svg {
        width: 18px;
        height: 18px;
    }
}

/* === Tabs Bootstrap : mise en forme fine des labels de tabs sur très petit écran === */
@media (max-width: 480px) {

    /* Pour les tabs marqués .tab-multiline :
       - chaque ligne de texte devient un bloc => 2 lignes de texte sous l'icône */
    .tab-multiline .tab-text-line1,
    .tab-multiline .tab-text-line2 {
        display: block;
    }

    /* Optionnel : légère réduction de la taille de police pour éviter les retours intempestifs */
    .tab-multiline .tab-text {
        font-size: 0.85rem;
        line-height: 1.1;
    }

    /* Optionnel : un petit espace entre icône et bloc texte si besoin */
    .tab-multiline {
        gap: 0.15rem;
    }
}
/*===================== Gestion des particules */
/*mode clair*/
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #f8f9fa;
}
/*mode sombre*/
body.dark-mode #particles-js {
    background-color: #1a1a1a;
}
.content-wrapper {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/*==================== Gestion de la timeline */
:root {
    --tl-bg: #ffffff;
    --tl-track: #8c0000;
    --tl-expernet: #009BDE; /* bleu demandé */
    --tl-enterprise: #F5C84C; /* jaune neutre demandé */
    --tl-event-text-dark: #042033;
    --tl-today: #e02424;
    --tl-tooltip-bg: rgba(10, 25, 40, 0.95);
    --tl-tooltip-color: #fff;
}

body.dark-mode {
    --tl-bg: #0f1724;
    --tl-track: #18202b;
    --tl-expernet: #007bb8; /* légèrement atténué en mode sombre */
    --tl-enterprise: #e6c26a;
    --tl-event-text-dark: #eaf6ff;
    --tl-today: #ff4242;
    --tl-tooltip-bg: rgba(230, 235, 245, 0.95);
    --tl-tooltip-color: #04102a;
}

/* -------- TIMELINE (responsive, scroll horizontal) - 80% width -------- */
.timeline-wrapper {
    width: 80%;               /* <-- occupy 80% of parent container */
    margin: 0 auto;           /* center inside parent */
    background: transparent;
    padding: 0.5rem 0.25rem;
    box-sizing: border-box;
    overflow-x: auto;               /* scroll horizontal */
    -webkit-overflow-scrolling: touch;
}

/* Track qui contient l'inner wide rail */
.timeline-track {
    position: relative;
    height: 120px;
    min-height: 100px;
    border-radius: 0.5rem;
    background: transparent;
    padding: 1rem 0.5rem;
    width: 100%; /* <-- MODIFICATION: Occupe 100% de son parent .timeline-wrapper */
    margin: 0;
}

/* Events container becomes the wide rail */
.timeline-events {
    position: relative;
    height: 100%;
    z-index: 2;
    min-width: 800px; /* fallback; JS will override width according to timeline span */
    pointer-events: none;
}

/* central baseline - MODIFICATION: Appliquée à .timeline-events au lieu de .timeline-track */
.timeline-events::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #8C0000FF, #008b17);
    border-radius: 6px;
    z-index: 1;
}

/* one event segment (rectangular style) */
.timeline-event {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 38px;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 10px 24px rgba(2,6,23,0.06);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    border: 1px solid rgba(0,0,0,0.04);
    z-index: 5; /* S'assure que les événements sont au-dessus de la barre ::after */
}

/* Top row vs bottom row for readability (modules top, entreprise bottom) */
.timeline-event.row-top {
    transform: translateY(-140%);
}
.timeline-event.row-bottom {
    transform: translateY(40%);
}

/* Colors: Expernet (haut) and Entreprise (bas) */
.timeline-event.type-module { /* campus / modules -> bleu */
    background: linear-gradient(180deg, rgba(255,255,255,0.96), var(--tl-expernet));
    color: var(--tl-event-text-dark);
    border-color: rgba(0,0,0,0.06);
}

body.dark-mode .timeline-event.type-module {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), var(--tl-expernet));
    color: var(--tl-event-text-dark);
    border-color: rgba(255,255,255,0.04);
}

.timeline-event.type-entreprise { /* entreprise -> jaune neutre */
    background: linear-gradient(180deg, rgba(255,255,255,0.96), var(--tl-enterprise));
    color: var(--tl-event-text-dark);
    border-color: rgba(0,0,0,0.06);
}

body.dark-mode .timeline-event.type-entreprise {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), var(--tl-enterprise));
    color: var(--tl-event-text-dark);
}

/* current marker on the segment */
.timeline-event.current {
    outline: 3px solid rgba(224,36,36,0.12);
    box-shadow: 0 18px 38px rgba(224,36,36,0.10);
    transform: scale(1.03);
    z-index: 6;
}

/* today vertical line */
.timeline-today {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--tl-today);
    left: 0;
    transform: translateX(-50%);
    z-index: 8;
    box-shadow: 0 0 10px rgba(224,36,36,0.8);
    border-radius: 2px;
}

/* tooltip */
#timeline-tooltip {
    position: fixed;
    z-index: 9999;
    padding: .6rem .9rem;
    border-radius: .5rem;
    background: var(--tl-tooltip-bg);
    color: var(--tl-tooltip-color);
    font-size: .9rem;
    max-width: 340px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .12s ease, transform .12s ease;
}

/* badge "Actuellement" (inseré sous le h2) */
.timeline-current-badge {
    display: inline-block;
    margin-left: .75rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    vertical-align: middle;
    background: rgba(0,0,0,0.06);
    color: var(--tl-event-text-dark);
    border: 1px solid rgba(0,0,0,0.06);
}

body.dark-mode .timeline-current-badge {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
    color: var(--tl-event-text-dark);
}

/* small visual helpers */
.timeline-event .label {
    font-weight: 700;
    font-size: .92rem;
}
.timeline-event .sub {
    font-weight: 400;
    font-size: .78rem;
    opacity: .88;
    margin-left: .4rem;
}

/* responsive adjustments */
@media (max-width: 768px) {
    .timeline-track { height: 180px; }
    .timeline-event { font-size: .82rem; height: 44px; padding: 8px 10px; border-radius: 10px; }
    .timeline-event.row-top { transform: translateY(-180%); }
    .timeline-event.row-bottom { transform: translateY(80%); }
}


/* ===== Scrollbar styling for timeline-wrapper (WebKit + Firefox) ===== */

/* General: make the scrollbar thin and overlay-like */
/* Wrapper (80% width) with semi-transparent grey background */
.timeline-wrapper {
    width: 80%;               /* conserve la contrainte 80% */
    margin: 0 auto;           /* center inside parent */
    background: rgba(18, 24, 32, 0.04); /* gris transparent discret */
    padding: 0.5rem 0.25rem;
    box-sizing: border-box;
    overflow-x: auto;               /* scroll horizontal */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--tl-expernet) transparent; /* Firefox */
    border-radius: 0.6rem;
    border: 1px solid rgba(0,0,0,0.03);
}
/* Dark mode: slightly darker transparent background */
body.dark-mode .timeline-wrapper {
    background: rgba(201, 201, 201, 0.22);
    border: 1px solid rgba(255,255,255,0.03);
}

/* WebKit browsers (Chrome, Edge, Safari desktop) */
.timeline-wrapper::-webkit-scrollbar {
    height: 10px;              /* horizontal scrollbar height */
    background: transparent;   /* track background (makes it overlay-like) */
}

.timeline-wrapper::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
    margin: 6px 0;             /* optional spacing from edges */
}

.timeline-wrapper::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0.08));
    box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset;
    border: 2px solid rgba(255,255,255,0.12); /* subtle outline to separate from content */
    transition: background .18s ease, transform .12s ease;
}

/* Thumb color using your variables — light mode */
.timeline-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06));
}

/* Thumb hover/active feedback */
.timeline-wrapper:hover::-webkit-scrollbar-thumb,
.timeline-wrapper::-webkit-scrollbar-thumb:hover {
    transform: scaleY(1.06);
    background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(0,0,0,0.10));
}

/* Dark mode: adapt colors with variables */
body.dark-mode .timeline-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 2px solid rgba(255,255,255,0.03);
    box-shadow: 0 1px 0 rgba(0,0,0,0.16) inset;
}
body.dark-mode .timeline-wrapper:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
}

/* Optional: a more visible colored thumb (expernet blue) if you prefer */
.timeline-wrapper.use-colored-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--tl-expernet), rgba(0,0,0,0.06));
    border: 2px solid rgba(255,255,255,0.06);
}
body.dark-mode .timeline-wrapper.use-colored-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--tl-expernet), rgba(255,255,255,0.02));
}

/* Optional: hide scrollbar until hover (very clean) */
.timeline-wrapper.scrollbar-on-hover::-webkit-scrollbar {
    height: 0;
}
.timeline-wrapper.scrollbar-on-hover:hover::-webkit-scrollbar {
    height: 10px;
}

/* Keep firefox consistent when using colored thumb */
.timeline-wrapper.use-colored-scrollbar {
    scrollbar-color: var(--tl-expernet) transparent;
}

/* Accessibility: ensure contrast when focused */
.timeline-wrapper:focus-within::-webkit-scrollbar-thumb {
    outline: 2px solid rgba(0,0,0,0.08);
}

/* Fallback: if browser doesn't support custom scrollbars, nothing breaks */

@media (max-width: 768px) {
    .footer-counters {
        display: block;
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* Paramètres pour la neige */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.snowflake {
    position: absolute;
    top: -10px;
    /*color: #ff0000;*/
    font-size: 1em;
    font-family: Arial, sans-serif;
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}