/* NextAiCollab - Design tokens. Monochrome, editorial, sobre.
   Noir / blanc / gris, cale sur le logo (lettrage blanc sur noir #070708).
   Deux exceptions colorees, et deux seulement : la section #soclai, qui porte
   la couleur du produit, et la CLE DES SIX DOMAINES ci-dessous, qui est la
   legende d'un graphique. Partout ailleurs, aucun filet, aucun titre, aucun
   bouton n'est colore. Deux familles typographiques.

   La contrainte est le parti pris : sans couleur pour hierarchiser, tout repose
   sur la TAILLE, le POIDS et le BLANC. C'est pour ca qu'il y a ici trois niveaux
   de gris de texte et trois de filet, et pas un de plus - au quatrieme, on ne
   distingue plus rien et on est tente d'ajouter une couleur. */

:root {
  /* Surfaces (le fond matche le fond du logo -> le logo se fond sans rectangle) */
  --bg: #070708;
  --bg-2: #0c0c0e;      /* alternance de sections, tres subtile */
  --surface: #101013;   /* cartes / panneaux */
  --surface-2: #17171b; /* survol */

  /* Filets (hairlines) */
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.17);
  --line-3: rgba(255, 255, 255, 0.28);

  /* Texte */
  --text: #f4f4f5;      /* titres, blanc casse */
  --text-2: #9a9aa2;    /* corps, gris */
  --text-3: #6a6a72;    /* labels discrets, gris fonce */

  /* CLE DE COULEUR DES SIX DOMAINES ---------------------------------------
     Ajoutee le 01/09/2026 a la demande explicite de Maxence : « des couleurs
     vives sur les elements mis dans le graphique, ca permet d'arreter les
     yeux », avec les intitules en gras.

     POURQUOI CECI NE CONTREDIT PAS LA REGLE. La regle etait : pas de couleur
     d'INTERFACE, la couleur n'entre que par le contenu. Ici la couleur n'est
     pas un ornement pose sur une interface, c'est la CLE D'UN GRAPHIQUE :
     chaque domaine a sa teinte, et cette teinte se retrouve aux trois memes
     endroits - le numero de la ligne, les cases de sa barre de perimetre, et
     le point qui le represente dans le systeme anime juste au-dessus. C'est
     exactement le role que la couleur joue dans les deux graphiques donnes en
     reference le 01/09. Une couleur qui identifie une serie n'est pas une
     decoration : elle porte de l'information, et on peut la retirer seulement
     en retirant l'information avec.

     D'OU VIENNENT CES TEINTES. Cinq des six etaient DEJA dans la page : ce
     sont les couleurs que SoclAi donne a ses postes dans son propre produit
     (cf. $collaborateurs dans index.php et la capture juste en dessous). Seul
     le vert du 02 est nouveau. Et le domaine 06, qui EST SoclAi, porte le
     violet du produit : la ligne et la section qu'elle annonce ont enfin la
     meme couleur. Rien n'a donc ete invente pour faire joli.

     DEUX VALEURS PAR DOMAINE, ET C'EST INDISPENSABLE. Le ton vif tient en
     filet et sous un aplat, mais pas comme TEXTE sur fond noir : #6d5bd0 y
     tombe a 3,9:1, sous le seuil de lisibilite. Chaque domaine a donc son ton
     vif (--dN) pour les traits, les points et les fonds, et son ton clair
     (--dNc) pour le texte - tous mesures entre 8:1 et 12:1 sur #070708. C'est
     la meme lecon que --sc / --sc-clair dans components.css.
     --dNr donne les composantes du ton vif, pour composer des fonds en rgba()
     sans dependre de color-mix(). */
  --d1: #3f86f5;  --d1c: #9dc2ff;  --d1r: 63, 134, 245;    /* 01 sur mesure */
  --d2: #4fc26a;  --d2c: #9ae0a8;  --d2r: 79, 194, 106;    /* 02 referencement */
  --d3: #25b6c4;  --d3c: #7fd7e0;  --d3r: 37, 182, 196;    /* 03 automatisation */
  --d4: #e8994a;  --d4c: #f2c58e;  --d4r: 232, 153, 74;    /* 04 conseil */
  --d5: #c4568f;  --d5c: #e5a3c3;  --d5r: 196, 86, 143;    /* 05 maintenance */
  --d6: #6d5bd0;  --d6c: #b6acec;  --d6r: 109, 91, 208;    /* 06 SoclAi */

  --white: #ffffff;
  --black: #000000;

  /* Radius. Le pilule a disparu des boutons : un bouton arrondi a fond de
     course est une convention d'application web, pas de maison serieuse. Un
     rayon de 3 px se voit a peine et suffit a ne pas paraitre brutal. */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Layout. Le conteneur s'est elargi de 80 px et les marges laterales de 12 :
     le contenu ne gagne presque rien en largeur utile, mais il respire au bord
     de l'ecran, et c'est la que se voit la difference. */
  --container: 1240px;
  --container-narrow: 800px;
  --header-h: 72px;

  --section-y: 168px;
  --section-y-sm: 104px;
  --gutter: 40px;

  /* Transitions. L'apparition est plus lente qu'avant (0,6 s -> 0,9 s) et plus
     courte en distance : le luxe, en mouvement, c'est la lenteur et la retenue.
     Une animation rapide et ample donne l'impression d'un site qui s'agite. */
  --transition: 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Typo : UNE seule famille, Inter, du titre de couverture a la mention
     legale. Un serif de titrage a ete essaye sur les h1 et les h2 - c'est le
     geste qui "fait cher" le plus vite - et il a ete refuse : il donnait au
     site l'allure d'une maison d'edition et non celle d'un prestataire
     technique. La montee en gamme se joue donc ailleurs : sur l'espace, le
     grain, le rythme et les filets. C'est plus difficile, et c'est plus juste.
     Ne pas y revenir sans en reparler. */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Sur un ecran etroit, les sections de 168 px se suivent sans qu'on voie ou
   l'une finit : le rythme vertical se resserre, les filets font le reste. */
@media (max-width: 1000px) {
  :root {
    --section-y: 118px;
    --section-y-sm: 80px;
    --gutter: 28px;
  }
}
@media (max-width: 700px) {
  :root {
    --section-y: 88px;
    --section-y-sm: 62px;
    --gutter: 22px;
  }
}