/* ═══════════════════════════════════════════════════════════════════════════
FOFBOARD — DESIGN SYSTEM V4
---------------------------------------------------------------------------
SOURCE DE VÉRITÉ UNIQUE : « Figma Etienne/DesignSystem_V4.svg ».
Rien ici n'est inventé. Chaque valeur est recopiée de la maquette, sans
arrondi et sans interprétation. Si une valeur manque pour un écran, on
s'arrête et on la demande à Etienne — on n'en fabrique pas.
Ce fichier a vocation à remplacer « 1-socle.css » en totalité. Pendant la
transition les deux cohabitent : aucun nom n'entre en conflit, les jetons de
l'ancien socle portent tous le préfixe « --fof- », ceux du DS non.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
1. LES POLICES
---------------------------------------------------------------------------
Servies depuis ce serveur, plus depuis Google. Trois raisons : aucune adresse
IP d'utilisateur ne part chez un tiers, deux connexions externes de moins
avant le premier texte affiché, et l'application ne dépend plus d'un service
qui peut être lent ou bloqué.
Les quatre fichiers sont dans « assets/fonts/ », sous-jeu latin — il couvre
tout le français, accents et « œ » compris. Trois sont des polices variables :
un seul fichier porte toute la plage de graisses annoncée dans son nom.
Licence : les quatre sont sous SIL Open Font License, qui autorise
explicitement l'hébergement et la redistribution.
═══════════════════════════════════════════════════════════════════════════ */
/* Les titres. Bebas Neue n'a PAS de minuscules : un titre s'affiche en
capitales parce que la police est dessinée ainsi, pas parce qu'une règle le
force. */
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/bebas-neue-400-latin.woff2') format('woff2');
}
/* Le texte courant. Police variable : 400 à 700 dans un seul fichier. */
@font-face {
font-family: 'League Spartan';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/league-spartan-400-700-latin.woff2') format('woff2');
}
/* Les badges et les colonnes de chiffres. Variable : 500 à 800. Le DS demande
de l'ExtraBold (800) pour style_badge ; les 500 et 600 sont là pour les
écrans qui n'ont pas encore migré. */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url('/assets/fonts/jetbrains-mono-500-800-latin.woff2') format('woff2');
}
/* Les devis et les factures, et eux seuls (voir 5-document.css). Cette police
n'appartient PAS au design system V4 : elle est ici parce que le document
imprimé s'en sert, et qu'il n'y avait aucune raison de la laisser chez Google
pendant qu'on rapatriait les trois autres. */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/instrument-sans-400-700-latin.woff2') format('woff2');
}
/* ═══════════════════════════════════════════════════════════════════════════
2. L'UNITÉ DU PLAN DE TRAVAIL
---------------------------------------------------------------------------
Le seul élément de ce fichier qui ne soit pas recopié de la maquette. Il
traduit les unités du plan Figma en pixels.
Les deux cadres d'Etienne : téléphone 1100 × 2504 (l'écran réel de son
smartphone), ordinateur 4285 × 2410 (16:9). Le rapport 4285 / 1100 = 3,895
est le coefficient qu'il a appliqué pour n'avoir qu'UNE taille de composants
dans le DS, valable sur les deux formats.
Le plan est dessiné à 3×. Trois valeurs le prouvent, et elles tombent toutes
les trois sur des nombres ronds :
bordure de badge 3 unités ÷ 3 = 1 px
tuile d'icône 96 unités ÷ 3 = 32 px
rayon de cette tuile 24 unités ÷ 3 = 8 px
Ce tiers de pixel est la bonne valeur AU TÉLÉPHONE, et on peut le vérifier :
le cadre fait 1100 unités, soit 366,7 px, la largeur d'un vrai téléphone.
SUR ORDINATEUR, IL EST TROP PETIT. Mesuré par Etienne le 2026-09-01 : pour
qu'une capture d'écran de Chrome se superpose à sa maquette, il faut
l'agrandir de 1,335. Autrement dit les composants sortaient à 75 % de la
taille voulue. L'unité du bureau est donc le tiers de pixel multiplié par ce
même 1,335, soit 0,445 px — et le cadre de 4285 unités retombe alors sur
1907 px, la largeur d'un écran d'ordinateur courant, là où le tiers de pixel
le ramenait à 1428.
Deux valeurs, donc, et une seule bascule : celle de l'application, 1101 px.
Ce n'est PAS un renoncement à la « taille de composants unique » — au
contraire. Un composant garde la même taille dans tout le format où il vit ;
c'est le rapport entre les deux formats qui est ici rétabli, celui-là même
qu'Etienne avait mis dans ses cadres (4285 / 1100 = 3,895). L'unité ne suit
pas la largeur de la fenêtre : sur un écran plus large il y a plus de place,
pas des composants plus gros.
TOUTE longueur du DS s'écrit `calc(N * var(--ds-unite))`, où N est le nombre
lu tel quel sur la maquette. On ne convertit rien à la main, on ne
pré-calcule rien : le nombre écrit dans le CSS doit être le nombre lisible
dans Figma. */
:root {
--ds-unite: calc(1px / 3);
}
@media (min-width: 1101px) {
:root {
--ds-unite: calc(1.335px / 3);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
3. LES COULEURS — THÈME CLAIR
---------------------------------------------------------------------------
Sur la maquette, la colonne de GAUCHE est le thème clair, celle de DROITE le
thème sombre. Le vocabulaire est clos : 53 couleurs, plus 3 qui n'existent
que dans les dégradés. Pas une de plus, nulle part.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Le texte ───────────────────────────────────────────────────────────── */
--text-color1: #000000; /* le texte principal */
--text-color2: #6E5B5F; /* le texte secondaire, et les icônes au repos */
--invit-color: #C0B5B8; /* le texte d'invite d'un champ saisissable */
--text-color_basic: #C0B5B8; /* ⚠ mêmes valeurs qu'--invit-color, cf. plus bas */
/* Le libellé d'un bouton plein, posé sur un dégradé. Il BASCULE, et à
l'envers de --text-color1 : blanc dans les deux variantes CLAIRES de la
planche — le bordeaux et le bleu foncé — et #1A181B dans les deux
SOMBRES, où le dégradé passe à l'orange et au bleu clair et où le blanc
ne tenait plus. Arrivé sur la planche le 2026-09-03, avec le seul
`btn_enregistrer` pour l'employer. */
--txt-btn: #FFFFFF;
/* ── Le noir et le blanc qui ne basculent PAS ───────────────────────────
Ces deux-là sont déclarés ici et nulle part ailleurs : ils ne sont pas
repris dans le bloc du thème sombre, et c'est tout leur intérêt. Il reste
UN SEUL emploi de la paire : le libellé du `Btn_clickable` choisi, que la
planche écrit blanc en clair et `black` — #000000, pas #1A181B — en
sombre. La carte du carrousel les garde aussi, faute d'être dessinée en
sombre nulle part.
Le libellé de `btn_enregistrer` était l'exemple de ce paragraphe jusqu'au
2026-09-03 ; il a désormais son jeton à lui, --txt-btn, qui bascule. La
croix d'`icon_add`, la flèche d'`icon_gps`, le crayon d'`icon_modifier` et
les trois lignes de la `PastilleDATE` d'évènement l'ont rejoint le même
jour : la planche les écrit tous en #1A181B en sombre, et le CSS disait
encore le contraire.
Règle d'emploi (Etienne, 2026-09-01) : dès qu'un texte est franchement
noir ou franchement blanc SANS dépendre du thème, il prend l'un de ces
deux jetons. Le texte qui doit suivre le thème garde --text-color1. */
--text-color_fullWhite: #FFFFFF;
--text-color-fullBlack: #000000;
/* ── Les deux couleurs de nature ────────────────────────────────────────── */
/* --event-color : les dates, les concerts. --repet-color : les répétitions.
Chacune existe à plat et en dégradé. Les dégradés sont verticaux, à deux
arrêts, du haut vers le bas. */
--event-color: #56011E;
--event-color-degrade: linear-gradient(180deg, #56011E 0%, #2C1A12 100%);
--repet-color: #1F5FA6;
--repet-color-degrade: linear-gradient(180deg, #4D88FF 0%, #1F5FA6 100%);
/* La paire de la RÉPÉTITION POSÉE À PLAT, arrivée sur la planche le
2026-09-03 : un fond très pâle et un bleu franc dessus. C'est ce que porte
maintenant la pastille de date d'une répétition, qui n'est plus un dégradé.
Les deux jetons BASCULENT, et à l'envers l'un de l'autre — le bleu du texte
en clair est celui du fond en sombre, à peu de chose près. Les noms sont
ceux de la planche, sans « -color » : elle écrit --repet-txt et
--repet-background. */
--repet-txt: #6899FA;
--repet-background: #E7EEF7;
/* La couleur d'évènement ATTÉNUÉE. ⚠ PLUS AUCUN COMPOSANT NE L'EMPLOIE
depuis le 2026-09-03 : son seul usage était le point éteint du carrousel,
qui est passé au gris neutre ce jour-là. Le jeton reste écrit — la planche
le déclare toujours, et rien ne se supprime avant le grand ménage. */
--event-colorSoft: #A27786;
/* ── Les surfaces ───────────────────────────────────────────────────────── */
--panel-color: #FFFFFF; /* un panneau, une carte, une fenêtre */
--border-color: #E6E1DF; /* le trait qui sépare */
--panelsoft-color: #F1ECE9; /* creusé DANS un panneau : le fond d'un champ */
--background-color: #F7F6F5; /* le fond de l'écran, derrière les panneaux */
/* ── L'ascenseur ────────────────────────────────────────────────────────── */
/* Arrivé sur la planche le 2026-09-03 avec le composant `ScrollBar`. Au
repos, le curseur a EXACTEMENT les valeurs de --border-color dans les deux
thèmes ; c'est un nom de plus pour la même couleur, et on recopie ce que la
planche écrit. Survolé, il fonce d'un cran, et cette paire-là est neuve. */
--scrollBar-normal: #E6E1DF;
--scrollBar-hovered: #7C6C70;
/* ── Les badges de statut ───────────────────────────────────────────────── */
/* Sept statuts, trois rôles chacun : le texte, le fond, la bordure. */
--badge-concert-txt: #4C3BAF;
--badge-concert-bg: #EFEBFF;
--badge-concert-border: #D9D1FB;
--badge-repetition-txt: #2A5FA8;
--badge-repetition-bg: #E8F1FE;
--badge-repetition-border: #CFE0F9;
--badge-attente-txt: #8A5A0B;
--badge-attente-bg: #FCF2DF;
--badge-attente-border: #F3E1BC;
--badge-annule-txt: #A32C22;
--badge-annule-bg: #FDEAE8;
--badge-annule-border: #F7D2CE;
--badge-signe-txt: #1F6B44;
--badge-signe-bg: #E6F5EC;
--badge-signe-border: #C9E7D6;
--badge-option-txt: #5A6270;
--badge-option-bg: #F2F3F5;
--badge-option-border: #C0C5CD;
--badge-indispo-txt: #9B2C63;
--badge-indispo-bg: #FBEBF3;
--badge-indispo-border: #F2D2E2;
/* Le décompte — « J-24 » — n'a que DEUX rôles là où les sept autres en ont
trois : il n'a pas de bordure, il se pose en aplat. Et les deux valeurs
s'échangent d'un thème à l'autre au lieu de changer, ce qui se lit très
bien sur la planche : le jaune est le fond en clair et l'encre en sombre.
La pastille « Nom groupe » emprunte cette même paire. */
--badge-decompte-bckgd: #FFD37A;
--badge-decompte-txt: #4A1F08;
}
/* ═══════════════════════════════════════════════════════════════════════════
4. LES COULEURS — THÈME SOMBRE
---------------------------------------------------------------------------
Le sélecteur [data-theme="dark"] est celui que l'application utilise déjà
(voir 1-socle.css) : on ne change pas la mécanique de bascule, seulement les
valeurs. Rappel de la règle d'Etienne : aucun fond blanc en thème sombre.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
--text-color1: #FFFFFF;
--text-color2: #A59E9F;
--invit-color: #595758;
/* ⚠ --text-color_basic est arrivé sur la planche le 2026-09-01 avec
EXACTEMENT les mêmes deux valeurs qu'--invit-color. Recopié tel quel,
comme tout le reste : la planche fait foi, on ne corrige pas ce qu'on n'a
pas dessiné. Il a trouvé son premier composant le 2026-09-03, le point
éteint du carrousel — c'est un CHOIX entre deux noms interchangeables, et
`icon_PinCaroussel` dit pourquoi. La question reste posée à Etienne : soit
l'un des deux doit changer de valeur, soit l'autre est de trop. */
--text-color_basic: #595758;
/* ⚠ #1A181B n'est pas --panel-color (#1B181B) : un chiffre les sépare, et la
planche les écrit tous les deux en toutes lettres sous leur pastille. On
recopie ce qui est dessiné. */
--txt-btn: #1A181B;
--event-color: #FE6332;
--event-color-degrade: linear-gradient(180deg, #FF973C 0%, #FE6332 100%);
--repet-color: #679AFF;
--repet-color-degrade: linear-gradient(180deg, #679AFF 0%, #4D88FF 100%);
--repet-txt: #1F5FA6;
--repet-background: #222A37;
--event-colorSoft: #F6A890;
--panel-color: #1B181B;
--border-color: #2C262B;
--panelsoft-color: #262127;
--background-color: #100E10;
--scrollBar-normal: #2C262B;
--scrollBar-hovered: #8F8589;
--badge-concert-txt: #BDB2FF;
--badge-concert-bg: #2A2350;
--badge-concert-border: #3E3573;
--badge-repetition-txt: #9FC7F5;
--badge-repetition-bg: #16304F;
--badge-repetition-border: #26466B;
--badge-attente-txt: #F0C46A;
--badge-attente-bg: #3A2A0A;
--badge-attente-border: #55401A;
--badge-annule-txt: #F3A79E;
--badge-annule-bg: #3D1815;
--badge-annule-border: #5C2822;
--badge-signe-txt: #86D6A6;
--badge-signe-bg: #12321F;
--badge-signe-border: #1F4A31;
--badge-option-txt: #A7AFBC;
--badge-option-bg: #23262B;
--badge-option-border: #454B54;
--badge-indispo-txt: #EFA3C8;
--badge-indispo-bg: #38152A;
--badge-indispo-border: #55203F;
--badge-decompte-bckgd: #4A1F08;
--badge-decompte-txt: #FFD37A;
}
/* ═══════════════════════════════════════════════════════════════════════════
5. LA TYPOGRAPHIE
---------------------------------------------------------------------------
Les styles nommés sur la planche, transcrits tels quels. Leur nom est celui
du DS ; il est écrit en minuscules ici, y compris pour ceux que la maquette
affiche en capitales — ces capitales viennent de Bebas Neue, qui n'a pas de
minuscules, et non d'un choix de nommage.
style_badge JetBrains Mono ExtraBold 34 unités
style_badge30 JetBrains Mono ExtraBold 30 unités
style_titre_btn64 Bebas Neue Regular 64 unités
style_titre_btn70 Bebas Neue Regular 70 unités
style_titre_menu1 Bebas Neue Regular 100 unités
style_titre_menu2 Bebas Neue Regular 120 unités
style_item_menuSB League Spartan SemiBold 50 unités
style_item_menuB League Spartan Bold 50 unités
style_item_text League Spartan Regular 50 unités
style_item_text44bold League Spartan Bold 44 unités
style_item_text44 League Spartan Regular 44 unités
style_soustitre_connection League Spartan Regular 50 unités
style_titre_connection League Spartan Bold 60 unités
style_item_titre_item_agenda League Spartan Bold 40 unités, 0,06 em
`style_item_menu` a disparu le 2026-09-02 : la planche l'a coupé en deux,
`…SB` en 600 et `…B` en 700. C'est le premier qui habille les intitulés de
champ et les accroches.
LE ROGNAGE À LA HAUTEUR DE CAPITALE (2026-09-02, accord d'Etienne)
---------------------------------------------------------------------------
Figma ne cote plus ses textes de haut de cadratin à bas de cadratin, mais de
la HAUTEUR DE CAPITALE à la LIGNE DE BASE. Ses écarts ont cessé de se
traduire : l'accroche de la connexion demandait des marges négatives.
Chaque style porte donc son propre rognage, et la boîte CSS redevient la
boîte Figma. Une cote lue sur une maquette s'écrit désormais telle quelle
dans « 4-ecrans.css », sans arithmétique et sans demi-unités inventées.
Trois nombres suffisent, et chaque style les déclare :
--ds-taille la taille du texte, en unités
--ds-base où tombe la ligne de base dans la boîte, interligne 1
--ds-capitale où commence le haut des capitales, même échelle
Un quatrième est facultatif, `--ds-inter` : l'interligne, en cadratins, et
il vaut 1 partout sauf là où une maquette serre ses lignes — le titre de la
carte du carrousel, à 100 pour un texte de 120. Un interligne autre que 1
déplace la ligne de base de la moitié de l'écart, et les deux marges du
rognage en tiennent compte. Un écran le pose sur l'élément, le style n'a
rien à savoir.
`--ds-base` se déduit des métriques de la police, ascendante et descendante
ramenées à 1 : League Spartan 0,74 ; Bebas Neue 0,80. `--ds-capitale` est la
hauteur de capitale que FIGMA déclare, 0,66 et 0,697. Elle ne se mesure pas
dans le navigateur, où l'encre du « H » monte un peu plus haut (0,672 et
0,703) : ce sont les valeurs de Figma qu'on écrit, puisque c'est de ses
boîtes que viennent les cotes.
Ces deux nombres ne sont pas devinés, le DS les contraint : le libellé de
`Champ_connection` est centré dans une boîte de 127 et sa ligne de base
tombe à 80 du haut — d'où 0,66 pour League Spartan ; celui de
`btn_enregistrer` est centré dans 132 et sa ligne de base tombe à 88,3 —
d'où 0,697 pour Bebas Neue.
`style_badge` et `style_badge30` ont reçu leur rognage le 2026-09-02, avec
l'agenda — le premier écran qui pose des badges. La planche les contraint
maintenant, et de quatre façons qui tombent toutes sur le MÊME nombre :
badges_big boîte 73, ligne de base à 48,82, texte 34
badges_big décompte boîte 70, ligne de base à 47,32, texte 34
badges_small boîte 43, ligne de base à 32,40, texte 30
badges_small décompte boîte 40, ligne de base à 30,90, texte 30
Les quatre disent : retrait du haut 24 (ou 22,5 / 10,5 / 9) plus la hauteur
de capitale. En posant 0,73 pour celle-ci, les quatre lignes de base
retombent au centième près, et les quatre retraits deviennent des nombres
ronds. C'est aussi la capitale que JetBrains Mono DÉCLARE, et le même
contrôle qu'ailleurs : l'encre du « H » monte à 0,734 dans le navigateur,
un peu plus haut que la valeur déclarée, comme pour les deux autres polices.
`--ds-base` vaut 0,86 : mesuré sur la fonte du dépôt, comme 0,74 pour League
Spartan et 0,80 pour Bebas Neue.
`style_titre_btn` a disparu le 2026-09-02 : la planche en portait deux, à 64
et à 70 unités, et un nom ne pouvait pas donner deux classes. Etienne les a
distingués — ce sont `…btn64` et `…btn70`. Le 64 est celui qu'emploient les
boutons des écrans déjà faits.
⚠ UN POINT À SIGNALER À ETIENNE : `style_item_text` et
`style_soustitre_connection` sont RIGOUREUSEMENT identiques, League Spartan
regular 50 tous les deux. Deux noms pour un seul style. Les deux sont
écrits, chacun sous le nom que porte la planche — on recopie, on ne tranche
pas à sa place.
═══════════════════════════════════════════════════════════════════════════ */
.style_badge {
--ds-taille: 34;
--ds-base: 0.86;
--ds-capitale: 0.73;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-weight: 800;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_badge30 {
--ds-taille: 30;
--ds-base: 0.86;
--ds-capitale: 0.73;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-weight: 800;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_titre_btn64 {
--ds-taille: 64;
--ds-base: 0.8;
--ds-capitale: 0.697;
font-family: 'Bebas Neue', system-ui, sans-serif;
font-weight: 400;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_titre_btn70 {
--ds-taille: 70;
--ds-base: 0.8;
--ds-capitale: 0.697;
font-family: 'Bebas Neue', system-ui, sans-serif;
font-weight: 400;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_titre_menu1 {
--ds-taille: 100;
--ds-base: 0.8;
--ds-capitale: 0.697;
font-family: 'Bebas Neue', system-ui, sans-serif;
font-weight: 400;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_titre_menu2 {
--ds-taille: 120;
--ds-base: 0.8;
--ds-capitale: 0.697;
font-family: 'Bebas Neue', system-ui, sans-serif;
font-weight: 400;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_item_menuSB {
--ds-taille: 50;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_item_menuB {
--ds-taille: 50;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_item_text {
--ds-taille: 50;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_item_text44 {
--ds-taille: 44;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_item_text44bold {
--ds-taille: 44;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_soustitre_connection {
--ds-taille: 50;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
/* La planche en donne DEUX sous ce nom, à 50 et à 30. Le second habille les
deux lignes « Créé par… / Modifié par… » au pied d'une fiche. */
.style_soustitre_connection_2 {
--ds-taille: 30;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
.style_titre_connection {
--ds-taille: 60;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: calc(var(--ds-taille) * var(--ds-unite));
line-height: var(--ds-inter, 1);
}
/* Le SEUL style de la planche qui porte un interlettrage. C'est la ligne de
nature d'une date — « CONCERT • 20h30 », « REPETITION • 19h30 » — et elle
prend la couleur de cette nature, --event-color ou --repet-color, qui se
pose donc à l'emploi et non ici.
0,06 em et non 2,4 unités : l'interlettrage suit la taille du texte, pas le
plan de travail. Écrit en unités il serait juste au téléphone et faux au
bureau.
IL PASSE AUSSI EN CAPITALES (2026-09-03). La planche ne le déclare pas dans
la liste des styles — l'échantillon y est écrit en minuscules — mais les
QUATRE endroits qui l'emploient sont en capitales sur les cinq maquettes,
sans exception : les deux lignes de la `PastilleDATE` (« JEU », « OCT »), la
ligne de nature d'une ligne d'agenda et celle d'une fiche (« CONCERT »,
« REPETITION »). L'application, elle, tenait ses mots en minuscules — le
jour vient de `WEEKDAYS`, écrit en toutes lettres et coupé à trois, et le
mois d'un `MONTHS_SHORT` que le code rabaissait exprès. Le `text-transform`
est donc écrit ici, sur le style, plutôt que d'aller retoucher chaque
donnée : la casse est une affaire de forme, la donnée reste lisible telle
quelle pour un lecteur d'écran.
⚠ À SIGNALER : si un écran à venir emploie ce style pour un texte qui n'est
PAS en capitales, c'est cette ligne qu'il faudra déplacer sur les composants
— ou Etienne écrira ses libellés en capitales dans les données. */
.style_item_titre_item_agenda {
text-transform: uppercase;
--ds-taille: 40;
--ds-base: 0.74;
--ds-capitale: 0.66;
font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: calc(var(--ds-taille) * var(--ds-unite));
letter-spacing: 0.06em;
line-height: var(--ds-inter, 1);
}
/* Le rognage lui-même. Deux boîtes vides, hautes de rien, l'une avant le texte
et l'autre après : leurs marges négatives remontent le haut de la boîte sur
la ligne des capitales et ramènent le bas sur la ligne de base.
`display:table` et non `block` : en `block`, ces marges fusionneraient avec
celles du bloc qui les porte, et la boîte se DÉPLACERAIT au lieu de se
resserrer. Un texte de plusieurs lignes n'est pas gêné — seuls le haut de la
première ligne et le bas de la dernière bougent, l'interligne reste entier.
LES QUATORZE STYLES SONT DANS LA LISTE depuis le 2026-09-02 : les deux
`style_titre_btn…` et les deux `style_badge…` y sont entrés avec l'agenda,
où ils habillent des textes ordinaires et non des boutons.
Un rognage change tout le calcul du placement, et le simplifie : une boîte
rognée EST la boîte de Figma, donc la centrer dans un composant la met où la
maquette la met, sans un nombre de plus. C'est ce que font maintenant
`PastilleDATE`, `Item_Agenda` et les pastilles.
La contrepartie tient en une phrase : CES DEUX PSEUDO-ÉLÉMENTS NE SUPPORTENT
PAS D'ÊTRE DANS UNE BOÎTE FLEX, où ils deviendraient deux éléments posés à
côté du texte. Un composant en flex met donc le style sur un ENFANT, jamais
sur lui-même. La seule exception est `btn_enregistrer`, qui porte le style
sur son propre bouton depuis l'écran de connexion : il éteint les deux
pseudo-éléments et garde son centrage écrit à la main, juste en dessous. */
.style_titre_menu1::before,.style_titre_menu2::before,
.style_item_menuSB::before,.style_item_menuB::before,.style_item_text::before,
.style_item_text44::before,.style_item_text44bold::before,
.style_soustitre_connection::before,.style_soustitre_connection_2::before,.style_titre_connection::before,
.style_item_titre_item_agenda::before,
.style_titre_btn64::before,.style_titre_btn70::before,
.style_badge::before,.style_badge30::before {
content: '';
display: table;
margin-bottom: calc((var(--ds-capitale) - var(--ds-base)
+ (1 - var(--ds-inter, 1)) / 2) * var(--ds-taille) * var(--ds-unite));
}
.style_titre_menu1::after,.style_titre_menu2::after,
.style_item_menuSB::after,.style_item_menuB::after,.style_item_text::after,
.style_item_text44::after,.style_item_text44bold::after,
.style_soustitre_connection::after,.style_soustitre_connection_2::after,.style_titre_connection::after,
.style_item_titre_item_agenda::after,
.style_titre_btn64::after,.style_titre_btn70::after,
.style_badge::after,.style_badge30::after {
content: '';
display: table;
margin-top: calc((var(--ds-base) - (var(--ds-inter, 1) + 1) / 2)
* var(--ds-taille) * var(--ds-unite));
}
/* ═══════════════════════════════════════════════════════════════════════════
6. LES COMPOSANTS
---------------------------------------------------------------------------
Un composant du DS, une classe qui porte SON nom — comme les styles
ci-dessus. Le nom écrit dans Figma et le nom écrit ici sont le même mot :
c'est ce qui permet de retrouver l'un depuis l'autre sans table de
correspondance, et de voir d'un coup d'œil ce qui vient du DS et ce qui n'en
vient pas.
Chaque longueur est le nombre lu sur la maquette, multiplié par l'unité.
Rien n'est arrondi, rien n'est « à peu près ».
Ce que ces classes ne font PAS : se placer. Un composant décrit sa forme —
sa hauteur, son rayon, ses couleurs. Où il tombe dans la page appartient à
l'écran, et s'écrit avec l'écran (`4-ecrans.css`).
═══════════════════════════════════════════════════════════════════════════ */
/* ── RoundedPanel ──────────────────────────────────────────────────────────
Le panneau blanc posé sur le fond. Deux variantes dans la maquette, Clair et
Sombre, qui ne diffèrent que par leurs deux couleurs : les jetons s'en
chargent, une seule règle suffit ici.
Le trait est passé de 2 à 3 unités le 2026-09-02, dans les DEUX variantes —
la planche donnait alors 3 en Clair et 2 en Sombre, Etienne a corrigé.
Le rayon est celui du BORD EXTÉRIEUR : Figma pose son trait à l'intérieur du
cadre, donc son rectangle est rentré d'une demi-épaisseur et son rayon avec
lui — 30,5 + 1,5 = 32.
IL EST PASSÉ DE 40 À 32 LE 2026-09-03, avec l'alignement général des arrondis
sur 32. Les deux agendas suivent (rx 30,5) ; les deux BLOC_Read… et les deux
écrans de connexion dessinent encore 38,5, donc 40 — D_AGENDA_Clair porte même
les deux à la fois, 32 pour le panneau du mois et 40 pour les cartes de la
fiche qu'il montre à droite. Etienne a tranché : « la règle est pour tout le
monde ». Une seule classe, un seul rayon, 32. */
.RoundedPanel {
background: var(--panel-color);
border: calc(3 * var(--ds-unite)) solid var(--border-color);
border-radius: calc(32 * var(--ds-unite));
}
/* ── Champ_connection ──────────────────────────────────────────────────────
Un champ de saisie et son intitulé. Trois parties, et les noms sont ceux du
calque Figma : « title » l'intitulé au-dessus, « champs » la boîte, « label »
ce qui est écrit dedans.
C'est le seul composant du DS livré sans paire Clair/Sombre, et ce n'est pas
un oubli : toutes ses couleurs sont des jetons qui basculent seuls. Le fond
de la boîte a rejoint le vocabulaire le 2026-08-31 sous le nom
« --panelsoft-color ».
TOUTES LES LONGUEURS SONT CELLES DU BORD EXTÉRIEUR, et SON TRAIT EST CENTRÉ
comme celui de `SearchBar` : Figma exporte deux rectangles aux MÊMES
coordonnées, l'un plein l'autre tracé. Le rectangle de la planche est donc
déjà le bord extérieur — 788 × 124 — et ses cotes s'écrivent telles quelles.
Le retrait de 34 se lit depuis ce même bord, et le trait rentre en CSS :
34 − 3 = 31.
⚠ RELECTURE DU 2026-09-03. Ce composant était lu à l'envers — trait posé à
l'intérieur, donc 791 × 127 et un rayon de 21,5. La ligne de base tombait au
bon endroit (753 sur M_Connection_clair), mais la boîte débordait d'une
demi-épaisseur de chaque côté. Le rayon de la planche est passé de 20 à 32
le même jour ; Etienne a demandé de suivre la planche sur les deux points.
Les écarts de « 4-ecrans.css » qui touchaient un bord de cette boîte ont
gagné 1,5 en conséquence, et le panneau garde exactement sa hauteur.
La largeur n'est pas ici : le champ prend celle du panneau qui le porte. */
.Champ_connection > .title {
display: block;
color: var(--text-color2);
/* 28 unités entre la ligne de base de l'intitulé et le haut de la boîte —
26,5 du temps de l'ancienne lecture. Le nombre se lit tel quel sur la
planche comme sur les deux écrans, depuis que les textes de Figma sont
rognés à la hauteur de capitale — et les trois disent 28. */
margin-bottom: calc(28 * var(--ds-unite));
}
.Champ_connection > .champs {
display: flex;
align-items: center;
gap: calc(34 * var(--ds-unite));
height: calc(124 * var(--ds-unite));
padding: 0 calc(31 * var(--ds-unite));
background: var(--panelsoft-color);
border: calc(3 * var(--ds-unite)) solid var(--border-color);
border-radius: calc(32 * var(--ds-unite));
}
/* La saisie elle-même : elle n'a ni fond ni trait, ils appartiennent à la
boîte qui la contient. Sans « min-width:0 » un champ refuse de descendre
sous sa largeur par défaut et fait déborder la boîte.
LE RETRAIT DU HAUT N'EST PAS UN ÉCART, C'EST UN CENTRAGE. Figma centre la
hauteur de CAPITALE du texte dans la boîte ; le navigateur, lui, centre la
boîte du cadratin, qui descend plus bas que la ligne de base — le texte
tomberait 4,5 unités trop bas. Le retrait rattrape le double de cet écart,
la moitié revenant à chaque côté par le centrage.
Un `` ne peut pas porter de pseudo-élément : le rognage écrit plus
haut ne l'atteint pas, d'où ce calcul écrit ici. Il ne dépend d'aucun
nombre nouveau, seulement des trois que le style déclare déjà. */
.Champ_connection .label {
flex: 1;
min-width: 0;
/* La hauteur est écrite, et ce n'est pas un caprice : livrée à lui-même,
Chrome donne au champ une hauteur entière en pixels — 16 au lieu de
16,67 — et le texte descend d'un tiers de pixel. Le nombre est celui que
le navigateur aurait dû trouver seul : une ligne, plus le retrait. */
height: calc((2 - 2 * var(--ds-base) + var(--ds-capitale)) * var(--ds-taille) * var(--ds-unite));
padding: calc((1 - 2 * var(--ds-base) + var(--ds-capitale)) * var(--ds-taille) * var(--ds-unite)) 0 0;
border: none;
background: none;
color: var(--text-color1);
outline: none;
}
.Champ_connection .label::placeholder {
color: var(--invit-color);
opacity: 1;
}
/* Le champ actif. Le DS ne dessine pas cet état, mais il dit comment il marque
l'élément actif partout ailleurs — « icon_eye_44x44 » et « Btn_clickable »
ont chacun une variante « selected », et c'est --event-color dans les deux.
Le trait ne change que de couleur : son épaisseur ne bouge pas, sinon la
colonne entière sursauterait à chaque tabulation. */
.Champ_connection > .champs:focus-within {
border-color: var(--event-color);
}
/* … et la saisie elle-même ne montre rien. C'est la BOÎTE qui dit « je suis
ici », pas ce qu'elle contient.
Sans cette règle, l'anneau de focus général de l'ancien socle
(`1-socle.css`, « :focus-visible » sur tout élément atteignable au clavier)
vient se poser dessus : un halo bordeaux et un rayon de 8 px, appliqués à
une saisie qui ne fait que 12 px de haut — d'où une pastille collée au
texte, à l'intérieur du champ (constat d'Etienne, 2026-09-01). Un
`outline:none` n'y peut rien, cet anneau est une `box-shadow`.
Ce n'est pas une exception à l'anneau général : le bouton du formulaire et
celui de l'œil le gardent, eux, et restent donc repérables au clavier. */
.Champ_connection .label:focus-visible {
box-shadow: none;
border-radius: 0;
}
/* Le remplissage automatique du navigateur : aucune couleur parasite.
Chrome repeint de force le fond d'un champ qu'il vient de remplir — un bleu
pâle, #E8F0FE — et la couleur du texte avec. Ce n'est pas un `background`
ordinaire : il est posé par une règle interne que ni `background` ni
`!important` ne peuvent reprendre. La seule prise est une ombre INTERNE, qui
se dessine par-dessus, et `-webkit-text-fill-color` pour le texte.
L'étalement vaut la hauteur du champ, 124 : bien plus que les quelques
pixels de la saisie, donc il la recouvre entièrement.
Sans ça, le bleu de Chrome s'installe aussi en thème sombre — un fond clair
au milieu du panneau, exactement ce qu'Etienne ne veut pas. */
.Champ_connection .label:-webkit-autofill,
.Champ_connection .label:-webkit-autofill:hover,
.Champ_connection .label:-webkit-autofill:focus,
.Champ_connection .label:-webkit-autofill:focus-visible {
box-shadow: 0 0 0 calc(124 * var(--ds-unite)) var(--panelsoft-color) inset;
-webkit-text-fill-color: var(--text-color1);
caret-color: var(--text-color1);
}
/* Le même, sous son nom NORMALISÉ. « :autofill » est le sélecteur du standard,
« :-webkit-autofill » le vieux nom que Chrome garde par compatibilité. Les
deux désignent le même état, d'où deux règles identiques — et deux règles
SÉPARÉES, pas une liste : un navigateur qui ne connaîtrait qu'un des deux
noms jetterait la règle entière si les deux y figuraient ensemble. */
.Champ_connection .label:autofill,
.Champ_connection .label:autofill:hover,
.Champ_connection .label:autofill:focus,
.Champ_connection .label:autofill:focus-visible {
box-shadow: 0 0 0 calc(124 * var(--ds-unite)) var(--panelsoft-color) inset;
-webkit-text-fill-color: var(--text-color1);
caret-color: var(--text-color1);
}
/* ── btn_enregistrer ───────────────────────────────────────────────────────
Le bouton plein, en dégradé. Quatre variantes dans la maquette : Event et
Repet, chacune en Clair et en Sombre. Les jetons de dégradé couvrent la
bascule claire/sombre ; la nature — date ou répétition — se choisit à la
pose, d'où le dégradé de l'évènement par défaut et la classe « is-repet »
pour l'autre.
La LARGEUR n'est pas ici : la maquette du DS le dessine à 397 unités et
l'écran de connexion à 515. C'est la hauteur qui est le composant, et elle
est passée de 117 à 132 le 2026-09-02, dans les quatre variantes. L'arrondi
a suivi le 2026-09-03, de 20 à 32 unités, dans les quatre également.
Le libellé prend --txt-btn : blanc dans les deux variantes claires de la
planche, #1A181B dans les deux sombres. Il suit donc le thème, mais à
l'envers de --text-color1 — le dégradé s'éclaircit quand le thème s'assombrit
(bordeaux → orange, bleu foncé → bleu clair), et c'est le fond qui commande.
Jusqu'au 2026-09-03 il était blanc partout, en --text-color_fullWhite ; c'est
ce jour-là qu'Etienne a ajouté la paire.
LE RETRAIT DU HAUT N'EST PAS UN ÉCART, C'EST UN CENTRAGE — même calcul que
la saisie de `Champ_connection`, et pour la même raison : Figma centre la
hauteur de capitale, le navigateur centre le cadratin, le libellé tomberait
3,1 unités trop haut. Contrôle de bout en bout : la ligne de base doit
tomber à 88,3 du haut du bouton, la cote que donnent les quatre variantes
de la planche ET les deux écrans de connexion. */
.btn_enregistrer {
display: inline-flex;
align-items: center;
justify-content: center;
height: calc(132 * var(--ds-unite));
padding: calc((1 - 2 * var(--ds-base) + var(--ds-capitale)) * var(--ds-taille) * var(--ds-unite)) 0 0;
border: none;
border-radius: calc(32 * var(--ds-unite));
background: var(--event-color-degrade);
color: var(--txt-btn);
cursor: pointer;
}
.btn_enregistrer.is-repet {
background: var(--repet-color-degrade);
}
/* Le rognage s'arrête ici. Le style est posé sur le BOUTON, qui est une boîte
flex : ses deux pseudo-éléments y deviendraient deux éléments flex encadrant
le libellé, et le centrage écrit au-dessus ne vaudrait plus rien. Le libellé
du bouton n'est pas dans un élément à lui, on ne peut donc pas déplacer le
style dessus — d'où cette extinction, seule du fichier. */
.btn_enregistrer::before,
.btn_enregistrer::after {
content: none;
}
/* ── icon_eye_44x44 ────────────────────────────────────────────────────────
L'œil qui montre le mot de passe. Quatre variantes au DS : « defaut » et
« selected », en clair et en sombre — et le DESSIN est le même dans les
quatre, seule la couleur du trait change. C'est donc « selected » qui dit
« le mot de passe est visible » : il n'existe pas d'œil barré dans le DS.
Le trait est en « currentColor » dans le gabarit, la couleur se règle donc
ici pour les deux états à la fois.
La classe va sur le `