/* ═══════════════════════════════════════════════════════════════════════════
   SOMA — LE BLOC TITRE DE PAGE, LE COMPOSANT PARTAGÉ
   ───────────────────────────────────────────────────────────────────────────
   Écrit le 24/08 sur ordre d'homogénéisation de Maxime : « je comprends pas
   pourquoi j'arrive pas à unifier les designs… je veux pas réfléchir, je veux
   juste lancer une mission pour homogénéiser. »

   POURQUOI CE FICHIER EXISTE. La règle du bloc titre est gravée depuis le
   18/08 (DESIGN.md § 8.8) — mais elle n'était écrite QUE dans un document.
   Chaque écran la ré-interprétait dans son propre CSS, à la date où il a été
   codé. Résultat mesuré le 24/08, sur les DEUX écrans réputés conformes :

       ┌────────────────────┬─────────────┬──────────────────┐
       │                    │ Devis       │ Bibliothèque     │
       ├────────────────────┼─────────────┼──────────────────┤
       │ align-items        │ flex-start  │ center           │
       │ gap                │ 20px        │ 18px             │
       │ marge sous le bloc │ 16 + filet  │ 28, sans filet   │
       │ interligne titre   │ 1           │ 1.1              │
       │ sous-titre         │ 14px        │ 13px             │
       └────────────────────┴─────────────┴──────────────────┘

   Deux écrans « conformes » qui ne se ressemblent déjà pas. Et deux autres —
   Fournisseurs (aucun tiret vert, un simple `.view-title`) et Clients (un
   surtitre « RÉFÉRENTIELS · ANNUAIRE », explicitement interdit) — qui n'ont
   jamais appliqué la règle. Une charte qu'on recopie à la main dérive ; un
   composant qu'on importe, non.

   L'ARBITRAGE. Ce que § 8.8 tranche fait foi (tiret 28×3 radius 2, titre Lato
   900 d'une seule couleur sans point final, sous-titre d'UNE ligne muted).
   Pour le reste, la mission dit : « on copie l'écran Devis, qui est le plus
   conforme ». C'est donc Devis qui donne les marges, l'alignement et le filet.

   LES TROIS INTERDITS, gravés DANS le composant et non à côté :
     · aucun surtitre, aucun fil d'Ariane. La sidebar dit déjà où on est, et
       ces étiquettes écrites à la main finissaient par mentir (la Boîte étude
       affichait « Pilotage » alors qu'elle vit dans Outils). Maxime, 18/08 :
       « j'aime pas tes mots, je comprends pas ».
     · aucun titre bicolore à point — cette grammaire appartient au LOGO.
     · aucun Lora italic dans le sous-titre.
   ═══════════════════════════════════════════════════════════════════════════ */

.soma-entete {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  /* Le header rend sa hauteur à l'information : l'audit du 19/08 avait mesuré
     37 % d'un écran 14" mangés avant la première carte. */
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.soma-entete .brand-mark { flex: 0 0 auto; padding-top: 4px; }
.soma-entete__info { flex: 1; min-width: 0; }

/* LE TIRET VERT — un élément à lui, pas un ::before accroché à autre chose.
   Devis le faisait porter par un `.atelier-eyebrow` VIDE, laissé exprès pour
   que son ::before survive à la suppression du fil d'Ariane. Ça marchait, mais
   ça voulait dire qu'un jour quelqu'un remplirait ce div — et c'est
   exactement ce que Clients a fait avec « RÉFÉRENTIELS · ANNUAIRE ». Un tiret
   qui est un tiret ne peut pas se faire remplir de texte. */
.soma-entete__tiret {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--green);
  margin-bottom: 8px;
}

.soma-entete__titre {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1;
  margin: 0;
}

.soma-entete__sous {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 0;
  /* UNE ligne. Un sous-titre qui déborde devient un paragraphe, et un
     paragraphe en tête de page repousse l'information réelle vers le bas. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LE CONTENEUR DE PAGE — la largeur, unifiée (24/08)
   ───────────────────────────────────────────────────────────────────────────
   Constat Maxime, deux captures côte à côte : « largeur pas homogénéisée !!! »
   Il avait raison, et la règle existait DÉJÀ — gravée par lui le 30/07 sur la
   Bibliothèque : « l'écran REMPLIT le viewport — la colonne 1100 px centrée
   faisait paraître la Bibliothèque toute petite ».

   Sauf que cette règle vivait dans UN commentaire, dans UN fichier :
     Bibliothèque   max-width: none  · padding 24/28/60   ← applique la règle
     Clients        max-width: 1280px + margin auto       ← centré, plus étroit
     Fournisseurs   aucun conteneur                        ← plein bord
     Devis          aucun conteneur                        ← plein bord

   Encore une règle recopiée à la main qui n'a pas voyagé. Elle devient un
   composant : plus rien à recopier, donc plus rien à oublier.
   ═══════════════════════════════════════════════════════════════════════════ */
.soma-page {
  max-width: none;
  margin: 0;
  padding: 24px 28px 60px;
  font-family: var(--font, 'Lato', -apple-system, sans-serif);
  color: var(--text);
}