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

:root {
    --primary: rgb(37, 99, 235);
    --primary-dark: #1e40af;
    --secondary: #0ea5e9;
    --dark: #0f172a;
    --dark-light: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --success: #10b981;
    --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

html {
    font-size: 112%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--dark);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

nav.scrolled {
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
    padding: 0.5rem 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient);
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu span {
    width: 25px;
    height: 3px;
    background: var(--text);
    transition: all 0.3s;
}

/* Hero Section */
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark);
    position: relative;
    overflow: visible;
    padding: 2rem;
    padding-top: 6rem;
}

.hero::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: var(--gradient);
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    top: -200px;
    right: -200px;
    animation: float 20s infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, 50px) scale(1.1); }
}

.hero-content {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: slideInLeft 1s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-text h2 {
    font-size: 1.8rem;
    color: var(--text);
    margin-bottom: 1rem;
    font-weight: 400;
}

.hero-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.8;
    width: 150%;
}

.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem 1rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.timeline-line {
    position: absolute;
    top: 72px; /* place la frise sous les pastilles */
    left: 1rem;
    right: 1rem;
    height: 6px; /* plus visible */
    background: linear-gradient(90deg,
        rgba(102,126,234,0.35) 0%,
        rgba(59,130,246,1) 50%,
        rgba(102,126,234,0.35) 100%);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(59,130,246,0.35);
    transform: none;
    z-index: 0;
}

.timeline-item {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(33.333% - 1rem);
    min-width: 220px;
    padding-top: 3.5rem; /* espace pour la pastille/date */
    z-index: 2;
}

/* Date : positionnée au-dessus de la ligne, centrée par rapport à l'item */
.timeline-date {
    position: absolute;
    top: 56px; /* place la bulle juste au-dessus de la frise (ajuster si nécessaire) */
    left: 50%;
    transform: translate(-50%, -100%); /* ancre la base de la bulle juste au-dessus de la frise */
    display: inline-block;
    background: var(--gradient);
    color: white;
    padding: 0.25rem 0.7rem;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 5;
    box-shadow: 0 6px 18px rgba(59,130,246,0.16);
    border: 2px solid rgba(15,23,42,0.85);
}

/* Éloigner un peu la carte pour éviter chevauchement avec la date */
.timeline-content {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem 2rem;
    width: 92%;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    transition: all 0.25s ease;
    position: relative;
    margin-top: 1.6rem; /* augmenté pour laisser place à la date */
    font-size: 0.95rem;
}

/* masquer les flèches/connexion précédentes */
.timeline-content::before {
    display: none;
}

/* titre/date plus compact */
.timeline-content h3 {
    color: var(--primary);
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

.timeline-content h4 {
    color: var(--text);
    margin-bottom: 0.8rem;
    font-size: 0.92rem;
}

.timeline-date {
    display: inline-block;
    background: var(--gradient);
    color: white;
    padding: 0.25rem 0.7rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    box-shadow: 0 4px 12px rgba(102,126,234,0.25);
}

/* Responsive Timeline */
@media (max-width: 900px) {
    .timeline-item {
        width: calc(50% - 1rem);
        min-width: 200px;
        padding-top: 3rem;
    }
}

@media (max-width: 768px) {
    .timeline-container {
        padding: 1rem;
        display: block; /* fallback vertical pour mobiles */
    }

    .timeline-line {
        left: 30px;
        right: auto;
        width: 2px;
        height: 100%;
        top: 0;
        transform: none;
    }

    .timeline-item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        padding-top: 0;
        margin-bottom: 2.5rem;
    }

    .timeline-dot {
        left: 30px;
        top: 2rem;
    }

    /* Date : position absolute collée à la ligne côté gauche */
    .timeline-date {
        position: absolute;
        left: 30px;
        top: 2rem;
        transform: translate(-50%, -50%);
        font-size: 0.85rem;
        border-radius: 12px;
    }

    .timeline-content {
        margin-left: 4rem;
        width: calc(100% - 5rem);
        padding: 1rem;
    }

    .timeline-content::before {
        display: none;
    }
}
.cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    padding: 0.9rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
}

.btn-primary {
    background: var(--gradient);
    color: white;
    transform: translateY(0);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

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

.btn-secondary:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

/* Profile Card */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-card {
    background: var(--dark-light);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: block;
    object-fit: cover;
    border: 4px solid rgba(37, 99, 235, 0.3);
}

.profile-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

/* Quick Stats */
.quick-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.stat {
    background: transparent;
    padding: 0.8rem;
    border-radius: 10px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    min-width: 100px;
}

.stat .count {
    display: block;
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 800;
}

.stat small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Section Commune */
section {
    padding: 6rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1rem;

    /* gradient text (même dégradé que pour le nom) */
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* fallback pour navigateurs compatibles non-webkit */
    color: var(--text); /* couleur fallback si le dégradé n'est pas supporté */
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: var(--gradient);
    border-radius: 2px;
}

/* Section Divider */
.section-divider {
    width: 100%;
    height: 72px;
    position: relative;
    overflow: visible;
    pointer-events: none;
    background: transparent;
}

.section-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(30,41,59,1) 0%, rgba(15,23,42,1) 100%);
    transform-origin: left top;
    transform: skewY(-4deg);
    box-shadow: 0 8px 30px rgba(2,6,23,0.45);
    z-index: 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.section-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(50% - 4px);
    width: min(720px, 80%);
    height: 8px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(102,126,234,1) 0%, rgba(59,130,246,1) 40%, rgba(14,165,233,1) 100%);
    box-shadow: 0 8px 24px rgba(37,99,235,0.12);
    z-index: 1;
    opacity: 0.95;
    pointer-events: none;
}

.section-divider.invert {
    transform: rotate(180deg);
}

.section-divider__title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.35rem 0.9rem;
    background: rgba(15,23,42,0.65);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 8px 24px rgba(2,6,23,0.14);
    pointer-events: none;
    letter-spacing: 0.2px;
}

.section-divider.invert .section-divider__title {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* Cards */
.card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 15px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.card:hover {

    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important; /* remet l'ombre de base */
}

.card *:hover {
    transform: none !important;
}

.card h3, .card h4 {
    color: var(--primary);
    margin-bottom: 0.8rem;
}

.card p {
    color: var(--text-muted);
    line-height: 1.6;
}

.card ul {
    list-style: disc inside;
    padding-left: 1rem;
    margin: 0.5rem 0;
}

.card ul li {
    color: var(--text);
    margin: 0.5rem 0;
    line-height: 1.6;
}

.role-period {
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 1rem;
}

/* Grids */
.education-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
/* Ajoutez dans `julie_portfolio_css.css` */
#certifications .cert-grid {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;          /* permet le wrapping si l'écran est trop étroit */
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Forcer les deux cartes à occuper chacune environ 50% de l'espace disponible,
   tout en autorisant un min-width pour garder la lisibilité. */
#certifications .cert-grid .card,
#certifications .cert-grid .card:first-child,
#certifications .cert-grid .card:last-child {
    flex: 1 1 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
    min-width: 220px;
    box-sizing: border-box;
}

/* Petite marge interne cohérente pour les cartes */
#certifications .cert-grid .card {
    padding: 1.2rem;
}

/* Breakpoint : empile les cartes en colonne sur petits écrans */
@media (max-width: 800px) {
    #certifications .cert-grid {
        flex-direction: column;
    }
    #certifications .cert-grid .card,
    #certifications .cert-grid .card:first-child,
    #certifications .cert-grid .card:last-child {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

.benevolat-grid,
.cert-grid,
.exp-grid,
.interets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Travaux : grille 2 colonnes et details compact */
.travaux-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr)); /* 2 colonnes */
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Project Cards */
.project-card {
    background: var(--dark-light);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    /* s'assurer que la carte peut grandir/rapetisser proprement */
    height: 100%;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.project-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* occupe l'espace disponible */
    flex: 1 1 auto;
}

.project-content h3 {
    margin-bottom: 0.5rem;
    color: var(--text);
    font-size: 1rem;
}

/* Header des projets : titre + date alignés */
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

/* Date visible à côté du titre (badge compact) */
.project-date {
    color: rgba(37, 99, 235, 0.53);
    background: rgba(37,99,235,0.08);
    padding: 0.18rem 0.6rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    border: 1px solid rgba(37,99,235,0.14);
    white-space: nowrap;
}

/* Supprime la date doublon si elle restait dans .details-content */
.details-content .project-date {
    display: none;
}

/* Responsive : empile la date sous le titre sur petits écrans */
@media (max-width: 480px) {
    .project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .project-date {
        font-size: 0.9rem;
        padding: 0.18rem 0.5rem;
    }
}

/* Résumé visible (summary) et contenu caché jusqu'au clic */
.project-details summary {
    cursor: pointer;
    list-style: none;
    color: var(--primary);
    font-weight: 700;
    background: transparent;
    border: none;
    padding: 0.25rem 0; /* léger padding */
    display: inline-block;
    margin: 0; /* pas d'espace supplémentaire */
    transition: color 0.18s ease, transform 0.12s ease;
    align-self: flex-start; /* assure l'alignement à gauche si le parent est flex */
}

/* Cacher le marqueur par défaut (WebKit) */
.project-details summary::-webkit-details-marker {
    display: none;
}

/* Petite interaction visuelle */
.project-details summary:hover {
    color: var(--primary-dark);
    transform: translateY(-2px);
}

/* Lorsque le details s'ouvre, le contenu apparaît juste au-dessus du summary (flux normal) */
.details-content {
    padding-top: 0.6rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Date dans details : style compact */
.details-content .project-date {
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;

}
.details-content p{
    padding-bottom: 1rem;
}

/* Petite transition pour l'ouverture */
.project-details[open] .details-content {
    animation: fadeIn 180ms ease;
}

/* animation courte */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Footer */
footer {
    background: var(--dark-light);
    padding: 3rem 2rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    color: var(--text);
    margin-bottom: 1rem;
}

.footer-section p,
.footer-section a {
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======= Travaux : restauration propre et responsive ======= */
/*  - 2 colonnes sur desktop, 1 colonne sur mobile
    - flèche (summary.chev-summary) visible en bas à droite des cartes sur desktop
    - sur mobile la flèche devient statique dans le flux (pas d'absolute)
*/

/* Grille Travaux : 2 colonnes par défaut */
.travaux-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 1rem;

    margin: 0 auto;
}

/* Cartes : référence de position pour la flèche */
.travaux-grid .project-card {
    position: relative; /* référence pour le summary absolute */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Contenu interne : réserver de l'espace en bas pour la flèche */
.travaux-grid .project-content {
    position: relative;
    padding: 0.7rem 0.9rem 3rem; /* padding-bottom réservé à la flèche */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 auto;
    font-size: 0.95rem;
}

/* Header (titre + date) — conserve le rendu précédent */
.travaux-grid .project-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

/* Remplacement : petite flèche blanche (sans background ni bordure) */
/* Positionnement inchangé : bas à droite de la card, hit area conservée via padding */
.travaux-grid .project-details summary.chev-summary {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    padding: 6px;               /* zone cliquable confortable */
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;                /* pas de carré fixe */
    height: auto;
    background: transparent;    /* plus de cercle coloré */
    border: none;               /* suppression de la bordure */
    border-radius: 0;
    cursor: pointer;
    z-index: 30;
}

/* masquer le marker natif (WebKit) */
.travaux-grid .project-details summary.chev-summary::-webkit-details-marker {
    display: none;
}

/* Petit chevron blanc, sans fond ni bordure ni ombre */
.travaux-grid .project-details summary.chev-summary::after {
    content: "↓"; /* flèche vers le bas */
    display: inline-block;
    font-size: 1rem;
    color: var(--text);
    transition: transform 0.2s ease;
}

/* flèche vers le haut quand le détail est ouvert */
.travaux-grid .project-details[open] > summary.chev-summary::after {
    transform: rotate(180deg);
}

/* hover discret (légère translation, pas d'ombre ni de fond) */
.travaux-grid .project-details summary.chev-summary:hover::after {
    transform: translateY(-2px);
}

/* Mobile / tablettes : empiler en 1 colonne et retirer position absolute */
@media (max-width: 768px) {
    .travaux-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* réduire l'espace réservé en bas : la flèche sera dans le flux */
    .travaux-grid .project-content {
        padding-bottom: 1rem;
    }

    /* summary devient statique dans le flux (à la suite du contenu) */
    .travaux-grid .project-details summary.chev-summary {
        position: static;
        right: auto;
        bottom: auto;
        width: auto;
        height: auto;
        align-self: flex-start; /* garde l'alignement à gauche si nécessaire */
        padding: 0.25rem 0;
        display: inline-flex;
    }

    /* faire en sorte que la pseudo-flèche reste visible mais petite */
    .travaux-grid .project-details summary.chev-summary::after {
        content: "▾";
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
        border-radius: 999px;
    }
}

/* Très petits écrans : ajustements fins */
@media (max-width: 480px) {
    .travaux-grid .project-content {
        padding: 0.5rem 0.6rem 0.9rem;
    }
    .travaux-grid .project-details summary.chev-summary::after {
        width: 26px;
        height: 26px;
        font-size: 0.88rem;
    }
}

/* Fin du bloc Travaux responsive */

/* ---------- Fix : Certifications responsive (override placé en fin de fichier) ---------- */
/* Rétablit le comportement flex voulu pour #certifications .cert-grid et garantit l'empilement sur petits écrans. */
#certifications .cert-grid {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: nowrap;            /* côte à côte tant que l'espace suffit */
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Première carte = 70%, deuxième carte = 30% */
#certifications .cert-grid > .card:first-child {
    flex: 0 0 70%;
    max-width: 70%;
    min-width: 240px; /* empêche la carte gauche de devenir trop étroite */
    box-sizing: border-box;
}

#certifications .cert-grid > .card:last-child {
    flex: 0 0 30%;
    max-width: 30%;
    min-width: 160px; /* garantit lisibilité de la colonne droite */
    box-sizing: border-box;
}

/* Ajustements visuels internes (optionnel : garder padding cohérent) */
#certifications .cert-grid .card {
    padding: 1rem; /* réduit si besoin pour mobile */
}

/* Mobile : empilement (les deux cartes l'une en dessous de l'autre) */
@media (max-width: 480px) {
    /* Empilement des deux cartes Certifications uniquement en mobile */
    #certifications .cert-grid {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    #certifications .cert-grid .card,
    #certifications .cert-grid > .card:first-child,
    #certifications .cert-grid > .card:last-child {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* Intérêts : petites cartes compactes sans logo */
.interets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}

.interest-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    transition: box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.interest-card h4 {
    font-size: 1rem;
    margin: 0;
    color: var(--primary);
}

.interest-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* compatible mobile: garder une seule colonne sur petit écran */
@media (max-width: 768px) {
    .interets-grid { grid-template-columns: 1fr; gap: 0.9rem; }
    .interest-card { padding: 0.85rem; }
}

/* ===========================
   Overrides responsive finaux
   Optimisations pour affichage mobile (teléphone)
   =========================== */

/* Mobile global : réduire paddings/taille, rendre les sections lisibles */
@media (max-width: 768px) {
  html { font-size: 95%; }
  section { padding: 2rem 1rem; }

  /* NAV : afficher hamburger, masquer liens horizontaux */
  .mobile-menu { display: flex; }
  .nav-links {
    position: fixed;
    top: 64px;
    right: 0;
    left: 0;
    background: rgba(15,23,42,0.98);
    flex-direction: column;
    gap: 0;
    padding: 1rem;
    display: none;
    z-index: 1200;
    border-top: 1px solid rgba(255,255,255,0.03);
  }
  .nav-links.active { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.9rem 1rem; }

  /* Hero : empiler le contenu, corriger largeur paragraphe */
  .hero-content { grid-template-columns: 1fr; gap: 2rem; }
  .hero-text p { width: 100%; max-width: 100%; line-height: 1.5; }

  /* Réduire les paddings des cards pour plus de densité */
  .card { padding: 1rem; border-radius: 10px; }
  .card h3, .card h4 { font-size: 1rem; }
  .card p, .card li { font-size: 0.95rem; }

  /* GRILLES : empiler en 1 colonne pour lisibilité */
  .education-content,
  .benevolat-grid,
  .cert-grid,
  .exp-grid,
  .travaux-grid,
  .interets-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* Travaux : le summary devient statique (déjà présent) ; garantir espace réduit */
  .travaux-grid .project-content { padding-bottom: 1rem !important; }
  .travaux-grid .project-details summary.chev-summary { position: static; margin-top: .5rem; padding: .25rem 0; align-self: flex-start; }

  /* Détails : limiter hauteur et activer scroll interne si contenu long */
  .details-content {
    max-height: 220px;
    overflow: auto;
    padding-right: 0.4rem;
  }
  .details-content::-webkit-scrollbar { width: 6px; height: 6px; }
  .details-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 6px; }

  /* Timeline : vertical + dates lisibles */
  .timeline-container { padding: 1rem; display: block; }
  .timeline-line { left: 30px; right: auto; width: 2px; height: 100%; top: 0; }
  .timeline-item { flex-direction: row; align-items: flex-start; padding-top: 0; margin-bottom: 1.6rem; }
  .timeline-content { margin-left: 4.2rem; width: calc(100% - 5rem); padding: .8rem; }

  /* Certifications : empilement garanti (70/30 annulé) */
  #certifications .cert-grid { flex-direction: column; gap: 1rem; }
  #certifications .cert-grid > .card { width: 100%; max-width: 100%; min-width: 0; flex: none; }

  /* Footer : compacter colonnes */
  .footer-content { grid-template-columns: 1fr; gap: 1rem; }

  /* Touch targets : augmenter interactivité des summary */
  .project-details summary,
  .travaux-grid .project-details summary.chev-summary {
    padding: 10px 8px;
    touch-action: manipulation;
  }
}

/* Très petits écrans : ajustements finaux */
@media (max-width: 480px) {
  html { font-size: 92%; }
  .hero-text h1 { font-size: 1.9rem; }
  .section-title { font-size: 1.6rem; margin-bottom: 1.2rem; }

  /* encore plus compact */
  .card { padding: 0.85rem; }
  .card h3, .card h4 { font-size: 0.98rem; }
  .project-content h3 { font-size: 0.95rem; }

  /* réduire marge timeline */
  .timeline-content { margin-left: 3.6rem; width: calc(100% - 4.2rem); }

  /* Détails : hauteur légèrement augmentée pour confort mobile */
  .details-content { max-height: 260px; }

  /* Menu mobile full width */
  .nav-links { top: 56px; padding: 0.8rem; }
}

/* ---------- Override mobile : bulle de date centrée au-dessus de la carte (téléphone <=480px) ---------- */
@media (max-width: 480px) {
  /* Conteneur : verticaliser la timeline */
  .timeline-container {
    padding: 0.8rem 0.9rem;
    display: block;
  }

  /* Chaque item devient un bloc centré : date au-dessus, carte en dessous */
  .timeline-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* centre horizontalement la date et la carte */
    width: 100% !important;
    padding-top: 0.4rem !important;
    margin-bottom: 1rem !important;
  }

  /* Bulle de date : statique, centrée au-dessus de la carte */
  .timeline-date {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 0 0.6rem 0 !important;
    text-align: center !important;
    align-self: center !important;
    font-size: 0.84rem !important;
    padding: 0.18rem 0.6rem !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(59,130,246,0.12) !important;
  }

  /* Carte : pleine largeur, padding réduit pour lisibilité */
  .timeline-content {
    margin: 0 !important;
    width: 100% !important;
    padding: 0.8rem 0.9rem !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
  }

  /* Recentre le point (dot) sous la bulle si utilisé visuellement */
  .timeline-dot {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0.25rem auto 0 auto !important;
  }

  /* éviter tout margin-left residuel */
  .timeline-content { margin-left: 0 !important; }

  /* si le contenu est long, limiter la hauteur et activer scroll interne */
  .timeline-content .details-content {
    max-height: 220px;
    overflow: auto;
  }
}

/* Override final : timeline - bulle centrée au-dessus de la carte uniquement pour téléphone */
@media (max-width: 480px) {
  /* Enlever paddings latéraux pour que les items puissent occuper la largeur de l'écran */
  .timeline-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Chaque item occupe toute la largeur visible et centre son contenu */
  .timeline-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* centre la date et la carte horizontalement */
    width: 100% !important;
    min-width: 100% !important;
    padding-top: 0.3rem !important;
    margin: 0 0 1rem 0 !important;
  }

  /* Bulle de date : statique/relative et centrée par rapport à l'écran */
  .timeline-date {
    position: relative !important;    /* reste dans le flux mais peut être déplacée */
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 0 0.6rem 0 !important;
    align-self: center !important;    /* centre au milieu de l'item / écran */
    display: inline-block !important;
    text-align: center !important;
    font-size: 0.84rem !important;
    padding: 0.18rem 0.7rem !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(59,130,246,0.12) !important;
  }

  /* Carte : pleine largeur avec gutters internes pour la lisibilité */
  .timeline-content {
    width: calc(100% - 2rem) !important; /* laisse 1rem de chaque côté */
    margin: 0 auto !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.92rem !important;
  }

  /* Recentre le point (dot) sous la bulle si présent */
  .timeline-dot {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0.25rem auto 0 auto !important;
  }

  /* annuler règles résiduelles qui posent problème */
  .timeline-item .timeline-date,
  .timeline-item .timeline-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* limiter hauteur des détails si nécessaire */
  .timeline-content .details-content {
    max-height: 220px;
    overflow: auto;
  }
}

/* Override final : timeline mobile - bulle de date sur la frise (gauche), carte à droite */
@media (max-width: 480px) {
  /* Conteneur : frise sur la gauche */
  .timeline-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
  }

  /* Chaque item : bloc horizontal logique (dot/date à gauche, contenu à droite) */
  .timeline-item {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* IMPORTANT : ne pas centrer */
    width: 100% !important;
    padding-top: 0.6rem !important;
    margin: 0 0 1rem 0 !important;
    min-width: 100% !important;
  }

  /* Ligne verticale (frise) à gauche */
  .timeline-line {
    left: 30px !important;
    right: auto !important;
    width: 2px !important;
    height: 100% !important;
    top: 0 !important;
  }

  /* Pastille (dot) : alignée sur la frise */
  .timeline-dot {
    position: absolute !important;
    left: 30px !important;
    top: 0.8rem !important;
    transform: translate(-50%, 0) !important;
    margin: 0 !important;
  }

  /* Bulle de date : placée sur la frise, au-dessus/à côté du dot, non centrée sur la carte */
  .timeline-date {
    position: absolute !important;
    left: 30px !important; /* même x que la frise */
    top: 1.6rem !important; /* ajustez si besoin */
    transform: translate(-50%, 0) !important;
    display: inline-block !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    padding: 0.18rem 0.6rem !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(59,130,246,0.12) !important;
    z-index: 6 !important;
  }

  /* Contenu : décalé à droite pour laisser la colonne de la frise */
  .timeline-content {
    margin: 0 !important;
    margin-left: calc(30px + 2rem) !important; /* laisse place pour la frise + gap */
    width: calc(100% - (30px + 2rem)) !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
  }

  /* Annule les règles qui mettaient la date dans le flux or la centrait */
  .timeline-item .timeline-date {
    position: absolute !important;
    align-self: auto !important;
    left: 30px !important;
  }

  /* limiter la hauteur des détails si nécessaire */
  .timeline-content .details-content {
    max-height: 220px;
    overflow: auto;
  }
}

/* ---------- Détacher la bulle de date de la frise et la placer en haut‑gauche de la carte ---------- */
/* Règles finales : placées en fin de fichier pour écraser les précédentes déclarations */
.timeline-item {
    position: relative; /* référence pour le positionnement absolu de la date */
}

/* Date : en haut à gauche de la carte (visuellement rattachée à la card, pas à la frise) */
.timeline-date {
    position: absolute !important;
    top: 12px !important;      /* distance depuis le haut de la timeline-item */
    left: 6% !important;       /* proche du bord gauche de la carte */
    transform: none !important;
    display: inline-block !important;
    background: var(--gradient) !important;
    color: #fff !important;
    padding: 0.22rem 0.6rem !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(59,130,246,0.14) !important;
    border: none !important; /* supprime la bordure sombre autour de la bulle */
    z-index: 8 !important;
}

/* Pousser le contenu de la carte vers le bas pour éviter chevauchement avec la bulle */
.timeline-content {
    margin-top: 2.2rem !important; /* augmente l'espace au-dessus de la carte */
    padding-top: 0.9rem !important;
}

/* Assurer cohérence en mobile : conserver la bulle en haut‑gauche de la carte */
@media (max-width: 480px) {
    .timeline-item {
        padding-top: 0.6rem !important;
    }
    .timeline-date {
        left: 4% !important;    /* ajustement pour écrans étroits */
        top: 10px !important;
        font-size: 0.8rem !important;
        padding: 0.18rem 0.5rem !important;
    }
    .timeline-content {
        margin-top: 2.4rem !important;
        width: calc(100% - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0.8rem 1rem !important;
    }

    /* annuler les règles qui forçaient la date sur la frise à gauche (si elles existent) */
    .timeline-date[style], .timeline-date { left: auto; } /* fallback, overwritten par les règles ci‑dessus */
}

/* ---------- Timeline : desktop = bulle centrée ; mobile = bulle en haut-gauche de la carte ---------- */

/* Desktop (assure la position d'origine au-dessus du centre de la carte) */
@media (min-width: 769px) {
  .timeline-item {
    position: relative; /* référence */
  }
  .timeline-date {
    position: absolute !important;
    top: 56px !important;
    left: 50% !important;
    transform: translate(-50%, -100%) !important;
    margin: 0 !important;
    /* garde le style visuel existant (dégradé, padding...) */
  }
  .timeline-content {
    margin-top: 1.6rem !important; /* espace sous la bulle */
    padding-top: 0.9rem !important;
  }
}

/* Mobile téléphone : détacher la bulle et la placer en haut‑gauche de la carte */
@media (max-width: 480px) {
  /* permet à l'item d'occuper toute la largeur mobile */
  .timeline-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .timeline-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin: 0 0 1rem 0 !important;
  }

  /* bulle : top-left de la card (relative à .timeline-item) */
  .timeline-date {
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    transform: none !important;
    align-self: flex-start !important;
    display: inline-block !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    padding: 0.18rem 0.55rem !important;
    border-radius: 12px !important;
    z-index: 8 !important;
  }

  /* pousser le contenu vers le bas pour ne pas être recouvert par la bulle */
  .timeline-content {
    margin: 0 !important;
    padding-top: 2.2rem !important; /* espace réservé sous la bulle */
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    box-sizing: border-box;
  }

  /* si la frise reste visible, on la laisse en arrière-plan (z-index faible) */
  .timeline-line {
    z-index: 0 !important;
  }

  /* pastille (dot) : si présente, la laisser mais sans gêner la bulle */
  .timeline-dot {
    z-index: 1 !important;
  }

  /* limiter la hauteur des détails pour lisibilité */
  .timeline-content .details-content {
    max-height: 220px;
    overflow: auto;
  }
}

/* ---------- Expériences : forcer une grille 2x2 (override placé en fin de fichier) ---------- */
/* Utilise un sélecteur spécifique pour écraser d'éventuelles règles précédentes */
#experiences .exp-grid,
.exp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr)); /* 2 colonnes */
    gap: 1.25rem;
    margin: 0 auto;
    align-items: stretch; /* aligne les cellules pour mêmes hauteurs */
}

/* Faire en sorte que chaque card remplisse sa cellule verticalement */
#experiences .exp-grid > .card,
.exp-grid > .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Pousser le contenu en bas si nécessaire (pour aligner les éléments bas) */
#experiences .exp-grid > .card .role-period,
#experiences .exp-grid > .card ul {
    margin-top: auto;
}

/* Responsive : 1 colonne sur petits écrans */
@media (max-width: 768px) {
    #experiences .exp-grid,
    .exp-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ---------- Certifications : empilement strict sur mobile (<=480px) ---------- */
@media (max-width: 480px) {
  /* Conteneur : colonne pleine largeur */
  #certifications .cert-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Chaque carte prend 100% de la largeur */
  #certifications .cert-grid > .card {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Neutraliser toute contrainte first/last-child */
  #certifications .cert-grid > .card:first-child,
  #certifications .cert-grid > .card:last-child {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Mobile : supprimer la ligne de la frise et les pastilles, ne garder que les dates */
@media (max-width: 480px) {
  /* masquer frise et pastilles */
  .timeline-line,
  .timeline-dot {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* rendre chaque item plein écran et centrer le contenu */
  .timeline-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .timeline-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 100% !important;
    padding-top: 0.4rem !important;
    margin: 0 0 1rem 0 !important;
  }

  /* date : visible et centrée au dessus de la carte */
  .timeline-date {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 0 0.6rem 0 !important;
    align-self: center !important;
    display: inline-block !important;
    text-align: center !important;
    font-size: 0.84rem !important;
    padding: 0.18rem 0.6rem !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(59,130,246,0.12) !important;
    z-index: 6 !important;
  }

  /* carte : pleine largeur, retirer tout offset gauche */
  .timeline-content {
    width: calc(100% - 2rem) !important;
    margin: 0 auto !important;
    margin-left: 0 !important;
    padding: 0.8rem 1rem !important;
    box-sizing: border-box !important;
  }

  /* éviter chevauchements résiduels */
  .timeline-item .timeline-date,
  .timeline-item .timeline-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Mobile : afficher la bulle de date DANS la carte (top-left) */
@media (max-width: 480px) {
  /* masquer la frise et les pastilles pour simplifier l'affichage mobile */
  .timeline-line,
  .timeline-dot {
    display: none !important;
    visibility: hidden !important;
  }

  /* chaque item prend la largeur entière et sert de référence */
  .timeline-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
  }

  /* la carte occupe presque toute la largeur et est centrée */
  .timeline-content {
    position: relative !important; /* nécessaire si l'on veut positionner par rapport à la card */
    width: calc(100% - 2rem) !important; /* laisse 1rem de gutter latéral */
    margin: 0 auto !important;
    padding: 1.6rem 1rem 0.9rem !important; /* padding-top réservé pour la bulle */
    box-sizing: border-box !important;
  }

  /* la bulle de date est positionnée ABSOLUMENT dans la timeline-item,
     placée au-dessus/intérieure en haut‑gauche de la carte (visuellement dans la carte) */
  .timeline-date {
    position: absolute !important;
    top: 0.5rem !important;        /* distance depuis le haut de la timeline-item */
    left: 1rem !important;         /* alignée avec le bord gauche de la carte */
    transform: none !important;
    margin: 0 !important;
    display: inline-block !important;
    text-align: left !important;
    z-index: 12 !important;
    font-size: 0.82rem !important;
    padding: 0.18rem 0.55rem !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px rgba(59,130,246,0.12) !important;
    background: var(--gradient) !important;
    color: #fff !important;
    border: none !important;
  }

  /* empêcher tout offset résiduel côté contenu */
  .timeline-item .timeline-content,
  .timeline-item .timeline-date {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* limiter la hauteur des détails si besoin */
  .timeline-content .details-content {
    max-height: 220px;
    overflow: auto;
  }
}