/* ==========================================================================
   tokens.css — Variables de design centralisées
   Palette reprise du site BNC : bleu roi, marine profond, ambre orangé.
   Rebrander l'ensemble du site = modifier ce seul fichier.
   ========================================================================== */

/* --- Polices auto-hébergées (variable, sous-ensemble latin) --------------- */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {

  /* --- Fonds clairs : bleutés, jamais blanc papier ni crème ------------- */
  --c-bg:        #EBF0F7;   /* fond de page */
  --c-bg-2:      #E1E9F4;   /* sections alternées, un cran plus dense */
  --c-surface:   #FFFFFF;   /* cartes, tableaux, champs */
  --c-surface-2: #F2F5FA;   /* survol de ligne, en-têtes de tableau */
  --c-header-bg: rgba(235, 240, 247, .82);

  --c-glass:        rgba(255, 255, 255, .78);
  --c-glass-strong: rgba(255, 255, 255, .94);
  --c-glass-line:   rgba(12, 30, 61, .12);

  /* --- Filets ----------------------------------------------------------- */
  --c-line:        rgba(12, 30, 61, .12);
  --c-line-strong: rgba(12, 30, 61, .20);

  /* --- Marine et bleu roi : la structure de la marque ------------------- */
  --c-navy:       #0E2E5E;   /* aplats sombres */
  --c-navy-2:     #143A72;
  --c-navy-deep:  #091F42;   /* pied de page */
  --c-blue:       #094893;   /* bleu BNC, liens et éléments structurants */
  --c-blue-lt:    #2E7BD6;
  --c-blue-soft:  rgba(9, 72, 147, .09);

  /* --- Ambre : l'accent BNC ---------------------------------------------
     --c-amber        : version assombrie, lisible en texte sur fond clair
     --c-amber-bright : l'ambre du site, réservé aux aplats et aux lueurs   */
  --c-amber:        #985800;
  --c-amber-lt:     #C87A0A;
  --c-amber-bright: #F5A623;
  --c-amber-soft:   rgba(245, 166, 35, .16);
  --c-amber-line:   rgba(152, 88, 0, .30);
  --grad-amber:     linear-gradient(180deg, #FFB945, #F0921A);
  /* Bouton principal : blanc sur l'ambre vif du site ne donne que 2,4:1.
     Cette version assombrie porte du texte blanc à 4,6:1 minimum. */
  --grad-amber-btn: linear-gradient(180deg, #B35F05, #9E5203);
  --grad-amber-btn-hover: linear-gradient(180deg, #AD5B04, #96500A);


  /* --- Texte : encre bleutée, jamais noire ------------------------------ */
  --c-text:   #0C1E3D;
  --c-text-2: #2C405F;
  --c-muted:  #56698A;
  --c-faint:  #7C8DAB;
  --c-ondark: #2A1500;      /* texte posé sur un aplat d'ambre */

  /* --- Statuts métier --------------------------------------------------- */
  --c-neutral: #586579;  --c-neutral-soft: #E6EAF1;   /* Envoyé */
  --c-info:    #1D4FD0;  --c-info-soft:    #E3EBFC;   /* Reçu */
  --c-warning: #9A5D06;  --c-warning-soft: #FBEFD9;   /* En analyse */
  --c-success: #07724D;  --c-success-soft: #DDF2EA;   /* Validé */
  --c-danger:  #C51F1F;  --c-danger-soft:  #FBE4E4;   /* Rejeté */

  --c-overlay: rgba(9, 31, 66, .62);

  /* --- Typographie ------------------------------------------------------ */
  --ff-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-2xs: 0.6875rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.0625rem;
  --fs-xl:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.45rem + 2vw, 2.875rem);
  --fs-4xl: clamp(2.375rem, 1.5rem + 4vw, 4.75rem);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:   1.02;
  --lh-snug:    1.22;
  --lh-normal:  1.6;
  --lh-relaxed: 1.72;

  --ls-tight:  -0.045em;
  --ls-snug:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-widest:  0.16em;

  /* --- Espacements (échelle 4 px) --------------------------------------- */
  --sp-1:  0.25rem;   --sp-2:  0.5rem;    --sp-3:  0.75rem;
  --sp-4:  1rem;      --sp-5:  1.25rem;   --sp-6:  1.5rem;
  --sp-7:  1.75rem;   --sp-8:  2rem;      --sp-10: 2.5rem;
  --sp-12: 3rem;      --sp-14: 3.5rem;    --sp-16: 4rem;
  --sp-20: 5rem;      --sp-24: 6rem;      --sp-32: 8rem;

  --sp-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* --- Échelle des contrôles de saisie -----------------------------------
     Sur petit écran, la taille du texte reste à 1 rem : en dessous de 16 px,
     iOS zoome automatiquement au focus. Au-delà de 768 px, les champs se
     resserrent. Une seule paire de variables pilote tous les champs.        */
  --control-py: 0.625rem;
  --control-px: 0.875rem;
  --control-fs: var(--fs-md);
  --control-lh: 1.4;

  /* --- Rayons ------------------------------------------------------------ */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 999px;

  /* --- Ombres : toujours teintées marine ---------------------------------- */
  --sh-sm:      0 1px 3px rgba(12, 30, 61, .08);
  --sh-md:      0 10px 30px -12px rgba(12, 30, 61, .20);
  --sh-lg:      0 26px 60px -26px rgba(12, 30, 61, .34);
  --glow-amber:  0 10px 26px -10px rgba(240, 146, 26, .55);
  --glow-amber-s:0 16px 36px -12px rgba(240, 146, 26, .68);
  --glow-blue: 0 16px 40px -18px rgba(9, 72, 147, .45);

  --ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-blue);

  /* --- Mise en page ------------------------------------------------------ */
  --container:        1160px;
  --container-narrow: 780px;
  --gutter: clamp(1.125rem, 0.6rem + 2.2vw, 2.5rem);
  --header-h: 72px;

  /* --- Mouvement ---------------------------------------------------------- */
  --t-fast: 150ms;
  --t-med:  260ms;
  --t-slow: 480ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* --- Plans --------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-overlay: 300;
  --z-toast: 400;
}

@media (min-width: 768px) {
  :root {
    --control-py: 0.5625rem;
    --control-px: 0.8125rem;
    --control-fs: var(--fs-sm);
  }
}

/* ==========================================================================
   .dark-panel — inversion locale en marine
   Ne redéfinit que des variables : tout composant placé à l'intérieur
   (bouton, badge, champ, filet, carte, tableau) s'adapte sans une seule
   règle supplémentaire. C'est ce qui permet d'alterner clair et marine
   d'une section à l'autre sans dupliquer le CSS.
   ========================================================================== */

.dark-panel {
  --c-bg:        #0E2E5E;
  --c-bg-2:      #143A72;
  --c-surface:   #17417C;
  --c-surface-2: #1E4C8C;
  --c-header-bg: rgba(14, 46, 94, .86);

  --c-glass:        rgba(255, 255, 255, .07);
  --c-glass-strong: rgba(255, 255, 255, .12);
  --c-glass-line:   rgba(255, 255, 255, .16);

  --c-line:        rgba(255, 255, 255, .15);
  --c-line-strong: rgba(255, 255, 255, .26);

  /* Sur le marine, l'ambre reprend la valeur exacte du site BNC */
  --c-amber:      #F5A623;
  --c-amber-lt:   #FFC65C;
  --c-amber-soft: rgba(245, 166, 35, .18);
  --c-amber-line: rgba(245, 166, 35, .38);

  --c-blue-soft:  rgba(150, 190, 255, .16);

  --c-text:   #FFFFFF;
  --c-text-2: rgba(255, 255, 255, .80);
  --c-muted:  rgba(255, 255, 255, .64);
  --c-faint:  rgba(255, 255, 255, .46);

  --c-neutral: #A9B7CF;  --c-neutral-soft: rgba(169, 183, 207, .18);
  --c-info:    #96BEFF;  --c-info-soft:    rgba(150, 190, 255, .18);
  --c-warning: #FFB65C;  --c-warning-soft: rgba(255, 182, 92, .18);
  --c-success: #4FDDA8;  --c-success-soft: rgba(79, 221, 168, .18);
  --c-danger:  #FF9999;  --c-danger-soft:  rgba(255, 153, 153, .18);

  --sh-sm: 0 2px 10px rgba(0, 0, 0, .30);
  --sh-md: 0 14px 34px -14px rgba(0, 0, 0, .55);
  --sh-lg: 0 28px 64px -28px rgba(0, 0, 0, .70);

  --ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-amber-bright);

  background-color: var(--c-bg);
  color: var(--c-text-2);
}

/* Marine le plus profond : pied de page */
.dark-panel--deep {
  --c-bg:      #091F42;
  --c-bg-2:    #0E2E5E;
  --c-surface: #12305F;
}