/* Cousinage — feuille de style de base.
*
* Direction artistique, plan A.6. Le registre est « calme et dense », jamais
* « minimal et géant ».
*
* Trois interdits, appuyés sur un précédent récent : pas de verre dépoli, pas
* de transparence, pas de flou. Apple a introduit Liquid Glass avec iOS 26 puis
* a dû livrer, dès la bêta 4 d'iOS 26.1, un réglage « Tinted » pour l'atténuer
* après des semaines de critiques d'accessibilité — texte sous 4,5:1 sur fonds
* complexes, lisibilité dégradée en extérieur, fatigue en lecture prolongée.
* Sur un public de 15 à 92 ans, c'est disqualifiant.
*
* La retenue ne se joue donc pas sur la taille du texte — le plancher de 18 px
* est non négociable, 55 % des 60-74 ans étant en illectronisme ou en
* compétences faibles — mais sur le chrome retiré : pas de carte autour de
* chaque élément, pas d'ombre, des filets d'un pixel plutôt que des boîtes.
*/
:root {
/* Le papier, pas l'écran : jamais de blanc pur. */
--papier: #FBF9F4;
--surface: #FFFFFF;
--encre: #1A1814;
--encre-douce: #5C574E;
--filet: #E3DED2;
--filet-clair: #F0ECE3;
--lien: #2C4A6E;
/* ------------------------------------------------------------------
UN GESTE N'EST PAS UN LIEN
------------------------------------------------------------------
Le bouton principal prenait `--lien` comme fond. En thème sombre `--lien`
doit être CLAIR pour se lire sur du presque noir — un bleu pâle — et le
bouton devenait alors un pavé pastel avec du texte foncé dessus : l'objet
le plus lumineux de l'écran, pour « Écrire ». Criard, et faux : la couleur
d'un lien répond à « où cela mène », celle d'un geste à « que fait-on ».
Deux jetons distincts, donc, et le geste garde le MÊME bleu profond dans
les deux thèmes — seulement remonté d'un cran en sombre pour rester
lisible. Un bouton doit avoir la même présence de jour comme de nuit. */
--geste: #2C4A6E;
--geste-encre: #FBF9F4;
--alerte: #8E3129;
--succes: #2F5D45;
/* ------------------------------------------------------------------
CINQ CRANS, EN REM — ET LE RÉGLAGE DE CONFORT FAISAIT L'INVERSE
------------------------------------------------------------------
Aucune typographie d'apparat : pas de titre à 34 px, pas de nombre géant,
pas de bandeau pleine largeur.
Ils étaient EN PIXELS, et c'est ce qui rendait le réglage « Confort de
lecture » inopérant. `html[data-taille="grand"] { font-size: 117% }` agit
sur la racine, donc sur les `rem` — donc sur `.page { max-width: 40rem }`
et sur tous les rembourrages, mais PAS sur du texte codé en pixels. Le
réglage élargissait les conteneurs sans grossir une seule lettre : la
mesure passait de 72 à 84 signes, c'est-à-dire l'exact contraire de ce
qu'il promet — sur le public que le projet vise nommément, dont 55 % des
60-74 ans sont en illectronisme ou en compétences faibles.
Les valeurs sont identiques à 16 px de racine : rien ne bouge au cran
« normale », et le réglage prend enfin effet aux deux autres.
`--t-sous-titre` remplace `--t-message`, qui était déclaré et n'avait
AUCUN appelant — pendant que `font-size: 19px` était écrit sept fois en
dur ailleurs dans cette feuille. */
--t-titre: 1.5rem; /* 24 px */
--t-sous-titre: 1.1875rem; /* 19 px */
--t-corps: 1.125rem; /* 18 px */
--t-meta: .9375rem; /* 15 px */
--t-onglet: .8125rem; /* 13 px */
/* Deux marches manquaient, et leur absence a produit les strays : quatorze
déclarations à 12 px, onze à 13, quatre à 11, plus 10, 14, 16, 17, 20, 26
et 28 px posés un par un. Une échelle incomplète ne se respecte pas — on
écrit la valeur qu'il faut, et l'échelle devient décorative. */
--t-micro: .75rem; /* 12 px — étiquettes, méta de second rang */
--t-grand: 1.75rem; /* 28 px — le titre d'un écran d'accueil */
/* Les cibles tactiles : 48 px de surface réelle est un plancher juridique,
pas un objectif. Les actions principales montent à 56 px. */
--cible: 48px;
--cible-principale: 56px;
/* La ligne qui fait rendre au navigateur SES propres objets dans le bon
thème : le calendrier d'un champ date, les barres de défilement, les cases
à cocher natives. Sans elle, le calendrier s'ouvre en blanc sur un écran
noir, et l'on croit à un défaut du produit. */
color-scheme: light dark;
/* ------------------------------------------------------------------
L'ÉCHELLE D'ESPACEMENT — NEUF CRANS, ET NON QUARANTE-HUIT
------------------------------------------------------------------
La feuille employait quarante-huit valeurs distinctes en `rem`. Les
grappes qui ne se distinguent pas à l'œil, mais qui font « respirer au
hasard » : quatre valeurs entre 1,6 et 2,9 px, CINQ entre 11 et 14, quatre
entre 17 et 22. Rien ne se voit ligne à ligne ; l'ensemble, si.
Les valeurs négatives ne sont pas de l'espacement — ce sont des annulations
du rembourrage de `.page`, calculées pour tomber juste — et les grandes
(8, 15, 17, 46 rem) sont des largeurs de colonne. Ni les unes ni les autres
n'entrent dans l'échelle.
Elle est déclarée ici pour qu'on la lise avant d'écrire une règle de plus :
une échelle qu'on reconstitue de mémoire se disperse à nouveau. */
/* ------------------------------------------------------------------
LA HAUTEUR RÉSERVÉE À LA BARRE DU BAS
------------------------------------------------------------------
Un seul jeton, parce que DEUX endroits en dépendent : la barre elle-même,
et le rembourrage que le document lui réserve. Ils étaient écrits deux
fois, à l'identique, et deux calculs jumeaux finissent toujours par
diverger d'un correctif à l'autre — l'un corrigé, l'autre oublié, et la
barre recouvre le dernier paragraphe de chaque page.
La zone sûre S'AJOUTE aux 64 px : sur un iPhone à encoche elle vaut 34 px,
et les inclure dans la hauteur ne laisserait que 30 px aux six onglets. */
--barre-basse: calc(64px + env(safe-area-inset-bottom, 0px));
/* ------------------------------------------------------------------
LA BANDE HAUTE A UNE HAUTEUR, ET PERSONNE NE LA CONNAISSAIT
------------------------------------------------------------------
Elle est `sticky` en tête de chaque écran, 3 rem plus l'encoche. L'écran
de la carte se calculait `100dvh - var(--barre-basse)` en l'ignorant : la
page dépassait donc la fenêtre de la hauteur de cette bande, l'écran se
mettait à défiler, le titre passait sous la barre et une bande vide
s'ouvrait sous la feuille. JB, le 27 août : « même replié, pas bon ».
Le jeton existait dans le dessin et pas dans la feuille — c'est le même
défaut que `--barre-basse` inventé deux fois la semaine dernière. */
--bande-haute: calc(3rem + env(safe-area-inset-top, 0px));
/* ------------------------------------------------------------------
L'ÉCHELLE DES PLANS, ÉCRITE UNE FOIS
------------------------------------------------------------------
Leaflet a la sienne, et elle est haute : ses tuiles à 200, ses tracés à
400, ses marqueurs à 600, ses infobulles à 650, ses bulles à 700, ses
contrôles à 800 — et les CONTENEURS de contrôles, `.leaflet-top` et
`.leaflet-bottom`, à 1000.
Deux corrections successives ont échoué faute de connaître ce dernier
chiffre : la feuille des lieux est passée de 401 à 800, et l'attribution
continuait de se peindre dans son bandeau. On pose donc l'échelle du
produit AU-DESSUS de toute celle de Leaflet, et on l'écrit ici plutôt que
de la deviner à chaque correctif.
La barre des onglets est le dernier plan : elle doit rester atteignable
quoi qu'il arrive. La légende s'était déjà peinte par-dessus une fois, et
l'on ne pouvait plus naviguer du tout depuis la carte. */
--plan-feuille: 1100;
--plan-barre: 1200;
/* La hauteur du bandeau de la feuille : les contrôles de Leaflet s'en
écartent, sinon l'attribution — que la licence des tuiles impose de
montrer — disparaît sous lui. */
--feuille-bandeau: 3.25rem;
/* La hauteur de la feuille des lieux, et de son corps qui défile. Un seul
endroit pour les deux : leur différence est le bandeau, et deux valeurs
posées séparément finissent par ne plus se répondre. */
--feuille-haute: min(38dvh, 26rem);
--e0: .15rem; --e1: .25rem; --e2: .5rem; --e3: .75rem;
--e4: 1rem; --e5: 1.25rem; --e6: 1.5rem; --e7: 2rem; --e8: 3rem;
/* ==================================================================
CE QUI SUIT EST LE SYSTÈME. RIEN NE S'ÉCRIT EN DEHORS.
==================================================================
Le relevé qui a motivé ce bloc, fait sur cette feuille même :
42 tailles de police en dur, sur 15 valeurs distinctes ;
61 rayons d'angle en dur, sur 16 valeurs distinctes ;
139 rembourrages, sur 65 valeurs distinctes ;
193 marges, sur 54 valeurs distinctes.
Seize rayons d'angle différents dans une même application, ce n'est pas un
réglage fin : c'est l'absence de système. Chacun a été posé un jour pour
une raison locale et juste, et leur somme donne une application qui a l'air
bricolée sans qu'on sache dire par quoi — parce que le défaut n'est dans
aucune règle, il est dans leur dispersion.
RÈGLE : toute nouvelle déclaration de taille, de rayon, de graisse ou
d'espacement emploie un jeton. Une valeur en dur doit se justifier par un
commentaire, comme n'importe quelle autre exception de ce dépôt. */
/* --- RAYONS : trois, et pas un de plus ------------------------------
Le petit pour ce qui se pose sur le fond (étiquettes, champs), le moyen
pour ce qui est un objet (cartouches, boutons, cartes), le rond pour ce
qui porte un visage. Il n'y a pas de quatrième cas. */
--r-petit: 4px;
--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--r-moyen: 10px;
--r-rond: 999px;
/* --- GRAISSES : trois -----------------------------------------------
La courante, celle qui distingue, celle qui affirme. `550` et `700`
n'étaient employés qu'une ou deux fois chacun — un écart qu'on ne voit pas
mais qui empêche l'œil de tenir un rythme. */
--g-normale: 400;
--g-appuyee: 500;
--g-forte: 650;
/* --- ÉLÉVATION : deux ------------------------------------------------
Une ombre pour ce qui flotte au-dessus de la page (médaillon, feuille de
carte), une pour ce qui se soulève au survol. Le reste est plat : cette
application est un registre, pas un tableau de bord. */
--ombre-posee: 0 1px 3px rgb(0 0 0 / .10);
--ombre-levee: 0 4px 14px rgb(0 0 0 / .12);
/* --- DURÉES ----------------------------------------------------------
Une seule, et courte. Au-delà de 160 ms on attend l'interface. */
--duree: 140ms;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "EB Garamond", Georgia, serif;
--sans: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
/* Les cinq teintes de la carte. Elles étaient écrites en dur au bas de la
feuille, avec leurs valeurs CLAIRES — et `#2C4A6E` sur le fond sombre
`#14130F` ne se voit pas : les points, c'est-à-dire l'objet même de
l'écran, s'effaçaient. Un jeton par teinte, doublé plus bas. */
--pastille-residence: #2C4A6E;
--pastille-maison: #2F5D45;
--pastille-vendue: #9A9384;
--pastille-annonce: #8E6B29;
--pastille-nouvelle: #8E3129;
}
/* Le chevron des listes déroulantes est une image encodée : sa couleur ne peut
pas venir d'une variable, elle est donc redéclarée pour le thème sombre. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A39C8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) {
/* ------------------------------------------------------------------
TROIS JETONS QUI RÉPARENT ONZE ÉCRANS
------------------------------------------------------------------
Relevé sur vingt-deux captures d'écran en thème sombre :
· le texte secondaire (`--encre-douce`) tombait à moins de 4,5:1 sur
le fond, et c'est lui qui porte l'âge, la filiation, l'aperçu d'un
message, la date — c'est-à-dire tout ce qui SITUE. Illisible pour un
lecteur de soixante-quinze ans, et le public visé en compte
beaucoup ;
· `--surface` était à huit points de `--papier` : le fond d'une carte
ne se distinguait pas du fond de la page, et les cartes de l'arbre
« disparaissaient en plein soleil » ;
· `--filet` était trop sourd pour rattraper l'un ou l'autre.
Le fond de page descend, la surface monte, l'encre douce remonte. La
nuance chaude est conservée — c'est du papier, pas un terminal. */
--papier: #121110;
--surface: #221F1A;
--encre: #EDE8DD;
--encre-douce: #B8B0A0;
--filet: #38342B;
--filet-clair: #26231D;
--lien: #8FB4DA;
/* Remonté d'un cran seulement : assez pour se détacher du fond, pas au
point de devenir la chose la plus claire de l'écran. */
--geste: #3E6899;
--geste-encre: #F2EFE6;
--alerte: #D4837A;
--succes: #7FB79A;
/* Les mêmes teintes remontées : sur un fond presque noir, il faut monter
la clarté, pas seulement la saturation. */
--pastille-residence: #7FA5CE;
--pastille-maison: #74B295;
--pastille-vendue: #A39C8E;
--pastille-annonce: #D2A75C;
--pastille-nouvelle: #D4837A;
}
}
/* Le réglage de confort, en trois crans, stocké côté serveur pour suivre
l'utilisateur d'un appareil à l'autre. */
html[data-taille="grand"] { font-size: 117%; }
html[data-taille="tres_grand"] { font-size: 133%; }
* { box-sizing: border-box; }
/* ==================================================================
TROIS REGISTRES, ET ON DOIT LES DISTINGUER SANS LIRE
==================================================================
Le produit mêle trois choses de nature différente sur les mêmes écrans, et
rien ne les distinguait :
CE QUI S'INFORME — le faire-part, le carnet, la fiche, l'arbre. On le LIT.
Voix éditoriale : romaine, filets, aucun cadre. C'est le défaut, et il
n'a besoin d'aucune classe.
CE QUI S'ÉDITE — publier, déclarer, inscrire, déposer. On l'UTILISE.
Voix utilitaire : linéale, champs, boutons. Replié tant qu'on ne s'en
sert pas, parce qu'un formulaire ouvert d'office repousse ce qu'on vient
lire. C'est `.deposer`, qui existait déjà.
CE QUI S'ADMINISTRE — la régie : invitations, motifs, alliances,
modération, mandats. Cela n'appartient pas au même monde : c'est le
travail d'UNE personne pour toute la famille, et le montrer au même rang
que le reste fait croire à chacun qu'il doit s'en occuper.
La régie prend donc un registre à elle : un fond légèrement distinct, un
filet complet, et une étiquette qui NOMME le rôle et sa durée quand elle est
bornée. Pas de couleur d'alerte — administrer n'est pas dangereux — et pas
d'ombre : la direction artistique l'interdit.
------------------------------------------------------------------
LE MANDATAIRE EST EN LECTURE, SAUF DÉCLENCHEMENT
------------------------------------------------------------------
`Delegation` porte déjà `portee` (lecture / lecture_ecriture), `expire_le`
borné à trois mois, et la révocation. Ce qui manquait est de le DIRE à
l'écran : un mandataire qui ne peut pas écrire doit voir pourquoi, et
jusqu'à quand. D'où `.regie__mention`, qui porte le terme.
================================================================== */
.regie { margin: var(--e5) 0; padding: var(--e4) var(--e4);
border: 1px solid var(--filet); border-radius: var(--r-petit);
background: var(--filet-clair); }
.regie__intitule { display: flex; align-items: baseline; justify-content: space-between;
gap: var(--e3); flex-wrap: wrap; margin: 0 0 var(--e2);
font-family: var(--sans); font-size: var(--t-meta); font-weight: var(--g-appuyee);
color: var(--encre-douce); }
/* Le terme d'un mandat se lit sur la ligne, jamais dans une note de bas de
page : « jusqu'au 3 novembre » est ce qu'on vient vérifier. */
.regie__mention { font-size: var(--t-onglet); color: var(--encre-douce); }
.regie__gestes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.regie__gestes form { margin: 0; }
/* En lecture seule, les gestes restent VISIBLES et inertes : les masquer
ferait croire qu'ils n'existent pas, et l'on téléphonerait au régisseur. */
.regie--lecture .regie__gestes,
.regie--lecture .cousinage-carte__destinations { opacity: .55; pointer-events: none; }
/* ------------------------------------------------------------------
LE GESTE DE RÉGIE SE DISTINGUE DU GESTE DE TOUS
------------------------------------------------------------------
« Les motifs » et « Les familles alliées » portaient la forme d'un lien
ordinaire, au milieu de gestes que tout le monde peut faire. Or ils engagent
la famille ENTIÈRE — un motif paraît sur chaque faire-part — et ils ne sont
ouverts qu'au régisseur.
Ils prennent donc une forme à eux : le contour d'une action, mais en encre
douce et sur le fond de la zone de régie, jamais l'aplomb d'un geste
principal. On voit qu'on peut le faire ET qu'on est le seul à le pouvoir. */
.action--regie {
display: inline-flex; align-items: center; gap: var(--e2);
min-height: 38px; padding: 0 var(--e3);
font-family: var(--sans); font-size: var(--t-meta); font-weight: var(--g-appuyee);
color: var(--encre-douce); text-decoration: none;
background: var(--surface);
border: 1px solid var(--filet); border-radius: var(--r-moyen);
transition: border-color var(--duree), color var(--duree);
}
.action--regie:hover { color: var(--encre); border-color: var(--encre-douce); }
/* ==================================================================
L'ÉTIQUETTE — UN SEUL TRAITEMENT, ET SANS TRUQUAGE
==================================================================
Quinze objets du produit portaient des petites capitales sur la LINÉALE :
rubriques, rôles, genres, natures de groupe, heures d'un moment,
intertitres. Aucune des trois linéales de la pile — Avenir Next, Segoe UI,
system-ui — ne porte de table `smcp` : le navigateur les SYNTHÉTISE en
écrasant des capitales à 70 %. Le résultat est comprimé, plus sombre que le
texte voisin, et fautif sans qu'on sache dire pourquoi. C'est l'« écriture
écrasée » qu'on voyait partout.
Une étiquette n'a pas besoin de crier. Treize pixels, une graisse de 500, la
couleur douce et la CASSE NORMALE suffisent à dire « ceci classe ce qui
suit » — c'est ce que font les produits soignés de 2026, qui ont pour la
plupart abandonné les bandeaux en capitales.
La ROMAINE, elle, garde ses petites capitales : Iowan Old Style, Palatino et
Georgia en portent de vraies, et la rubrique du carnet est le seul endroit
du produit où cette voix a lieu d'être.
------------------------------------------------------------------
ET LA GRAISSE : 600 ÉTAIT DEVENU LE DÉFAUT
------------------------------------------------------------------
Trente-deux déclarations en 600 — boutons, étiquettes, noms, intitulés de
liste, sous-titres. Quand tout est demi-gras, rien ne ressort, et la page
paraît uniformément épaisse. La règle tient en trois lignes :
400 le texte courant, et les étiquettes qui classent ;
500 ce qui NOMME — un nom de personne, un titre en romaine ;
600 ce qui S'ACTIONNE, et lui seul : un bouton, l'intitulé d'une ligne
qu'on va toucher.
================================================================== */
.etiquette, .genre, .rubrique-linéale, .cousinage-carte__role,
.cousinage-carte__rubrique, .moment__heure, .intertitre-famille,
.etiquette--famille, .etiquette--mien, .etiquette--dun_cousin, .etiquette--duo {
font-family: var(--sans); font-size: var(--t-onglet);
font-weight: var(--g-appuyee); letter-spacing: 0; color: var(--encre-douce); }
/* --------------------------------------------------------------------------
LA RÈGLE CI-DESSUS A DÉJÀ ÉTÉ DÉCAPITÉE UNE FOIS, ET VOICI CE QUE ÇA FAIT.
Une passe de normalisation lui a retiré sa dernière ligne de sélecteurs ET
son bloc de déclarations : il restait une liste finissant par une virgule.
Or une liste de sélecteurs sans bloc N'EST PAS une règle morte — elle se
SOUDE à la règle suivante, qui était `[hidden] { display: none !important }`.
Toutes les étiquettes du produit — les noms des rôles des Conditions en
premier — ont disparu de l'écran sans une erreur nulle part.
-------------------------------------------------------------------------- */
/* ------------------------------------------------------------------
`hidden` DOIT L'EMPORTER, ET IL NE L'EMPORTAIT PAS
------------------------------------------------------------------
L'attribut `hidden` est posé par la feuille du NAVIGATEUR, à spécificité
nulle : la moindre règle de classe qui déclare un `display` le bat. Le
plateau d'aperçu du fil (`.plateau { display: flex }`) restait donc affiché
en permanence, avec sa balise `` du produit ne remettait ses marges à zéro : `.secondaire` ne pose
que la couleur et le corps, si bien que tout sous-titre coûtait 30 px de
marges de navigateur, invisibles dans la feuille. */
p { margin: 0 0 var(--e4); }
/* `min(40rem, 72ch)` : sans le second terme, le réglage de confort — qui agit
sur la racine, donc sur les `rem` — élargirait la colonne EN MÊME TEMPS que
le texte, et la mesure ne cesserait jamais de s'allonger. Le `ch` suit le
corps réel : la ligne garde le même nombre de signes à tous les crans, ce
qui est précisément l'objet du réglage. */
.page { max-width: min(40rem, 72ch); margin: 0 auto; padding: var(--e6) var(--e5); }
h1 { font-family: var(--serif); font-size: var(--t-titre); font-weight: var(--g-appuyee);
line-height: 1.25; margin: 0 0 var(--e2); text-wrap: balance; }
.chapo { color: var(--encre-douce); margin: 0 0 var(--e6); }
.secondaire { color: var(--encre-douce); font-size: var(--t-meta); }
/* Les métadonnées ne descendent jamais sous 15 px et ne sont jamais en gris
clair : horodatages et mentions légales compris. */
a { color: var(--lien); text-underline-offset: 2px; }
/* ------------------------------------------------------------------
TOUT REPLI PORTE SON CHEVRON — COU-CRA-006
------------------------------------------------------------------
Un `` ne dessine son triangle natif qu'en `display: list-item`.
Douze replis du produit sont en `flex` ou en `grid` pour aligner leur
contenu : tous avaient perdu leur marqueur, `list-style-type` déclaré ou non.
Ils ne manquaient pas seulement de signe : sur « Inscrire le mien », le
`summary` est en 18 px, graisse 500, couleur `--encre` — c'est-à-dire
TYPOGRAPHIQUEMENT IDENTIQUE à un titre de section. Il n'était pas discret, il
envoyait le mauvais signal, et seul le curseur au survol le démentait — donc
rien du tout sur un téléphone. Sur un public dont une partie ouvre
l'application trois fois par an, un contrôle qui ressemble à un titre n'est
jamais actionné.
On rend donc le signe à TOUS, une fois : un chevron qui pivote à l'ouverture,
posé en `::after` — il survit à n'importe quelle disposition, là où le
marqueur natif dépend d'elle. `margin-left: auto` le pousse au bout des
replis en flex ; sur les autres il suit simplement le texte.
`currentColor` par masque, et non un SVG en fond : le chevron doit suivre la
couleur du libellé, qui change d'un repli à l'autre et d'un thème à l'autre.
Ceux qui portent DÉJÀ leur propre signe — le trombone du composeur, la
poignée de la feuille de carte, l'étiquette de motif — s'en dispensent
nommément, plus bas. */
summary { list-style: none; }
/* Un `summary` peut loger un titre : la zone devient alors atteignable par la
navigation de titre en titre, sans que le repli cesse d'être un bouton. Le
titre n'apporte QUE sa sémantique — toute son allure vient du `summary`. */
summary > h2, summary > h3 { font: inherit; color: inherit; margin: 0;
letter-spacing: inherit; }
summary::-webkit-details-marker { display: none; }
summary::after {
content: ""; flex: 0 0 auto; width: 1em; height: 1em; margin-left: auto;
background: currentColor;
mask: var(--chevron) center / .75em .75em no-repeat;
-webkit-mask: var(--chevron) center / .75em .75em no-repeat;
transition: transform .15s ease;
}
details[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
summary::after { transition: none; }
}
/* Les trois qui ont leur propre signe. */
.composeur__joindre > summary::after,
.greffe--motif > summary::after,
.carte__feuille > summary::after { content: none; }
.carte { max-width: 26rem; margin: 3rem auto; }
.formulaire { display: flex; flex-direction: column; gap: var(--e3); }
label { font-weight: var(--g-appuyee); font-size: var(--t-meta); }
/* La mention « facultatif » DANS l'étiquette, et non sous le champ : posée en
dessous, elle se lit après la saisie — c'est-à-dire trop tard. Elle reprend
le poids et la couleur du texte secondaire pour ne pas concurrencer
l'étiquette qu'elle qualifie. */
label .facultatif { font-weight: var(--g-normale); color: var(--encre-douce); }
/* ==================================================================
TOUS LES CHAMPS, ET PAS SEULEMENT DEUX
==================================================================
Seuls `email` et `text` étaient stylés. Le téléphone, le nombre, la date, la
recherche, la liste déroulante et la zone de texte tombaient donc sur le
rendu par défaut du navigateur — c'est-à-dire, en thème SOMBRE, une boîte
BLANCHE au milieu d'un écran noir. Le champ téléphone y ajoutait l'icône de
contacts de l'autoremplissage, sur fond blanc lui aussi.
Une liste de sélecteurs, donc, et pas un type oublié. Le jour où l'on ajoute
un `url_field`, il est déjà couvert. */
input[type="email"], input[type="text"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"],
input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="month"], input[type="week"],
textarea, select {
font-family: var(--sans);
font-size: var(--t-corps);
min-height: var(--cible);
padding: var(--e2) var(--e3);
background: var(--surface);
color: var(--encre);
border: 1px solid var(--filet);
border-radius: var(--r-petit);
/* Sans cela, iOS arrondit et ombre les champs à sa façon, et Safari refuse
la couleur de fond sur `select`. */
-webkit-appearance: none;
appearance: none;
width: 100%;
box-sizing: border-box;
}
textarea { min-height: 6rem; line-height: 1.5; resize: vertical; }
/* La flèche de la liste déroulante, dessinée par nous : `appearance: none` a
retiré celle du système, et sans remplacement la liste ne se distingue plus
d'un champ de saisie. Le chevron est encodé en `currentColor` via `mask`,
pour qu'il suive le thème sans deuxième image. */
/* ------------------------------------------------------------------
LE SÉLECTEUR FAISAIT CENT PIXELS DE HAUT
------------------------------------------------------------------
`padding: 2rem` — trente-deux pixels sur les QUATRE côtés. L'intention
était de dégager la place du chevron À DROITE ; écrite en raccourci, elle
s'appliquait aussi en haut et en bas, et chaque liste déroulante devenait
deux fois plus haute qu'un champ de saisie voisin. Sur l'écran « Déclarer
une nouvelle », qui en aligne trois, cela donnait un formulaire deux fois
trop long.
Le sélecteur reprend donc EXACTEMENT le rembourrage d'un champ, et n'ajoute
que ce qu'il lui faut à droite pour son chevron. */
select {
padding: var(--e2) var(--e7) var(--e2) var(--e3);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C574E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 18px 18px;
}
/* ------------------------------------------------------------------
UN TEXTE D'AIDE N'EST PAS UNE VALEUR SAISIE
------------------------------------------------------------------
JB, le 27 août 2026 : « je ne veux plus de placeholders pour les champs, car
les gens croient que quelqu'un a déjà renseigné — ou alors mets un
placeholder explicatif et non un exemple, en italique et grisé pour ne pas
confondre ».
Les soixante-huit textes d'EXEMPLE ont été retirés le 25 août, et une sonde
qui rend les quarante-six écrans en compte zéro. Cette règle vaut donc pour
le jour où l'on en reposerait un : l'italique dit, avant qu'on lise le mot,
que ce n'est pas une réponse. La couleur seule ne suffisait pas — un champ
pré-rempli est gris lui aussi sur la plupart des systèmes. */
::placeholder { color: var(--encre-douce); opacity: 1; font-style: italic; }
/* ------------------------------------------------------------------
L'AUTOREMPLISSAGE IMPOSE SON PROPRE FOND, ET IL EST BLANC
------------------------------------------------------------------
Chrome et Safari peignent un champ autorempli en blanc cassé ou en jaune
pâle, et cette couleur n'est pas surchargeable directement. L'ombre intérieure
de cent unités est le seul moyen de la recouvrir, et `-webkit-text-fill-color`
le seul moyen de rendre le texte lisible par-dessus. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 100px var(--surface) inset;
-webkit-text-fill-color: var(--encre);
caret-color: var(--encre);
}
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible {
outline: 2px solid var(--lien); outline-offset: 2px;
}
/* Le champ du code : six chiffres, larges, espacés, en chiffres tabulaires. */
.champ-code {
font-size: var(--t-grand); letter-spacing: .4em; text-align: center;
font-variant-numeric: tabular-nums; min-height: var(--cible-principale);
}
/* ==================================================================
TOUT CE QUI SE CLIQUE, EN UN SEUL ENDROIT
==================================================================
Il y avait NEUF familles de boutons pour trois rôles : `button` (56 px,
plein), `input[type="submit"]` (copie littérale de la précédente, écrite
soixante-dix lignes plus loin parce que le sélecteur ne l'atteignait pas),
`.action` (48 px, plein), `.action--seconde`, `.bouton-discret` en DEUX
règles — l'une pour le descendant, l'autre pour l'élément —,
`.bouton-secondaire`, `.recherche button`, `.courrier__action`,
`.consentement__refus`. Plus `.bouton-principal`, employé dans une vue et
défini NULLE PART.
Conséquence mesurable, et c'est exactement le grief : sur la page Famille,
le bouton « Chercher » est un `` nu de 56 px en graisse 600, à côté
de deux `.action` de 48 px — même rang, trois hauteurs, deux graisses. Et
sur « Moi », `submit_tag class: "action--seconde"` sortait NOIR PLEIN, parce
que `input[type="submit"]` (spécificité 0-1-1) bat `.action--seconde`
(0-1-0).
Trois rôles, une hauteur, un rayon. Les anciens noms restent des ALIAS : les
renommer dans quarante vues est exactement le genre de remplacement en masse
qui a déjà cassé trois fois ce dépôt. On unifie l'apparence d'abord ; les
noms suivront quand chaque vue sera relue une par une.
`--cible` (48 px) partout, et non `--cible-principale` (56 px) : le plancher
de 48 px est la règle, 56 px était l'exception devenue majoritaire. Ce qui
doit vraiment dominer un écran le dit par `.action--large`, délibérément. */
button, input[type="submit"], .action, .bouton-principal,
.action--seconde, .bouton-secondaire button, button.bouton-secondaire,
.bouton-discret button, button.bouton-discret, .recherche button,
.courrier__action, .consentement__refus, .action--grave {
display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
/* ------------------------------------------------------------------
LA TYPOGRAPHIE D'UN BOUTON N'EST PAS CELLE D'UN PARAGRAPHE
------------------------------------------------------------------
Elle était à `--t-corps` (18 px) en graisse 650 : la taille du texte
courant, dans la graisse la plus lourde de la feuille, en blanc sur un
aplat foncé. JB, le 26 août 2026 : « un poil grossier, les lettres ont
trop de gras ou la police est trop grosse, il y a un truc ».
Le truc est qu'un libellé de bouton est une ÉTIQUETTE, pas une phrase :
on le reconnaît d'un coup d'œil, on ne le lit pas. 15 px en graisse 500,
comme `.action--regie` — qui, elle, n'a jamais été trouvée grossière — et
un demi-point d'interlettrage, que le blanc sur foncé réclame parce que le
fond mange les contreformes.
LA HAUTEUR NE BOUGE PAS : 48 px reste le plancher de la cible tactile. Ce
qui change est la lettre, pas la surface qu'on vise avec le pouce. */
font-family: var(--sans); font-size: var(--t-meta); font-weight: var(--g-appuyee);
letter-spacing: .005em;
min-height: var(--cible); padding: 0 var(--e5);
/* ------------------------------------------------------------------
LE BOUTON PRINCIPAL N'EST PLUS UN PAVÉ D'ENCRE
------------------------------------------------------------------
Il prenait `--encre` : la couleur du TEXTE, c'est-à-dire le plus fort
contraste de la page, pour le geste le plus banal. En thème sombre cela
donnait un rectangle presque blanc — l'objet le plus lumineux de l'écran —
et en thème clair un pavé noir. Criard dans les deux cas, et daté : le
rectangle plein à angles vifs est un geste de 2015.
Il prend `--lien`, la couleur de ce sur quoi on clique — celle que le
lecteur a déjà apprise sur chaque nom de personne — et un rayon de 8 px.
La direction artistique tient : pas d'ombre, pas de flou, pas de dégradé,
un aplat et un filet. Ce qui change, c'est la VIOLENCE du contraste.
Le rayon reste à 3 px sur les champs de saisie : un champ n'est pas un
bouton, et leur donner la même forme est ce qui rend les formulaires
illisibles. */
border-radius: var(--r-moyen); cursor: pointer; text-decoration: none;
background: var(--geste); color: var(--geste-encre);
border: 1px solid var(--geste);
}
button:hover, input[type="submit"]:hover, .action:hover, .bouton-principal:hover {
filter: brightness(1.08); }
/* Le second rang : bordé, jamais plein. */
.action--seconde, .bouton-secondaire button, button.bouton-secondaire,
.consentement__refus, .courrier__action {
background: none; color: var(--encre); border-color: var(--filet); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) .action--seconde,
:root:not([data-theme="clair"]) .bouton-secondaire button,
:root:not([data-theme="clair"]) button.bouton-secondaire,
:root:not([data-theme="clair"]) .consentement__refus,
:root:not([data-theme="clair"]) .courrier__action,
:root:not([data-theme="clair"]) .bouton-discret button,
:root:not([data-theme="clair"]) button.bouton-discret,
:root:not([data-theme="clair"]) .recherche button { color: var(--encre); }
}
.action--seconde:hover, .bouton-secondaire button:hover,
button.bouton-secondaire:hover, .consentement__refus:hover,
.courrier__action:hover { background: var(--filet-clair);
border-color: var(--encre-douce); }
/* Le troisième rang : un filet, une encre douce, une graisse normale. C'est ce
qu'on met à côté d'un champ, jamais ce qu'on met seul sur un écran. */
.bouton-discret button, button.bouton-discret, .recherche button {
background: none; color: var(--encre-douce);
border-color: var(--filet); font-weight: var(--g-normale); }
.bouton-discret button:hover, button.bouton-discret:hover,
.recherche button:hover { color: var(--encre); border-color: var(--encre-douce); }
button:focus-visible, input[type="submit"]:focus-visible,
.action:focus-visible, .action--seconde:focus-visible,
.bouton-principal:focus-visible {
outline: 2px solid var(--lien); outline-offset: 2px; }
.action svg, .action--seconde svg, .bouton-principal svg {
width: 20px; height: 20px; flex: 0 0 auto; }
/* Ce qui doit vraiment dominer un écran — le bouton de connexion, la saisie du
code — le dit ici, et nulle part par accident. */
.action--large { min-height: var(--cible-principale); padding: 0 var(--e6); }
/* Un geste qui n'est pas un bouton : une action posée au fil du texte, en pied
de page. Il ressemble à un lien parce que c'en est un, du point de vue de
qui lit — mais il POSTE, d'où la balise. */
.bouton-lien, .bouton-lien:hover {
display: inline-flex; align-items: center; min-height: 44px;
padding: 0; margin: 0;
background: none; border: 0; border-radius: 0;
font-size: var(--t-onglet); font-weight: var(--g-normale); color: var(--encre-douce);
text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.bouton-lien:hover { color: var(--alerte); }
/* Trente-cinq appels dans les vues, et aucune cible : un `inline-block` de
15 px fait vingt-trois pixels de haut. C'est la forme la plus répandue du
produit pour « Revenir » et « Annuler ». */
.lien-discret { display: inline-flex; align-items: center; min-height: var(--cible);
margin: var(--e4); font-size: var(--t-meta); color: var(--encre-douce); }
/* ==================================================================
LE PORTRAIT
==================================================================
Une silhouette grise donnerait à trois cents personnes le même visage. Les
initiales distinguent, et leur teinte se tire du nom : la même personne
garde la même couleur d'un écran à l'autre, ce qui aide à la reconnaître
dans une liste avant même d'avoir lu. */
/* ------------------------------------------------------------------
L'INITIALE EST CENTRÉE, ET IL FAUT TROIS CHOSES POUR CELA
------------------------------------------------------------------
`align-items: center` centre la BOÎTE de la ligne, pas les lettres qu'elle
contient : une capitale n'occupe pas toute la hauteur de sa ligne, et son
interligne — hérité du corps de page à 1,6 — la pousse vers le bas. Les
monogrammes flottaient donc en bas à gauche de leur rond, et à 34 px la
dérive se voit tout de suite.
Il faut donc AUSSI `line-height: 1` pour que la ligne épouse la lettre, et
`text-align: center` pour l'axe horizontal quand deux lettres n'ont pas la
même chasse. Aucune des trois ne suffit seule. */
/* ------------------------------------------------------------------
UN ROND EST CARRÉ — ET ON L'ÉCRIT, PLUTÔT QUE DE L'ESPÉRER
------------------------------------------------------------------
Relevé par JB le 23 août 2026 : « le bug des médaillons qui deviennent
pastille OVALE, rognant sur les côtés des initiales ». Ovale est une
information géométrique — un disque ne s'aplatit que si sa largeur et sa
hauteur cessent d'être égales.
La largeur et la hauteur sont posées en ligne, en pixels, par
`portrait_de`. Elles suffisent PARTOUT SAUF là où un conteneur les
contraint : un `min-width` hérité, une grille étroite, un parent en flex qui
comprime. Le cas ne s'est pas reproduit sous la main, et je n'ai pas voulu
deviner lequel des trois.
`aspect-ratio` et `flex-shrink: 0` ne diagnostiquent rien : ils rendent
l'aplatissement IMPOSSIBLE, quelle que soit la cause. Un invariant écrit
coûte moins qu'une enquête, et il tient les cas qu'on n'a pas imaginés. */
.portrait {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; flex-shrink: 0; aspect-ratio: 1;
border-radius: var(--r-rond); object-fit: cover;
background: var(--filet-clair);
line-height: 1; text-align: center; overflow: hidden;
}
/* ------------------------------------------------------------------
LES INITIALES SUIVENT LE THÈME, LA TEINTE NE FAIT QUE LES DISTINGUER
------------------------------------------------------------------
La couleur de fond était écrite dans le gabarit — `hsl(angle 24% 82%)` — un
pastel CLAIR dans les deux thèmes, avec une encre noire posée dessus. Sur
fond sombre, quarante de ces ronds donnaient une planche de vignettes
collées sur la page : ce qui devait dire « je n'ai pas encore de photo »
criait plus fort que les vraies photographies.
Le gabarit ne pose plus que l'ANGLE, qui identifie la personne. La clarté et
la saturation appartiennent au thème, seul à savoir sur quoi le rond se
pose. */
.portrait--initiales {
font-family: var(--sans); font-weight: var(--g-forte); letter-spacing: .02em;
background: hsl(var(--teinte, 0) 24% 84%);
color: #1A1814;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) .portrait--initiales {
/* Sourde et non pastel : le rond descend sous le niveau du texte au lieu
de monter au-dessus. L'encre repasse à celle du papier. */
background: hsl(var(--teinte, 0) 16% 26%);
color: #E8E4DA;
}
}
:root[data-theme="sombre"] .portrait--initiales {
background: hsl(var(--teinte, 0) 16% 26%);
color: #E8E4DA;
}
/* ==================================================================
DÉPOSER UN FICHIER, ET QUE ÇA SE VOIE
==================================================================
Le champ `file` natif est une petite boîte grise portant « Sélect. fichiers »
— sur téléphone, à peine visible, et rien ne dit qu'on peut y déposer une
photo. C'est la raison pour laquelle personne ne trouvait comment ajouter
quoi que ce soit.
Le champ est donc masqué et l'étiquette prend sa place : une zone franche,
bordée en pointillé, de la hauteur d'une cible tactile. Le `label` porte le
`for` — le clic passe au champ sans une ligne de code. */
.depot {
display: flex; flex-direction: column; gap: var(--e1);
padding: var(--e4) var(--e5); cursor: pointer;
border: 1px dashed var(--filet); border-radius: var(--r-petit);
background: var(--surface);
}
.depot:hover { border-color: var(--lien); background: var(--filet-clair); }
.depot:focus-within { outline: 2px solid var(--lien); outline-offset: 2px; }
/* Pendant qu'un fichier survole la zone. Le pointillé promettait ce geste sans
que rien ne l'écoute : on glissait une photo dessus et le navigateur
l'ouvrait en plein écran, en quittant la page. */
.depot--survole { border-color: var(--lien); border-style: solid;
background: var(--filet-clair); }
.depot__intitule { font-family: var(--sans); font-weight: var(--g-appuyee); }
/* Le plafond et les formats se disent AVANT l'envoi. On ne les découvrait
qu'après avoir attendu la montée d'un fichier trop lourd. */
.depot__aide { font-size: var(--t-meta); color: var(--encre-douce); }
.depot__geste { font-size: var(--t-meta); color: var(--lien);
text-decoration: underline; text-underline-offset: 2px; }
.depot input[type="file"] {
/* Masqué à l'œil, pas au clavier ni au lecteur d'écran. */
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.depot__choisi { font-size: var(--t-meta); color: var(--encre);
font-weight: var(--g-appuyee); overflow-wrap: anywhere; }
/* ------------------------------------------------------------------
L'APERÇU EST RECTANGULAIRE, ET C'EST VOULU
------------------------------------------------------------------
Un nom de fichier — `IMG_4472.HEIC` — n'apprend rien : sur trente photos
d'un même après-midi, ils se ressemblent tous. La vignette dit en un coup
d'œil si l'on a pris la bonne.
Le RECTANGLE plutôt que le rond : on cadre ce qu'on voit. Une zone ronde à
la saisie pour un rendu rond donnait un menton coupé qu'on ne découvrait
qu'après ; un rectangle montre l'image entière, et le rond ne survient qu'à
l'affichage, là où il appartient au vocabulaire du portrait. */
.depot__apercus { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e2); }
.depot__apercu { width: 72px; height: 72px; object-fit: cover;
border-radius: var(--r-petit); border: 1px solid var(--filet); background: var(--filet-clair); }
/* ==================================================================
UNE CARTE PAR COUSINAGE
==================================================================
C'est le SEUL écran du produit qui gagne à être encadré, et pour une raison
précise : il énumère des objets de même nature dont il faut voir la
frontière. Partout ailleurs, le filet d'un pixel suffit et la carte serait
du chrome — ici, sans elle, sept familles se lisent comme une seule liste de
vingt liens gris.
Le bord gauche prend la couleur de la famille : c'est le filet d'origine
promu au rang de conteneur, et non un objet de plus. */
.cousinage-carte { margin: 0 0 var(--e4); border: 1px solid var(--filet);
border-left: 3px solid var(--couleur-origine, var(--filet));
border-radius: var(--r-petit); background: var(--surface); }
/* ------------------------------------------------------------------
UN TITRE ET SES MENTIONS NE SE PARTAGENT PAS UNE LIGNE
------------------------------------------------------------------
L'entête était une rangée `space-between` de trois éléments : le nom, le lien
« Qui tient quoi » et le rôle. Le nom d'un cousinage est une PHRASE —
« Cousinage de Philippe et Anne-Françoise de Cathelineau » — et il prenait
deux ou trois lignes ; le lien se retrouvait dans une colonne de quarante
pixels, coupé en trois mots empilés. JB, le 29 août 2026 : « c'est moche ».
Le nom prend donc sa ligne, et les mentions la suivante, sur un seul rang
séparé par des points médians — le rôle, les générations, le chemin vers les
rôles. C'est la disposition de toutes les autres fiches du produit ; cette
carte était la seule à ne pas la suivre. */
.cousinage-carte__entete { padding: var(--e4) var(--e4) var(--e1); }
.cousinage-carte__nom { display: block; font-family: var(--serif);
font-size: var(--t-sous-titre); font-weight: var(--g-appuyee);
min-width: 0; text-wrap: balance; }
.cousinage-carte__meta { display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--e1) var(--e2); margin: 0; padding: 0 var(--e4) var(--e3);
font-family: var(--sans); font-size: var(--t-meta); color: var(--encre-douce); }
/* Le séparateur disparaît en fin de ligne quand le rang passe à la ligne : un
point médian orphelin en bout de rangée se lit comme une coquille. */
.cousinage-carte__separateur { color: var(--filet); }
.cousinage-carte__role { font-weight: var(--g-appuyee); color: var(--encre); }
/* ------------------------------------------------------------------
UNE GRILLE, ET UN SEUL FILET ENTRE DEUX ZONES
------------------------------------------------------------------
Chaque destination portait son propre `border-bottom` : sur une grille de
trois colonnes et deux rangées, cela faisait six traits qui ne se rejoignent
pas, plus celui de la régie, plus le bord de la carte. Une superposition de
filets — l'exact contraire de ce que « des filets, pas des boîtes » veut
dire : le filet vaut parce qu'il est RARE.
Les liens se tiennent maintenant par la gouttière et la cible tactile. Il ne
reste qu'un seul trait sur toute la carte, celui qui sépare ce qu'on LIT de
ce qu'on ADMINISTRE — et il ne paraît qu'au régisseur. */
.cousinage-carte__destinations { display: grid; gap: var(--e2);
grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
padding: var(--e2) var(--e4) var(--e4); }
/* Des CASES, comme partout où l'on choisit une destination — la rangée des
registres d'« À la une », les dossiers de l'album. Les trois liens bleus
nus, à côté des cases de la régie, se lisaient comme un oubli
d'harmonisation : deux familles de gestes sur la même carte, sans raison
lisible. La distinction qui compte — lire ou administrer — est portée par
le filet et par la voix grise des cases de régie, pas par la forme. */
.cousinage-carte__destinations a { display: flex; align-items: center;
justify-content: flex-start; min-height: 40px; padding: 0 var(--e3);
border: 1px solid var(--filet); border-radius: var(--r-moyen);
font-size: var(--t-meta); color: var(--encre); text-decoration: none;
background: var(--surface); }
.cousinage-carte__destinations a:hover { border-color: var(--lien);
background: var(--filet-clair); }
/* Administrer sa famille n'est pas la même chose que la lire : UN filet le
dit, et ce bloc ne paraît qu'au régisseur. */
/* La régie DANS une carte de cousinage ne pose ni cadre ni fond : la carte en
a déjà un. Poser les deux donnait un rectangle dont le bord supérieur était
d'une couleur et les trois autres d'une seconde, avec le texte collé au
cadre — le rembourrage de `.regie` étant écrasé par cette règle-ci, déclarée
plus bas. Un seul filet, et rien d'autre. */
/* Le rembourrage BAS manquait : les cases de régie touchaient le bord de la
carte, et le seul filet de la carte se collait aux cases du dessus — on
lisait « des séparateurs sous les liens » là où il n'y a qu'une frontière. */
.cousinage-carte .regie { margin: var(--e1) var(--e4) 0; padding: var(--e3) 0 var(--e4);
border: 0; border-top: 1px solid var(--filet-clair);
background: none; border-radius: 0; }
.cousinage-carte__regie .cousinage-carte__destinations { padding: 0; }
.cousinage-carte__rubrique { font-size: var(--t-micro); color: var(--encre-douce); }
/* ==================================================================
LE MÉDAILLON
==================================================================
Le rond appartient au portrait de famille depuis deux siècles : c'est la
bonne forme, et elle reste. Ce qui manquait, c'est de décider CE QUI ENTRE
DEDANS — le produit prenait le centre géométrique et l'on découvrait le
menton coupé après avoir enregistré.
`touch-action: none` est la déclaration sans laquelle rien ne marche sur un
téléphone : sans elle, le navigateur interprète le glissement comme un
défilement de page et les `pointermove` cessent d'arriver. */
.medaillon { display: flex; flex-wrap: wrap; gap: var(--e5); align-items: center;
margin: 0 0 var(--e6); }
/* ------------------------------------------------------------------
LE MÉDAILLON EST LE GESTE, ET IL LE DIT SANS UN MOT
------------------------------------------------------------------
Il y avait à côté de lui un pavé de dépôt — intitulé, aide de deux lignes,
bouton, champ — soit quatre objets pour dire ce que le rond dit déjà. On
clique sur son visage pour le changer ; cela n'a pas besoin d'être expliqué,
seulement signalé.
Le curseur et l'anneau au survol sont ce signalement. Pas d'icône d'appareil
photo posée dessus : elle masquerait justement le visage qu'on vient
reconnaître. */
.medaillon__cercle { cursor: pointer;
transition: box-shadow var(--duree); }
.medaillon__cercle:hover { box-shadow: 0 0 0 3px var(--filet); }
.medaillon__cercle:focus-within { outline: 2px solid var(--lien); outline-offset: 3px; }
.medaillon__legende { margin: var(--e2) 0 0; font-family: var(--sans);
font-size: var(--t-meta); color: var(--encre-douce); }
.medaillon__cercle { position: relative; flex: 0 0 auto;
width: 9rem; height: 9rem; border-radius: var(--r-rond); overflow: hidden;
background: var(--filet-clair); border: 1px solid var(--filet);
cursor: grab; touch-action: none; user-select: none;
display: flex; align-items: center; justify-content: center; }
.medaillon__cercle:active { cursor: grabbing; }
.medaillon__actuel { width: 100%; height: 100%; object-fit: cover; }
/* Le grand rond du profil porte la MÊME teinte que les médaillons de
l'annuaire, de l'arbre et du fil. Il était gris avec des initiales en encre
douce : sur l'écran où l'on vient poser son visage, c'était un cercle éteint
là où il fallait montrer ce que le produit fait déjà en attendant la photo.
Le corps des lettres est posé par le gabarit, qui seul sait combien il y en
a — le cercle coupe ce qui dépasse. */
.medaillon__cercle--initiales { background: hsl(var(--teinte, 0) 24% 84%); }
.medaillon__vide { font-family: var(--sans); font-weight: var(--g-forte);
letter-spacing: .02em; line-height: 1; color: #1A1814; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) .medaillon__cercle--initiales {
background: hsl(var(--teinte, 0) 16% 26%); }
:root:not([data-theme="clair"]) .medaillon__vide { color: #E8E4DA; }
}
:root[data-theme="sombre"] .medaillon__cercle--initiales {
background: hsl(var(--teinte, 0) 16% 26%); }
:root[data-theme="sombre"] .medaillon__vide { color: #E8E4DA; }
/* Positionnée au centre puis translatée : c'est le seul montage où le
déplacement se dit en pixels sans dépendre de la taille de l'image. */
.medaillon__image { position: absolute; top: 50%; left: 50%;
max-width: none; pointer-events: none; }
.medaillon__cote { flex: 1 1 14rem; min-width: 0;
display: flex; flex-direction: column; gap: var(--e3); }
.depot--medaillon { padding: var(--e3) var(--e4); }
.medaillon__reglages { display: flex; flex-direction: column; gap: var(--e1); }
.medaillon__reglages input[type="range"] { width: 100%; accent-color: var(--lien); }
.medaillon__reglages p { margin: 0; }
/* ==================================================================
LA MATRICE DE VISIBILITÉ
==================================================================
Une ligne par rubrique, trois choix par ligne. Des boutons radio et non un
menu déroulant : à trois valeurs, le déroulant cache l'information qu'il
devait donner, et l'on ne voit plus d'un coup d'œil ce qu'on a réglé.
Sur téléphone, les trois choix passent sous l'intitulé plutôt que de se
serrer à côté : trois cibles de trois centimètres ne se touchent pas. */
/* L'intertitre de famille. Le nom du cousinage figurait sous CHAQUE ligne —
quarante fois par écran, en gris, pour une information qui ne change qu'aux
frontières de groupe. Dit une fois, il redevient un renseignement. */
/* ------------------------------------------------------------------
LA CASE D'UNE FICHE CONFIDENTIELLE
------------------------------------------------------------------
Elle reste sur l'arbre, à sa place, avec ses liens : c'est ce qui fait tenir
la généalogie. Elle est grisée et ne porte plus rien. Le trait discontinu dit
« il y a quelqu'un ici, et l'on n'en saura pas plus » — un rectangle plein
vide se lirait comme un défaut d'affichage. */
.noeud--anonyme { border-style: dashed; color: var(--encre-douce);
background: var(--filet-clair); }
.noeud--anonyme .noeud__nom { font-style: italic; font-size: var(--t-meta);
font-family: var(--sans); }
.portrait--anonyme { background: var(--filet-clair);
border: 1px dashed var(--filet); }
.intertitre-famille { display: flex; align-items: center; gap: var(--e2);
margin: var(--e6) 0 var(--e1); font-family: var(--sans); font-size: var(--t-onglet);
font-weight: var(--g-forte); color: var(--encre-douce); }
.intertitre-famille:first-of-type { margin: var(--e2); }
.intertitre-famille .origine { min-height: 1rem; height: 1rem; }
.matrice { list-style: none; margin: 0 0 var(--e5); padding: 0; }
/* AUCUN filet entre les rubriques : elles sont DIX-NEUF, et dix-neuf traits
identiques empilés font un tableur. Le choix retenu se voit déjà — cadre,
fond et graisse sur la pastille cochée — et la gouttière tient les lignes.
« Le filet vaut parce qu'il est rare » : la règle avait été appliquée aux
destinations d'un cousinage et s'était arrêtée une classe trop tôt. */
.matrice__ligne { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4);
align-items: center; justify-content: space-between; padding: var(--e2) 0; }
.matrice__intitule { flex: 1 1 11rem; min-width: 0; font-weight: var(--g-appuyee);
font-size: var(--t-meta); }
.matrice__choix { display: flex; flex-wrap: wrap; gap: var(--e0); }
/* 40 px passait WCAG (24) mais restait sous le jeton maison `--cible`. Cowork :
« c'est un peu court pour un pouce âgé sur mobile — le dernier demi-centimètre
qui manque à un écran désormais excellent ». Le jeton existait, il n'était pas
appliqué ici : c'est exactement le défaut déjà réparé sur le médaillon. */
.matrice__niveau { display: inline-flex; align-items: center; gap: var(--e1);
min-height: var(--cible); padding: 0 var(--e2); border-radius: var(--r-moyen);
font-size: var(--t-onglet); font-weight: var(--g-normale); cursor: pointer;
border: 1px solid transparent; }
.matrice__niveau:hover { background: var(--filet-clair); }
.matrice__niveau input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto;
accent-color: var(--lien); }
/* Le choix retenu se voit sans qu'on ait à lire le petit rond. */
.matrice__niveau:has(input:checked) { border-color: var(--lien);
background: var(--filet-clair); font-weight: var(--g-forte); }
.ma-fiche { gap: var(--e4); margin: 0 0 var(--e7); }
.fiche-entete { display: flex; gap: var(--e4); align-items: center; margin: 0 0 var(--e4); }
.fiche-entete h1 { margin: 0; }
.fiche-entete__dessous { margin: var(--e0) 0 0; }
/* ------------------------------------------------------------------
TROIS ÉTAPES DITES EN TÊTE, PLUTÔT QU'UNE EXPLICATION SOUS CHAQUE CHAMP
------------------------------------------------------------------
Le formulaire d'invitation posait sept champs à la suite, chacun avec sa
petite phrase. On ne savait ni ce qu'il fallait vraiment remplir, ni ce qui
se passait ensuite. Les étapes se disent maintenant une fois, en tête. */
.marche { counter-reset: marche; list-style: none; margin: 0 0 var(--e6);
padding: 0; }
.marche li { counter-increment: marche; position: relative;
padding: 0 0 var(--e2) var(--e7); font-size: var(--t-meta); color: var(--encre-douce); }
.marche li::before {
content: counter(marche); position: absolute; left: 0; top: 0;
width: 1.5rem; height: 1.5rem; border-radius: var(--r-rond);
display: flex; align-items: center; justify-content: center;
background: var(--filet-clair); color: var(--encre);
font-family: var(--sans); font-size: var(--t-onglet); font-weight: var(--g-forte);
}
.marche strong { color: var(--encre); }
/* Un formulaire long se lit par blocs. Le filet et le titre disent où l'on en
est, et surtout qu'on peut s'arrêter de lire ce qui ne concerne pas le
champ qu'on remplit. */
.bloc { border: 0; border-top: 1px solid var(--filet); margin: 0 0 var(--e6);
padding: var(--e4) 0 0; display: flex; flex-direction: column; gap: var(--e2); }
.bloc legend { font-family: var(--sans); font-size: var(--t-onglet);
color: var(--encre-douce);
padding: 0; }
/* ==================================================================
UNE ACTION EST UN BOUTON, PAS UNE PHRASE SOULIGNÉE
==================================================================
Le produit posait ses gestes en liens de texte : « Mon courrier »,
« Les invitations », « Ajouter quelqu'un autour de Foulques ». Un nom de
personne en bleu se comprend — on clique sur les gens depuis trente ans.
Une PHRASE en bleu, non : beaucoup de lecteurs ne l'essaient jamais.
D'où trois formes, et pas une de plus :
`.action` le geste principal d'un écran. Plein, on ne le rate pas.
`.action--seconde` le même geste, en second rang : bordé, pas plein.
un lien nu pour NAVIGUER vers une page, et pour rien d'autre.
La règle : si le clic FAIT quelque chose, c'est un bouton. S'il emmène
quelque part, c'est un lien.
Ces trois formes sont déclarées EN HAUT DE CETTE FEUILLE, en un seul bloc
qui couvre aussi `button`, `input[type="submit"]` et les anciens noms restés
dans les vues. Rien n'est redéclaré ici : c'était précisément la source de
la divergence. */
/* ------------------------------------------------------------------
UN GESTE QUI DÉFAIT NE TOUCHE PAS UN GESTE ORDINAIRE
------------------------------------------------------------------
« Ajouter à la liste » et « Annuler l'événement » se suivaient, à la même
largeur, sans rien entre eux. Deux boutons accolés se lisent comme une
paire — or l'un s'emploie dix fois par soirée et l'autre défait tout.
Le filet et la marge disent qu'on change de registre. La couleur d'alerte
ne sert qu'ici : ailleurs dans le produit, elle ne dit que des erreurs. */
.geste-grave { margin: var(--e7) 0 0; padding: var(--e5) 0 0;
border-top: 1px solid var(--filet); }
.geste-grave .secondaire { margin: var(--e2) 0 0; }
.action--grave { background: none; color: var(--alerte);
border-color: var(--alerte); }
.action--grave:hover { background: var(--alerte); color: var(--papier);
border-color: var(--alerte); }
/* ------------------------------------------------------------------
PLUSIEURS GESTES DE SUITE
------------------------------------------------------------------
Ils étaient empilés sous 26 rem — soit 416 px, un seuil qui COUPE LA GAMME
DES TÉLÉPHONES EN DEUX : un iPhone 15 (393 px) empilait, un iPhone Plus
(430 px) non. Un seuil de mise en page ne doit pas traverser une gamme
d'appareils.
`flex: 1 1 12rem` fait le travail à toute largeur, et sans requête de
média : les boutons se mettent côte à côte quand ils tiennent, s'empilent
sinon, et — c'est le point — ils ont alors LA MÊME LARGEUR. Sur la page
Famille, « Ajouter un membre de la famille » et « Inviter quelqu'un »
s'empilaient chacun à la largeur de son texte : deux rectangles inégaux,
l'un plein, l'autre bordé, qui ne se lisaient pas comme une paire. */
.actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0 var(--e6); }
.actions > * { flex: 1 1 12rem; }
/* Des filets, pas des boîtes : c'est là que se gagne la densité, pas en
rétrécissant le texte. */
.liste { list-style: none; margin: 0; padding: 0; }
.liste__ligne { display: flex; gap: var(--e3); align-items: flex-start;
padding: var(--e4) 0; border-bottom: 1px solid var(--filet-clair); }
/* ------------------------------------------------------------------
LE CORPS D'UNE LIGNE, ET LE `min-width: 0` QUI MANQUAIT PARTOUT
------------------------------------------------------------------
Cinquante-trois vues portaient `style="flex:1"` en attribut, sans jamais le
`min-width: 0` qui va avec. Un enfant de boîte flexible a `min-width: auto` :
il REFUSE de descendre sous la taille de son contenu minimal. Un jeton
insécable — une adresse électronique, une URL, « Marie-Alix de
Kervenec-Trégarvan » — poussait donc la rangée au-delà de la page, et comme
rien ne pose `overflow-x: hidden`, c'est le DOCUMENT ENTIER qui devenait
défilable en largeur. Tous les autres écrans paraissaient alors décalés,
sans qu'on voie d'où cela venait.
Une classe plutôt qu'un attribut : c'est aussi la seule forme qui survivra
à une politique de sécurité du contenu. */
/* ------------------------------------------------------------------
UNE LIGNE DE LISTE PORTE DES GESTES, ET EN PORTRAIT ILS NE TIENNENT PAS
------------------------------------------------------------------
La rangée était une boîte flexible qui ne se replie pas. Sur la liste des
invitations — nom, adresse, état, puis « Relancer », « Retirer » et un repli
— les trois gestes prenaient la largeur qu'ils voulaient et le texte se
comprimait sur ce qui restait : deux caractères par ligne en portrait, une
colonne de lettres. En paysage, la même page tenait très bien, ce qui est la
signature exacte de ce défaut.
`flex-wrap` avec une BASE de 14 rem, et non un seuil de média : le corps
garde sa ligne tant qu'il a 14 rem, et passe seul au-dessus dès qu'il ne les
a plus. Aucune largeur d'écran n'est nommée, donc rien ne coupe la gamme des
téléphones en deux — c'est la leçon déjà payée deux fois dans cette feuille,
sur les onglets et sur les actions.
Les gestes se rangent alors à DROITE de leur nouvelle ligne : c'est là que
l'œil les cherche après avoir lu, et c'est ce que font toutes les listes
d'action depuis quinze ans. */
.liste__ligne { flex-wrap: wrap; }
.liste__corps { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.liste__ligne > * { min-width: 0; }
.liste__ligne > form, .liste__ligne > .bouton-discret { flex: 0 0 auto; }
.liste__ligne > form:first-of-type { margin-left: auto; }
/* Un repli logé dans une ligne — « Elle est déjà dans l'arbre » sur une
invitation — n'est pas un geste de plus à côté des autres : il OUVRE un
formulaire, et un formulaire dans une colonne de six centimètres ne se
remplit pas. Il prend donc sa propre ligne, sur toute la largeur. */
.liste__ligne > details { flex: 1 1 100%; margin-top: var(--e2); }
/* ------------------------------------------------------------------
L'ÉTIQUETTE DE NATURE
------------------------------------------------------------------
Elle DIT le droit plutôt que de le laisser deviner. Un groupe de famille
existe sans nous et seul le régisseur le retire ; un groupe ouvert par un
cousin, on l'a rejoint ; le sien, on en répond. Rien ne les distinguait. */
/* Un événement annulé : l'étiquette porte la seule couleur d'alerte de cet
écran, parce que c'est la seule information qui change ce qu'on va faire. */
.etiquette--annule { display: inline-block; margin: 0 0 var(--e1);
padding: var(--e0) var(--e2); border-radius: var(--r-petit); font-size: var(--t-micro);
border: 1px solid var(--alerte); color: var(--alerte); }
/* ------------------------------------------------------------------
LE FILET D'ORIGINE — UN FILET DE MARGE, PLUS UN POINT
------------------------------------------------------------------
Il porte la seule couleur forte du produit, et une information que rien
d'autre ne porte : de quelle famille vient cette ligne.
Il était rond, de dix pixels, posé en tête de chaque ligne — donc lu comme
une PUCE. Sur un écran qui empile des listes, cela donnait l'aspect d'une
présentation à diapositives, ce que ce produit doit être en dernier.
Un filet vertical dit la même chose et appartient au vocabulaire de
l'imprimé : c'est le filet de marge d'un journal, cohérent avec « le papier,
pas l'écran ». Il ne se confond avec aucune énumération. */
.origine { flex: 0 0 auto; width: 3px; border-radius: var(--r-petit); align-self: stretch;
min-height: 1.6rem; }
.annonces { padding: var(--e3) var(--e5); }
.annonce { margin: 0 0 var(--e2); padding: var(--e3) var(--e4); font-size: var(--t-meta);
border-left: 3px solid var(--lien); background: var(--filet-clair); }
.annonce--alert { border-left-color: var(--alerte); }
.annonce--notice { border-left-color: var(--succes); }
/* Barre d'onglets : 64 px, icône ET libellé texte permanent, jamais tronqué,
jamais masqué au défilement. Cinq entrées, pas sept modules égaux. */
.onglets {
position: fixed; bottom: 0; left: 0; right: 0;
/* EXPLICITE, et au-dessus de tout : sans z-index elle dépendait de l'ordre du
document, et la légende de la carte s'est déjà peinte par-dessus — on ne
pouvait alors plus quitter l'écran de la carte. */
z-index: var(--plan-barre);
/* Six colonnes depuis que la carte est une destination. À 390 px cela donne
65 px par onglet : le libellé tient encore, et la cible reste au-dessus du
plancher tactile. Une septième ne passerait pas. */
display: grid; grid-template-columns: repeat(6, 1fr);
/* La hauteur INCLUT le rembourrage, `box-sizing: border-box` étant posé
partout : `height: 64px` avec 34 px de zone sûre ne laissait que 30 px de
boîte de contenu, et les six onglets de 48 px débordaient de dix-huit
pixels dans la zone de l'indicateur d'accueil. La zone sûre s'AJOUTE. */
/* ------------------------------------------------------------------
UNE HAUTEUR FIXE COUPE LE TIERS INFÉRIEUR, ET C'EST UN CLASSIQUE
------------------------------------------------------------------
C'était `height`. À six colonnes sur 390 px, chaque onglet dispose de
65 px : « À la une » et « Messages » passent sur DEUX lignes, l'icône plus
deux lignes dépassent les 64 px, et la boîte étant fixe, le débordement se
fait couper net. On perd le bas des libellés — le tiers inférieur de la
barre — et l'application a l'air cassée là où elle est le plus regardée.
Le réglage « très grand » du confort de lecture le déclenche partout,
puisqu'il agrandit précisément ces libellés. C'est-à-dire chez le public
que ce produit vise nommément.
`min-height` laisse la barre grandir de ce qu'il faut. La réserve du
document suit la MÊME expression, portée par un jeton, pour que les deux
ne puissent plus diverger. */
min-height: var(--barre-basse);
box-sizing: border-box;
background: var(--surface);
border-top: 1px solid var(--filet);
/* EN BAS seulement : en raccourci, les 34 px d'un iPhone à encoche se
posaient aussi à gauche, à droite et EN HAUT de la barre — six onglets
comprimés dans ce qui restait. */
padding-bottom: env(safe-area-inset-bottom);
}
.onglet {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--e0); min-height: var(--cible); text-decoration: none;
color: var(--encre-douce); font-weight: var(--g-forte);
/* `clamp` plutôt qu'un seuil : continu de 375 à 430 px, et la borne haute est
un jeton, donc le libellé suit le réglage de confort de lecture. Un
`font-size` en pixels sous une requête de média ne le suivait pas. */
font-size: clamp(.6875rem, 2.6vw, var(--t-onglet));
/* À six colonnes sur 390 px, « Messages » et « À la une » débordaient. */
text-align: center; line-height: 1.1; padding: 0 var(--e0);
}
/* ------------------------------------------------------------------
ONZE PIXELS EN DUR, ET UN SEUIL QUI COUPAIT LA GAMME EN DEUX
------------------------------------------------------------------
`max-width: 26rem` vaut 416 px : le seuil passait ENTRE le Pixel (412) et
l'iPhone Pro Max (430). Deux téléphones voisins, deux tailles de libellé.
C'est mot pour mot le défaut déjà retiré des `.actions`.
Pire, la valeur était en PIXELS : le réglage « très grand » n'agrandissait
pas les libellés de navigation sur tout téléphone de moins de 416 px —
c'est-à-dire sur celui de presque tout le monde, et pour le public de
60-74 ans que le produit vise nommément. `clamp` ci-dessus le remplace, sans
aucun seuil. La requête est neutralisée plutôt que supprimée : ce qu'elle
contient encore reste à relire une par une. */
@media (max-width: 0px) { .onglet { font-size: var(--t-micro); } }
.onglet--actif { color: var(--encre); }
/* L'icône prend la couleur du texte de son onglet : c'est ce qui fait que
l'onglet actif se lit d'un coup, sans seconde couleur à inventer. */
.onglet__icone { width: 22px; height: 22px; flex: 0 0 auto; }
/* La marque ne sert qu'à la colonne de l'écran large : sur un téléphone, la
barre a cinq places et pas une de plus. */
.onglets__marque { display: none; }
/* Le pied de la colonne n'existe QUE sur écran large : la barre du téléphone a
cinq places et pas une de plus. Sur téléphone, les deux gestes se trouvent
en tête de l'annuaire et de l'arbre. */
.onglets__pied { display: none; }
/* ==================================================================
L'ÉCRAN LARGE
==================================================================
Tout ce qui précède est dessiné pour un téléphone, et c'est le bon ordre :
c'est là que l'application se vit. Mais rendu tel quel sur un portable, le
produit devient une colonne de six cent quarante pixels au milieu du vide,
surmontée d'une barre d'onglets de deux mille pixels portant cinq libellés
minuscules. C'est exactement ce qui fait dire « application de téléphone mal
agrandie », et cela ne tenait qu'à l'absence de ces quelques règles.
Le seuil est à 60 rem — 960 px au corps par défaut. En dessous, une colonne
latérale mangerait la largeur de lecture ; au-dessus, elle la libère.
TROIS CHOSES CHANGENT, ET RIEN DE PLUS :
la barre du bas devient une COLONNE à gauche, avec la marque en tête ;
la page se recentre dans ce qui reste, sans s'élargir beaucoup — une
ligne de plus de soixante-dix signes cesse de se lire confortablement,
et ce produit est fait pour être LU ;
les marges s'ouvrent, parce qu'un écran large qui garde des marges de
téléphone a l'air à l'étroit sans qu'on sache pourquoi.
Aucun balisage ne change : c'est la même barre, retournée. */
/* ------------------------------------------------------------------
LE PALIER DE TABLETTE — TRENTE-DEUX CENTIMÈTRES DE VIDE
------------------------------------------------------------------
Entre 40 rem (la largeur maximale de la colonne de lecture) et 60 rem (le
passage de la barre en colonne latérale), soit de 640 à 960 px — tablette en
portrait, fenêtre de portable à moitié —, la page restait centrée à 640 px
pendant que la barre d'onglets FIXE s'étirait sur toute la largeur : six
libellés de 13 px perdus dans un mètre de vide, en bas d'un écran d'ordinateur.
C'est mot pour mot le défaut que le commentaire de la barre dit vouloir
corriger — « une barre de téléphone étirée sur un écran de portable » — et le
seuil à 60 rem le laissait vivre sur trois cent vingt pixels de largeurs.
La barre se recentre donc, à la largeur de la colonne qu'elle sert, et prend
les coins arrondis d'un objet posé plutôt que d'un bord d'écran. */
/* 40 rem et non 44 : la colonne de lecture s'arrête à 40 rem, et entre 640 et
704 px la barre s'étirait encore sur toute la largeur au-dessus d'une page
centrée — exactement ce que cette règle existe pour empêcher. */
@media (min-width: 40rem) and (max-width: 59.99rem) {
.onglets {
left: 50%; right: auto; transform: translateX(-50%);
width: min(100%, 40rem);
border-left: 1px solid var(--filet);
border-right: 1px solid var(--filet);
border-radius: var(--r-moyen) var(--r-moyen) 0 0;
}
}
@media (min-width: 60rem) {
/* ------------------------------------------------------------------
`padding` ET NON `padding-left` : DEUX CENT QUARANTE PIXELS DE VIDE
------------------------------------------------------------------
La barre devenue colonne est en position fixe : il faut donc décaler le
CORPS de sa largeur, sans quoi le texte passe dessous. C'est ce que fait
`15rem`, qui est exactement la largeur de `.onglets`.
Écrit en raccourci à une valeur, il posait AUSSI 240 px en haut, à droite
et en bas. Horizontalement cela tombait juste par accident — la valeur
égale la largeur du rail — et c'est ce qui a fait passer la faute :
l'écran paraissait correct, et chaque page s'ouvrait pourtant sur une
bande vide de deux cent quarante pixels avant son premier mot. */
.avec-barre { padding: 0 0 0 15rem; }
.onglets {
top: 0; bottom: 0; right: auto; width: 15rem; height: auto;
grid-template-columns: 1fr; grid-auto-rows: max-content;
align-content: start; gap: var(--e0);
/* .75rem sur les côtés : la colonne est étroite, et 1.5rem de chaque bord
lui retiraient un quart de sa largeur utile — d'où « Ajouter un membre »
cassé sur trois lignes. */
/* Le bas réserve la ligne du médaillon, qui se pose par-dessus le rail :
sans quoi il couvrirait le dernier onglet sur un écran court. C'est la
même règle que la bande du haut sur téléphone — un élément en position
fixe posé sur du contenu finit toujours par tomber sur quelque chose. */
padding: var(--e6) var(--e3) 4.5rem;
/* ------------------------------------------------------------------
RIEN NE DÉBORDE DU FILET
------------------------------------------------------------------
Les fonds des onglets — celui de l'onglet actif comme celui du survol —
passaient PAR-DESSUS le trait qui sépare la colonne du contenu, et le
bouton « Ajouter un membre » avec eux. Un filet qu'un fond traverse ne
sépare plus rien : il devient un trait posé au milieu d'un bloc.
`overflow: clip` plutôt que `hidden` : on ne veut pas créer de contexte
de défilement dans une colonne qui ne défile pas. Et `min-width: 0` sur
les enfants, sans quoi une grille refuse de les comprimer sous la
largeur de leur contenu — c'est la cause réelle du débordement. */
overflow: clip;
border-top: none; border-right: 1px solid var(--filet);
background: var(--papier);
}
.onglets__pied { display: block; }
.onglets__marque {
display: flex; align-items: center; gap: var(--e2);
margin: 0 0 var(--e6); padding: 0 var(--e3);
font-family: var(--serif); font-size: var(--t-sous-titre); color: var(--encre);
}
/* En ligne plutôt qu'empilé : à la verticale, une icône au-dessus de son
libellé donne cinq blocs hauts qu'on parcourt mal du regard. */
.onglet {
flex-direction: row; justify-content: flex-start; gap: var(--e3);
min-height: 42px; padding: 0 var(--e3); border-radius: var(--r-petit);
font-size: var(--t-corps); font-weight: var(--g-appuyee);
}
/* ------------------------------------------------------------------
LE SURVOL ET L'ONGLET ACTIF NE PEUVENT PAS SE RESSEMBLER
------------------------------------------------------------------
Ils portaient le MÊME fond. Sur une capture d'écran du carnet, « Le
carnet » et « Carte » paraissaient allumés tous les deux — la souris
passait simplement sur le second — et l'on ne savait plus sur quel écran
on se trouvait. C'est la question à laquelle une barre de navigation sert
à répondre, et elle y répondait faux.
L'actif porte donc un RAIL, que le survol n'a pas : une différence de
forme se voit du coin de l'œil, une différence de fond de 4 % ne se voit
pas du tout. */
/* Le survol est BEAUCOUP plus faible que la sélection : ils portaient le même
fond, et sur une capture d'écran du carnet deux entrées paraissaient
allumées — la souris passait simplement sur la seconde. On ne savait plus
sur quel écran on se trouvait, ce qui est la seule question à laquelle une
barre de navigation sert à répondre. */
.onglet:hover { background: color-mix(in srgb, var(--filet-clair) 45%, transparent);
color: var(--encre); }
.onglet--actif, .onglet--actif:hover {
background: var(--filet-clair); font-weight: var(--g-forte);
box-shadow: inset 3px 0 0 var(--encre);
}
/* La colonne de lecture se cale APRÈS la barre, elle ne se recentre pas
dans ce qui reste : centrée, elle laissait un vide de deux cent cinquante
pixels contre le filet et l'on avait l'impression d'un contenu poussé de
côté. Une gouttière franche dit « voici la barre, voici le texte ». */
.avec-barre .page { max-width: 46rem; margin: 0; padding: var(--e7) var(--e7) var(--e8) var(--e8); }
.avec-barre .annonces { max-width: 46rem; margin: 0; padding: var(--e5) var(--e7) 0 var(--e8); }
/* Les écrans SANS barre — connexion, inscription, mentions légales,
récupération — gardent une colonne centrée : ce sont des pages qu'on lit
seul, pas des écrans qu'on habite. */
.page { max-width: 46rem; padding: var(--e8) var(--e7) var(--e8); }
/* ------------------------------------------------------------------
PAS DEUX FOIS LE MÊME GESTE SUR LE MÊME ÉCRAN
------------------------------------------------------------------
Sur écran large, les deux gestes vivent au bas de la colonne — visibles
de PARTOUT, ce qui est tout l'objet. Les répéter en tête de l'annuaire et
de l'arbre ferait quatre boutons pour deux actions, et un écran qui
propose deux fois la même chose fait douter qu'il s'agisse de la même. */
.actions--dans-la-page { display: none; }
/* Le pied de la colonne : les deux gestes qui font grandir la famille,
séparés des destinations par un filet — ce ne sont pas des endroits où
aller, ce sont des choses à faire. */
/* `margin: 1.5rem` PLUS `padding: 1.25rem` retiraient 88 px des 240 du rail :
il restait 152 px pour un libellé et son icône, et « Ajouter un membre »
se cassait sur TROIS lignes. Le filet suffit à séparer ; il n'a pas besoin
d'être encadré de blanc des deux côtés. */
.onglets__pied {
margin: var(--e6) var(--e3) 0; padding: var(--e5) 0 0;
border-top: 1px solid var(--filet);
}
.onglets__pied .actions { flex-direction: column; align-items: stretch;
gap: var(--e0); margin: 0; }
/* `flex: 1 1 12rem` posait une base de 192 px que le rail ne peut pas tenir :
l'élément rétrécissait et le texte se cassait. Dans la colonne, la base
est la largeur disponible, et le libellé ne se coupe plus. */
.onglets__pied .actions > * { flex: 0 0 auto; min-width: 0; max-width: 100%; }
.onglets > * { min-width: 0; max-width: 100%; }
/* ------------------------------------------------------------------
DANS LA COLONNE, UN GESTE GARDE LE RYTHME DES DESTINATIONS
------------------------------------------------------------------
Le bouton plein y devenait, en thème sombre, la chose la plus CLAIRE de
l'écran : un pavé pâle qui écrasait les cinq onglets au-dessus de lui.
Une action n'a pas à crier plus fort que la navigation qui l'entoure.
Ils reprennent donc la ligne exacte d'un onglet — même hauteur, même
graisse, même retrait — et ne s'en distinguent que par le filet qui les
sépare, et par leur place : tout en bas. */
.onglets__pied .action,
.onglets__pied .action--seconde {
width: 100%; justify-content: flex-start; gap: var(--e3);
min-height: 42px; padding: 0 var(--e3); border-radius: var(--r-petit);
font-family: var(--sans); font-size: var(--t-corps); font-weight: var(--g-appuyee);
/* Le libellé s'ADAPTE : `white-space: nowrap` le forçait sur une ligne, et
« Ajouter un membre » débordait alors du cadre du bouton — les lettres
passaient par-dessus le filet, puis par-dessus le trait du rail. Un
bouton dont le texte sort de sa boîte est le défaut le plus visible qui
soit ; mieux vaut deux lignes qu'un débordement. */
white-space: normal; text-align: left; line-height: 1.25;
background: none; color: var(--encre-douce); border: 0;
}
.onglets__pied .action svg,
.onglets__pied .action--seconde svg {
width: 20px; height: 20px; flex: 0 0 20px; }
/* ------------------------------------------------------------------
UNE ACTION N'EST PAS UNE DESTINATION
------------------------------------------------------------------
Les deux gestes reprenaient TRAIT POUR TRAIT la ligne d'un onglet : même
hauteur, même graisse, même retrait, même absence de fond. Rien ne disait
donc qu'« Ajouter un membre » FAIT quelque chose là où « Famille » MÈNE
quelque part — et posés sous un filet, en gris, ils avaient l'air de deux
onglets désactivés.
Le premier prend donc un contour : c'est le seul indice dont on ait
besoin, et il ne crie pas plus fort que la navigation au-dessus. Le
second reste un lien, parce qu'inviter vient APRÈS avoir ajouté. */
.onglets__pied .action {
border: 1px solid var(--filet); color: var(--encre); font-weight: var(--g-appuyee);
}
.onglets__pied .action:hover {
background: var(--filet-clair); border-color: var(--encre-douce); }
.onglets__pied .action--seconde:hover {
background: var(--filet-clair); color: var(--encre); border: 0; }
/* Le fil de discussion occupe la hauteur : c'est le seul écran qu'on
consulte en restant dessus, et une bulle de message qui s'arrête à
mi-écran sur un portable a l'air cassée. */
.message { max-width: 75%; }
}
/* Au-delà, on cesse d'élargir la colonne de lecture et l'on rend l'espace aux
marges. Une largeur qui suit l'écran sans borne produit des lignes qu'on
perd en revenant à la ligne — le défaut le plus banal du web, et le plus
fatigant pour qui lit longtemps. */
@media (min-width: 90rem) {
/* LE MÊME RACCOURCI, UNE SECONDE FOIS. `padding: 17rem` posait 272 px sur les
QUATRE côtés du corps de page ; corriger le palier de 60 rem ne servait à
rien puisque celui-ci le réécrasait dès 1440 px — c'est-à-dire sur la
plupart des écrans de bureau. Le décalage compense la barre en position
fixe : il est horizontal, il s'écrit horizontalement. */
.avec-barre { padding: 0 0 0 17rem; }
.onglets { width: 17rem; padding: var(--e6) var(--e3); }
}
/* `.onglet span` posait 18 px sur tout `` d'un onglet. La règle ne
matchait RIEN — aucun onglet n'en contenait — et elle était posée sans un mot
entre deux requêtes de média. Depuis que les onglets portent une pastille de
non-lus, elle aurait matché : le chiffre serait passé de 11 à 18 px, et la
pastille aurait débordé de l'icône. Une règle orpheline n'est pas inerte,
elle attend. */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* Le mot d'accueil : le premier contenu que lit un nouvel arrivant, et le seul
dont on soit certain qu'il existe le jour 1. Il mérite le registre du
faire-part, pas celui de l'interface. */
.mot-daccueil { margin: 0 0 var(--e6); padding: var(--e4) 0 var(--e4) var(--e5);
border-left: 2px solid var(--filet); font-family: var(--serif); }
.mot-daccueil p { margin: 0 0 var(--e2); font-size: var(--t-sous-titre); line-height: 1.45; }
.mot-daccueil cite { font-style: normal; font-size: var(--t-meta);
color: var(--encre-douce); }
/* Une case à cocher n'est jamais un carré de 16 px perdu dans une ligne : la
zone tactile couvre le libellé entier. */
.case { display: flex; gap: var(--e3); align-items: flex-start;
min-height: var(--cible); padding: var(--e3) 0; font-weight: var(--g-normale);
font-size: var(--t-corps); cursor: pointer; }
.case input { width: 24px; height: 24px; margin: var(--e0); flex: 0 0 auto; }
.case .secondaire { display: block; margin: var(--e1); }
/* L'identité affichée sur deux lignes. La seconde ne descend jamais sous
15 px et n'est jamais en gris clair : c'est elle qui distingue les cinq
« Marie de X » vivantes, elle doit donc rester lisible. */
.identite { display: block; }
.identite__nom { display: block; }
.identite__qualificatif { display: block; font-size: var(--t-meta);
color: var(--encre-douce); margin: 0 0 var(--e5); }
/* La conversation. Des lignes, pas des bulles empilées dans des cartes : la
densité se gagne en retirant le chrome, pas en rétrécissant le texte. */
/* ==================================================================
LE FIL — À LA TAILLE ET AU RYTHME D'UNE MESSAGERIE
==================================================================
Il ressemblait à un terminal : des paragraphes alignés à gauche, sans bulle,
sans pièce jointe, avec l'heure sur sa propre ligne sous chaque message.
Ce que tout le monde connaît depuis quinze ans tient en peu de choses, et
les voici.
LA TAILLE D'ABORD. Un message n'est pas un article : 15 px de corps, 1.35
d'interligne, une bulle de 6 px de rayon. Le produit lit ailleurs en 18 px —
ici on ÉCHANGE, et la densité fait qu'on voit la conversation plutôt que
trois phrases.
Le fil occupe la hauteur disponible et défile seul, le composeur restant
collé en bas : sur un téléphone, un composeur qui remonte avec le contenu
est le défaut le plus agaçant d'une messagerie. */
/* ------------------------------------------------------------------
LE FIL EST UN PLEIN ÉCRAN, PAS UN ARTICLE
------------------------------------------------------------------
Il était posé dans le flux du document, avec un `min-height` dont
l'arithmétique laissait quarante pixels de défilement fantôme sur toute
conversation, même vide — et le composeur tenait par un `sticky` acrobatique.
Trois déclarations remettent les choses d'aplomb : une HAUTEUR (et non un
minimum) qui annule le rembourrage de `.page`, un fil qui défile SEUL, et un
composeur ancré par la boîte flexible plutôt que collé.
`min-height: 0` sur `.fil` est le point critique : sans lui, un enfant de
boîte flexible ne descend jamais sous la taille de son contenu — le
conteneur déborde au lieu de défiler, et le composeur part hors de l'écran. */
/* La marge NÉGATIVE EN BAS n'est pas un ajustement à vue. `.page` ajoute
1,5 rem de rembourrage bas et `body` en ajoute 1 de plus après la barre :
le document mesurait donc 100dvh + 2,5 rem, la page défilait de deux
centimètres et l'ENTÊTE DU FIL sortait par le haut — on voyait le titre
coupé en deux. Les 64 px de barre et la zone sûre, eux, se compensent
exactement entre la hauteur ci-dessous et le rembourrage du corps. */
/* `--clavier` est posée par l'îlot depuis `visualViewport`. Safari iOS
n'applique pas `interactive-widget=resizes-content` : sans elle, le composeur
passait DERRIÈRE le clavier et l'on tapait sans voir ce qu'on écrivait. Elle
vaut zéro partout ailleurs, donc la règle est inerte sur ordinateur. */
.fil-page { display: flex; flex-direction: column;
/* Moins la BANDE HAUTE (3 rem) : elle est entrée dans le flux au-dessus du
contenu, et sans la retrancher le composeur descendait d'autant sous la
ligne de flottaison — exactement le défaut que le clavier d'iOS produisait
et que `--clavier` corrige déjà par l'autre bout. */
/* 4 rem et non 3 : le rem manquant est celui que `body` garde APRÈS la
barre. Sans lui, la dernière ligne du fil — « Un message vous gêne ? » —
passait sous la barre d'onglets, coupée en deux. */
height: calc(100dvh - 4rem - var(--barre-basse) - var(--clavier, 0px));
margin: -1.5rem -1.25rem -2.5rem; padding: 0 var(--e5); overflow: hidden; }
/* ------------------------------------------------------------------
L'ENTÊTE TIENT SUR UNE LIGNE
------------------------------------------------------------------
Elle prenait 145 px : un titre en romaine de 24 px que `Conversation#libelle`
remplit avec QUATRE noms complets — donc deux lignes pleines — plus une ligne
de cousinage, plus les marges de paragraphe du navigateur que rien ne remet
à zéro. Sur 640 px de fil utile, c'était un sixième de l'écran consommé en
permanence pour redire ce qu'on vient de toucher du doigt.
Un fil de discussion s'annonce comme une messagerie : le nom sur UNE ligne,
en linéale, tronqué, avec le retour à gauche. Le cousinage passe en dessous
en 13 px — l'information reste, elle cesse d'être un titre. */
.fil-entete { flex: 0 0 auto; display: flex; align-items: center; gap: var(--e2);
height: 56px; margin: 0 -1.25rem; padding: 0 var(--e4);
border-bottom: 1px solid var(--filet); background: var(--papier); }
.fil-entete__retour { display: inline-flex; align-items: center;
justify-content: center; width: 40px; height: 40px; margin: -.5rem;
flex: 0 0 auto; color: var(--encre-douce); border-radius: var(--r-rond); }
.fil-entete__retour:hover { background: var(--filet-clair); color: var(--encre); }
.fil-entete__retour svg { width: 24px; height: 24px; }
.fil-entete__identite { min-width: 0; display: flex; flex-direction: column;
justify-content: center; }
.fil-entete__nom { font-family: var(--sans); font-size: var(--t-corps); font-weight: var(--g-appuyee);
line-height: 1.2; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.fil-entete__origine { font-size: var(--t-onglet); color: var(--encre-douce);
line-height: 1.2; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.fil { flex: 1 1 auto; min-height: 0; overflow-y: auto;
overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
list-style: none; margin: 0; padding: var(--e2) 0 var(--e4);
display: flex; flex-direction: column; gap: var(--e0); }
/* Le composeur devient une zone de dépôt quand on survole avec un fichier. */
.fil-page--survolee .composeur { border-color: var(--lien);
background: var(--filet-clair); }
/* Le jour, une seule fois, en pastille centrée — la forme qu'ont prise toutes
les messageries, et qu'on reconnaît sans la lire. */
.fil__jour { align-self: center; margin: var(--e4) 0 var(--e2); padding: var(--e1) var(--e3);
background: var(--filet-clair); border-radius: var(--r-moyen);
font-family: var(--sans); font-size: var(--t-micro); color: var(--encre-douce); }
/* ------------------------------------------------------------------
LA BULLE
------------------------------------------------------------------
Coin carré du côté d'où l'on parle, arrondi partout ailleurs : c'est la
pointe, en deux déclarations et sans triangle dessiné. Elle ne paraît que
sur la PREMIÈRE d'une suite du même auteur — répétée, elle hache le fil. */
.bulle {
/* L'alignement est passé à `.fil__rang` : la bulle n'est plus l'enfant
direct du fil, elle est dans une rangée qui porte aussi le médaillon. */
max-width: 78%; min-width: 0;
padding: var(--e2) var(--e2) var(--e1); border-radius: var(--r-moyen) var(--r-moyen) var(--r-moyen) var(--r-petit);
background: var(--surface); border: 1px solid var(--filet);
font-size: var(--t-meta); line-height: 1.35;
display: flex; flex-direction: column; gap: var(--e0);
/* Sur le CONTENEUR, et non sur le seul `__corps` : le nom de l'auteur, le
nom de fichier d'une pièce jointe et l'état d'envoi n'en avaient pas, si
bien qu'un `IMG_20260814_cousinade-tante-Agnès.jpg` sortait de l'écran —
et, pour une bulle à soi collée au bord droit, sortait de la page.
`break-word` et NON `anywhere` : les deux coupent un mot trop long, mais
`anywhere` réduit aussi la largeur MINIMALE intrinsèque de la boîte à un
signe. La bulle se serait alors dimensionnée bien plus étroite que son
texte, qui aurait cassé au milieu de phrases ordinaires. */
overflow-wrap: break-word;
}
.bulle--suite { border-radius: var(--r-moyen); }
.bulle--mienne { border-radius: var(--r-moyen) var(--r-moyen) var(--r-petit) var(--r-moyen);
background: var(--filet-clair); border-color: var(--filet); }
.bulle--mienne.bulle--suite { border-radius: var(--r-moyen); }
.bulle__corps { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.bulle__auteur { font-family: var(--sans); font-size: var(--t-onglet); font-weight: var(--g-appuyee);
color: var(--lien); }
/* L'heure DANS la bulle, en bas à droite : sur sa propre ligne, elle doublait
la hauteur du fil pour une information qu'on ne lit qu'en cas de doute. */
.bulle__pied { display: flex; align-items: center; justify-content: flex-end;
gap: var(--e1); font-family: var(--sans); font-size: var(--t-micro);
color: var(--encre-douce); font-variant-numeric: tabular-nums; }
/* UNE coche, jamais deux : elle dit « parti », pas « lu ». Dire aux autres
qu'on a lu est l'un des trois interdits de conception du produit. */
.bulle__pied svg { width: 14px; height: 14px; opacity: .8; }
/* La citation du message auquel on répond. Sans elle, une réponse à un message
de la veille tombe dans le vide et l'on relit tout le fil. */
.bulle__citation { display: flex; flex-direction: column; gap: var(--e0);
margin: 0 0 var(--e1); padding: var(--e1) var(--e2); text-decoration: none;
border-left: 3px solid var(--lien); background: var(--filet-clair);
border-radius: var(--r-petit); font-size: var(--t-onglet); color: var(--encre-douce); }
.bulle__citation-auteur { font-weight: var(--g-forte); color: var(--lien); }
.bulle__citation-corps { overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
/* La photo occupe la bulle : une image dans un cadre avec des marges autour
ressemble à une pièce jointe de courriel, pas à une photo qu'on montre. */
.bulle__photo { display: block; margin: -.4rem -.6rem var(--e1); }
.bulle__photo img { display: block; width: 100%; height: auto;
border-radius: var(--r-moyen) var(--r-moyen) 0 0; }
.bulle__son { display: flex; align-items: center; gap: var(--e2); padding: var(--e0) 0; }
.bulle__son audio { height: 34px; max-width: 15rem; }
.bulle__duree { font-family: var(--sans); font-size: var(--t-micro);
color: var(--encre-douce); font-variant-numeric: tabular-nums; }
/* Un document se montre comme un document : l'icône, le nom, le poids. Une
ligne de texte bleu soulignée ressemble à une note de bas de page. */
.bulle__fichier { display: flex; align-items: center; gap: var(--e2); min-width: 0;
padding: var(--e2) var(--e1); text-decoration: none; color: var(--encre); }
.bulle__fichier svg { width: 28px; height: 28px; flex: 0 0 auto;
color: var(--encre-douce); }
.bulle__fichier-texte { display: flex; flex-direction: column; min-width: 0; }
.bulle__fichier-nom { font-weight: var(--g-appuyee); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.bulle--en-attente { opacity: .6; }
.bulle--refusee { border-color: var(--alerte); }
/* La raison du refus, sous la bulle qui a échoué. Elle n'était nulle part de
visible : « non envoyé » accusait le réseau pendant que le serveur avait dit
pourquoi. On ne demande pas à quelqu'un de deviner ce qu'il doit refaire. */
.bulle__motif { margin: var(--e1) 0 0; font-family: var(--sans);
font-size: var(--t-micro); color: var(--alerte); }
.bulle--masquee { font-style: italic; color: var(--encre-douce); }
.bulle__etat { font-family: var(--sans); font-size: var(--t-micro); color: var(--encre-douce); }
/* ------------------------------------------------------------------
LE COMPOSEUR
------------------------------------------------------------------
Trois gestes qui encadrent le champ : joindre, écrire, parler. C'est là
qu'on les cherche, et c'est la seule raison de les mettre là.
Le champ grandit avec le texte jusqu'à cinq lignes, puis défile : une zone
fixe d'une ligne cache ce qu'on vient d'écrire, une zone qui grandit sans
borne mange l'écran. */
.composeur { flex: 0 0 auto; position: relative; z-index: 2;
display: flex; align-items: flex-end; gap: var(--e1);
margin: 0 -1.25rem; padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom, 0px));
background: var(--papier); border-top: 1px solid var(--filet); }
.composeur textarea {
flex: 1; min-width: 0; min-height: 42px; max-height: 8.5rem;
padding: var(--e2) var(--e4);
/* 16 px, et jamais moins : sous ce seuil Safari iOS zoome à chaque prise de
focus, et l'on doit repincer pour relire son fil. C'est le piège que le
dépôt connaissait déjà pour les boutons, et où l'écran le plus utilisé du
produit était retombé. */
font-size: var(--t-corps); line-height: 1.35; border-radius: var(--r-rond); resize: none;
/* Masqué par défaut, et rendu à `auto` par le contrôleur au seul moment où le
texte dépasse le plafond — voir `conversation_controller.js`. En `auto`
permanent, une barre surgissait à la cinquième ligne. Horizontalement,
jamais : un message passe à la ligne, il ne défile pas. */
overflow-y: hidden; overflow-x: hidden;
scrollbar-width: thin;
}
/* ------------------------------------------------------------------
L'OVALE BLANC GÉANT
------------------------------------------------------------------
`.composeur__envoyer` posait `width: 42px; height: 42px; border-radius: 50%`
— mais PAS `min-height`. La règle générique `button` impose
`min-height: var(--cible-principale)`, soit 56 px, et `min-height` l'emporte
sur `height` : le bouton faisait 42 × 56 avec un rayon de 50 %, c'est-à-dire
une ellipse verticale. En thème sombre, `--encre` vaut #EAE5DA : une ellipse
presque blanche, l'objet le plus clair de tout l'écran, pour le geste le
plus banal du produit.
Le micro subissait la même chose ; le trombone, qui est un `` et
échappe à la règle `button`, restait un cercle de 42. Les trois commandes
d'une même barre n'avaient donc pas la même hauteur.
`min-height: 0` répare les trois. Et l'envoi cesse d'être un aplat de la
couleur du texte : il prend `--lien`, la couleur des choses sur lesquelles
on clique. */
.composeur__bouton, .composeur__envoyer, .composeur__joindre > summary {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: var(--r-rond);
cursor: pointer; background: none; border: 0; color: var(--encre-douce);
list-style: none;
}
.composeur__joindre > summary::-webkit-details-marker { display: none; }
.composeur__bouton svg, .composeur__envoyer svg,
.composeur__joindre > summary svg { width: 22px; height: 22px; }
.composeur__bouton:hover, .composeur__joindre > summary:hover {
background: var(--filet-clair); color: var(--encre); }
.composeur__envoyer { background: var(--lien); color: var(--papier);
border: 1px solid var(--lien); }
.composeur__envoyer:hover { filter: brightness(1.12); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) .composeur__envoyer { color: #14130F; }
}
/* ------------------------------------------------------------------
DEUX ENTRÉES DERRIÈRE LE TROMBONE
------------------------------------------------------------------
Un `accept` mixte — `image/*,audio/*,.pdf` — ouvre l'explorateur de FICHIERS
sur iOS, jamais la photothèque : on ne retrouvait donc pas ses photos. Une
entrée `image/*` SEULE ouvre la pellicule. D'où deux choix, et non un. */
.composeur__joindre { position: relative; flex: 0 0 auto; }
.composeur__choix { position: absolute; bottom: 48px; left: 0; z-index: 5;
display: flex; flex-direction: column; min-width: 12rem;
background: var(--surface); border: 1px solid var(--filet);
border-radius: var(--r-petit); padding: var(--e1); }
.composeur__choix label { display: flex; align-items: center; gap: var(--e3);
min-height: var(--cible); padding: 0 var(--e3); font-weight: var(--g-appuyee);
font-size: var(--t-meta); cursor: pointer; border-radius: var(--r-petit); }
.composeur__choix label:hover { background: var(--filet-clair); }
.composeur__choix svg { width: 20px; height: 20px; color: var(--encre-douce); }
/* Le plateau d'aperçu : on voit ce qu'on va envoyer, et l'on peut le retirer.
La pièce partait auparavant à la seconde où on la choisissait. */
.plateau { flex: 0 0 auto; display: flex; align-items: center; gap: var(--e3);
margin: 0 -1.25rem; padding: var(--e2) var(--e4);
border-top: 1px solid var(--filet); background: var(--filet-clair); }
.plateau__vignette { width: 44px; height: 44px; flex: 0 0 auto;
object-fit: cover; border-radius: var(--r-petit); background: var(--surface); }
.plateau__nom { flex: 1; min-width: 0; font-size: var(--t-meta);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plateau__retirer { flex: 0 0 auto; width: 40px; height: 40px; min-height: 0;
padding: 0; display: inline-flex; align-items: center; justify-content: center;
background: none; border: 0; border-radius: var(--r-rond); color: var(--encre-douce);
cursor: pointer; }
.plateau__retirer:hover { background: var(--surface); color: var(--encre); }
.plateau__retirer svg { width: 20px; height: 20px; }
/* Le geste de réponse. Discret par nature : il s'efface sur un appareil à
pointeur tant qu'on ne survole pas la bulle, et reste visible en pâle sur un
écran tactile, où il n'y a pas de survol. Ce n'est pas « Signaler », qui
accusait à chaque ligne — c'est le geste ordinaire d'une conversation. */
/* 26 px était la moitié du plancher tactile. La CIBLE monte à 40 px, le dessin
reste à 15 : on agrandit ce qu'on touche, pas ce qu'on voit. */
/* « Répondre » et « Retirer » partagent la même règle : ce sont les deux gestes
discrets du pied de bulle, ils doivent avoir exactement la même présence.
Deux règles séparées finissent toujours par diverger d'un pixel. */
.bulle__repondre, .bulle__retirer {
width: 40px; height: 40px; min-height: 0; margin: -.6rem -.4rem -.6rem 0;
padding: 0; display: inline-flex; align-items: center; justify-content: center;
background: none; border: 0; border-radius: var(--r-rond); cursor: pointer;
color: var(--encre-douce); opacity: 0; transition: opacity .12s; }
.bulle__repondre svg, .bulle__retirer svg { width: 15px; height: 15px; }
.bulle:hover .bulle__repondre, .bulle__repondre:focus-visible,
.bulle:hover .bulle__retirer, .bulle__retirer:focus-visible { opacity: 1; }
.bulle__repondre:hover { background: var(--filet-clair); color: var(--encre); }
/* Le retrait est le seul geste irréversible du fil : au survol il le dit. */
.bulle__retirer:hover { background: var(--filet-clair); color: var(--alerte); }
@media (hover: none) { .bulle__repondre, .bulle__retirer { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
.bulle__repondre, .bulle__retirer { transition: none; } }
/* ------------------------------------------------------------------
LES CHAMPS SUIVENT LE SENS CHOISI, SANS UNE LIGNE DE JAVASCRIPT
------------------------------------------------------------------
Déclarer un lien demande la nature de la FILIATION ou celle de l'UNION,
jamais les deux. `:has()` lit la case cochée et masque le bloc qui ne sert
pas.
Écrit en positif — on masque ce qui ne correspond pas — pour que le
formulaire reste entier là où `:has()` manque : les deux blocs paraissent, on
répond à celui qui compte, et le serveur ignore l'autre. Un îlot Stimulus
ferait la même chose en cessant de fonctionner sans lui. */
.formulaire--lien:has(#sens_conjoint:checked) .bloc--filiation,
.formulaire--lien:has(#sens_fratrie:checked) .bloc--filiation,
.formulaire--lien:has(#sens_parent:checked) .bloc--alliance,
.formulaire--lien:has(#sens_enfant:checked) .bloc--alliance,
.formulaire--lien:has(#sens_fratrie:checked) .bloc--alliance { display: none; }
/* La question de l'autre parent ne se pose que pour un ENFANT : demander qui
est l'autre parent de son propre père n'a pas de sens, et un champ sans
objet fait douter de tout le formulaire. Écrit en positif comme au-dessus —
là où `:has()` manque, la question paraît et le serveur l'ignore. */
.formulaire--greffe:has(#lien_parent:checked) .bloc--second-parent,
.formulaire--greffe:has(#lien_fratrie:checked) .bloc--second-parent,
.formulaire--greffe:has(#lien_conjoint:checked) .bloc--second-parent { display: none; }
/* Les deux flèches de l'album. Pas de visionneuse en surimpression : cette
page EST l'affichage en grand, et elle garde une adresse qu'on peut envoyer.
La flèche « suivante » est le même dessin retourné — un seul chemin SVG dans
le dépôt, et deux flèches qui ne peuvent pas diverger. */
.album-parcours { display: flex; justify-content: space-between; align-items: center;
gap: var(--e3); margin: var(--e3) 0 var(--e5); }
.album-parcours__lien { display: inline-flex; align-items: center; gap: var(--e2);
min-height: 44px; padding: 0 var(--e2); font-family: var(--sans);
font-size: var(--t-onglet); color: var(--lien); text-decoration: none; }
.album-parcours__lien:hover { text-decoration: underline; }
.album-parcours__lien svg { width: 18px; height: 18px; }
.album-parcours__lien--suivant { margin-left: auto; }
.album-parcours__lien--suivant svg { transform: rotate(180deg); }
/* Un avis qui porte sur MOI et que je n'avais pas demandé — « votre conjoint
vous indique comme vivant au… ». Il se distingue d'un bloc de formulaire
ordinaire par son filet, sans crier : ce n'est pas une alerte, c'est un fait
qu'on doit avoir lu avant de saisir la suite. */
/* ------------------------------------------------------------------
UN AVIS EST UNE BOÎTE, PAS UN CHAMP DE FORMULAIRE
------------------------------------------------------------------
`.bloc` est un `fieldset` : un filet en TÊTE, et zéro retrait latéral —
c'est ce qu'il faut pour une pile de champs qui s'aligne sur la colonne de
lecture. Posé sur un avis, cela collait le texte au filet de gauche, et le
bouton débordait d'un bord à l'autre.
L'avis, lui, est une boîte : du retrait sur les quatre côtés, un coin
arrondi, et pas de filet en tête — celui de gauche dit déjà que c'est autre
chose. */
.bloc--avis { border: 0; border-left: 3px solid var(--lien);
border-radius: 0 var(--r-bloc) var(--r-bloc) 0;
background: var(--filet-clair); padding: var(--e3) var(--e4); }
.bloc--avis > :first-child { margin-top: 0; }
.bloc--avis > :last-child { margin-bottom: 0; }
/* Le formulaire logé dedans ne reprend pas la marge basse d'un formulaire de
plein écran : il est déjà dans une boîte qui en porte une. */
.bloc--avis .formulaire { margin: var(--e2) 0 0; gap: var(--e2); }
/* ==================================================================
LES RANGS DE RÉGLAGE — UN ÉCRAN QUI SE BALAIE
==================================================================
« Mon compte » alignait onze liens de texte de même graisse, sous des titres
de même rang : « Être prévenu » y était indiscernable de « Se faire aider ».
Le régisseur du produit lui-même a mis une minute à le trouver.
Trois choses rendent un écran de réglages balayable, et il en faut les
trois : un DESSIN à gauche que l'œil retrouve sans lire, une SURFACE
CLIQUABLE entière plutôt que six caractères soulignés, et un CHEVRON qui dit
que cela s'ouvre.
La hauteur minimale de 3.5rem n'est pas décorative : c'est la cible de doigt
que respectent iOS et Android, et le public de ce produit a 82 ans une fois
sur cinq. */
.reglages { display: flex; flex-direction: column; margin: 0 0 var(--e4);
border: 1px solid var(--filet); border-radius: var(--r-bloc);
background: var(--papier); overflow: hidden; }
.reglage { display: flex; align-items: center; gap: var(--e3);
min-height: 3.5rem; padding: var(--e3) var(--e3);
color: var(--encre); text-decoration: none;
border-top: 1px solid var(--filet); }
.reglage:first-child { border-top: 0; }
.reglage:hover { background: var(--filet-clair); }
.reglage:focus-visible { outline: 2px solid var(--lien); outline-offset: -2px; }
.reglage__icone { flex: 0 0 auto; width: 22px; height: 22px; color: var(--encre-douce); }
.reglage__corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
gap: .15rem; }
.reglage__titre { font-family: var(--sans); font-weight: var(--g-forte);
display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.reglage__detail { font-size: var(--t-meta); color: var(--encre-douce);
line-height: 1.35; }
.reglage__chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--filet); }
.reglage:hover .reglage__chevron { color: var(--encre-douce); }
/* L'ÉTAT est ce qui fait la différence entre une liste d'options et un écran
qui appelle. En attente, il prend la couleur d'alerte du produit — la seule
de la page, sans quoi elle ne dirait plus rien. */
.reglage__etat { font-size: var(--t-meta); font-weight: var(--g-normale);
color: var(--encre-douce); padding: .1rem .4rem; border-radius: var(--r-pastille, 4px);
background: var(--filet-clair); }
.reglage__etat--attente { color: var(--alerte); background: transparent;
border: 1px solid var(--alerte); }
/* La citation d'un message retiré depuis : même dessin, mais rien à ouvrir. */
.bulle__citation--sans-cible { cursor: default; opacity: .75; }
/* La citation de ce à quoi l'on répond, au-dessus du champ. */
.citation-en-cours { flex: 0 0 auto; display: flex; align-items: center; gap: var(--e2);
margin: 0 -1.25rem; padding: var(--e2) var(--e4);
border-top: 1px solid var(--filet); background: var(--filet-clair);
border-left: 3px solid var(--lien); }
.citation-en-cours__texte { flex: 1; min-width: 0; display: flex;
flex-direction: column; font-size: var(--t-onglet); color: var(--encre-douce); }
/* Le bouton de remontée du fil, et la ligne qui dit qu'il n'y a plus rien. */
/* Pleine largeur : la remontée contient désormais une LISTE de rangées, et
`align-self: center` la rétrécissait à son bouton — les messages ramenés
s'entassaient alors au milieu. */
.fil__remontee { align-self: stretch; width: 100%; align-items: center;
display: flex; flex-direction: column;
align-items: center; gap: var(--e1); width: 100%; margin: 0 0 var(--e2); }
/* Les deux règles qui alignaient les bulles remontées sont sans objet : elles
passent par `.fil__rang` comme toutes les autres. */
.fil__remontee form { margin: var(--e1) 0; }
/* Le seul signalement de l'écran, en pied, discret. Il était sous chaque
message — deux cents accusations par écran dans une famille. */
.signalement-du-pied { flex: 0 0 auto; margin: 0; padding: var(--e1) 0 var(--e0);
text-align: center; }
/* La même CASE que partout — pied de page, dossiers, registres. Le lien nu
flottait au centre sans appartenir à aucune famille de formes. */
.signalement-du-pied a { display: inline-flex; align-items: center; gap: var(--e2);
min-height: 36px; padding: 0 var(--e3);
border: 1px solid var(--filet); border-radius: var(--r-moyen);
background: var(--surface);
font-size: var(--t-onglet); color: var(--encre-douce); text-decoration: none; }
.signalement-du-pied a:hover { color: var(--encre); border-color: var(--encre-douce);
background: var(--filet-clair); }
.signalement-du-pied svg { width: 14px; height: 14px; }
/* Pendant l'enregistrement : le micro devient rouge et pulse. C'est le seul
endroit du produit où une couleur d'alerte sert à autre chose qu'une erreur,
et c'est justifié — on doit voir d'un coup d'œil qu'on est en train
d'enregistrer. */
.composeur__bouton--enregistre { color: var(--alerte); animation: pouls 1.2s infinite; }
@keyframes pouls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
.composeur__bouton--enregistre { animation: none; }
}
.composeur__etat { margin: var(--e1) 0 0; font-family: var(--sans);
font-size: var(--t-meta); color: var(--encre-douce); min-height: 1.2em; }
/* Sur écran large il n'y a plus de barre en bas : le composeur s'y colle. */
/* ------------------------------------------------------------------
SUR ÉCRAN LARGE, LA BARRE N'EST PLUS EN BAS
------------------------------------------------------------------
Le fil et la carte retranchaient 64 px pour une barre d'onglets qui, à cette
largeur, est devenue une colonne à gauche : soixante-quatre pixels retirés
pour rien, plus vingt-quatre de rembourrage — quatre-vingt-huit pixels de
conversation perdus sur chaque écran de portable.
La règle prévue pour le corriger, `min-height: calc(100dvh - 6rem)`, était
INERTE : une hauteur minimale ne peut pas battre une `height` déjà posée.
C'est le genre de correctif qui rassure sans rien faire. */
@media (min-width: 60rem) {
.composeur { bottom: 0; }
/* ------------------------------------------------------------------
DEUX RÈGLES QUI SE CONTREDISAIENT, ET LE FIL PASSAIT SOUS LE RAIL
------------------------------------------------------------------
`.fil-page` portait `margin: -2.5rem -2rem -4rem -3rem` pour annuler le
rembourrage de `.page` et occuper toute la fenêtre. Mais la règle juste en
dessous met déjà ce rembourrage à ZÉRO pour ces deux écrans : les marges
négatives ne compensaient donc plus rien, elles TIRAIENT — de trois rem
vers la gauche, c'est-à-dire sous la colonne de navigation. À l'écran, le
fil de conversation disparaissait derrière le rail et « fermer ce groupe »
se lisait « rmer ce groupe ».
Chacune des deux était juste séparément ; leur somme ne l'était pas. On
n'annule plus rien : le rembourrage est à zéro, il n'y a rien à reprendre. */
.avec-barre .page:has(.carte-page), .avec-barre .page:has(.fil-page) {
max-width: none; padding: 0;
}
.fil-page, .carte-page {
/* La bande haute occupe 3 rem : sans les retrancher, le composeur descend
d'autant sous la ligne de flottaison. */
height: calc(100dvh - var(--bande-haute)); margin: 0; padding: 0 var(--e7);
}
/* `.message` déclarait `max-width: 75%` et n'avait AUCUN appelant : l'intention
— élargir la bulle quand l'écran le permet — n'était jamais livrée. */
.bulle { max-width: 68%; }
}
/* ------------------------------------------------------------------
AU-DELÀ DE 1280 PX, LA COLONNE ÉTAIT COLLÉE AU RAIL
------------------------------------------------------------------
`.avec-barre .page { margin: 0 }` avait été posé pour une gouttière de
quarante-huit pixels sur un iPad — et n'a jamais été borné. À 1512 px cela
laissait 536 px de vide à droite du texte ; à 1920, NEUF CENT DOUZE, soit
près de la moitié de l'écran, d'un seul côté. C'est exactement ce que le
commentaire de la barre redoute : un produit de téléphone mal agrandi.
On ne centre pas tout à fait — la colonne reste plus proche de la barre que
du bord, parce que l'œil revient vers la navigation — mais l'asymétrie cesse
d'être une infirmité.
`margin` ET NON `margin-inline` A COÛTÉ CENT VINGT-HUIT PIXELS DE VIDE EN
HAUT DE CHAQUE ÉCRAN. Le raccourci à une valeur pose les QUATRE côtés : la
gouttière voulue à gauche s'appliquait aussi au-dessus et au-dessous, et
comme elle écrase le `margin: 0` posé plus haut, tout écran de 1440 px ou
plus s'ouvrait sur une bande vide de la hauteur d'un titre — avant même le
lien de retour. C'est un décalage horizontal, il s'écrit donc sur l'axe
horizontal. */
@media (min-width: 90rem) {
.avec-barre .page, .avec-barre .annonces {
margin-inline: min(8rem, calc((100vw - 17rem - 46rem) / 2));
}
}
.compteur { flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 var(--e2);
display: inline-flex; align-items: center; justify-content: center;
background: var(--encre); color: var(--papier); border-radius: var(--r-moyen);
font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------------
LA PASTILLE DE LA BARRE
------------------------------------------------------------------
Elle se pose SUR l'icône, en haut à droite, comme partout depuis quinze ans.
L'enveloppe n'existe que pour lui donner un conteneur positionné : sans
elle, `position: absolute` la renverrait au coin de la page.
Elle prend `--alerte` et non `--encre` : c'est le seul endroit du produit,
avec le micro en enregistrement, où cette couleur ne dit pas une erreur — et
c'est justifié, parce qu'une pastille qui se fond dans le texte ne remplit
pas son office. Le filet de la couleur du fond la détache de l'icône. */
.onglet__porte-icone { position: relative; display: inline-flex; }
.onglet__pastille {
position: absolute; top: -5px; left: 60%;
min-width: 18px; height: 18px; padding: 0 var(--e1);
display: inline-flex; align-items: center; justify-content: center;
background: var(--alerte); color: var(--papier);
border: 2px solid var(--surface); border-radius: var(--r-moyen);
/* Le SEUL 700 du produit, et il est justifié : onze pixels sur un aplat
coloré de dix-huit, aucune autre graisse ne se lit. */
font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--g-forte); line-height: 1;
font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) .onglet__pastille { color: #14130F; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* L'édition en cours. Un encadré sobre, jamais une bannière : l'échéance doit
se voir sans crier. */
/* UN filet, en haut. Le second ouvrait quatre traits en deux cents pixels
entre l'échéance et le composeur, qui porte déjà son propre cadre. */
.edition-en-cours { padding: var(--e4) 0 0; border-top: 1px solid var(--filet);
margin: 0 0 var(--e6); }
.edition-en-cours__titre { margin: 0 0 var(--e1); font-weight: var(--g-appuyee);
font-size: var(--t-meta); color: var(--encre-douce); }
.edition-en-cours__echeance { margin: 0 0 var(--e1); }
.edition-en-cours__places { margin: 0; font-size: var(--t-meta);
color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.composeur-publication { display: flex; flex-direction: column; gap: var(--e2);
margin: 0 0 var(--e7); }
.composeur-publication textarea { font-family: var(--sans);
font-size: var(--t-corps); padding: var(--e3) var(--e3); background: var(--surface);
color: var(--encre); border: 1px solid var(--filet); border-radius: var(--r-petit);
resize: vertical; }
.titre-optionnel summary { cursor: pointer; font-size: var(--t-meta);
color: var(--encre-douce); min-height: var(--cible);
display: flex; align-items: center; }
.section-edition { margin: 0 0 var(--e7); }
.section-edition__titre { display: flex; align-items: center; gap: var(--e2);
font-family: var(--serif); font-size: var(--t-sous-titre); font-weight: var(--g-appuyee);
padding: var(--e2); border-bottom: 1px solid var(--filet); }
.publication { padding: var(--e4) 0; border-bottom: 1px solid var(--filet-clair); }
.publication h3 { font-family: var(--serif); font-size: var(--t-sous-titre); font-weight: var(--g-appuyee);
margin: 0 0 var(--e2); }
.publication__corps { margin: 0 0 var(--e2); overflow-wrap: anywhere; }
/* La ligne de rappel, en tête de la liste des conversations. Une LIGNE, pas une
bannière ; non masquable jusqu'au bouclage, puis elle disparaît d'elle-même.
Sans elle le rituel serait invisible, Messages étant l'écran qui s'ouvre. */
.rappel-edition { display: flex; gap: var(--e2); align-items: baseline;
padding: var(--e3) 0; margin: 0 0 var(--e2); border-bottom: 1px solid var(--filet);
font-size: var(--t-meta); }
.rappel-edition strong { font-variant-numeric: tabular-nums; }
/* L'en-tête d'écran : le titre, et le lien qui l'accompagne sur la MÊME ligne
de base. Le seul cas du produit où deux éléments se partagent une ligne de
titre, et il était traité par un `float:right` posé en attribut `style` — donc
hors du flux, donc sans ligne de base commune. */
/* Un entête porte un titre et, souvent, UN geste. `align-items: center` et non
`baseline` : une ligne de base commune entre une romaine de 24 px et un
bouton de 40 aligne le texte du bouton sur celui du titre et pousse le
bouton vers le bas — il paraît alors décroché. */
.entete { display: flex; align-items: center; justify-content: space-between;
gap: var(--e4); flex-wrap: wrap; margin: 0 0 var(--e3); }
/* Le geste qui accompagne un titre : la même forme que partout, à l'échelle
d'un entête. Sans elle, un lien nu de 15 px en bleu souligné se retrouvait à
côté d'une romaine de 24 — deux registres qui ne se parlent pas. */
/* ------------------------------------------------------------------
« COMPACTE » PORTE SUR LE DESSIN, PAS SUR LA ZONE TACTILE
------------------------------------------------------------------
Elle valait 40 px de haut, c'est-à-dire moins que la cible du pouce, et le
produit s'en sert pour des gestes ordinaires — « Compléter » sur une fiche
de maison, « Ajouter » sur l'arbre. Un bouton compact doit être plus DISCRET,
pas plus difficile à toucher : on garde le rembourrage réduit et la petite
fonte, on rend la hauteur. */
.action--compacte { min-height: var(--cible); padding: 0 var(--e3);
font-size: var(--t-meta); }
.entete h1 { margin: 0; }
.entete p { margin: 0; }
.recherche { display: flex; gap: var(--e2); margin: var(--e4) 0 var(--e6); align-items: stretch; }
.recherche input { flex: 1; font-family: var(--sans); font-size: var(--t-corps);
min-height: var(--cible); padding: var(--e2) var(--e3); background: var(--surface);
color: var(--encre); border: 1px solid var(--filet); border-radius: var(--r-petit); }
/* ------------------------------------------------------------------
CHERCHER N'EST PAS UN ENGAGEMENT
------------------------------------------------------------------
Ce bouton n'avait AUCUNE règle : il retombait sur le bouton d'action
principale — fond `--encre`, 56 px, graisse 600. Le geste le plus anodin et le
plus répété du produit portait donc le poids visuel le plus lourd, à côté d'un
champ de 48 px qu'il dépassait de huit pixels. C'est cet écart de hauteur,
autant que le contraste, qui datait l'ensemble.
Il prend le traitement discret — filet et encre douce, comme
`.bouton-discret` — et surtout la hauteur exacte du champ : `align-items:
stretch` sur la rangée, et aucune hauteur minimale imposée ici. */
.recherche button { min-height: 0; background: var(--surface); }
/* Le lien d'invitation à transmettre soi-même. Il ne paraît qu'une fois : on
l'encadre pour qu'on ne le manque pas, et on le compose en chasse fixe pour
qu'il se recopie sans faute au téléphone. */
.lien-a-transmettre { margin: 0 0 var(--e6); padding: var(--e4) var(--e5);
background: var(--surface); border: 1px solid var(--encre-douce);
border-radius: var(--r-petit); }
.lien-a-transmettre__url { margin: var(--e1) 0 var(--e2); font-family: ui-monospace,
"SF Mono", Menlo, monospace; font-size: var(--t-meta); word-break: break-all; }
/* Inviter depuis la fiche : encadré, parce que c'est le seul endroit de la
fiche où l'on AGIT — tout le reste s'y lit. */
/* Les rôles : un nom, ce qu'il tient, et les gestes. Sur un téléphone les
gestes passent sous le nom plutôt que de le comprimer. */
.role-ligne { flex-wrap: wrap; gap: var(--e2); }
.role-ligne__gestes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.role-ligne__gestes form { display: flex; gap: var(--e2); margin: 0; }
/* COU-VIE-004 — ce qui est écrit et n'a pas encore paru. Ce n'est ni une alerte
ni un article : c'est un accusé. Il a donc le poids d'un encadré discret, pas
celui d'une rubrique — l'édition du dimanche reste l'événement. */
.a-paraitre { margin: var(--e4) 0; padding: var(--e3) var(--e4);
background: var(--surface); border: 1px solid var(--filet);
border-radius: var(--r-petit); }
.a-paraitre__compte { margin: 0; }
.a-paraitre__miennes { list-style: none; margin: var(--e3) 0 0; padding: 0;
display: flex; flex-direction: column; gap: var(--e2); }
.a-paraitre__miennes li { display: flex; flex-direction: column; gap: var(--e0);
padding-top: var(--e2); border-top: 1px solid var(--filet-clair); }
.a-paraitre__titre { font-family: var(--serif); }
/* Une VEILLE : elle ne réclame rien maintenant, elle constate un manque durable.
Plus discrète qu'un acte — pas de bordure d'appel, pas de pastille — mais
toujours présente. C'est la définition même de « discret et permanent ». */
.attente--veille { margin-top: var(--e4); }
.attente__ligne--veille { background: var(--surface);
border: 1px dashed var(--filet); border-radius: var(--r-petit); }
/* L'identité que le parent VÉRIFIE avant de donner son accord. Ce n'est pas une
décoration : c'est la pièce qu'on lit avant de cocher, et l'article 8 §2 du
RGPD en fait la condition de validité du consentement. Elle prend donc le
poids d'un encadré, pas d'une note de bas de page. */
.identite-verifiee { width: 100%; border-collapse: collapse; margin: var(--e4) 0;
display: block; overflow-x: auto; }
.identite-verifiee caption { text-align: left; padding-bottom: var(--e2);
font-family: var(--sans); font-size: var(--t-micro); color: var(--encre-douce); }
.identite-verifiee th { text-align: left; padding: var(--e2) var(--e3) var(--e2) 0;
color: var(--encre-douce); font-weight: 600; white-space: nowrap; }
.identite-verifiee td { padding: var(--e2) 0; }
.identite-verifiee tr + tr th, .identite-verifiee tr + tr td {
border-top: 1px solid var(--filet-clair); }
/* COU-FRI-010 — l'écran de fusion. Deux listes et un tableau : la table des
déplacements est la seule du produit, et elle doit pouvoir défiler sur un
téléphone sans emporter la page avec elle. */
.fusion-candidates { list-style: none; margin: var(--e3) 0; padding: 0;
display: flex; flex-direction: column; gap: var(--e2); }
.fusion-candidates a { display: flex; flex-direction: column; gap: var(--e1);
padding: var(--e3); background: var(--surface);
border: 1px solid var(--filet); border-radius: var(--r-petit);
text-decoration: none; }
.fusion-refus { margin: var(--e4) 0; padding: var(--e4);
background: var(--surface); border: 1px solid var(--filet);
border-radius: var(--r-petit); }
.fusion-apercu { width: 100%; border-collapse: collapse; margin: var(--e3) 0;
display: block; overflow-x: auto; }
.fusion-apercu caption { text-align: left; color: var(--encre-douce);
font-size: var(--t-micro); padding-bottom: var(--e1); }
.fusion-apercu th, .fusion-apercu td { text-align: left; padding: var(--e2) var(--e3);
border-bottom: 1px solid var(--filet-clair); }
.fusion-apercu td { text-align: right; font-variant-numeric: tabular-nums; }
/* COU-VIE-006 — la proposition de rattachement, à l'arrivée et sur son propre
nœud d'arbre. Elle prend le poids d'une section et non celui d'une note :
c'est ce qui donne une famille à quelqu'un qui vient d'entrer, et ce qui
passe pour secondaire ne se lit pas. */
.rattachement-propose {
margin: var(--e6) 0; padding: var(--e4);
background: var(--surface); border: 1px solid var(--filet);
border-radius: var(--r-petit);
}
.rattachement-propose h2 { margin-top: 0; }
.rattachement-propose__choix { list-style: none; margin: var(--e3) 0 0; padding: 0;
display: flex; flex-direction: column; gap: var(--e2); }
/* Chaque choix occupe la ligne : ils se comparent, et l'on ne compare pas des
libellés de longueurs différentes posés côte à côte. */
.rattachement-propose__choix form { margin: 0; }
.rattachement-propose__choix button { width: 100%; text-align: left; }
/* Deux encadrés de même nature sur la fiche d'annuaire : « voici ce que vous
pouvez faire depuis ici ». Ils partagent leur forme parce qu'ils partagent
leur rôle — les séparer ferait diverger deux blocs qu'on lit l'un sous
l'autre. */
.invitation-depuis-fiche,
.correction-depuis-fiche {
display: flex; flex-direction: column; gap: var(--e1);
margin: var(--e6) 0; padding: var(--e3) var(--e4);
background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-petit);
}
.etiquette { flex: 0 0 auto; font-size: var(--t-micro); color: var(--encre-douce);
padding: var(--e1); min-width: 6.5rem; }
/* La parenté : une phrase en clair d'abord, le détail chiffré replié. C'est ce
qui transforme une fonction technique en objet de conversation familiale. */
/* UN filet. Le second donnait quatre traits pour deux blocs de trois lignes,
la parenté et l'invitation se suivant à cent pixels. Le bouton « Voir dans
l'arbre » qui vient ensuite ferme le bloc de lui-même. */
.parente { padding: var(--e4) 0 0; margin: 0 0 var(--e6);
border-top: 1px solid var(--filet); }
.parente__phrase { margin: 0 0 var(--e2); font-family: var(--serif); font-size: var(--t-sous-titre); }
.parente details summary { cursor: pointer; font-size: var(--t-meta);
color: var(--encre-douce); min-height: var(--cible);
display: flex; align-items: center; }
.segment { border: 0; border-top: 1px solid var(--filet); padding: var(--e4) 0 var(--e2);
margin: 0; }
.segment legend { font-weight: var(--g-forte); font-size: var(--t-corps); padding: 0 var(--e2) 0 0; }
.effectifs { display: flex; gap: var(--e4); flex-wrap: wrap; }
.effectifs label { display: flex; flex-direction: column; gap: var(--e1);
font-size: var(--t-meta); font-weight: var(--g-normale); }
.effectifs input { width: 5rem; min-height: var(--cible); padding: var(--e2);
font-size: var(--t-corps); text-align: center;
font-variant-numeric: tabular-nums; background: var(--surface);
color: var(--encre); border: 1px solid var(--filet); border-radius: var(--r-petit); }
/* ==================================================================
LES DEUX VOIX
==================================================================
Décision du 15 août 2026. Le produit parle sur deux registres, et les
confondre coûte des deux côtés.
VOIX ÉDITORIALE — ce qui SE LIT : À la une, carnet mondain, faire-part,
archives, arbre. Romaine à empattements, interlignage large, filets fins,
rubriques en petites capitales. C'est le registre du papier de famille, et
il porte la solennité que ces événements méritent : une naissance ne doit
pas ressembler à une notification.
VOIX UTILITAIRE — ce qui S'UTILISE : messages, annuaire, agenda, réglages.
Linéale sobre et dense, déjà en place. Un fil de conversation en romaine se
lit mal sur téléphone, et c'est l'écran le plus fréquenté du produit.
La règle de départ tient toujours : petites écritures plutôt que grosses
banderoles. La hiérarchie se fait par le blanc et le filet, jamais par la
taille ni par la couleur — la seule couleur forte reste le filet
d'origine. */
.editorial { font-family: var(--serif); }
.editorial p { line-height: 1.62; margin: 0 0 var(--e4); }
/* ------------------------------------------------------------------
PETITES CAPITALES, JAMAIS DE CAPITALES FAUSSES
------------------------------------------------------------------
La direction artistique l'écrit noir sur blanc, et c'est son cinquième
point : « jamais de capitales fausses générées par text-transform. C'est le
détail qui sépare un carnet d'un formulaire. »
Il y en avait cinq. Elles produisaient les banderoles qu'on voyait sur chaque
écran — MESSES ANNIVERSAIRES ET SERVICES RELIGIEUX, COUSINAGE D'ANSELME ET
GUILLEMETTE DE KERVENEC — c'est-à-dire exactement la marque du formulaire que
la DA voulait éviter.
`` compose de vraies petites capitales — MAIS
SEULEMENT SI LA FONTE EN PORTE UNE TABLE. La romaine en a une : Iowan Old
Style, Palatino et Georgia composent de vrais petits caractères, et la
rubrique du carnet garde donc ce traitement, qui est le sien depuis toujours.
La LINÉALE n'en a pas. Ni Avenir Next, ni Segoe UI, ni system-ui : le
navigateur les SYNTHÉTISE en écrasant des capitales à 70 %, ce qui donne une
écriture comprimée, plus sombre que le texte voisin, et vaguement fautive
sans qu'on sache dire pourquoi. Quinze étiquettes du produit étaient dans ce
cas. Voir `.etiquette-libelle` : elles prennent une casse normale. */
/* ------------------------------------------------------------------
LES PETITES CAPITALES VONT AUX MOTS COURTS, ET À EUX SEULS
------------------------------------------------------------------
La romaine porte bien une vraie table de petites capitales — le raisonnement
ci-dessus tient. Ce qui ne tenait pas, c'est de l'appliquer à une PHRASE :
« MESSES ANNIVERSAIRES ET SERVICES RELIGIEUX » fait sept mots et quarante
caractères. Le Figaro compose « NAISSANCES » en capitales, jamais un membre
de phrase — au-delà de deux mots, l'interlettrage étale le texte, la casse
uniforme retire les repères de forme, et l'on ne lit plus, on déchiffre.
Casse normale, romaine, un demi-cran au-dessus du corps : c'est un titre de
section, il se lit comme tel. */
.rubrique { display: block; font-family: var(--serif); font-size: var(--t-meta);
font-weight: var(--g-appuyee); letter-spacing: 0;
color: var(--encre-douce); margin: 0 0 var(--e1); }
/* Une entrée de carnet. Le filet la sépare, rien ne l'encadre. */
.entree { padding: var(--e4) 0; border-bottom: 1px solid var(--filet-clair); }
.entree:last-child { border-bottom: 0; }
.entree__titre { font-family: var(--serif); font-size: var(--t-sous-titre); font-weight: var(--g-appuyee);
line-height: 1.3; margin: 0 0 var(--e1); }
.entree__detail { margin: 0; color: var(--encre-douce); font-size: var(--t-meta); }
/* Le filet de respiration entre deux ensembles éditoriaux. Deux traits fins
plutôt qu'un gros : c'est ce qui distingue un faire-part d'un formulaire. */
/* UN trait, pas deux. `border-top` + `border-bottom` + `height: 3px` dessinait
deux lignes à trois pixels l'une de l'autre — vingt-cinq fois, dans vingt
vues. À l'œil, cela ne se lit pas comme un ornement mais comme un défaut
d'affichage. */
.filet-orne { border: 0; border-top: 1px solid var(--filet);
height: 0; margin: var(--e7) 0; }
/* Titre de section — utilisé partout, il n'existait dans aucune règle. */
/* ------------------------------------------------------------------
UN TITRE SE SÉPARE PAR DU VIDE, PAS PAR UN TRAIT
------------------------------------------------------------------
Il portait un filet en dessous, et quatre pixels plus bas venait un
cartouche qui porte le sien : deux traits à deux millimètres l'un de
l'autre, sans que rien ne les distingue. C'est le défaut le plus visible de
toute la feuille, et il se répétait partout où un titre précède un objet
encadré — c'est-à-dire presque partout.
La règle qui remplace : L'ESPACE SÉPARE, le trait ne sert qu'à ce que
l'espace ne peut pas faire — séparer deux choses qui se touchent
nécessairement, comme deux lignes d'une même liste. Un titre a de l'air
au-dessus et en dessous de lui ; il n'a pas besoin d'être souligné. */
.section-titre { font-family: var(--serif); font-size: var(--t-sous-titre);
font-weight: var(--g-forte); letter-spacing: -.01em;
margin: var(--e7) 0 var(--e3); padding: 0; }
/* Les groupes qu'on peut rejoindre : filet CREUX, en pointillé. On montre
qu'ils existent sans les faire passer pour des fils déjà vivants. */
.liste--a-rejoindre .liste__ligne { align-items: stretch; }
.origine--creuse { width: 0; border-left: 3px dotted var(--filet); }
/* Un onglet dont l'écran n'existe pas encore. On l'affiche éteint plutôt que
de le cacher : une absence annoncée se comprend, un lien qui ne répond pas
au doigt ne se comprend pas. */
.onglet--a-venir { opacity: .38; cursor: default; }
/* Choisir les familles destinataires d'une publication. Une saisie, plusieurs
instances concernées — jamais la même annonce retapée. */
.destinations { border: 0; padding: 0; margin: 0 0 var(--e1); }
.destinations legend { font-size: var(--t-meta); font-weight: var(--g-forte);
color: var(--encre-douce); padding: 0; margin: 0 0 var(--e1); }
.destination { display: flex; gap: var(--e2); align-items: center;
min-height: var(--cible); cursor: pointer; }
.destination input { width: 24px; height: 24px; flex: 0 0 auto; }
/* Trancher sur l'autorité parentale d'un mineur : deux boutons pleine largeur,
nettement distincts, jamais deux liens côte à côte. */
.corroboration-choix { display: flex; flex-direction: column; gap: var(--e3);
margin: var(--e6) 0; }
.corroboration-choix form { margin: 0; }
.corroboration-choix button { width: 100%; }
/* Couvert par le bloc unique du haut de feuille, au rang « seconde ». */
/* Le genre d'un élément du carnet ou du courrier. */
.genre { font-family: var(--sans); font-size: var(--t-micro); color: var(--encre-douce); }
/* L'état vide, jamais un écran blanc. On dit ce qui manque ET le geste qui le
comble : arriver dans une pièce vide sans savoir quoi faire est la façon la
plus sûre de ne pas revenir. */
/* PAS de filet : quand l'écran est vide, ce trait était le premier objet
graphique après le titre — on annonçait une absence par une règle, le jour 1
d'un cousinage, au moment exact où l'on décide de revenir ou non. */
/* ------------------------------------------------------------------
UN ÉCRAN VIDE N'EST PAS UN ÉCRAN NOIR
------------------------------------------------------------------
L'état vide existait sur dix-huit écrans, mais il était rendu comme du texte
ordinaire : un titre, un paragraphe gris, puis mille trois cents pixels de
néant en dessous. Relevé sur deux captures : « l'utilisateur âgé conclut que
l'application est cassée ».
Pour ce public, un écran muet SE LIT COMME UNE PANNE. Il faut donc que le
vide soit visiblement une réponse, et non une absence de réponse : un cadre
en pointillé — jamais un aplat, qui se lirait comme un chargement inachevé —,
du contenu centré, et le geste qui comble le manque à portée de pouce. */
.vide { display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center;
min-height: 14rem; padding: var(--e7) var(--e5); margin: var(--e5) 0;
border: 1px dashed var(--filet); border-radius: var(--r-moyen); }
.vide__titre { font-family: var(--serif); font-size: var(--t-sous-titre);
font-weight: var(--g-appuyee); margin: 0 0 var(--e2); }
.vide p { margin: 0 0 var(--e4); color: var(--encre-douce); max-width: 34ch; }
.vide > :last-child { margin-bottom: 0; }
/* ==================================================================
L'ARBRE
==================================================================
Un arbre se PARCOURT : rang par rang, du plus ancien au plus récent, et
l'on se déplace en recentrant. Pas de tracé graphique, pas de lignes de
liaison dessinées — sur un téléphone elles coûtent cher et n'apprennent
rien de plus que l'ordre des rangs.
Le filet vertical à gauche fait le travail d'une ligne de descendance, et
il tient en une déclaration. */
.arbre__titre { margin: var(--e0); }
.arbre__rang { position: relative; padding: 0 0 var(--e2) var(--e4); margin: 0 0 var(--e6); }
.arbre__rang::before {
content: ""; position: absolute; left: 0; top: .55rem; bottom: .9rem;
width: 1px; background: var(--filet);
}
.arbre__compte {
margin: var(--e2); font-variant-numeric: tabular-nums;
letter-spacing: 0; text-transform: none;
}
/* Le nom d'une personne dans l'arbre étendu était un LIEN NU : bleu, souligné,
onze fois par écran. C'est exactement ce que la règle du souligné écarte —
« il ne se souligne pas quand il est le titre d'une ligne, la forme le dit
déjà » — et la règle n'avait simplement jamais été appliquée ici, parce que
la classe porte un autre nom. */
.arbre__nom { font-family: var(--serif); font-size: var(--t-sous-titre); display: block; }
a.arbre__nom { color: var(--encre); text-decoration: none;
font-weight: var(--g-appuyee); }
a.arbre__nom:hover { text-decoration: underline; }
.arbre__dates { display: block; font-variant-numeric: tabular-nums; }
.arbre__fiche { flex: 0 0 auto; font-size: var(--t-meta); align-self: center; }
.arbre__profondeur { margin: var(--e5) 0 0; }
/* Greffer : replié par défaut. L'arbre se lit d'abord ; on ne met pas un
formulaire de saisie devant les yeux de qui vient regarder sa famille. */
.greffe summary {
cursor: pointer; min-height: var(--cible); display: flex; align-items: center;
font-family: var(--sans); font-weight: var(--g-forte); font-size: var(--t-corps);
}
.greffe .formulaire { padding: var(--e2); }
/* La variante DOUCE, pour un geste répété sur chaque ligne d'une liste : la
même case que partout, en voix grise, calée à droite. « Personnaliser ce
motif » en gras, treize fois, se lisait comme une injonction. */
/* ------------------------------------------------------------------
UN REPLI QUI A L'AIR D'UN GESTE, ET NON D'UN TITRE
------------------------------------------------------------------
Le `summary` par défaut de ce dépôt est en corps du texte, graisse appuyée,
encre pleine : typographiquement, un titre de section. Le chevron ajouté
partout aide, mais ne suffit pas quand le repli contient la SEULE façon de
faire quelque chose — « aucune chance de le voir sans aide », dixit JB devant
celui de son profil.
On lui donne alors un cadre et une hauteur de cible : il se lit comme un
bouton, ce qu'il est. Réservé aux replis dont le contenu est un geste et non
un complément — les autres restent discrets, et c'est bien. */
/* ------------------------------------------------------------------
LE SIGNE SUR LE ROND, PLUTÔT QUE LA PHRASE À CÔTÉ
------------------------------------------------------------------
« Cliquez sur le médaillon pour changer votre photo » était une phrase à lire
pour un geste à faire. L'appareil photo posé sur le bord du rond se comprend
sans lire, et c'est ce que font toutes les applications que la cible emploie
déjà — la convention est acquise, on ne la réinvente pas.
Il disparaît pendant le cadrage : à ce moment-là le geste n'est plus
« choisir » mais « déplacer », et un appareil photo dirait le contraire. */
.medaillon__cercle { position: relative; }
/* DANS le disque, et non à cheval sur son bord. Le cercle porte
`overflow: hidden` — il doit, pour découper la photo — si bien qu'un badge
posé au coin n'en montrait qu'un ÉCLAT BLEU, sans forme et sans sens. « D'où
vient le petit bout de bleu ? », a demandé JB, et c'est la bonne question :
un signe qu'on ne reconnaît pas est pire que pas de signe du tout.
À sept pour cent des bords, il tombe entièrement à l'intérieur du disque, sur
la diagonale où l'œil le cherche. L'anneau sombre le détache de la photo,
quelle qu'elle soit — on ne sait pas ce qu'il y a dessous. */
.medaillon__appareil {
position: absolute; right: 7%; bottom: 7%; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: var(--r-rond);
background: var(--geste); color: var(--geste-encre);
box-shadow: 0 0 0 2px rgba(18, 17, 16, .45); pointer-events: none; }
.medaillon__appareil svg { width: 17px; height: 17px; }
.medaillon__cercle:has(.medaillon__image:not([hidden])) .medaillon__appareil {
display: none; }
/* ------------------------------------------------------------------
DES PORTES, ET NON DES FILTRES
------------------------------------------------------------------
`rangee-rubriques` fait défiler des chips courtes ; quatre destinations à
libellés longs y débordaient, et la dernière — « Mon compte » — sortait de
l'écran, coupée derrière une barre de défilement. On n'atteint pas une page
dont on ne voit pas le nom.
Empilées, chacune pleine largeur, avec la hauteur de cible : elles se lisent
toutes, et le pouce ne vise plus. Au-delà de 40 rem elles se rangent en
grille — la place existe alors, et quatre lignes pleine largeur y feraient
vide. */
.rubriques-empilees { display: grid; gap: var(--e2); margin: var(--e6) 0 var(--e7); }
.rubriques-empilees > a {
display: flex; align-items: center; gap: var(--e2);
min-height: var(--cible); padding: 0 var(--e4);
border: 1px solid var(--filet); border-radius: var(--r-moyen);
background: var(--surface); color: var(--encre);
font-family: var(--sans); font-size: var(--t-corps);
font-weight: var(--g-appuyee); text-decoration: none; }
.rubriques-empilees > a:hover { border-color: var(--encre-douce);
background: var(--filet-clair); }
.rubriques-empilees .compteur { margin-left: auto; }
@media (min-width: 40rem) {
.rubriques-empilees { grid-template-columns: repeat(2, 1fr); }
}
.greffe--geste > summary {
min-height: var(--cible); padding: 0 var(--e4);
border: 1px solid var(--filet); border-radius: var(--r-moyen);
background: var(--surface); }
.greffe--geste > summary:hover { border-color: var(--encre-douce);
background: var(--filet-clair); }
.greffe--motif > summary { display: inline-flex; align-items: center;
width: fit-content; margin-left: auto; min-height: 36px; padding: 0 var(--e3);
border: 1px solid var(--filet); border-radius: var(--r-moyen);
background: var(--surface); color: var(--encre-douce);
font-weight: var(--g-normale); font-size: var(--t-meta); list-style: none; }
.greffe--motif > summary::-webkit-details-marker { display: none; }
.greffe--motif > summary:hover { color: var(--encre);
border-color: var(--encre-douce); background: var(--filet-clair); }
/* ==================================================================
L'AGENDA
==================================================================
Deux voix sur le même écran, et c'est délibéré. L'événement SE LIT : il
prend la romaine du faire-part, comme le carnet. Ce qui l'entoure — le
découpage en moments, les jauges, le carnet d'invités — S'UTILISE, et reste
en linéale.
La jauge est le seul objet neuf. Un filet plein sur un filet clair, deux
pixels de haut : elle dit d'un coup d'œil s'il reste de la place, sans
couleur d'alerte ni pourcentage géant. Le chiffre exact est écrit à côté —
une barre seule ne se lit pas à 80 ans, et c'est le chiffre que
l'organisateur vient chercher. */
.creer-evenement { margin: 0 0 var(--e6); }
.creer-evenement summary { cursor: pointer; min-height: var(--cible);
display: flex; align-items: center; font-weight: var(--g-forte); font-size: var(--t-corps); }
.creer-evenement .formulaire { padding: var(--e2); }
/* Ces champs sont couverts par la règle générale des champs, en tête de cette
feuille. Le bloc qui les redéclarait ici a été retiré : son raccourci
`background:` écrasait `background-repeat`, et le chevron des listes
déroulantes se répétait alors une douzaine de fois en travers du champ. */
.jauge { display: block; margin: var(--e1); }
/* SANS piste : elle traversait la colonne à douze pixels du filet de la ligne,
si bien que trois moments au programme donnaient six traits. Le remplissage
seul dit la même chose — un segment court se lit comme une proportion — et le
chiffre à côté porte déjà le compte exact. */
.jauge__barre { background: none; }
.jauge__remplissage { display: block; height: 2px; background: var(--encre-douce); }
.jauge__chiffre { display: block; font-size: var(--t-meta);
color: var(--encre-douce); font-variant-numeric: tabular-nums; }
/* ==================================================================
L'ALBUM
==================================================================
Voix ÉDITORIALE : un album de famille se regarde, il ne se gère pas. La
grille elle-même reste muette — pas de cadre, pas d'ombre, pas de coin
arrondi. Deux pixels de blanc séparent les photos, et c'est tout : le chrome
autour d'une image ne dit rien de plus que l'image. */
/* ------------------------------------------------------------------
`.album__titre` PORTAIT DEUX SENS, ET LE SECOND GAGNAIT
------------------------------------------------------------------
Elle était déclarée ici pour le TITRE de l'écran — `Album ` — et
trois cents lignes plus bas pour la LÉGENDE sous une vignette : corps micro,
encre douce, coupée à l'ellipse. Même spécificité, la seconde plus bas dans
le fichier : c'est elle qui l'emportait, et le titre de l'écran s'affichait
en taille de légende, en gris, sans sa marge.
JB, le 30 août 2026 : « le Album du début mal aligné, police étrange, on n'y
comprend pas grand-chose ». Rien dans le gabarit ne le disait — le `