@font-face{
  font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url(jost-300.woff2?v=30) format('woff2');
}
/* =============================================================================
   NABSEED · jetons de design
   Extraits de systeme.html version 2 du 01.09.2026 et de accueil.html du 02.09.
   Aucune valeur n'est inventée ici. Ce fichier est la seule origine de la couleur,
   de la typographie et du rythme : toute valeur littérale ailleurs est une dette.

   DEUX ABSENCES SONT DES DÉCISIONS, pas des oublis.
   Le système n'a AUCUN rayon : border-radius vaut 0 partout dans la source.
   Le système n'a AUCUNE ombre : aucune règle box-shadow dans la source.
   Ne pas en ajouter. L'angle vif et l'absence d'ombre portent la précision de la
   maison bien plus sûrement qu'un arrondi.
   ============================================================================= */

:root{

  /* --- LA PALETTE, dix couleurs nommées. Source de vérité. ------------------
     07.10.2026, retour d'Ilyes : crème, fond sombre et métal repris EXACTEMENT des SVG du
     logo (identite/web) : crème #F4EDE1, encre #2B241C, or #B08D57. Avant : #F2E8D5,
     #241B16, #806342. Les teintes de service suivent avec le même écart. */
  --p-sable:#D6BC91;      /* secondaire sur fond sombre */
  --p-bois:#513B2B;       /* texte courant du registre clair */
  --p-ambre:#C68132;      /* accent du registre sombre, signale une valeur mesurée */
  --p-topaze:#A9672D;
  --p-caramel:#8A4F2B;    /* accent du registre clair */
  --p-creme:#F4EDE1;      /* fond du registre clair, texte du registre sombre */
  --p-ocre:#A66F3F;
  --p-olive:#777153;
  --p-bronze:#B08D57;     /* le métal de la maison, mat. Trace les filets. */
  --p-espresso:#2B241C;   /* fond du registre sombre */

  /* Deux teintes de service, présentes dans la source sans nom de palette. */
  --p-creme-2:#EFE5D5;    /* second fond clair */
  --p-bois-2:#746150;     /* texte secondaire clair */
  --p-espresso-2:#352B21; /* second fond sombre */
  --p-bronze-clair:#B08D57; /* métal sur fond sombre */

  /* --- LES DEUX REGISTRES ---------------------------------------------------
     Ce ne sont pas deux thèmes, ce sont deux jeux de rôles. Le registre clair
     est l'origine. Le sombre n'est pas une variante nocturne, c'est un moment
     du récit : la comparaison, la demande, le passage sous le seuil.           */

  --c-bg:#F4EDE1;    --c-bg2:#EFE5D5;
  --c-fg:#513B2B;    --c-fg2:#746150;
  --c-acc:#8A4F2B;   --c-hov:#513B2B;   --c-met:#B08D57;
  --c-bg-rgb:244,237,225;   --c-fg-rgb:81,59,43;

  --s-bg:#2B241C;    --s-bg2:#352B21;
  --s-fg:#F4EDE1;    --s-fg2:#D6BC91;
  --s-acc:#C68132;   --s-hov:#D6BC91;   --s-met:#B08D57;
  --s-bg-rgb:43,36,28;      --s-fg-rgb:244,237,225;

  /* --- TYPOGRAPHIE ---------------------------------------------------------
     Trois familles, trois emplois disjoints. La mono porte TOUT ce qui est
     mesuré : les nombres, les numéros de lot, les marqueurs, les dates, les
     statuts. C'est la marque typographique de la mesure, et elle sépare d'un
     coup d'oeil ce qui est vérifié de ce qui est dit.                          */
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --arab:'Noto Naskh Arabic','Geeza Pro',serif;
  --jost:'Jost',var(--sans);   /* le logotype seul, et il se livre en tracés */
  /* --------------------------------------------------- LES TROIS VOIX
     Une voix est un role, pas une fonte. Decision du 19.09.2026.
       mesure : tout ce qui est compte, date, reference, analyse. Systeme, zero requete.
       recit  : tout ce qui se lit en continu.
       titre  : tout ce qui annonce. Jost 300, hebergee ici, 7 Ko.
     Jost ne contient pas U+202F, l espace fine insecable : dans un titre francais on
     emploie U+00A0. Verifie sur la source, 524 glyphes, elle n y est pas. */
  --voix-mesure:var(--mono);
  --voix-recit:var(--sans);
  --voix-titre:'Jost',var(--sans);


  /* Échelle fluide. Chaque cran porte sa borne basse, sa pente et sa borne
     haute : le texte ne dépend d'aucun point de rupture pour être lisible. */
  --t1:clamp(30px,5.4vw,68px);   /* la déclaration, une par page */
  --t2:clamp(26px,4.2vw,48px);   /* titre de section */
  --t3:clamp(19px,2.1vw,26px);   /* titre de bloc */
  --t4:clamp(16px,1.5vw,19px);   /* chapeau */
  --t5:clamp(15px,1.5vw,17px);   /* texte éditorial */
  --t6:15px;                     /* texte courant */
  --t7:13px;                     /* métadonnée, navigation */
  --t8:12px;                     /* étiquette */
  --t9:10px;                     /* sur-titre, statut */

  /* Approches. Plus le texte est petit, plus il est espacé. */
  --ls-tight:-.03em;    /* la déclaration */
  --ls-soft:-.015em;    /* les titres */
  --ls-body:.02em;      /* le texte courant */
  --ls-caps:.16em;      /* les capitales */
  --ls-caps-w:.24em;    /* les sur-titres, les plus espacés */

  /* --- RYTHME ------------------------------------------------------------- */
  --pad:clamp(20px,5vw,72px);    /* marge latérale de page */
  --gap:clamp(16px,2.2vw,28px);  /* gouttière de grille */
  --sec:clamp(60px,10vh,130px);  /* respiration verticale entre sections */

  /* --- MOUVEMENT -----------------------------------------------------------
     Une seule courbe, six durées. Le mouvement sert le temps, jamais l'effet.
     Rien ne boucle, rien ne défile seul, rien ne retarde la lecture.          */
  --ease:cubic-bezier(.22,.7,.25,1);
  --d-court:.4s;      /* couleur, bordure */
  --d-moyen:.45s;     /* déplacement court */
  --d-long:.55s;      /* déplacement de bloc */
  --d-reveal:.9s;     /* apparition au défilement */
  --d-lent:1s;        /* image, matière */

  /* --- TRAITS --------------------------------------------------------------
     Une seule épaisseur. Les filets se règlent en opacité de l'encre courante,
     jamais en couleur fixe : ils suivent le registre sans être redéfinis.     */
  --filet:1px;
  --filet-faible:rgba(var(--fg-rgb),.12);
  --filet-net:rgba(var(--fg-rgb),.18);

  /* --- RAYONS ET OMBRES ----------------------------------------------------
     Volontairement nuls. Voir l'entête. Les jetons existent pour que l'absence
     soit explicite et qu'aucune page ne réintroduise un arrondi par distraction. */
  --rayon:0;
  --ombre:none;

  /* --- POINTS DE RUPTURE ---------------------------------------------------
     Ceux de la source, employés dans les requêtes de média.
     À ne pas confondre avec les huit largeurs de CONTRÔLE imposées par le
     cahier des charges : 320, 375, 390, 430, 768, 1024, 1440, 1920. Celles-ci
     servent à éprouver le rendu, pas à découper la mise en page.              */
  --bp-s:600px;
  --bp-m:760px;
  --bp-l:900px;
  --bp-xl:1100px;
}

/* =============================================================================
   LES ROLES A ET B
   A est le registre dominant, B son inverse. Une section marquée .reg-b est
   toujours le contraire du registre courant, quel que soit ce registre. C'est
   ce qui permet d'alterner les sections sans jamais écrire une couleur.
   ============================================================================= */

:root,.reg-a{
  --A-bg:var(--c-bg);  --A-bg2:var(--c-bg2);
  --A-fg:var(--c-fg);  --A-fg2:var(--c-fg2);
  --A-acc:var(--c-acc);--A-hov:var(--c-hov);--A-met:var(--c-met);
  --A-bg-rgb:var(--c-bg-rgb); --A-fg-rgb:var(--c-fg-rgb);
  --B-bg:var(--s-bg);  --B-bg2:var(--s-bg2);
  --B-fg:var(--s-fg);  --B-fg2:var(--s-fg2);
  --B-acc:var(--s-acc);--B-hov:var(--s-hov);--B-met:var(--s-met);
  --B-bg-rgb:var(--s-bg-rgb); --B-fg-rgb:var(--s-fg-rgb);
}

:root[data-theme="sombre"]{
  --A-bg:var(--s-bg);  --A-bg2:var(--s-bg2);
  --A-fg:var(--s-fg);  --A-fg2:var(--s-fg2);
  --A-acc:var(--s-acc);--A-hov:var(--s-hov);--A-met:var(--s-met);
  --A-bg-rgb:var(--s-bg-rgb); --A-fg-rgb:var(--s-fg-rgb);
  --B-bg:var(--c-bg);  --B-bg2:var(--c-bg2);
  --B-fg:var(--c-fg);  --B-fg2:var(--c-fg2);
  --B-acc:var(--c-acc);--B-hov:var(--c-hov);--B-met:var(--c-met);
  --B-bg-rgb:var(--c-bg-rgb); --B-fg-rgb:var(--c-fg-rgb);
}

/* =============================================================================
   LE REGISTRE SUIT L APPAREIL, ET LE LECTEUR GARDE LA MAIN.

   Les deux registres existaient depuis le depart dans ce fichier, clair et sombre, mais
   RIEN NE POSAIT JAMAIS data-theme : le site ne s affichait donc qu en clair, quel que
   soit le reglage du telephone. Signale par le fondateur le 22.09.

   Trois temps, et l ordre compte. La base au dessus est le clair. La media query ci
   dessous suit l appareil tant que le lecteur n a rien choisi. Les deux blocs de forcage
   l emportent ensuite, dans les deux sens.

   La garde :not([data-theme="clair"]) est indispensable : sans elle, un lecteur qui
   demande le clair sur un appareil en sombre ne l obtiendrait jamais.
   ============================================================================= */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){
  --A-bg:var(--s-bg);  --A-bg2:var(--s-bg2);
  --A-fg:var(--s-fg);  --A-fg2:var(--s-fg2);
  --A-acc:var(--s-acc);--A-hov:var(--s-hov);--A-met:var(--s-met);
  --A-bg-rgb:var(--s-bg-rgb); --A-fg-rgb:var(--s-fg-rgb);
  --B-bg:var(--c-bg);  --B-bg2:var(--c-bg2);
  --B-fg:var(--c-fg);  --B-fg2:var(--c-fg2);
  --B-acc:var(--c-acc);--B-hov:var(--c-hov);--B-met:var(--c-met);
  --B-bg-rgb:var(--c-bg-rgb); --B-fg-rgb:var(--c-fg-rgb);
  }
}

/* le lecteur force le clair, meme si son appareil est en sombre. Ce bloc reprend la base
   telle quelle : il n existe que pour surclasser la media query. */
:root[data-theme="clair"]{
  --A-bg:var(--c-bg);  --A-bg2:var(--c-bg2);
  --A-fg:var(--c-fg);  --A-fg2:var(--c-fg2);
  --A-acc:var(--c-acc);--A-hov:var(--c-hov);--A-met:var(--c-met);
  --A-bg-rgb:var(--c-bg-rgb); --A-fg-rgb:var(--c-fg-rgb);
  --B-bg:var(--s-bg);  --B-bg2:var(--s-bg2);
  --B-fg:var(--s-fg);  --B-fg2:var(--s-fg2);
  --B-acc:var(--s-acc);--B-hov:var(--s-hov);--B-met:var(--s-met);
  --B-bg-rgb:var(--s-bg-rgb); --B-fg-rgb:var(--s-fg-rgb);
}

/* les barres de defilement et les champs suivent aussi */
:root{color-scheme:light dark}
:root[data-theme="clair"]{color-scheme:light}
:root[data-theme="sombre"]{color-scheme:dark}

/* Ce que les composants consomment. Ils n'appellent jamais --c-* ni --s-*. */
:root,.reg-a{
  --bg:var(--A-bg); --bg2:var(--A-bg2); --fg:var(--A-fg); --fg2:var(--A-fg2);
  --acc:var(--A-acc); --hov:var(--A-hov); --met:var(--A-met);
  --bg-rgb:var(--A-bg-rgb); --fg-rgb:var(--A-fg-rgb);
}
.reg-b{
  --bg:var(--B-bg); --bg2:var(--B-bg2); --fg:var(--B-fg); --fg2:var(--B-fg2);
  --acc:var(--B-acc); --hov:var(--B-hov); --met:var(--B-met);
  --bg-rgb:var(--B-bg-rgb); --fg-rgb:var(--B-fg-rgb);
}

/* Registres figés, pour montrer les deux côte à côte dans un document.
   Ils ne suivent jamais la préférence du lecteur, c'est leur raison d'être. */
.fix-clair{
  --bg:var(--c-bg); --bg2:var(--c-bg2); --fg:var(--c-fg); --fg2:var(--c-fg2);
  --acc:var(--c-acc); --hov:var(--c-hov); --met:var(--c-met);
  --bg-rgb:var(--c-bg-rgb); --fg-rgb:var(--c-fg-rgb);
}
.fix-sombre{
  --bg:var(--s-bg); --bg2:var(--s-bg2); --fg:var(--s-fg); --fg2:var(--s-fg2);
  --acc:var(--s-acc); --hov:var(--s-hov); --met:var(--s-met);
  --bg-rgb:var(--s-bg-rgb); --fg-rgb:var(--s-fg-rgb);
}

/* Le mouvement se coupe entièrement si le lecteur l'a demandé. Ce n'est pas
   une dégradation : une page qui ne bouge pas reste une page qui prouve. */
@media (prefers-reduced-motion:reduce){
  :root{
    --d-court:0s; --d-moyen:0s; --d-long:0s; --d-reveal:0s; --d-lent:0s;
  }
}