/* ============================================================
   DESIGN SYSTEM - FICHE-PAIE.FR
   Fichier de tokens de la charte graphique.

   Source unique de verite - toute valeur de charte se declare
   ici et nulle part ailleurs.

   Cree le : 23/07/2026 (Design System, lot 1)
   Perimetre : couleurs, familles typographiques, rayons,
   ombres, motion. Les espacements, tailles de police,
   containers et z-index restent dans /css/tokens.css
   jusqu'a leur consolidation (lot 3).

   Charge en PREMIER dans templates/layouts/main.php,
   AVANT /css/tokens.css et /css/style.css : un token
   declare apres son usage ne s'applique pas.
   ============================================================ */
/* © 2025-2026 Purple Telecom - Tous droits reserves. */

:root {

    /* ===========================================
       SECTION 1 - COULEURS
       ===========================================
       Doctrine des bleus :
       - --gp-bleu-marine  = IDENTITE : logo, titres, texte fort.
       - --gp-bleu-primaire = ACTION : CTA, liens, montants,
         bordures actives.
       Aucun autre bleu fonce n'est autorise.
       #1a3a5c (ancien marine, fallbacks fantomes de blog.css)
       et #2a5298 sont PROSCRITS : eradication au lot 2.

       Doctrine chaude :
       - L'orange est l'accent de MARQUE (fleche du CTA header,
         blob du hero).
       - Les jaunes sont FONCTIONNELS (encarts d'avertissement,
         compteurs du formulaire).
       =========================================== */

    /* Tokens repris a l'identique du :root de /css/style.css
       (12 valeurs verifiees le 23/07/2026, aucune divergence).
       Tant que le :root de style.css existe (lot 2 non fait),
       il est declare plus tard dans la cascade et gagne sur
       ces doublons : valeurs identiques, rendu inchange. */
    --gp-bleu-marine: #1e3760;
    --gp-turquoise: #5ec5c8;
    --gp-bleu-moyen: #7da4d7;
    --gp-gris: #6b7280;
    --gp-gris-clair: #f3f4f6;
    --gp-blanc: #ffffff;
    --gp-jaune-pale: #fef9e7;
    --gp-jaune-bordure: #d4a017;
    --gp-jaune-fonce: #b8860b;
    --gp-success: #10b981;
    --gp-error: #ef4444;
    --gp-orange: #f7931e;

    /* Nouveaux tokens : officialisation de valeurs aujourd'hui
       en dur dans style.css, blog.css, home.css, generate.css. */
    --gp-bleu-primaire: #1d458c;   /* Couleur d'ACTION : CTA, liens, montants, bordures actives */
    --gp-orange-clair: #fbb03b;    /* Degrades du blob decoratif */
    --gp-jaune-vif: #fde047;       /* Compteurs du formulaire (heures sup) */
    --gp-jaune-texte: #854d0e;     /* Texte sur jaune vif */
    --gp-bordure: #e5e7eb;         /* Bordures de cartes et de champs */
    --gp-fond-pale: #fafcfe;       /* Fond alterne des sections (damier) */
    --gp-pastille: #e8f0fe;        /* Fonds d'icones et badges d'information */

    /* ===========================================
       SECTION 2 - TYPOGRAPHIE (familles)
       ===========================================
       Familles uniquement. Ne PAS redeclarer ici les tailles
       (--font-size-*) : elles vivent dans /css/tokens.css et
       seront consolidees au lot 3 - toute redeclaration ici
       serait un doublon involontaire.
       Le chargement des polices (@font-face) est le sujet
       du lot 3 : aucune police n'est chargee par ce fichier.
       =========================================== */
    --gp-font-titres: "Plus Jakarta Sans", sans-serif;   /* Titres et logo, graisses 700/800 */
    --gp-font-corps: "Inter", -apple-system, sans-serif; /* Corps de texte, 400/500/600 */
    --gp-font-signature: "Caveat", cursive;              /* Slogan et accents manuscrits */

    /* ===========================================
       SECTION 3 - ESPACEMENTS
       ===========================================
       Rien n'est declare ici : les espacements vivent dans
       /css/tokens.css (--space-xs a --space-3xl), avec les
       containers (--container-*), les zones tactiles et les
       z-index (--z-*). Consolidation prevue au lot 3.
       Cette section n'existe que pour documenter ou chercher.
       =========================================== */

    /* ===========================================
       SECTION 4 - RAYONS
       =========================================== */
    --gp-radius-sm: 5px;
    --gp-radius-md: 8px;
    --gp-radius-lg: 12px;
    --gp-radius-xl: 14px;
    --gp-radius-pill: 20px;

    /* ===========================================
       SECTION 5 - OMBRES
       =========================================== */
    --gp-ombre-carte: 0 18px 44px rgba(30,55,96,.10);
    --gp-ombre-bulletin: 0 22px 46px rgba(30,55,96,.14);

    /* ===========================================
       SECTION 6 - MOTION
       ===========================================
       Signatures animees de la maison (identite du site,
       documentees dans le styleguide depose).
       Regle : animations en transform/opacity uniquement
       (exception documentee : border-radius des blobs du hero),
       et prefers-reduced-motion respecte partout.
       =========================================== */
    --gp-duree-ui: .3s;
    --gp-courbe-ui: ease;
    --gp-courbe-tampon: cubic-bezier(.2,1.6,.4,1);   /* Rebond du tampon URSSAF */
    --gp-cycle-surligneur: 11s;      /* Surligneur turquoise du titre */
    --gp-cycle-cascade: 10s;         /* Cascade des rangees du bulletin */
    --gp-cycle-rotateur: 12s;        /* Rotateur des marques */
    --gp-cycle-blob: 22s;            /* Morphing du blob orange */
    --gp-cycle-blob-echo: 30s;       /* Echo du blob, a contre-rythme */
}