/* Jetons de l'identité 2026 — Parcours Informatique, FST / Université Marien Ngouabi.
   Repris du kit d'interface. Les valeurs ne sont pas calées sur une grille de 4 px
   (44, 26, 34, 76…) : ne pas arrondir. */

/* Couleurs — Parcours Informatique, FST / UMNG
   The four brand colours are inherited from the previous identity (assets/styles/app.css
   of the parcoursinfo repository) and are not negotiable. Everything else is a neutral
   or a tint added by the 2026 identity. */
:root{
  /* Base — marque */
  --violet-900:#200a3c;      /* fond profond : barre utilitaire, pied de page, bandeaux CTA */
  --violet-800:#2f0f55;      /* DOMINANTE : héros, panneaux, titres */
  --violet-700:#3b1a63;
  --violet-600:#4a2578;
  --rouge-600:#b80924;       /* ACTION : boutons primaires, filets, sur-titres */
  --rouge-700:#8a0b1e;       /* texte d'alerte sur fond clair */
  --rouge-500:#e0102c;       /* accent ponctuel dans les motifs uniquement */
  --creme-200:#F6E9BD;       /* SURFACE claire de marque, texte sur violet */
  --creme-300:#EFE3BC;
  --creme-400:#E3D5A8;
  --bleu-800:#0d2d62;        /* SECONDAIRE : liens, métadonnées, étiquettes cycle */

  /* Base — neutres */
  --blanc:#ffffff;
  --sable-50:#FBF9F5;        /* fond de section clair */
  --sable-100:#F1ECE3;       /* zone de dépôt, aperçu */
  --sable-200:#EFEDE8;       /* fond de page hors gabarit */
  --encre-900:#3A3A3A;       /* texte courant */
  --encre-700:#565656;       /* texte secondaire */
  --encre-500:#6b6b6b;       /* légendes, métadonnées mono */
  --lilas-400:#6b5a7d;       /* étiquette de placeholder d'image */
  --lilas-100:#EDE7F2;       /* hachure de placeholder, bande sombre */
  --lilas-50:#F7F4FA;        /* hachure de placeholder, bande claire */

  /* Base — filets et voiles (toujours dérivés du violet) */
  --violet-a10:rgba(47,15,85,.10);
  --violet-a14:rgba(47,15,85,.14);
  --violet-a16:rgba(47,15,85,.16);
  --violet-a20:rgba(47,15,85,.20);
  --violet-a28:rgba(47,15,85,.28);
  --violet-a30:rgba(47,15,85,.30);
  --violet-a40:rgba(47,15,85,.40);
  --creme-a22:rgba(246,233,189,.22);
  --creme-a25:rgba(246,233,189,.25);
  --creme-a55:rgba(246,233,189,.55);
  --rouge-a06:rgba(184,9,36,.06);

  /* Sémantique — surfaces */
  --surface-page:var(--sable-200);
  --surface-section:var(--sable-50);       /* section courante */
  --surface-card:var(--blanc);             /* carte, panneau de formulaire */
  --surface-accent:var(--creme-200);       /* section d'accentuation, en-tête de bloc */
  --surface-inverse:var(--violet-800);     /* héros, panneau récapitulatif */
  --surface-inverse-deep:var(--violet-900);/* barre utilitaire, pied de page */
  --surface-secondary:var(--bleu-800);     /* bandeau partenaire CISCO */
  --surface-field:var(--blanc);
  --surface-dropzone:var(--sable-100);

  /* Sémantique — texte */
  --text-title:var(--violet-800);          /* titres sur fond clair */
  --text-body:var(--encre-900);
  --text-muted:var(--encre-700);
  --text-meta:var(--encre-500);
  --text-link:var(--bleu-800);
  --text-on-inverse:var(--blanc);
  --text-on-inverse-soft:var(--creme-200); /* paragraphes sur violet */
  --text-accent:var(--rouge-600);          /* sur-titres, dates, astérisque requis */
  --text-danger:var(--rouge-700);

  /* Sémantique — traits */
  --border-hairline:var(--violet-a14);     /* carte, séparateur d'en-tête */
  --border-rule:var(--violet-a16);         /* filet de section, colonnes */
  --border-field:var(--violet-a28);
  --border-dashed:var(--violet-a30);       /* à venir, emplacement vide */
  --border-strong:var(--violet-800);       /* filet 2px de tête de liste */
  --border-on-inverse:var(--creme-a25);
  --border-focus:var(--rouge-600);

  /* Sémantique — actions */
  --action-primary-bg:var(--rouge-600);
  --action-primary-fg:var(--blanc);
  --action-secondary-bg:var(--violet-800);
  --action-secondary-fg:var(--blanc);
  --action-ghost-fg:var(--violet-800);
  --action-ghost-border:var(--violet-800);
  --action-ghost-inverse-fg:var(--creme-200);
  --action-ghost-inverse-border:var(--creme-200);
  --accent-rule:var(--rouge-600);
}
/* Typographie — trois familles, trois rôles, jamais interchangeables.
   Source Serif 4 titre / IBM Plex Sans texte / IBM Plex Mono métadonnée.

   Écart assumé par rapport au kit : l'échelle est exprimée en rem et relevée d'environ
   un cran. Deux raisons.
   1. En rem, les tailles suivent la préférence de taille de police du navigateur ; en px
      elles l'ignorent, ce qui exclut les personnes qui l'ont augmentée (WCAG 1.4.4).
   2. Le kit descendait à 9,5 px sur les métadonnées mobiles — illisible en capitales
      monospace interlettrées. Le plancher est ici de 12 px (0.75rem).
   La base est 1rem = 16 px tant que l'utilisateur n'en décide pas autrement. */
:root{
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --font-display:var(--font-serif);
  --font-body:var(--font-sans);
  --font-meta:var(--font-mono);

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* Échelle display — Source Serif 4 600, interlignage serré, approche négative */
  --display-1:4rem;          /* 64px — H1 accueil */
  --display-1-lh:1.05;
  --display-1-ls:-.025em;
  --display-2:3.5rem;        /* 56px — H1 page intérieure */
  --display-2-lh:1.07;
  --display-2-ls:-.025em;
  --display-3:2.625rem;      /* 42px — H2 de section */
  --display-3-lh:1.12;
  --display-3-ls:-.02em;
  --display-4:2.375rem;      /* 38px */
  --display-4-lh:1.12;
  --display-4-ls:-.02em;
  --display-5:2.25rem;       /* 36px */
  --display-5-lh:1.14;
  --display-5-ls:-.02em;
  --display-6:2rem;          /* 32px */
  --display-6-lh:1.15;
  --stat:3.75rem;            /* 60px — chiffres-clés */
  --stat-lh:1;
  --stat-ls:-.03em;

  /* Échelle titre — Source Serif 4 600 */
  --title-1:1.75rem;         /* 28px — titre de carte parcours */
  --title-1-lh:1.2;
  --title-2:1.625rem;        /* 26px */
  --title-2-lh:1.2;
  --title-3:1.5rem;          /* 24px */
  --title-3-lh:1.3;
  --title-4:1.375rem;        /* 22px */
  --title-4-lh:1.3;
  --title-5:1.25rem;         /* 20px — marque, en-tête de semestre */
  --title-5-lh:1.2;
  --title-6:1.25rem;         /* 20px */
  --title-6-lh:1.25;
  --title-7:1.125rem;        /* 18px */
  --title-7-lh:1.3;

  /* Corps — IBM Plex Sans. Interlignage ≥ 1,5 partout (WCAG 1.4.12). */
  --body-lg:1.125rem;        /* 18px — chapeau de héros */
  --body-lg-lh:1.65;
  --body-md:1.0625rem;       /* 17px — paragraphe de section */
  --body-md-lh:1.7;
  --body-sm:1rem;            /* 16px — texte courant du document */
  --body-sm-lh:1.65;
  --body-xs:.9375rem;        /* 15px — résumé de carte */
  --body-xs-lh:1.6;
  --body-2xs:.875rem;        /* 14px */
  --body-2xs-lh:1.6;

  /* Lead sérif — paragraphe d'ouverture en Source Serif 4 400 */
  --lead:1.25rem;            /* 20px */
  --lead-lh:1.6;
  --quote:1.5rem;            /* 24px — témoignage, guillemets français */
  --quote-lh:1.5;

  /* Interface — IBM Plex Sans 500 */
  --ui-md:1rem;              /* 16px — bouton de héros */
  --ui-sm:.9375rem;          /* 15px — bouton de barre, lien fléché */
  --ui-xs:.875rem;           /* 14px — onglet */
  --ui-2xs:.875rem;          /* 14px — étiquette de champ */

  /* Métadonnée — IBM Plex Mono, capitales, interlettrage ouvert.
     Plancher à 12px : en dessous, les capitales monospace deviennent illisibles. */
  --meta-md:.8125rem;        /* 13px — barre utilitaire, fil d'Ariane */
  --meta-sm:.78125rem;       /* 12.5px — étiquette, pastille */
  --meta-xs:.75rem;          /* 12px — sur-titre */
  --meta-2xs:.6875rem;       /* 11px — repère d'annotation */
  --track-eyebrow:.14em;
  --track-label:.12em;
  --track-caps:.09em;
  --track-brand:.08em;
}

/* Espacement, rayons, ombres, mouvement.

   Écart assumé : les gouttières et les respirations verticales du kit (44 / 76 px) sont
   resserrées, et la largeur utile élargie. Le kit était dessiné dans un cadre de 1280 px
   de large ; sur un vrai écran, ces valeurs laissaient trop de vide sur les côtés. */
:root{
  --space-1:4px;
  --space-2:6px;
  --space-3:8px;
  --space-4:10px;
  --space-5:12px;
  --space-6:14px;
  --space-7:16px;
  --space-8:18px;
  --space-9:20px;
  --space-10:22px;
  --space-11:24px;
  --space-12:26px;
  --space-14:30px;
  --space-16:34px;
  --space-18:38px;
  --space-20:44px;
  --space-24:56px;
  --space-28:64px;
  --space-32:76px;

  /* Gouttières de page */
  --gutter-desktop:32px;
  --gutter-tablet:24px;       /* pour mémoire : --gutter-desktop est redéfini par palier */
  --gutter-mobile:20px;
  --section-y:56px;           /* respiration verticale d'une section courante */
  --section-y-tight:44px;
  --band-y:52px;              /* bandeau plein aplat (chiffres, CISCO, pied) */
  --col-gap:40px;             /* colonne principale / colonne latérale */
  --card-gap:24px;
  --sticky-top:16px;

  /* Largeurs des cadres de la maquette — à ne pas confondre avec les paliers
     plus bas : --width-tablet est le cadre dessiné, --bp-tablet le seuil réel. */
  --width-desktop:1280px;
  --width-tablet:834px;
  --width-mobile:390px;
  --measure-hero:640px;       /* chapeau de héros */
  --measure-prose:760px;      /* paragraphe long */
  --sidebar-w:280px;          /* colonne du formulaire */

  /* Rayons — quasi nuls. 2px sur les actions, 4px sur les échantillons, jamais plus. */
  --radius-none:0;
  --radius-action:2px;
  --radius-swatch:4px;
  --radius-flag:3px;
  --radius-round:50%;

  /* Épaisseurs de trait */
  --stroke-hairline:1px;
  --stroke-ghost:1.5px;       /* bouton fantôme, lien souligné */
  --stroke-rule:2px;          /* onglet actif, tête de liste */
  --stroke-accent:3px;        /* filet de chiffre-clé, étape active */
  --stroke-accent-lg:4px;     /* filet rouge sous un H1 */

  /* Ombres — presque absentes : une seule, très basse, sur les cartes flottantes. */
  --shadow-none:none;
  --shadow-card:0 1px 3px rgba(47,15,85,.08);

  /* Mouvement — apparitions sobres, aucune élasticité. */
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --duration-hover:140ms;
  --duration-reveal:520ms;
  --reveal-offset:14px;
}

/* Paliers — les paliers du prototype (data-bp) sont ici de vraies media queries.
   Le kit était dessiné dans trois cadres : 1280, 834 et 390 px. Le palier tablette
   commence en réalité à 768 px, la largeur d'une tablette en portrait : à 834 px,
   les appareils de 768 à 833 px recevaient la mise en page du téléphone. */
:root{
  --bp-desktop:1280px;
  --bp-tablet:768px;
  --bp-mobile:390px;
  --rule-w:88px;
  --rule-h:4px;
  --rule-my:26px;
  --tap-min:44px;      /* hauteur minimale d'une cible tactile */
}

/* Palier tablette — de 768 à 1279 px. */
@media (max-width:1279.98px){
:root{
  --gutter-desktop:24px;
  --section-y:44px;
  --section-y-tight:36px;
  --band-y:40px;
  --col-gap:32px;
  --card-gap:20px;
  --sidebar-w:248px;
  --measure-hero:640px;

  --display-1:3rem;       --display-1-lh:1.07;   /* 48px */
  --display-2:2.625rem;   --display-2-lh:1.09;   /* 42px */
  --display-3:2.125rem;   --display-3-lh:1.13;   /* 34px */
  --display-4:2rem;       --display-4-lh:1.13;   /* 32px */
  --display-5:1.875rem;   --display-5-lh:1.15;   /* 30px */
  --display-6:1.75rem;    --display-6-lh:1.18;   /* 28px */
  --stat:2.75rem;                                /* 44px */
  --title-1:1.5rem;
  --title-2:1.4375rem;
  --title-3:1.3125rem;
  --title-4:1.25rem;
  --title-5:1.125rem;
  --title-6:1.1875rem;
  --title-7:1.125rem;
  --body-lg:1.0625rem;    --body-lg-lh:1.7;
  --body-md:1rem;         --body-md-lh:1.65;
  --lead:1.125rem;
  --quote:1.3125rem;
  --ui-md:1rem;
  --ui-sm:.9375rem;
  --meta-md:.78125rem;
  --meta-sm:.78125rem;
  --meta-xs:.75rem;

  --rule-w:72px;
  --rule-h:3px;
  --rule-my:22px;
}
}
/* Palier mobile — sous 768 px. */
@media (max-width:767.98px){
:root{
  --gutter-desktop:20px;
  --section-y:40px;
  --section-y-tight:32px;
  --band-y:36px;
  --col-gap:0px;
  --card-gap:18px;
  --sidebar-w:100%;
  --measure-hero:100%;

  --display-1:2.25rem;    --display-1-lh:1.1;    /* 36px */
  --display-2:2rem;       --display-2-lh:1.12;   /* 32px */
  --display-3:1.75rem;    --display-3-lh:1.15;   /* 28px */
  --display-4:1.625rem;   --display-4-lh:1.16;   /* 26px */
  --display-5:1.5625rem;  --display-5-lh:1.18;   /* 25px */
  --display-6:1.5rem;     --display-6-lh:1.2;    /* 24px */
  --stat:2.375rem;                               /* 38px */
  --title-1:1.375rem;
  --title-2:1.3125rem;
  --title-3:1.1875rem;
  --title-4:1.125rem;
  --title-5:1rem;
  --title-6:1.0625rem;
  --title-7:1rem;
  --body-lg:1rem;         --body-lg-lh:1.6;
  --body-md:1rem;         --body-md-lh:1.6;
  --body-xs:.9375rem;     --body-xs-lh:1.6;
  --lead:1.0625rem;
  --quote:1.1875rem;
  --ui-md:1rem;
  --ui-sm:.9375rem;
  --meta-md:.75rem;
  --meta-sm:.75rem;
  --meta-xs:.75rem;
  --meta-2xs:.6875rem;

  --rule-w:64px;
  --rule-h:3px;
  --rule-my:18px;
}
}