/* =====================================================================
   Système visuel — jetons de conception
   =====================================================================

   Une seule source de vérité pour les couleurs, l’espacement, la
   typographie et les mouvements. Les thèmes clair et sombre redéfinissent
   les mêmes jetons : aucune couleur n’est écrite en dur ailleurs.

   Le thème sombre est le thème par défaut du portfolio ; le thème clair
   n’en est pas une simple inversion (§72) : surfaces, bordures, ombres et
   dégradés y sont recalculés pour rester lisibles sur écran comme sur
   vidéoprojecteur.
   ===================================================================== */

/* --- Polices, servies depuis le site (aucun CDN, §75) ---------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;              /* police variable : un seul fichier */
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Jetons indépendants du thème ------------------------------------ */

:root {
  /* Typographie : deux familles, pas une de plus (§73) */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo,
               Consolas, 'Liberation Mono', monospace;

  /* Échelle typographique fluide : lisible du téléphone au vidéoprojecteur */
  --text-2xs: 0.72rem;
  --text-xs:  0.79rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-lg:  clamp(1.06rem, 0.99rem + 0.3vw, 1.19rem);
  --text-xl:  clamp(1.22rem, 1.1rem + 0.55vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.95vw, 2.05rem);
  --text-3xl: clamp(1.95rem, 1.6rem + 1.7vw, 2.9rem);
  --text-4xl: clamp(2.4rem, 1.8rem + 3vw, 4.2rem);

  --leading-tight: 1.12;
  --leading-snug:  1.32;
  --leading-normal: 1.65;

  --tracking-tight: -0.022em;
  --tracking-wide:  0.08em;

  /* Espacement : progression régulière, pas de valeurs au hasard */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 5rem;
  --space-10: 7rem;

  /* Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Largeurs de contenu */
  --width-prose: 68ch;
  --width-content: 1180px;
  --width-wide: 1420px;

  /* Mouvements : courts et nets (§64) */
/* --- Mouvement ---------------------------------------------------------
   Trois courbes, quatre durées, un pas de décalage : tout le mouvement du
   site s'exprime avec ces jetons, jamais avec des valeurs écrites au cas
   par cas. Une animation qui ne rentre pas dans ce jeu est une animation
   qui détonne. */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Léger dépassement, réservé aux entrées : donne de la matière sans
     donner l'impression que l'interface rebondit. */
  --ease-entrance: cubic-bezier(0.2, 0.8, 0.2, 1.02);

  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-reveal: 620ms;

  /* Écart entre deux éléments d'une même série qui apparaissent. */
  --stagger: 70ms;


  --header-height: 68px;

  /* Largeur de la barre latérale fixe : le contenu se décale d'autant. */
  --sidebar-width: 280px;
}

/* --- Thème sombre (défaut) ------------------------------------------- */

:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:            #070A12;
  --bg-elevated:   #0C1120;
  --surface:       #111728;
  --surface-2:     #161D31;
  --surface-3:     #1C2440;
  --surface-hover: #1A2237;

  --border:        #222A42;
  --border-strong: #2F3A59;
  --border-focus:  #6B8AFF;

  --text:          #E9EDF8;
  --text-muted:    #9AA5C2;
  --text-subtle:   #8290AE;   /* 5.2:1 minimum sur toutes les surfaces */
  --text-inverse:  #070A12;

  --primary:       #6486FF;
  --primary-hover: #7C99FF;
  --primary-soft:  rgba(100, 134, 255, 0.14);
  --primary-on-soft: #9DB2FF;   /* 7.2:1 sur --primary-soft */
  --primary-line:  rgba(100, 134, 255, 0.32);
  --on-primary:    #06091A;

  --secondary:     #38D6E8;
  --secondary-soft: rgba(56, 214, 232, 0.13);

  /* États du référentiel : jamais portés par la couleur seule (§81) */
  --state-none-fg:      #98A3BF;
  --state-none-bg:      rgba(138, 148, 178, 0.12);
  --state-proposed-fg:  #F5C161;
  --state-proposed-bg:  rgba(245, 193, 97, 0.14);
  --state-validated-fg: #4FD9A5;
  --state-validated-bg: rgba(79, 217, 165, 0.14);

  --danger:      #FF8080;
  --danger-bg:   rgba(255, 128, 128, 0.13);
  --success:     #4FD9A5;
  --success-bg:  rgba(79, 217, 165, 0.13);
  --warning:     #F5C161;
  --warning-bg:  rgba(245, 193, 97, 0.13);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 0 0 1px var(--primary-line), 0 18px 50px -22px rgba(100, 134, 255, 0.55);

  --grid-line: rgba(140, 160, 220, 0.055);
  --halo-1: rgba(100, 134, 255, 0.20);
  --halo-2: rgba(56, 214, 232, 0.11);

  --scrim: rgba(4, 7, 15, 0.72);
}

/* --- Thème clair ------------------------------------------------------
   Recalculé, pas inversé : les surfaces restent blanches, les ombres
   deviennent douces et les couleurs d’accent sont assombries pour tenir
   le contraste AA sur fond clair. */

:root[data-theme='light'] {
  color-scheme: light;

  --bg:            #F5F6FB;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F3F5FA;
  --surface-3:     #E9EDF6;
  --surface-hover: #EEF1F8;

  --border:        #E0E5F0;
  --border-strong: #C6CEE0;
  --border-focus:  #3355DD;

  --text:          #0F1526;
  --text-muted:    #545E7B;
  --text-subtle:   #666E89;   /* 4.6:1 minimum sur toutes les surfaces */
  --text-inverse:  #FFFFFF;

  --primary:       #3355DD;
  --primary-hover: #2843C4;
  --primary-soft:  rgba(51, 85, 221, 0.09);
  --primary-on-soft: #2C49BE;   /* 6.6:1 sur --primary-soft */
  --primary-line:  rgba(51, 85, 221, 0.22);
  --on-primary:    #FFFFFF;

  --secondary:     #0E8FA3;
  --secondary-soft: rgba(14, 143, 163, 0.10);

  --state-none-fg:      #565F76;
  --state-none-bg:      rgba(92, 102, 127, 0.10);
  --state-proposed-fg:  #96650B;
  --state-proposed-bg:  rgba(197, 138, 24, 0.14);
  --state-validated-fg: #0B7A56;
  --state-validated-bg: rgba(15, 145, 102, 0.13);

  --danger:      #C42F2F;
  --danger-bg:   rgba(196, 47, 47, 0.09);
  --success:     #0B7A56;
  --success-bg:  rgba(11, 122, 86, 0.09);
  --warning:     #96650B;
  --warning-bg:  rgba(150, 101, 11, 0.10);

  --shadow-sm: 0 1px 2px rgba(16, 24, 48, 0.06);
  --shadow-md: 0 10px 28px -12px rgba(16, 24, 48, 0.18);
  --shadow-lg: 0 28px 64px -24px rgba(16, 24, 48, 0.26);
  --shadow-glow: 0 0 0 1px var(--primary-line), 0 18px 44px -24px rgba(51, 85, 221, 0.4);

  --grid-line: rgba(30, 50, 110, 0.055);
  --halo-1: rgba(51, 85, 221, 0.10);
  --halo-2: rgba(14, 143, 163, 0.07);

  --scrim: rgba(20, 26, 44, 0.45);
}

/* Aucun thème choisi : on suit le réglage du système. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --bg:            #F5F6FB;
    --bg-elevated:   #FFFFFF;
    --surface:       #FFFFFF;
    --surface-2:     #F3F5FA;
    --surface-3:     #E9EDF6;
    --surface-hover: #EEF1F8;

    --border:        #E0E5F0;
    --border-strong: #C6CEE0;
    --border-focus:  #3355DD;

    --text:          #0F1526;
    --text-muted:    #545E7B;
    --text-subtle:   #666E89;   /* 4.6:1 minimum sur toutes les surfaces */
    --text-inverse:  #FFFFFF;

    --primary:       #3355DD;
    --primary-hover: #2843C4;
    --primary-soft:  rgba(51, 85, 221, 0.09);
    --primary-on-soft: #2C49BE;   /* 6.6:1 sur --primary-soft */
    --primary-line:  rgba(51, 85, 221, 0.22);
    --on-primary:    #FFFFFF;

    --secondary:     #0E8FA3;
    --secondary-soft: rgba(14, 143, 163, 0.10);

    --state-none-fg:      #565F76;
    --state-none-bg:      rgba(92, 102, 127, 0.10);
    --state-proposed-fg:  #96650B;
    --state-proposed-bg:  rgba(197, 138, 24, 0.14);
    --state-validated-fg: #0B7A56;
    --state-validated-bg: rgba(15, 145, 102, 0.13);

    --danger:      #C42F2F;
    --danger-bg:   rgba(196, 47, 47, 0.09);
    --success:     #0B7A56;
    --success-bg:  rgba(11, 122, 86, 0.09);
    --warning:     #96650B;
    --warning-bg:  rgba(150, 101, 11, 0.10);

    --shadow-sm: 0 1px 2px rgba(16, 24, 48, 0.06);
    --shadow-md: 0 10px 28px -12px rgba(16, 24, 48, 0.18);
    --shadow-lg: 0 28px 64px -24px rgba(16, 24, 48, 0.26);
    --shadow-glow: 0 0 0 1px var(--primary-line), 0 18px 44px -24px rgba(51, 85, 221, 0.4);

    --grid-line: rgba(30, 50, 110, 0.055);
    --halo-1: rgba(51, 85, 221, 0.10);
    --halo-2: rgba(14, 143, 163, 0.07);

    --scrim: rgba(20, 26, 44, 0.45);
  }
}

/* --- Mode vidéoprojecteur (§79) ---------------------------------------
   Activé depuis le mode jury : agrandit le texte et renforce les
   contrastes sans changer la mise en page. */

:root[data-display='projector'] {
  --text-base: 1.16rem;
  --text-sm: 1rem;
  --text-xs: 0.92rem;
  --text-2xs: 0.86rem;
  --leading-normal: 1.6;
  --border: var(--border-strong);
}