/* Kems Solution — jetons de la charte « Marine » (piste A, retenue le 25/10/2026).
   Seule source des couleurs, de la police et des formes : un écran n'écrit jamais une couleur en dur.
   Le mode sombre suit le réglage de l'appareil, sauf choix explicite (data-theme sur <html>).
   Règles d'emploi : CHARTE.md. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("polices/PlusJakartaSans-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs, mode clair */
  --fond: #F3F5F9;              /* fond de page */
  --surface: #FFFFFF;           /* cartes, barre du haut, champs */
  --surface-2: #EEF1F7;         /* en-têtes de tableau, survol de ligne, fond des jauges */
  --bordure: #DCE2EC;           /* contours de carte, séparateurs */
  --champ: #7D8AA3;             /* contour des champs et boutons secondaires */
  --texte: #0B1B3F;             /* encre marine */
  --texte-2: #46536B;           /* libellés, dates, texte d'appoint */
  --texte-3: #5F6B82;           /* indications, texte d'exemple dans un champ */
  --accent: #1E54DE;            /* bouton principal, focus */
  --accent-fort: #1844B8;       /* survol et appui du bouton principal */
  --sur-accent: #FFFFFF;        /* texte posé sur l'accent */
  --accent-texte: #1A4BCB;      /* liens, entrée active du menu */
  --accent-pale: #E8EEFE;       /* fond de l'entrée active, halo de focus, puce d'icône */
  --graphique: #1E54DE;         /* courbes et jauges */
  /* Fond dégradé, repris de Suivi des frais le 25/10/2026 : écran de connexion et barre latérale */
  --degrade: linear-gradient(180deg, #B6DEFA 0%, #D3EAFC 45%, #FFFFFF 100%);
  --degrade-horizontal: linear-gradient(90deg, #B6DEFA 0%, #E3F2FD 100%);  /* barre du haut du téléphone */
  --degrade-bord: #CFE3F5;                  /* bordure le long du dégradé */
  --degrade-carte: rgba(255, 255, 255, .7); /* carte posée sur le dégradé */
  --barre: var(--degrade);      /* barre latérale */
  --barre-texte: #1F3F73;
  --barre-titre: #46536B;
  --barre-survol: rgba(255, 255, 255, .6);
  --barre-actif: #FFFFFF;       /* entrée active : une carte blanche marquée d'un trait bleu à gauche */
  --barre-actif-texte: #1A4BCB;
  --barre-actif-ombre: inset 3px 0 0 #1E54DE, 0 1px 3px rgba(11, 42, 91, .12);
  --barre-bordure: var(--degrade-bord);
  --barre-carte: var(--degrade-carte);
  --desactive: #EEF1F7;         /* champ grisé */
  --desactive-texte: #5F6B82;

  /* Statuts : une couleur = un sens, texte foncé sur fond pâle */
  --ok: #14612F;        --ok-pale: #DDF6E5;        /* Payé, À jour, favorable */
  --info: #0B5D70;      --info-pale: #D7F3FA;      /* Partiel, information */
  --attente: #874600;   --attente-pale: #FDEFC9;   /* En attente, stock faible, envois en attente */
  --danger: #A11D1D;    --danger-pale: #FDE4E4;    /* Échue, erreur, défavorable */
  --neutre: #46536B;    --neutre-pale: #ECEFF4;    /* Brouillon, Hors ligne */
  --valide: #1A4BCB;    --valide-pale: #E8EEFE;    /* Validé : la seule pastille aux couleurs de l'accent */

  /* Police */
  --police: "Plus Jakarta Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --taille-texte: 14px;
  --taille-petit: 12px;             /* aucun texte en dessous */
  --taille-titre-carte: 15px;
  --taille-titre-ecran: 24px;
  --taille-indicateur: 23px;
  --taille-champ-telephone: 16px;   /* sous 16 px, le téléphone zoome sur le champ touché */

  /* Formes */
  --rayon-carte: 14px;
  --rayon-champ: 10px;
  --rayon-bouton: 10px;
  --rayon-pastille: 999px;
  --rayon-puce: 10px;
  --hauteur-controle: 44px;         /* bouton, champ, entrée de menu sur téléphone */
  --ombre-carte: 0 1px 2px rgba(11, 27, 63, .05), 0 8px 24px -12px rgba(11, 27, 63, .12);
  --halo-focus: 0 0 0 3px var(--accent-pale);

  /* Espacements, pas de 4 */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e7: 28px; --e8: 32px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0A1226; --surface: #111B33; --surface-2: #17233F; --bordure: #25334F; --champ: #5B6C8E;
    --texte: #E9EEF8; --texte-2: #B0BBD0; --texte-3: #8E9AB3;
    --accent: #7099FF; --accent-fort: #8DADFF; --sur-accent: #06102A; --accent-texte: #8FB0FF; --accent-pale: #1B2B57;
    --graphique: #7099FF;
    --degrade: linear-gradient(180deg, #17315F 0%, #10234A 45%, #0A1226 100%);
    --degrade-horizontal: linear-gradient(90deg, #17315F 0%, #10234A 100%);
    --degrade-bord: #25334F; --degrade-carte: rgba(255, 255, 255, .06);
    --barre-texte: #C3CCDD; --barre-titre: #9AA6BE; --barre-survol: rgba(255, 255, 255, .06); --barre-actif: #1B2B57;
    --barre-actif-texte: #A9C2FF; --barre-actif-ombre: inset 3px 0 0 #7099FF;
    --desactive: #17233F; --desactive-texte: #8E9AB3;
    --ok: #74E3A2; --ok-pale: #11301F; --info: #6FD6EC; --info-pale: #0D2D38;
    --attente: #F4C266; --attente-pale: #33270D; --danger: #FF8F8F; --danger-pale: #3B171A;
    --neutre: #B9C2D2; --neutre-pale: #222D44; --valide: #8FB0FF; --valide-pale: #1B2B57;
    --ombre-carte: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fond: #0A1226; --surface: #111B33; --surface-2: #17233F; --bordure: #25334F; --champ: #5B6C8E;
  --texte: #E9EEF8; --texte-2: #B0BBD0; --texte-3: #8E9AB3;
  --accent: #7099FF; --accent-fort: #8DADFF; --sur-accent: #06102A; --accent-texte: #8FB0FF; --accent-pale: #1B2B57;
  --graphique: #7099FF;
  --degrade: linear-gradient(180deg, #17315F 0%, #10234A 45%, #0A1226 100%);
  --degrade-horizontal: linear-gradient(90deg, #17315F 0%, #10234A 100%);
  --degrade-bord: #25334F; --degrade-carte: rgba(255, 255, 255, .06);
  --barre-texte: #C3CCDD; --barre-titre: #9AA6BE; --barre-survol: rgba(255, 255, 255, .06); --barre-actif: #1B2B57;
  --barre-actif-texte: #A9C2FF; --barre-actif-ombre: inset 3px 0 0 #7099FF;
  --desactive: #17233F; --desactive-texte: #8E9AB3;
  --ok: #74E3A2; --ok-pale: #11301F; --info: #6FD6EC; --info-pale: #0D2D38;
  --attente: #F4C266; --attente-pale: #33270D; --danger: #FF8F8F; --danger-pale: #3B171A;
  --neutre: #B9C2D2; --neutre-pale: #222D44; --valide: #8FB0FF; --valide-pale: #1B2B57;
  --ombre-carte: none;
  color-scheme: dark;
}