@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    /* -------------------------
       Typography Scale
       Font family: Inter
    -------------------------- */

    /* font family */
    --ff: "Inter", sans-serif;

    /* landing page */
    --h1: 700 4rem/1em var(--ff);              /* 64 / 64px */
    --h2: 700 3rem/1.2em var(--ff);            /* 48 / 58px */
    --h3: 700 2.25rem/1.2em var(--ff);         /* 36 / 43px */
    --h4: 700 1.5rem/1.6em var(--ff);          /* 24 / 38px */
    --subheading: 600 1.25rem/1.4em var(--ff); /* 20 / 28px uppercase */

    --big: 400 1.4rem/1.6em var(--ff);        /* 20 / 32px */
    --p: 400 1.3rem/1.6em var(--ff);             /* 20 / 26px */
    --smallp: 400 1.1rem/1.8em var(--ff);
    --small: 400 1.1rem/1.8em var(--ff);         /* 12 / 24px */

    /* UIs */
    --h1ui: 700 3rem/1.2em var(--ff);
    --h2ui: 700 2.25rem/1.2em var(--ff);
    --h3ui: 700 1.5rem/1.2em var(--ff);
    --h4ui: 700 1.3rem/1.6em var(--ff);
    --bigui: 400 1.2rem/1.6em var(--ff);
    --pui: 400 1rem/1.6em var(--ff);
    --smallui: 400 .9rem/1.8em var(--ff);

    --boldui : 700 1rem/1.6em var(--ff);

    --accent-weight : 600;


    /* -------------------------
       Colors
    -------------------------- */

    /* ===== Base Background ===== */
    --angle: 131deg;
    --bg-color1: #6366F1;          /* Indigo 500 */
    --bg-color2: #EC4899;          /* Pink 500 */

    /* ===== Text ===== */
    --text-light: #F0F8FF;         /* AliceBlue, texte clair */
    --text-dark: #111827;          /* Gris anthracite (si besoin de clair sur fond blanc) */
    --text-subtle: rgba(240, 248, 255, 0.87);        /* Gris neutre pour légendes */

    /* ===== Accents ===== */
    --accent: #FDE68A;             /* Jasmine (jaune pastel) */
    --accent-strong: #F59E0B;      /* Orange plus vif */
    --text-on-accent: #1F2937;     /* Gris foncé pour contraste sur accent clair */

    /* ===== Surfaces Glassy ===== */
    --glass: rgba(0,0,0,0.28);     /* Fond semi-transparent sombre */
    --glass-bright: rgba(255,255,255,0.08); /* Variante claire (rare) */
    --blur: 18px;                  /* Intensité du blur */
    --shadow: 0 10px 30px rgba(0,0,0,.25);

    /* ===== Cards / Elements ===== */
    --card-bg: rgba(255,255,255,0.06);
    --card-border: rgba(255,255,255,0.14);

    /* ===== Extra dark backgrounds  ===== */
    --raisin-black: #232431;       /* Fond section sombre */
    --charcoal: #464857;           /* Fond cartes plus claires */
    --oxford-blue: #101026;        /* Alternative très sombre */

    /* ===== Couleurs du plexus (gris un peu soutenu, faible opacité)  =====*/
    --dot-color: rgba(182,188,200,0.40);
    --line-color: rgba(182,188,200,0.26);


    /* Layout */
    --wrap: 1200px;
    --radius: 18px;

}

html {
    zoom: 0.9; /* Chrome/Edge, pas standard */
}

/* landing page */
h1, .h1sized { font: var(--h1); }
h2, .h2sized { font: var(--h2); }
h3, .h3sized { font: var(--h3); }
h4, .h4sized { font: var(--h4); }
.subheading {
    font: var(--subheading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.big{ font: var(--big); }
p, li, .psized { font: var(--p); }
.small  {
    font: var(--small);
    color : var(--text-subtle)
}


/* UIs */
.ui h1, .uih1 { font: var(--h1ui); }
.ui h2, .uih2 { font: var(--h2ui); }
.ui h3, .uih3 { font: var(--h3ui); }
.ui h4, .uih4 { font: var(--h4ui); }
.ui.big { font: var(--bigui); }
.ui p, .uip { font: var(--pui); }
.ui.small { font: var(--smallui); }
.ui.bold { font: var(--boldui); }


h1,h2,h4 {
    margin: 1rem 0 1rem;
}

h3 {
    margin: 2rem 0 2rem;
}

.subheading,.big,p {
    margin: 1rem 0 1rem;
}
.small {
    margin: 0.25rem 0 0;
}

.ui { margin-top: 2rem; }

.accent {
    color: var(--accent);
    font-weight: var(--accent-weight);
}

.white-accent {
    color: var(--text-light);
    font-weight: var(--accent-weight);
}

*{
    box-sizing:border-box;
}

body {
    margin: 0.2rem;
    font-family: var(--ff) Inter, system-ui;
    text-wrap: balance;
    scroll-behavior: smooth;
    background: #000;
    color: var(--text-light);
}

#plexus{
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none; /* ne bloque pas l’UI */
}

html,body{
    height:100%
}


/* Fond gradient plein écran  */
body::before{
    content:"";
    position: fixed;
    inset:0;
    z-index:-2;
    background: linear-gradient(var(--angle), var(--bg-color1) 0%, var(--bg-color2) 100%);
}

/* Légère trame pour donner de la matière (optionnel, peut être retirée) */
body::after{
    content:"";
    position: fixed;
    inset:-50%;
    z-index:-1;
    background:
            radial-gradient(1200px 800px at 85% -10%, rgba(255,255,255,.08), transparent 60%),
            radial-gradient(1000px 700px at -10% 110%, rgba(0,0,0,.22), transparent 60%);
    pointer-events:none;
}

nav {
    z-index: 9999;
    position: fixed;
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    width:100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.glass-link {
    text-align: center;
    color: var(--text-light);
    text-decoration: none;
    cursor: pointer;
    min-width: 5vw;
    border-radius: 9999px;
    background: var(--glass);
    padding :  .5rem 1rem;
    margin : .5rem;
}

.glass-link:hover {
    background: var(--glass-bright);
    box-shadow: 6px 6px 10px 0 rgba(0,0,0,.22), -6px -6px 10px 0 var(--glass-bright);

}

.glass-link:active {
    box-shadow: inset 6px 6px 10px 0 rgba(0,0,0,.22), inset -6px -6px 10px 0 var(--glass-bright);
}

section.panel{

    min-height:80vh;
    display:grid; place-items:center;
    padding: 20vh clamp(10px, 4vw, 48px) clamp(10px, 4vw, 48px);
}
.two-panel{
    display:flex;

}
/* Encart glassy commun */
.glass{
    width:min(96%, var(--wrap));
    background: var(--glass);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border-radius: var(--radius); box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.16);
    padding: clamp(10px, 4vw, 48px);
}

.btn{
    margin-right : auto;
    margin-top : auto;
    display:inline-block;
    padding:.8rem 1.2rem;
    border-radius:10px;
    background: var(--accent);
    color: var(--text-on-accent);
    text-decoration:none;
    border:1px solid
    rgba(0,0,0,.06);
    transition: transform .15s ease, background .2s ease, color .2s ease;
}
.left-pane .btn {
    margin-bottom: 2.05em;
}

.btn:hover {
    background: var(--accent-strong);
    color:#fff;
    transform: translateY(-1px);
}

.left-pane{
    margin-right:clamp(15px, 3vw, 48px);;
    display:inline-flex;
    flex-direction:column;
    max-width: 67%;
}
.right-pane{
    flex-direction: column;
    align-items: center;
    text-align: center;
    display:flex;
    max-width: 33%;
}

.right-pane img {
    margin-top: auto;
    margin-bottom: 0;
    width: 100%;
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.right-pane .small{
    margin-bottom: auto;
}

.card{
    background: var(--card-bg);
    border:1px solid var(--card-border);
    border-radius: 14px;
    padding: 18px;
}

.card:hover{
    background: var(--glass-bright);
    box-shadow: 6px 6px 10px 0 rgba(0,0,0,.22), -6px -6px 10px 0 var(--glass-bright);
}

.card-link {
    height: 100%;
    text-decoration: none;
    color: inherit;
    display: grid; /* ensures clickable area fits */
}
.grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(290px,1fr));
    gap: clamp(12px, 2.5vw, 20px);
    margin-top: clamp(16px, 2.5vw, 24px);
}


.skills-grid{
    display:grid;
    gap: clamp(12px, 2.5vw, 20px);
    margin-top: clamp(16px, 2.5vw, 24px);
    grid-auto-rows: auto;
    align-items: start;

}

.skill-header{
    display:flex;
    align-items: baseline;
    gap:1em;
    min-height:3.6em;
    position: relative;
    padding-right: 2em;
}

.skill-header > img{
    height:3.2em;
    width:15%;
    max-width: 120px;
    flex-shrink:0;
    flex-grow: 0;
    margin: auto auto auto 0.1em;
}

.skill-header h4 {
    flex-grow: 1;
    margin: auto;
    max-width: 120px;
}

.skill-header .small{
    margin: auto;
    flex-grow: 2;
}

.skill-header::after{
    content:"▾";
    font-size:2em;
    position:absolute;
    right:.2em;
    top:50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .2s ease;
    opacity:.9;
}

.skills-grid > .card[open] .skill-header::after{
    transform: translateY(-50%) rotate(-180deg);
}

.divider {
    margin: .6em auto 1em;
    width: 85%;
    border-bottom: var( --card-bg) 3px solid;
}

ul {
    list-style-type: none;
    margin : 0.3em 0;
}

.skill-projects {
    margin-left : clamp(20px, 10%, 50px);
}

.skill-projects h5{
    font :var(--h2);
    font-size:1.1em;
    color: var(--text-light);
    margin: 2em 0 0;
}

li a{
    font: var(--smallp);
    text-decoration: underline;
    color : var(--accent);
}

li p {
    font: var(--smallp);
    margin-top : 0.8em ;
    color: var(--text-subtle)
}

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

.skills-grid > .card > summary {
    list-style: none;
    cursor: pointer;
}

.skills-grid > .card > summary::-webkit-details-marker { display:none; }