/* ==========================================================================
   ASSULIGHT DESIGN SYSTEM : 01. TOKENS
   Couche primitive : typographie, couleur, espace, rayon, ombre, mouvement.
   Aucune regle de composant ici. Rien ne doit etre ecrit en dur ailleurs.
   --------------------------------------------------------------------------
   Convention : --al-{categorie}-{role}-{echelle}
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTES : famille unique "Gilroy", graisses 300 a 900
   WOFF2 reduits au jeu latin (francais compris) : environ 23 Ko par graisse
   au lieu de 140 Ko en TTF. Generes par resources/polices/polices.mjs a
   partir des TTF d'origine, gardes dans webroot/font/Gilroy. Le navigateur
   ne telecharge que les graisses que la page emploie vraiment.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Gilroy'; src: url('../font/Gilroy/Gilroy-Light.woff2') format('woff2');      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../font/Gilroy/Gilroy-Regular.woff2') format('woff2');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../font/Gilroy/Gilroy-Medium.woff2') format('woff2');     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../font/Gilroy/Gilroy-SemiBold.woff2') format('woff2');   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../font/Gilroy/Gilroy-Bold.woff2') format('woff2');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../font/Gilroy/Gilroy-ExtraBold.woff2') format('woff2');  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../font/Gilroy/Gilroy-Black.woff2') format('woff2');      font-weight: 900; font-style: normal; font-display: swap; }

:root {

  /* ------------------------------------------------------------------------
     2. COULEUR : PRIMITIVES (jamais utilisees directement dans les composants)
     ------------------------------------------------------------------------ */

  /* Encre : neutre legerement froid, calibre pour le fond sombre signature */
  --al-ink-000: #ffffff;
  --al-ink-025: #fafbfc;
  --al-ink-050: #f4f6f9;
  --al-ink-100: #e8ebf0;
  --al-ink-200: #d3d8e0;
  --al-ink-300: #b0b7c3;
  --al-ink-400: #8b93a1;
  --al-ink-450: #686f7d;   /* seuil de lisibilite : 4,5 sur le fond en creux */
  --al-ink-500: #6b7280;
  --al-ink-550: #565d69;
  --al-ink-600: #4b515c;
  --al-ink-700: #343941;
  --al-ink-800: #22262c;
  --al-ink-900: #15181d;
  --al-ink-950: #0b0d11;

  /* Azur : bleu de marque (#1b98d6) */
  --al-azur-050: #eaf6fd;
  --al-azur-100: #ddf1fb;
  --al-azur-200: #b6e2f7;
  --al-azur-300: #7fcbf0;
  --al-azur-400: #46b1e4;
  --al-azur-500: #1b98d6;   /* couleur logo */
  --al-azur-600: #0e7cb3;
  --al-azur-700: #0b6591;   /* seuil AA sur blanc */
  --al-azur-800: #0a5075;
  --al-azur-900: #0a3f5c;

  /* Magenta : rose de marque (#e4368c) */
  --al-magenta-050: #fdeef6;
  --al-magenta-100: #fde4f0;
  --al-magenta-200: #fbc6de;
  --al-magenta-300: #f79bc8;
  --al-magenta-400: #f063a8;
  --al-magenta-500: #e4368c;  /* couleur logo */
  --al-magenta-600: #c41e71;
  --al-magenta-700: #a8145c;  /* seuil AA sur blanc */
  --al-magenta-800: #86104a;
  --al-magenta-900: #6b0d3b;

  /* Solaire : jaune de marque (#fbe824) */
  --al-solaire-050: #fefce8;
  --al-solaire-100: #fefbd5;
  --al-solaire-200: #fdf6a8;
  --al-solaire-300: #fdf06b;
  --al-solaire-400: #fcee44;
  --al-solaire-500: #fbe824;  /* couleur logo */
  --al-solaire-600: #d9c400;
  --al-solaire-700: #a08f00;  /* seuil AA sur blanc */
  --al-solaire-800: #6f6300;
  --al-solaire-900: #4a4200;

  /* Etats */
  --al-success-500: #0e9f6e;
  --al-success-700: #05704b;
  --al-success-100: #def7ec;
  --al-warning-500: #f59e0b;
  --al-warning-700: #9a6200;
  --al-warning-100: #fef3c7;
  --al-danger-500:  #e5484d;
  --al-danger-700:  #b4232a;
  --al-danger-100:  #fde8e8;

  /* Composantes RGB (pour rgb(var(--x) / alpha)) */
  --al-azur-500-rgb: 27 152 214;
  --al-magenta-500-rgb: 228 54 140;
  --al-solaire-500-rgb: 251 232 36;
  --al-ink-950-rgb: 11 13 17;
  --al-ink-500-rgb: 107 114 128;
  --al-ink-000-rgb: 255 255 255;

  /* Le "Spectre" : signature de marque. Utilise avec parcimonie :
     filets, halos, bordures, surlignage. Jamais en aplat plein ecran. */
  --al-spectre: linear-gradient(90deg, var(--al-azur-500) 0%, var(--al-magenta-500) 55%, var(--al-solaire-500) 100%);
  --al-spectre-diag: linear-gradient(135deg, var(--al-azur-500) 0%, var(--al-magenta-500) 55%, var(--al-solaire-500) 100%);
  --al-spectre-soft: linear-gradient(135deg, rgb(var(--al-azur-500-rgb) / .16) 0%, rgb(var(--al-magenta-500-rgb) / .14) 55%, rgb(var(--al-solaire-500-rgb) / .16) 100%);
  --al-spectre-veil: radial-gradient(60rem 32rem at 12% -10%, rgb(var(--al-azur-500-rgb) / .18), transparent 60%),
                     radial-gradient(50rem 30rem at 88% 8%,  rgb(var(--al-magenta-500-rgb) / .14), transparent 60%),
                     radial-gradient(46rem 26rem at 50% 105%, rgb(var(--al-solaire-500-rgb) / .12), transparent 62%);

  /* ------------------------------------------------------------------------
     3. COULEUR : SEMANTIQUE (theme clair par defaut)
     C'est ce que consomment les composants.
     ------------------------------------------------------------------------ */
  --al-canvas:            var(--al-ink-000);   /* fond de page */
  --al-surface:           var(--al-ink-000);   /* carte niveau 1 */
  --al-surface-raised:    var(--al-ink-000);   /* carte flottante */
  --al-surface-sunken:    var(--al-ink-050);   /* zone en creux */
  --al-surface-inverse:   var(--al-ink-950);

  --al-text:              var(--al-ink-900);
  --al-text-strong:       var(--al-ink-950);
  /* Les deux gris de texte sont cales sur le contraste, pas sur le gout.
     Mesures sur le fond en creux (#f4f6f9), le pire des deux fonds clairs :
     muted 6,1 et subtle 4,7, la ou l'ancienne paire donnait 4,5 et 3,1.
     Un gris qui descend sous 4,5 n'est plus une nuance, c'est un texte que
     la moitie des lecteurs ne lit pas. */
  --al-text-muted:        var(--al-ink-550);
  --al-text-subtle:       var(--al-ink-450);
  --al-text-inverse:      var(--al-ink-000);
  --al-text-brand:        var(--al-azur-700);

  --al-border:            rgb(var(--al-ink-950-rgb) / .10);
  --al-border-strong:     rgb(var(--al-ink-950-rgb) / .20);
  --al-border-subtle:     rgb(var(--al-ink-950-rgb) / .06);

  --al-accent:            var(--al-azur-500);
  --al-accent-hover:      var(--al-azur-600);
  --al-accent-contrast:   var(--al-ink-000);
  --al-accent-soft:       var(--al-azur-050);
  --al-accent-text:       var(--al-azur-700);  /* accent lisible en texte */

  --al-focus-ring:        var(--al-azur-500);
  --al-selection-bg:      var(--al-magenta-500);
  --al-selection-fg:      var(--al-ink-000);

  /* Verre depoli (navbar, offcanvas, overlays) */
  --al-glass-bg:          rgb(255 255 255 / .72);
  --al-glass-border:      rgb(var(--al-ink-950-rgb) / .08);
  --al-glass-blur:        18px;

  /* Ombre : teinte encre plutot que noir pur */
  --al-shadow-color:      220 30% 8%;

  /* Grille de fond : un seul fond pour tout le site, quadrille de filets.
     Le pas change a chaque palier d'ecran (al-theme.css, Regles d'atelier)
     pour que la largeur du contenu tombe sur un nombre entier de cases. */
  --al-grid-size:         32px;
  --al-grid-line:         rgb(var(--al-ink-950-rgb) / .055);

  /* Regles d'atelier : filets du cadre et reperes en croix aux croisements.
     Plus marques que la grille, qui reste un fond. */
  --al-rule:              rgb(var(--al-ink-950-rgb) / .12);
  --al-tick:              rgb(var(--al-ink-950-rgb) / .45);

  /* ------------------------------------------------------------------------
     4. TYPOGRAPHIE
     ------------------------------------------------------------------------ */
  --al-font-display: 'Gilroy', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --al-font-body:    'Gilroy', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --al-font-mono:    ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

  --al-fw-light: 300;
  --al-fw-regular: 400;
  --al-fw-medium: 500;
  --al-fw-semibold: 600;
  --al-fw-bold: 700;
  --al-fw-extrabold: 800;
  --al-fw-black: 900;

  /* Echelle fluide : tierce majeure (1.25) resserree en mobile */
  --al-fs-display-1: clamp(3.00rem, 1.00rem + 7.8vw, 7.75rem);
  --al-fs-display-2: clamp(2.50rem, 1.20rem + 5.2vw, 5.25rem);
  --al-fs-display-3: clamp(2.00rem, 1.25rem + 3.2vw, 3.75rem);
  --al-fs-h1:        clamp(2.00rem, 1.30rem + 2.8vw, 3.50rem);
  --al-fs-h2:        clamp(1.75rem, 1.25rem + 2.0vw, 2.75rem);
  --al-fs-h3:        clamp(1.375rem, 1.10rem + 1.1vw, 1.875rem);
  --al-fs-h4:        clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --al-fs-lead:      clamp(1.0625rem, 1.00rem + 0.4vw, 1.25rem);
  --al-fs-body:      1rem;
  --al-fs-sm:        0.9375rem;
  --al-fs-xs:        0.8125rem;
  --al-fs-eyebrow:   0.75rem;

  --al-lh-tight: 0.92;   /* display */
  --al-lh-snug:  1.08;   /* titres */
  --al-lh-heading: 1.18;
  --al-lh-body:  1.62;
  --al-lh-relaxed: 1.75;

  --al-ls-display: -0.035em;
  --al-ls-heading: -0.02em;
  --al-ls-body:    -0.005em;
  --al-ls-eyebrow:  0.16em;

  --al-measure: 66ch;        /* longueur de ligne confortable */
  --al-measure-tight: 46ch;

  /* ------------------------------------------------------------------------
     5. ESPACE : base 4px
     ------------------------------------------------------------------------ */
  --al-space-0:  0;
  --al-space-1:  0.25rem;   /*  4 */
  --al-space-2:  0.5rem;    /*  8 */
  --al-space-3:  0.75rem;   /* 12 */
  --al-space-4:  1rem;      /* 16 */
  --al-space-5:  1.5rem;    /* 24 */
  --al-space-6:  2rem;      /* 32 */
  --al-space-7:  2.5rem;    /* 40 */
  --al-space-8:  3rem;      /* 48 */
  --al-space-9:  4rem;      /* 64 */
  --al-space-10: 5rem;      /* 80 */
  --al-space-11: 6rem;      /* 96 */
  --al-space-12: 8rem;      /* 128 */
  --al-space-13: 10rem;     /* 160 */

  /* Rythme vertical des sections */
  --al-section-y:    clamp(4rem, 7vw, 8.5rem);
  --al-section-y-lg: clamp(5.5rem, 10vw, 12rem);
  --al-block-gap:    clamp(2rem, 4vw, 3.5rem);

  /* ------------------------------------------------------------------------
     6. MISE EN PAGE
     ------------------------------------------------------------------------ */
  --al-container:       1320px;
  --al-container-tight: 980px;
  /* Plancher a 1.5rem : c'est la demi-gouttiere d'une `.row g-5` de Bootstrap
     (48px). En dessous, les marges negatives de la rangee depassent le
     rembourrage du conteneur et provoquent un defilement horizontal. */
  --al-gutter:          clamp(1.5rem, 4vw, 3rem);
  /* Deux cases de grille : le filet sous la navigation tombe sur une ligne. */
  --al-navbar-h:        calc(var(--al-grid-size) * 2);
  /* Largeur entre les deux regles verticales, redefinie palier par palier
     dans al-theme.css (Regles d'atelier). */
  --al-rail:            100%;
  /* Hauteur occupee par la navbar en haut de fenetre, tenue a jour par
     `al-ui.js` : elle retombe a 0 quand la navbar se masque au defilement.
     Tout element colle doit s'y arrimer plutot que coder un offset en dur. */
  --al-sticky-top:      0px;

  /* ------------------------------------------------------------------------
     7. RAYONS
     ------------------------------------------------------------------------ */
  /* Angles francs, a la maniere d'une table de montage : les cartes sont
     des pieces posees sur la grille, pas des bulles. Les boutons et les
     etiquettes gardent la pilule, c'est la signature de la marque. */
  --al-radius-xs:  2px;
  --al-radius-sm:  4px;
  --al-radius-md:  6px;
  --al-radius-lg:  8px;
  --al-radius-xl:  12px;
  --al-radius-2xl: 16px;
  --al-radius-pill: 999px;

  /* ------------------------------------------------------------------------
     8. ELEVATION
     ------------------------------------------------------------------------ */
  --al-shadow-xs: 0 1px 2px hsl(var(--al-shadow-color) / .06);
  --al-shadow-sm: 0 2px 4px hsl(var(--al-shadow-color) / .05), 0 4px 12px hsl(var(--al-shadow-color) / .05);
  --al-shadow-md: 0 4px 8px hsl(var(--al-shadow-color) / .05), 0 12px 28px hsl(var(--al-shadow-color) / .08);
  --al-shadow-lg: 0 8px 16px hsl(var(--al-shadow-color) / .06), 0 24px 56px hsl(var(--al-shadow-color) / .12);
  --al-shadow-xl: 0 16px 32px hsl(var(--al-shadow-color) / .08), 0 40px 96px hsl(var(--al-shadow-color) / .18);
  --al-glow-azur:    0 0 0 1px rgb(var(--al-azur-500-rgb) / .35), 0 12px 40px rgb(var(--al-azur-500-rgb) / .25);
  --al-glow-magenta: 0 0 0 1px rgb(var(--al-magenta-500-rgb) / .35), 0 12px 40px rgb(var(--al-magenta-500-rgb) / .22);

  /* ------------------------------------------------------------------------
     9. MOUVEMENT
     ------------------------------------------------------------------------ */
  --al-dur-instant: 80ms;
  --al-dur-fast:    160ms;
  --al-dur-base:    260ms;
  --al-dur-slow:    420ms;
  --al-dur-slower:  700ms;
  --al-dur-reveal:  900ms;

  --al-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --al-ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --al-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --al-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------------------------------------------------
     10. PROFONDEUR (z-index)
     ------------------------------------------------------------------------ */
  --al-z-base: 1;
  --al-z-sticky: 100;
  --al-z-navbar: 1030;
  --al-z-offcanvas: 1045;
  --al-z-modal: 1055;
  --al-z-toast: 1080;
  --al-z-cursor: 2000;
}

/* ==========================================================================
   THEME SOMBRE : inversion semantique.
   Pilote par [data-bs-theme="dark"] pour que Bootstrap 5.3 suive aussi.
   Le theme se choisit pour toute la page, sur <html> : le visiteur bascule
   avec le bouton de la navigation, sinon c'est le reglage du systeme. Les
   sections n'imposent plus de fond, la grille court sous tout le site.
   Seuls les panneaux qui figurent un ecran (specimens des metiers) posent
   encore l'attribut localement, pour rester sombres dans les deux themes.
   ========================================================================== */
[data-bs-theme="dark"] {
  --al-canvas:          var(--al-ink-950);
  /* Les cartes prennent le noir du site, sans grille (elles sont opaques) :
     seul leur filet les detache, pas une teinte plus claire. */
  --al-surface:         var(--al-ink-950);
  --al-surface-raised:  var(--al-ink-950);
  --al-surface-sunken:  #090a0d;
  --al-surface-inverse: var(--al-ink-000);

  --al-text:            #e9ecf1;
  --al-text-strong:     #ffffff;
  --al-text-muted:      #9aa2b0;
  --al-text-subtle:     #6f7784;
  --al-text-inverse:    var(--al-ink-950);
  --al-text-brand:      var(--al-azur-300);

  --al-border:          rgb(255 255 255 / .12);
  --al-border-strong:   rgb(255 255 255 / .24);
  --al-border-subtle:   rgb(255 255 255 / .07);

  --al-accent:          var(--al-azur-400);
  --al-accent-hover:    var(--al-azur-300);
  --al-accent-contrast: var(--al-ink-950);
  --al-accent-soft:     rgb(var(--al-azur-500-rgb) / .14);
  --al-accent-text:     var(--al-azur-300);

  --al-focus-ring:      var(--al-azur-300);

  --al-glass-bg:        rgb(11 13 17 / .68);
  --al-glass-border:    rgb(255 255 255 / .10);

  --al-grid-line:       rgb(255 255 255 / .05);
  --al-rule:            rgb(255 255 255 / .12);
  --al-tick:            rgb(255 255 255 / .45);

  --al-shadow-color:    220 60% 2%;
  --al-shadow-sm: 0 2px 4px hsl(var(--al-shadow-color) / .30), 0 4px 12px hsl(var(--al-shadow-color) / .30);
  --al-shadow-md: 0 4px 8px hsl(var(--al-shadow-color) / .35), 0 12px 28px hsl(var(--al-shadow-color) / .40);
  --al-shadow-lg: 0 8px 16px hsl(var(--al-shadow-color) / .40), 0 24px 56px hsl(var(--al-shadow-color) / .50);
  --al-shadow-xl: 0 16px 32px hsl(var(--al-shadow-color) / .45), 0 40px 96px hsl(var(--al-shadow-color) / .60);
}