/* ================================================================
   01-base.css — Fondations
   ----------------------------------------------------------------
   - Reset CSS
   - Variables globales (couleurs, rayons, fonts)  → :root
   - Typographies de base
   - Animations globales (@keyframes)
   - Classes utilitaires (.ac, .sf, .mn, .rv)
   ================================================================ */


/* ─── Variables globales (palette LIGHT) ─── */
:root{
    /* Fonds clairs */
    --bg:  #FAFAF9;   /* crème principal */
    --bg2: #F2F2EF;   /* crème un cran plus foncé */
    --bg3: #E8E8E4;   /* crème encore plus foncé */

    /* Surfaces & bordures (sombres sur fond clair) */
    --s:  rgba(0,0,0,0.02);
    --b:  rgba(0,0,0,0.07);
    --bh: rgba(0,0,0,0.12);

    /* Texte */
    --t:  #141413;   /* presque noir */
    --t2: #5C5C56;   /* gris moyen */
    --tm: #9C9C95;   /* gris clair (meta) */

    /* Couleur accent principale (indigo BeRanked) */
    --a:  #4F46E5;
    --ad: rgba(79,70,229,0.08);
    --ag: rgba(79,70,229,0.04);

    /* Couleurs sémantiques */
    --r:  #DC2626;   --rd: rgba(220,38,38,0.06);      /* rouge (erreurs) */
    --bl: #2563EB;   --bld: rgba(37,99,235,0.06);     /* bleu */
    --v:  #7C3AED;   --vd: rgba(124,58,237,0.06);     /* violet (IA) */
    --g:  #059669;   --gd: rgba(5,150,105,0.06);      /* vert (succès) */
    --o:  #D97706;   --od: rgba(217,119,6,0.06);      /* orange (KB) */

    /* Rayons */
    --R:  14px;   /* standard */
    --Rs: 8px;    /* petit */
    --Rf: 100px;  /* pill / full */

    /* Typographies */
    --fd: 'Outfit', -apple-system, sans-serif;
    --fb: 'Outfit', -apple-system, sans-serif;
    --fm: 'JetBrains Mono', monospace;
}


/* ─── Reset ─── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fb);
    background: var(--bg);
    color: var(--t);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}


/* ─── Texture "grain" subtile en overlay ─── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 99999;
}


/* ─── Utilitaires ─── */
.ac { color: var(--a); }
.sf { font-family: var(--fd); font-weight: 800; }
.mn { font-family: var(--fm); }


/* ─── Animations globales ─── */
@keyframes fU {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pu {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,.3); }
    50%      { box-shadow: 0 0 0 10px rgba(79,70,229,0); }
}
@keyframes fl {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes sc {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}


/* ─── Reveal au scroll (IntersectionObserver dans main.js) ─── */
.rv {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity   .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
}
.rv.vi {
    opacity: 1;
    transform: translateY(0);
}

/* Delays pour staggered reveals */
.rd1 { transition-delay: .1s; }
.rd2 { transition-delay: .2s; }
.rd3 { transition-delay: .3s; }