/* ═══════════════════════════════════════════════════════
   LAMSAT SHAMS — la couche de jetons.
   Une seule source pour les couleurs, les familles, la mesure
   et la matière. site.css ne déclare plus aucune valeur brute.

   Les hexadécimaux du blueprint « Breakfast » sont déjà ceux de
   la maison : écru #F6F3EC, indigo #0C1824, ocre #D97736,
   terracotta #A84B2B, sauge #5B7065. Ce fichier ne les change
   pas, il les nomme une fois pour toutes et ajoute ce qui
   manquait : le grain, la chasse large, le filet à 10 %,
   le charbon du corps de texte.

   Registre repris de thebreakfast.app (captures du 12026-09-17, pas
   la prose du blueprint qui décrivait un site qu'il n'avait pas
   regardé) : tout est centré, les blancs sont énormes, les titres de
   section sont capitales très chassées, et UN seul accent porte
   l'action. Sauge et terre d'Atlas redescendent aux métadonnées et aux
   citations pour que l'ocre reste seul à appeler.

   Les angles adoucis sont autorisés depuis le 12026-09-17. Les ombres
   portées et le flou d'arrière-plan restent bannis
   (tests/test_charter.py) : le relief est un filet d'un pixel.
   ═══════════════════════════════════════════════════════ */

:root{
  /* ── surfaces ── */
  --ecru:#F6F3EC;          /* Écru Lin Brut — le papier de la page */
  --sable:#EFE6D8;         /* un cran plus chaud, pour détacher une section */
  --ink:#0C1824;           /* Indigo Tarab — l'encre, les titres */
  --nuit:#0A1219;          /* la nuit, pour les blocs sombres */
  --charbon:#2C2C2C;       /* le corps de texte long, moins dur que l'encre */

  /* ── accents ──
     L'ocre est magnifique et ILLISIBLE sur du papier : 2,85:1, sous le
     plancher de 3:1 réservé au très grand texte. Le blanc sur ocre ne
     fait que 3,16:1, alors que le bouton principal, à 15 px, exige 4,5.
     Donc : l'ocre garde les APLATS (fonds, filets, barres), et tout ce
     qui est du TEXTE sur papier passe à la terre d'Atlas — 5,11:1, et
     5,67:1 en blanc sur fond plein. Même famille, œil identique. */
  --ocre:#D97736;          /* Ocre Shams — aplats, filets, grain */
  --atlas:#A84B2B;         /* Terre d'Atlas — TOUT le texte d'accent */
  --sauge:#5B7065;         /* Sauge & Ciste — métadonnées (4,80:1) */

  /* ── familles ── */
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --ar:"Amiri",serif;

  /* ── mesure ── */
  --gut:clamp(1.4rem,6vw,5rem);   /* la gouttière, généreuse : la page vit sur le blanc */
  --col:44rem;                    /* le rail de lecture */
  --col-wide:72rem;               /* les grilles de cartes */
  /* Le silence entre deux sections — c'est LUI le design. Mais 17vh sur
     un téléphone, quatre fois, faisait un accueil de six écrans alors
     que Moataz en veut deux. On respire large sur grand écran, serré
     sur petit : c'est la même intention, pas la même mesure. */
  --air:clamp(3.2rem,8vh,9rem);

  /* ── matière ── */
  --hair:rgba(12,24,36,.1);       /* le filet à 10 % qui remplace toute ombre */
  --hair-strong:rgba(12,24,36,.16);
  --hair-light:rgba(246,243,236,.14);  /* le même, sur fond nuit */
  --track:.25em;                  /* la chasse des œilletons */
  --track-wide:.18em;             /* les titres de section en capitales */

  /* ── angles ── un rayon franc sur ce qui s'appuie (bouton), un rayon
     discret sur ce qui encadre (carte). Rien entre les deux. */
  --pill:999px;
  --card:14px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* le grain : une turbulence fractale en SVG, posée sur toute la page.
     C'est ce qui empêche l'écru d'être une couleur plate d'écran. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── les fontes, servies par nous : aucune requête vers Google ── */
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* l'arabe n'est chargé que si un caractère arabe est rendu */
@font-face{font-family:"Amiri";src:url("fonts/amiri-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}