/* ============================================================================
   THÈME — Paul Gayet, développeur web.

   Copié du socle le 29/08/2026, puis basculé en sombre. Les NOMS ne changent
   pas, seulement les valeurs : c'est ce qui permet à `base.css` de rester le
   fichier du socle, non modifié, alors que le site est noir et le socle clair.

   UN PIÈGE À CONNAÎTRE, propre à ce site et à lui seul.

   Dans le socle, `--panel` est le fond SOMBRE d'une section à fort contraste
   posée sur un site clair, et la classe qui l'utilise s'appelle
   `.section-sombre`. Ici tout est inversé : le site est noir, donc la section
   à fort contraste est CLAIRE. `--panel` vaut un blanc cassé et
   `.section-sombre` produit une section lumineuse.

   Le nom de la classe est donc trompeur, et on ne le renomme pas : le
   renommer voudrait dire modifier `base.css`, c'est-à-dire faire diverger ce
   site du socle pour une question de vocabulaire. On préfère l'écrire ici.
   Dans les pages, cette section porte en plus `data-clair`, qui elle dit la
   vérité.

   Les ratios en commentaire sont calculés, pas estimés.
   ========================================================================= */

:root {
  /* --- Fonds ------------------------------------------------------------ */
  /* Pas de #000000. Le noir absolu sur un écran OLED fait « baver » le texte
     blanc et supprime toute possibilité de nuance entre deux sections. Trois
     noirs très proches valent mieux qu'un noir pur et un gris. */
  --bg: #08080a;        /* fond principal */
  --bg-alt: #101014;    /* section qui doit se détacher à peine */
  --card: #16161b;      /* carte posée sur le fond */
  --panel: #f2f0ea;     /* INVERSION : la section claire, au milieu du site */

  /* Non utilisés ici : aucun modèle 3D dans ce site. Conservés pour que le
     fichier reste comparable à celui du socle. */
  --scene: #101014;
  --scene-voile: 8 8 10;

  /* --- Textes ----------------------------------------------------------- */
  /* Le pire cas est --card, le plus clair des trois fonds sombres : c'est lui
     qui décide. Tous les ratios ci-dessous sont donnés sur --card. */
  --ink: #f7f6f3;       /* 16.68 sur card — titres et texte principal */
  --body: #b5b3ae;      /*  8.61 sur card — texte courant */
  --muted: #8e8c87;     /*  5.37 sur card — mentions secondaires, légendes */
  --on-panel: #12120f;  /* 16.47 sur panel — texte de la section claire */

  /* Le mot pas encore lu du manifeste. Il a SA variable parce qu'il a une
     contrainte que --muted n'a pas : il doit rester lisible tout seul.
     Première version : --muted à 32 % d'opacité, ce qui donnait 1,4 de
     contraste et 39 mots en défaut relevés par axe-core sur les quatre
     largeurs. Un effet de révélation ne dispense pas du seuil : à tout
     instant, la majorité des mots de la phrase sont dans cet état. */
  --mot-eteint: #7b7a74; /* 4.65 sur bg — au-dessus du seuil de 4,5 */

  /* --- Accent ----------------------------------------------------------- */
  /* L'orange de la première version est sorti le 29/08 : Marie ne l'aimait
     pas, et il ne tenait plus une fois les deux blocs des briefs en place.

     Le remplaçant n'est pas choisi au hasard : c'est LA couleur de texte du
     brief « Jack », dont la mise en page occupe désormais tout le haut de la
     page. Reprendre sa valeur exacte fait de l'ensemble un seul système, là où
     un blanc pur aurait cohabité avec elle sans jamais s'y fondre.

     Un accent presque blanc ne « signale » plus par la teinte. Il signale par
     le poids, la taille et l'aplat : un bouton en aplat clair sur du noir se
     voit mieux qu'un bouton orange. C'est un parti pris, pas un renoncement. */
  --accent: #d7e2ea;       /* 15.20 sur bg, 14.42 sur bg-alt, 13.70 sur card */
  --accent-dark: #ffffff;  /* survol : sur fond noir on ÉCLAIRCIT, on ne fonce
                              pas. Foncer un accent sur du noir le fait
                              disparaître, ce qui est l'inverse d'un survol */
  --accent-soft: #101418;  /* fond teinté de la même famille, très sombre.
                              --muted y garde 5,51 et --body 8,83 */
  /* Le même accent, assombri pour la section CLAIRE. Symétrique exact de
     --accent-clair du socle, et pour la même raison : l'accent normal ne
     donne que 1,08 sur --panel, donc un texte parfaitement invisible. */
  --accent-clair: #3d4a52; /* 8.01 sur panel */

  /* --- Filets ----------------------------------------------------------- */
  --line: rgba(247, 246, 243, 0.12);
  --line-strong: rgba(247, 246, 243, 0.30);

  /* --- Polices ---------------------------------------------------------- */
  /* Embarquées avec le site. Jamais d'appel à Google Fonts.
     Voir vendor/fonts/fonts.css et la règle posée le 17/08/2026. */
  --font-titre: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-texte: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-accent: 'Instrument Serif', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Rythme ----------------------------------------------------------- */
  --pas: clamp(18px, 2vw, 28px);
  /* Plus ample que le socle, un site à séquences a besoin de vide, mais moins
     que la première version : deux sections voisines cumulent leur marge, donc
     168 px en donnaient 336 entre le manifeste et la section suivante, soit un
     écran entier de noir. Mesuré sur capture. */
  --section: clamp(72px, 8vw, 128px);
  --marge-page: clamp(20px, 5vw, 72px);
  --largeur-max: 1320px;
  --largeur-texte: 62ch;

  /* --- Tailles de texte ------------------------------------------------- */
  --t-geant: clamp(3.4rem, 13vw, 11rem);      /* le nom, en ouverture */
  --t-titre: clamp(2rem, 5vw, 4rem);          /* titre de section */
  --t-sous-titre: clamp(1.15rem, 2vw, 1.5rem);
  --t-texte: 1.0625rem;
  --t-petit: 0.875rem;
  --t-manifeste: clamp(1.6rem, 4.4vw, 3.4rem); /* la phrase révélée mot à mot */

  /* --- Dégradés de titre -------------------------------------------------
     Les grands titres passent de --ink en haut à cette valeur en bas. Le point
     bas est le plus sombre du glyphe, donc c'est LUI qui décide du contraste,
     pas la couleur de départ. Les deux valeurs sont calculées sur le fond où
     le titre se pose, et gardées largement au-dessus du seuil de 4,5 : un
     dégradé qui finit à 3,2 donne un bas de lettre illisible que personne ne
     remarque à l'écran mais que la mesure attrape. */
  --titre-degrade-bas: #99918a;        /* 6.45 sur bg, 6.12 sur bg-alt */
  --titre-degrade-bas-clair: #4a4842;  /* 8.02 sur panel */

  /* --- Formes et mouvement ---------------------------------------------- */
  --arrondi: 2px;        /* presque nul : le site est anguleux, c'est un parti
                            pris de la direction artistique */
  --arrondi-carte: 3px;
  /* Deux arrondis larges, et ils ne contredisent pas le parti pris anguleux :
     ils ne s'appliquent jamais à un petit élément, seulement aux grandes
     plaques et aux sections qui se chevauchent. C'est le contraste entre des
     angles vifs partout et un arrondi ample sur les grandes surfaces qui fait
     l'effet, pas l'arrondi tout seul. */
  --arrondi-plaque: 16px;
  --arrondi-bloc: clamp(26px, 4.5vw, 56px);
  --transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-lente: 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}