/* Inter servie par jobunt.ch (2026-10-10) et non par Google Fonts : chaque
   visite envoyait l'adresse IP du visiteur à Google, ce que la page
   Confidentialité dément. Sous-ensemble latin, graisses 300 à 500 (celles du
   système), axe variable : un seul fichier de 97 Ko. Source :
   frontend/fonts/Inter-VariableFont_opsz_wght.ttf (OFL). */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format("woff2");
}

/* ==========================================================================
   JOBUNT — DESIGN SYSTEM
   Jetons. Source unique de vérité : aucune valeur de couleur, de rayon ou
   de durée en dur ailleurs.

   Le noir n'est jamais absolu. Le bleu électrique n'est qu'un détail.
   Tout est arrondi, y compris les symboles.
   ========================================================================== */

:root{
  /* ------------------------------------------------------------ ENCRES -- */
  --ink:       #15171A;   /* texte principal, boutons pleins */
  --ink-2:     #3E434A;   /* texte secondaire */
  --grey:      #5D626B;   /* texte courant atténué (5,6:1 sur --page) */
  --grey-2:    #676C75;   /* légendes, texte faible (4,8:1 sur --page, seuil AA) */
  --grey-3:    #C7CCD3;   /* désactivé */

  /* ---------------------------------------------------------- SURFACES -- */
  --page:      #F4F4F4;   /* fond de la page */
  --surface:   #FFFFFF;   /* cartes, conteneurs posés dessus */
  --surface-2: #FAFAFA;   /* grand conteneur, zone alternée */
  --surface-3: #EDF0F3;   /* remplissage doux, survol */
  --line:      #E9EBEF;   /* filet 1px */
  --line-2:    #DDE1E7;   /* filet appuyé */

  /* ------------------------------------------------------------- BLEU ---
     Règle : le bleu marque l'actif et ce qui vient du produit.
     Jamais un aplat large, jamais deux bleus côte à côte. */
  --blue:      #50778C;
  --blue-deep: #3E5F71;
  --blue-soft: #7E9DAE;
  --blue-wash: #EEF3F6;

  /* ------------------------------------------------------------- SAUMON ---
     L'autre bout du dégradé. */
  --salmon:      #CD5D19;
  --salmon-wash: #FBEEE4;

  /* ------------------------------------------------------------ DÉGRADÉ ---
     LE détail du système. Bleu électrique -> rouge saumon, en diagonale.
     Il ne sert QUE sur les détails : sur-titres, numéros, coches, symboles,
     soulignements, drapeaux. Jamais sur une grande surface, jamais derrière
     du texte long. Version SVG : url(#g-accent), définie dans symbols.js. */
  --grad: linear-gradient(115deg, var(--blue) 0%, var(--salmon) 100%);
  /* Le dégradé écrit SUR des lettres (les mots de la recherche en phrase) :
     le même ; en sombre, il part du bleu clair, sinon le début du mot se
     confond avec le fond (18/10). */
  --grad-texte: var(--grad);

  /* --------------------------------------------------------------- BANDE ---
     Fond des sections qui séquencent la page. Elles font la hauteur de
     l'écran : ce sont elles qui donnent son souffle à la descente. */
  --band:      #EDF0F3;

  /* --------------------------------------------------------------- VOILE ---
     Posé sur les photos pour que le texte blanc tienne. Plus dense en haut
     et en bas, là où le titre et les cartes se posent. */
  --scrim: linear-gradient(180deg,
             rgba(16,22,28,.60) 0%,
             rgba(16,22,28,.40) 48%,
             rgba(16,22,28,.64) 100%);

  /* ----------------------------------------------------------- RAYONS ---
     Tout est arrondi. Trois marches, plus la pilule. */
  --r-lg:  22px;   /* grands conteneurs */
  --r-md:  16px;   /* cartes, listes */
  --r-sm:  11px;   /* tuiles, petits blocs */
  --r-xs:  8px;
  --r-pill: 999px; /* boutons, jetons */

  /* ----------------------------------------------------------- OMBRES --- */
  --shadow:    0 1px 2px rgba(21,23,26,.04), 0 10px 30px rgba(21,23,26,.06);
  --shadow-sm: 0 1px 2px rgba(21,23,26,.05), 0 4px 14px rgba(21,23,26,.05);
  --shadow-lg: 0 2px 4px rgba(21,23,26,.04), 0 24px 60px rgba(21,23,26,.09);

  /* ------------------------------------------------------ TYPOGRAPHIE ---
     Inter seul. Light (300) pour les titres, Regular (400) pour le corps,
     Medium (500) réservé aux boutons et aux libellés courts. */
  --font: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-display: 60px;  --lh-display: 1.06;
  --fs-h1:      42px;  --lh-h1: 1.12;
  --fs-h2:      30px;  --lh-h2: 1.2;
  --fs-h3:      19px;  --lh-h3: 1.35;
  --fs-lead:    17px;  --lh-lead: 1.6;
  --fs-body:    15px;  --lh-body: 1.65;
  --fs-small:   13.5px;
  --fs-micro:   12px;

  --ls-display: -.035em;
  --fs-eyebrow: 12.5px; --ls-eyebrow: .1em;

  /* --------------------------------------------------------- ESPACES ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --container: 1120px;
  --pad: 24px;
  --section: 176px;

  /* --------------------------------------------------------- MOUVEMENT -- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --d1: 160ms;   /* survol */
  --d2: 280ms;   /* panneau */
  --d3: 900ms;   /* apparition au défilement */
  --d-nav: 520ms;/* bascule collée <-> détachée */
  --ease-nav: cubic-bezier(.32,.72,0,1);
}

@media (max-width: 860px){
  :root{
    --fs-display: 36px;
    --fs-h1: 29px;
    --fs-h2: 24px;
    --fs-lead: 16px;
    --section: 96px;
    --pad: 20px;
  }
}

/* ============================================================ MODE SOMBRE ==
   (11/10, demande de Landry) Suit le réglage de l'appareil, sauf si le
   visiteur a choisi avec le bouton soleil/lune (js/theme.js pose alors
   data-theme="light" ou "dark" sur <html>, avant l'affichage).
   Mêmes rôles, valeurs inversées : le texte reste « encre » (devenue
   claire), les surfaces restent les surfaces (devenues sombres). Le noir
   n'est jamais absolu, ici non plus. */
:root{
  color-scheme:light;
  --on-ink:      #FFFFFF;   /* texte posé sur un aplat « encre » (boutons) */
  --salmon-text: #8A3D10;   /* texte saumon sur fond saumon pâle */
  --verre:       rgba(255,255,255,.72);  /* barre détachée, verre dépoli */
  --verre-bord:  rgba(255,255,255,.7);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#ECEEF1; --ink-2:#C5CAD1; --grey:#9AA0A9; --grey-2:#878E99; --grey-3:#646B75;
    --page:#0E1012; --surface:#16191C; --surface-2:#1A1D21; --surface-3:#22262B;
    --line:#262A30; --line-2:#333941;
    --blue:#7FA6BC; --blue-deep:#A9C6D6; --blue-soft:#57798C; --blue-wash:#172129;
    --grad-texte:linear-gradient(115deg, var(--blue-deep) 0%, var(--salmon) 100%);
    --salmon:#E8813F; --salmon-wash:#2B1D14; --salmon-text:#F2A877;
    --band:#121518;
    --shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.30);
    --shadow-lg:0 2px 4px rgba(0,0,0,.30), 0 24px 60px rgba(0,0,0,.45);
    --on-ink:#121417;
    --verre:rgba(22,25,28,.74); --verre-bord:rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#ECEEF1; --ink-2:#C5CAD1; --grey:#9AA0A9; --grey-2:#878E99; --grey-3:#646B75;
  --page:#0E1012; --surface:#16191C; --surface-2:#1A1D21; --surface-3:#22262B;
  --line:#262A30; --line-2:#333941;
  --blue:#7FA6BC; --blue-deep:#A9C6D6; --blue-soft:#57798C; --blue-wash:#172129;
    --grad-texte:linear-gradient(115deg, var(--blue-deep) 0%, var(--salmon) 100%);
  --salmon:#E8813F; --salmon-wash:#2B1D14; --salmon-text:#F2A877;
  --band:#121518;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.30);
  --shadow-lg:0 2px 4px rgba(0,0,0,.30), 0 24px 60px rgba(0,0,0,.45);
  --on-ink:#121417;
  --verre:rgba(22,25,28,.74); --verre-bord:rgba(255,255,255,.08);
}