:root{
    --bg:#0b0f17;
    --text:#e7eefc;
    --muted:#a7b3cc;
    --line:rgba(255,255,255,.08);

    --accent:#ff7a18;
    --accent2:#8b5cf6;

    --shadow: 0 18px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{
    scroll-behavior:smooth;
    /* Reserve scrollbar space so the grid NEVER reflows when the page
       becomes longer (ex: after "Afficher tout"). */
    scrollbar-gutter: stable;
}
/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable){
    html{overflow-y: scroll;}
}
html{ scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable){
    html{ overflow-y: scroll; }
}
html{
    scroll-behavior:smooth;
    scrollbar-gutter: stable;

    /* NEW: background sur le canvas (évite les "tranches" quand page courte) */
    background:
            radial-gradient(900px 520px at 12% 8%, rgba(255,122,24,.18), transparent 60%),
            radial-gradient(900px 520px at 88% 12%, rgba(139,92,246,.16), transparent 60%),
            radial-gradient(700px 420px at 70% 90%, rgba(255,122,24,.10), transparent 60%),
            var(--bg);

    /* Optionnel si tu vois encore des repeats/artefacts */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:var(--text);

    /* NEW */
    background: transparent;
    min-height: 100vh;

    position:relative;
    overflow-x:hidden;
}


body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.08;
    mix-blend-mode: overlay;
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

a{color:inherit; text-decoration:none}
.container{width:min(1100px, 92%); margin:0 auto}

.header{
    position:sticky; top:0; z-index:10;
    backdrop-filter: blur(10px);
    background: rgba(11,15,23,.62);
    border-bottom:1px solid var(--line);
}
.nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    gap:14px;
}
.brand{font-weight:850; letter-spacing:.3px; font-size:20px}
.brand span{color:var(--accent)}
.menu{display:flex; gap:18px; align-items:center}
.menu a{color:var(--muted)}
.menu a:hover{color:var(--text)}

.nav-right{display:flex; align-items:center; gap:10px}

/* Language dropdown */
.lang{position:relative}
.lang-btn{
    height:42px;
    padding:0 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--text);
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
}
.lang-caret{opacity:.8}
.lang-menu{
    position:absolute;
    right:0;
    top:48px;
    width:180px;
    border:1px solid var(--line);
    background: rgba(11,15,23,.92);
    border-radius:16px;
    padding:8px;
    box-shadow: var(--shadow);
    display:none;
}
.lang-menu.open{display:block}
.lang-item{
    width:100%;
    text-align:left;
    padding:10px 10px;
    border-radius:12px;
    border:1px solid transparent;
    background:transparent;
    color:var(--text);
    cursor:pointer;
}
.lang-item:hover{
    border-color: rgba(255,122,24,.25);
    background: rgba(255,255,255,.03);
}

.burger{
    display:none;
    width:44px; height:44px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    border-radius:14px;
    cursor:pointer;
}
.burger span{
    display:block; height:2px; margin:7px 10px;
    background:rgba(231,238,252,.85);
}

.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px;
    padding:12px 16px;
    border-radius:16px;
    border:1px solid rgba(255,122,24,.35);
    background: linear-gradient(135deg, rgba(255,122,24,.95), rgba(139,92,246,.75));
    color:#0b0f17;
    font-weight:850;
    box-shadow: var(--shadow);
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text);
    box-shadow:none;
}
.btn.small{padding:10px 12px; border-radius:14px; font-size:14px; box-shadow:none}

.hero{padding:56px 0 18px}
.hero-grid{
    display:grid;
    grid-template-columns: 1.25fr .95fr;
    gap:22px;
    align-items:stretch;
}
.badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--muted);
    font-size:13px;
}
h1{margin:12px 0 10px; font-size:48px; line-height:1.08}
.grad{
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.subtitle{color:var(--muted); font-size:18px; line-height:1.6; max-width:60ch}
.hero-actions{display:flex; gap:12px; margin:18px 0 16px}

.mini{display:flex; gap:12px; flex-wrap:wrap}
.mini-card{
    flex:1;
    min-width:170px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    border-radius:18px;
    padding:12px 14px;
}
.mini-title{color:var(--muted); font-size:13px}
.mini-value{font-weight:850; margin-top:4px}

.hero-card{
    border:1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border-radius:24px;
    box-shadow: var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    position:relative;
}
.hero-card::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:24px;
    pointer-events:none;
    background: radial-gradient(500px 200px at 20% 0%, rgba(255,122,24,.14), transparent 55%),
    radial-gradient(400px 220px at 90% 20%, rgba(139,92,246,.12), transparent 60%);
    opacity:.8;
}

.avatar-img{
    width:100%;
    height:190px;
    object-fit:cover;
    object-position: 50% 25%;
    display:block;
    border-top-left-radius:24px;
    border-top-right-radius:24px;
}

.hero-card-content{padding:16px; position:relative; z-index:1}
.hero-card-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.hero-card h3{margin:0 0 6px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{
    padding:7px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--muted);
    font-size:13px;
}

.sig{
    font-weight:900;
    letter-spacing:.35em;
    opacity:.35;
    transform: rotate(-6deg);
    user-select:none;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-divider{
    height:22px;
    margin-top:22px;
    background: linear-gradient(90deg, transparent, rgba(255,122,24,.30), rgba(139,92,246,.25), transparent);
    filter: blur(.2px);
    clip-path: polygon(0 40%, 100% 0, 100% 60%, 0 100%);
    opacity:.9;
}

.section{padding:44px 0}
h2{margin:0 0 10px; font-size:30px}
.lead{margin:0 0 18px; color:var(--muted); font-size:16px; line-height:1.65}

.cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
}
.card{
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    border-radius:20px;
    padding:16px;
}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:13px}

.skills{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:14px;
}

.skill{
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    border-radius:20px;
    padding:14px;
}
.skill-top{display:flex; justify-content:space-between; margin-bottom:10px}
.bar{height:10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden}
.fill{height:100%; border-radius:999px; background: linear-gradient(135deg, var(--accent), var(--accent2))}

.tool-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    margin-top:14px;
}

.tag{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    color:var(--muted);
    font-size:12px;
}

/* Projects blocks */
.gallery-block{
    border:1px solid var(--line);
    border-radius:22px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    box-shadow: var(--shadow);
    padding:16px;
    margin-top:14px;
}
.gallery-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}
.gallery-title{margin:0; font-size:18px}

/* Grid */
.gallery{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:12px;
    align-content:start;
}

/* Card */
.g-item{
    border:none;
    padding:0;
    background:transparent;
    cursor:pointer;
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--line);
    aspect-ratio: 16 / 9; /* taille stable = alignement propre */
    position:relative; /* pour que ::after (absolute) reste dans la carte */
}

/* Image */
.g-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit: cover;     /* thumbnails */
    object-position:center;
}

/* PFP : si tu veux voir l'image EN ENTIER */
#gallery-pfp .g-item img{
    object-fit: contain;
    background: rgba(255,255,255,.02);
}


/* hover */
.g-item::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    transition: opacity .15s ease;
    background: linear-gradient(135deg, rgba(255,122,24,.18), rgba(139,92,246,.14));
}
.g-item:hover::after{opacity:1}



/* Videos */
.video-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:14px;
}
.video-card{
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    aspect-ratio: 16 / 9;
}
.video-card iframe{
    width:100%;
    height:100%;
    border:0;
}

/* === Collapse (1 row + peek) === */
/* Fallback + clipping (évite les superpositions si JS calcule mal au début) */
.gallery.collapsed{
    /* La hauteur exacte est mise en inline-style par JS (1 seule rangée).
       Ici on garde juste le clipping en fallback. */
    overflow: hidden;
}
.video-grid.collapsed{
    /* idem */
    overflow: hidden;
}

.gallery.expanded,
.video-grid.expanded{
    overflow: hidden; /* on garde le masque, on l'agrandit juste */
}

.gallery, .video-grid { --collapse-h: 320px; }

.gallery-wrapper{ position:relative; }

.gallery-fade{
    position:absolute;
    left:0; right:0; bottom:0;
    height:90px;
    background: linear-gradient(to bottom, rgba(11,15,23,0), rgba(11,15,23,0.85));
    pointer-events:none;
}




.gallery, .video-grid{
    overflow: hidden;
    transition: max-height 0.22s cubic-bezier(.2,.9,.2,1);
    will-change: max-height;
}

.gallery.collapsed, .video-grid.collapsed{ opacity: 0.95; }
.gallery.expanded, .video-grid.expanded{ opacity: 1; }

/* Toggle button */
.gallery-toggle{
    margin-top:14px;
    display:flex;
    justify-content:center;
}

/* Contact */
.contact-cards{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:14px;
}
.info-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 12px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    margin-bottom:10px;
}
.info-k{color:var(--muted); font-size:13px}
.info-v{font-weight:850; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.copy{
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--text);
    border-radius:12px;
    padding:8px 10px;
    cursor:pointer;
}
.copy:hover{border-color: rgba(255,122,24,.25)}

/* Lightbox */
.lightbox{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.75);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
    padding:24px;
}
.lightbox.open{display:flex}
.lightbox-img{
    max-width:min(980px, 92vw);
    max-height:82vh;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.14);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.lightbox-close{
    position:absolute;
    top:18px;
    right:18px;
    width:46px;
    height:46px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color:var(--text);
    cursor:pointer;
    font-size:18px;
}
.lightbox-close:hover{border-color: rgba(255,122,24,.25)}

.footer{
    border-top:1px solid var(--line);
    padding:18px 0 26px;
    color:var(--muted);
}
.footer-row{display:flex; justify-content:space-between; align-items:center; gap:12px}

@media (max-width: 900px){
    h1{font-size:40px}
    .hero-grid{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}
    .skills{grid-template-columns:1fr}
    .tool-grid{grid-template-columns:1fr}
    .gallery{grid-template-columns:repeat(2, 1fr)}
    .video-grid{grid-template-columns:1fr}
    .contact-cards{grid-template-columns:1fr}

    .burger{display:block}
    .menu{
        position:absolute;
        right:4%;
        top:62px;
        display:none;
        flex-direction:column;
        padding:14px;
        border:1px solid var(--line);
        border-radius:16px;
        background: rgba(11,15,23,.92);
        width:220px;
    }
    .menu.open{display:flex}
}
/* --- New Projects layout (preview + dedicated page) --- */
.preview-grid, .full-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:12px;
    align-content:start;
}

/* réutilise tes cartes existantes */
.full-grid .g-item, .preview-grid .g-item{ aspect-ratio: 16 / 9; }

.video-preview-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:14px;
}

.video-preview{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    aspect-ratio: 16 / 9;
    display:block;
}
.video-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.video-preview .play{
    position:absolute;
    inset:auto auto 12px 12px;
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.14);
}

@media (max-width: 900px){
    .preview-grid, .full-grid{ grid-template-columns: repeat(2, 1fr); }
    .video-preview-grid{ grid-template-columns: 1fr; }
}
/* --- Projects dropdown --- */
.nav-dropdown{ position:relative; display:inline-block; }
.dropdown-btn{
    background:transparent; border:0; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    color:inherit; font:inherit;
    padding:10px 12px; border-radius:14px;
}
.dropdown-btn .caret{ opacity:.75; font-size:.9em; }

.dropdown-menu{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    min-width:220px;
    padding:10px;
    border-radius:16px;
    background:rgba(10,12,18,.92);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    z-index:999;
}

/* ===== Projects dropdown (hover desktop + click mobile) ===== */
.nav-dropdown{ position:relative; display:inline-flex; align-items:center; }

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    padding-top:10px;              /* IMPORTANT: pas de "gap" => tu peux passer du bouton à la liste */
    opacity:0;
    transform: translateY(-6px);
    pointer-events:none;
    transition: opacity .12s ease, transform .12s ease;
    z-index:999;
}

.dropdown-menu{
    /* ton look */
    border-radius:18px;
    background: rgba(15,18,26,.92);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.open .dropdown-menu{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
}

.dropdown-item{
    display:block;
    padding:10px 14px;
    border-radius:12px;
    text-decoration:none;
}

.dropdown-item:hover{
    background: rgba(255,255,255,.06);
}
.dropdown-sep{
    height:1px;
    margin:8px 10px;
    background: rgba(255,255,255,.08);
}
/* ===== Lightbox animation ===== */
.lightbox{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
    opacity:0;
    pointer-events:none;
    transition: opacity .16s ease;
    z-index:2000;
}

.lightbox.open{
    opacity:1;
    pointer-events:auto;
}

.lightbox-img{
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
    transform: scale(.96);
    opacity:0;
    transition: transform .16s ease, opacity .16s ease;
}

.lightbox.open .lightbox-img{
    transform: scale(1);
    opacity:1;
}

.lightbox-close{
    position:absolute;
    top:18px;
    right:18px;
    border-radius:14px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(20,22,30,.6);
    color:#fff;
    cursor:pointer;
    opacity:0;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease;
}
.lightbox.open .lightbox-close{
    opacity:1;
    transform: translateY(0);
}
/* ===== Projects page header layout ===== */
.project-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}
.project-head h2{ margin:0; }

/* ===== Empty state card (No images/videos yet) ===== */
.empty-card{
    display:inline-flex;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--muted);
}

/* ===== PFP in projects page: show full image ===== */
.gallery.pfp .g-item img{
    object-fit: contain;
    background: rgba(255,255,255,.02);
}

/* ===== Background: make noise tiling much less visible ===== */
body::before{
    background-size: 1200px 1200px;  /* was 260px tile */
    opacity: .05;                   /* slightly lower */
}

/* ===== Lightbox animation (works on index + projects) ===== */
.lightbox{
    display:flex;                   /* keep in flow for transitions */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .16s ease, visibility 0s linear .16s;
}
.lightbox.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition: opacity .16s ease;
}
.lightbox-img{
    opacity:0;
    transform: scale(.96);
    transition: transform .16s ease, opacity .16s ease;
}
.lightbox.open .lightbox-img{
    opacity:1;
    transform: scale(1);
}
/* Uniformise la couleur entre pages (évite l'effet bleu/visited) */
.dropdown-menu .dropdown-item:link,
.dropdown-menu .dropdown-item:visited{
    color: inherit; /* ou remplace par ta variable (ex: var(--text)) */
}
/* ==== PERF MOBILE ==== */
.mobile-perf {
    /* évite les repaints énormes */
    * {
        scroll-behavior: auto !important; /* le smooth scroll peut micro-freeze sur certains tel */
    }

    /* les blurs/backdrop-filter coûtent très cher sur mobile */
    .glass,
    .card,
    .navbar,
    .dropdown,
    .btn,
    .panel {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* réduire les grosses ombres */
    .card,
    .btn,
    .dropdown {
        box-shadow: none !important;
    }

    /* si tu as un fond animé / glow / gradient, on le simplifie */
    .bg,
    .background,
    .hero-bg,
    .glow {
        filter: none !important;
        animation: none !important;
    }

    /* évite fixed background qui lag souvent */
    body {
        background-attachment: scroll !important;
    }
}

.mobile-perf {
    header,
    .navbar {
        position: sticky !important; /* au lieu de fixed */
        top: 0;
    }
}
@media (max-width: 768px) {
    body.is-scrolling * {
        transition: none !important;
        animation: none !important;
    }
}