/* NextAiCollab - Fondations. Monochrome, editorial. Charge apres tokens.css. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Une ancre visee depuis le menu se retrouverait sinon sous l'en-tete collant. */
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-2);
  line-height: 1.68;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* GRAIN ------------------------------------------------------------------
   Le seul "effet" du site, et c'est celui qui separe un noir d'ecran d'un noir
   imprime. Un aplat #070708 parfaitement lisse est un aplat NUMERIQUE : l'oeil
   le lit comme une absence. Un grain a 3,5 % lui rend une matiere, et il fait
   surtout beaucoup pour les photographies posees dessus, qui cessent d'etre des
   rectangles colles sur du vide.

   Le bruit est genere par le navigateur (feTurbulence) : zero requete, zero
   fichier, ~400 octets dans la feuille de style. Il est desature A LA SOURCE
   (feColorMatrix dans le SVG) plutot qu'avec un filter CSS, qui aurait force une
   couche de composition supplementaire a chaque defilement. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* TITRAGE ----------------------------------------------------------------
   Inter partout, en 600, avec un crenage negatif marque. C'est ce crenage qui
   fait le travail : a -0,025 em et en gros corps, Inter cesse d'etre la police
   par defaut d'une interface et devient un titrage. Sans lui, les mots
   flottent ; avec, ils font bloc. */
h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;          /* evite le mot orphelin en fin de titre */
}
h1 { font-size: clamp(2.6rem, 6vw, 4.7rem); }

/* PAS DE TITRE EN CONTOUR. Essaye le 01/09/2026 (text-stroke sur la fin du
   h1, "sans en embaucher une." en lettres creuses) et retire le soir meme a
   la demande de Maxence : « tu as mis un style, c'est pas top ». Le titre est
   en plein, d'un seul poids, et il le reste. */

h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.012em; }
h4 { font-size: 1rem; line-height: 1.3; letter-spacing: -0.005em; }

p { color: var(--text-2); }
strong { color: var(--text); font-weight: 600; }

/* Les chiffres alignes en colonne (statistiques, index de sections) doivent
   avoir la meme chasse, sinon "01" et "11" ne tombent pas au meme endroit. */
.num { font-variant-numeric: tabular-nums; }

::selection { background: var(--white); color: var(--black); }
:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; border-radius: 2px; }

/* La barre de defilement fait partie de la page. Large et claire, elle signe le
   reglage par defaut ; fine et sombre, elle disparait dans le fond. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border: 3px solid var(--bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); }

/* Lien d'evitement : premier element focalisable, invisible tant qu'on ne
   navigue pas au clavier. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: var(--black);
  padding: 12px 20px; font-weight: 500; font-size: 0.9rem;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Layout ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section-sm { padding-block: var(--section-y-sm); }
.section + .section { border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-2); }

/* Label discret. Le filet de 26 px qui le precedait a ete retire : la page en
   compte une douzaine, et repete douze fois, un point d'accroche cesse d'etre
   un point d'accroche pour devenir un tic. Les capitales espacees suffisent a
   distinguer l'intitule du titre qui le suit. Le bloc n'a plus rien a aligner :
   display: block, et le centrage se fait au texte et non a la boite. */
.label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 26px;
}
.label.center,
.section-head.center .label,
.cta .label,
.lp-final .label { text-align: center; }

/* EN-TETE DE SECTION -----------------------------------------------------
   Deux colonnes et non plus une pile. Le titre tient la gauche, le paragraphe
   d'introduction tombe a droite et cale sur SA derniere ligne (align-items:
   end) : les deux blocs se terminent ensemble, ce qui dessine une ligne de pied
   invisible que l'oeil suit sans la voir. Empile, le meme contenu se lisait
   comme un communique ; ecarte, il se lit comme une double page.

   Le placement est explicite (grid-row / grid-column) et non automatique : les
   trois enfants sont label, h2 et un paragraphe FACULTATIF, or une section sans
   paragraphe verrait sinon son titre glisser dans la colonne de droite. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  column-gap: clamp(48px, 7vw, 104px);
  align-items: end;
  margin-bottom: clamp(64px, 8vw, 104px);
}
.section-head .label { grid-column: 1; grid-row: 1; }
.section-head h2   { grid-column: 1; grid-row: 2; }
.section-head p {
  grid-column: 2; grid-row: 2;
  align-self: end;
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--text-2);
  max-width: 46ch;
  /* Cale sur la derniere ligne du titre et non sur son cadre : sans ce
     decalage, le paragraphe "pend" sous la ligne de base du titre. */
  padding-bottom: 0.28em;
}
/* Deux cas ou la grille n'a plus lieu d'etre, et ou elle nuit :
   - pas de paragraphe d'introduction : la colonne de droite reste vide, et le
     titre se retrouve comprime dans la moitie gauche sans rien y gagner ;
   - conteneur etroit (.container.narrow, 800 px) : la moitie gauche fait alors
     370 px, ou un titre de six mots tombe en escalier de cinq lignes.
   C'est exactement ce qui arrivait a la section des questions frequentes, qui
   cumule les deux. */
.section-head:not(:has(p)) { display: block; max-width: 760px; }
.container.narrow .section-head { display: block; max-width: none; }

.section-head.center {
  display: block;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.section-head.center p { margin: 24px auto 0; max-width: 56ch; padding-bottom: 0; }

.muted { color: var(--text-3); }
.lead { font-size: 1.16rem; color: var(--text-2); line-height: 1.66; }

/* Grille en filets : le motif structurant du site. Les cellules ne sont pas des
   cartes posees sur un fond, ce sont des cases d'un meme tableau. Les bords
   exterieurs viennent du conteneur, les interieurs de chaque cellule - sans
   quoi les filets doublent d'epaisseur la ou deux cellules se touchent. */
.rule-grid {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.rule-grid > * {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Reveal au scroll : plus lent et plus court qu'avant. Un bloc qui monte de
   14 px en 0,6 s se remarque ; le meme qui monte de 9 px en 0,9 s ne se
   remarque pas - et c'est precisement ce qu'on veut : on ne doit pas voir
   l'animation, on doit trouver la page calme. */
.reveal {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal-left { transform: translateX(-16px); }
.reveal-right { transform: translateX(16px); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.09s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.27s; }

/* PAS DE BRANCHE prefers-reduced-motion. Elle a existe ici, elle a ete retiree
   le 01/09/2026 a la demande explicite de Maxence : c'est un choix, pas un
   oubli, et c'est ecrit pour qu'on ne la remette pas par reflexe.

   Ce qu'elle faisait : scroll-behavior a auto, toutes les animations et toutes
   les transitions coupees, et .reveal force a l'etat visible.

   Ce que ca change : le mouvement du site n'a qu'un seul registre, des fondus
   de 0,9 s sur 9 px de deplacement, et il joue desormais pour tout le monde. A
   une exception pres, qu'il faut nommer honnetement : le systeme de #services
   tourne en continu, et c'est la seule chose du site qu'un visiteur sensible au
   mouvement pourrait vouloir couper. Ne pas remettre la branche sans en
   reparler. */

@media (max-width: 980px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  /* En dessous de cette largeur, la colonne de droite n'a plus la place de
     tenir un paragraphe lisible : on repile, et le paragraphe reprend sa marge
     haute puisqu'il n'a plus de titre a cote de qui s'aligner. */
  .section-head { display: block; max-width: 760px; }
  .section-head p { margin-top: 24px; padding-bottom: 0; max-width: 58ch; }
}
@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 52px; }
}