/* ============================================================
CARTE DE PERSONNE — le bureau, et demain le trombinoscope
NOUVEAU COMPOSANT (bloc 3 de l'É4, 06/08). Le README du DS v1 la listait
parmi les composants DIFFÉRÉS (« carte de profil adhérent ») : elle arrive
ici parce que la page d'accueil la réclame, avec neuf occurrences dès le
premier écran et une page « Trombinoscope adhérents » qui la reprendra.
RELEVÉ (sonde `probe-home-mesures.js`, 06/08) :
photo 216 × 345 environ, recadrée, coins du système
nom Roboto Slab 24 / 800, #04041e (le bleu nuit), centré, lh 1
fonction Roboto 18 / 400, #444444, centré, marge haute 10 px
liens deux icônes en accent, centrées
LE NOM EST EN DEUX TEMPS : prénom puis NOM en capitales. Le live l'obtenait
avec un `
` et huit `` imbriqués saisis à la main ; ici c'est le
composant qui le décide, et le champ ne porte que du texte.
============================================================ */
.lcdi-person {
display: flex;
flex-direction: column;
gap: var(--space-3);
text-align: center;
height: 100%;
}
.lcdi-person__photo {
display: block;
overflow: hidden;
border-radius: var(--radius-m);
background: var(--surface-warm);
aspect-ratio: 5 / 6; /* 216 × 345 relevé ≈ 5:6 après recadrage */
}
.lcdi-person__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--person-focus, 50% 20%); /* les portraits sont cadrés haut :
le visage ne doit pas se faire couper */
transition: transform var(--t-scene) var(--ease-brand);
}
.lcdi-person:hover .lcdi-person__photo img { transform: scale(var(--zoom-media)); }
.lcdi-person__name {
margin: 0;
font-family: var(--font-display);
font-size: var(--type-subtitle); /* 24 px relevé */
font-weight: 800; /* relevé : la seule graisse 800 du texte
courant, elle vient du bloc d'origine */
line-height: var(--lh-flat);
color: var(--accent-alt); /* #04041e, le bleu nuit de la DA */
}
.lcdi-person__given,
.lcdi-person__family { display: block; }
.lcdi-person__family { text-transform: uppercase; }
.lcdi-person__role {
margin: 0;
font-size: var(--type-body);
color: var(--text-body);
}
/* ============================================================
L'ORGANISATION — AMENDEMENT DU BLOC T5 (15/08), pour l'annuaire du club
La carte du bureau porte UNE ligne sous le nom : le rôle dans l'association.
La carte d'annuaire en porte DEUX, parce que la donnée du membre en est
deux : `fonction` et `societe` (usermeta relevées, 180 comptes renseignés).
Les écraser en une seule ligne (« Notaire associé, Sphère Notaires ») aurait
fabriqué une chaîne que personne ne saisit et que rien ne peut trier.
HIÉRARCHIE : la FONCTION reste sur `__role` (elle dit ce que fait la
personne) ; la SOCIÉTÉ prend cette ligne, un cran plus discrète — sans
descendre sous le seuil de lecture, donc `--text-body` et non `--text-soft`,
la différence se fait à la taille et à la graisse.
============================================================ */
.lcdi-person__org {
margin: 0;
font-size: var(--type-caption);
font-weight: var(--weight-medium);
color: var(--text-body);
}
.lcdi-person__links {
display: flex;
justify-content: center;
gap: var(--space-4);
margin-top: auto;
padding-top: var(--space-2);
}
.lcdi-person__links a {
display: inline-flex;
color: var(--icon);
transition: color var(--t-quick) var(--ease-brand), transform var(--t-quick) var(--ease-brand);
}
.lcdi-person__links a:hover { color: var(--link-hover); transform: translateY(var(--lift-btn)); }
.lcdi-person__links a:focus-visible { box-shadow: var(--focus-ring); }
.lcdi-person__links svg { width: 30px; height: 30px; fill: currentColor; }
/* Le galet appliqué au portrait : variante d'appel, réservée aux compositions
qui l'assument (le relevé pose 20/20/90/20 sur le cadre de la diapositive). */
.lcdi-person--galet .lcdi-person__photo { border-radius: var(--signature-galet); }
/* ============================================================
VARIANTE ANNUAIRE — AMENDEMENT DU BLOC T5 (15/08)
La carte du bureau est une pièce d'accueil : neuf occurrences, grandes, dans
un carrousel. La carte d'annuaire est une pièce de LISTE : 143 occurrences
dans une grille, dans la colonne de contenu de l'espace. Elle garde
exactement la même anatomie — c'est la même personne, la même photo, le même
nom en deux temps — et resserre ce qui doit l'être.
CE QUI CHANGE, ET RIEN D'AUTRE : le nom descend d'un cran de l'échelle (24 →
20 px), les icônes de lien passent de 30 à 22 px, et la gouttière interne se
resserre. Aucune couleur, aucune forme, aucune police ne bouge.
LE REPLI SANS PHOTO : 61 des 235 comptes du clone n'ont pas de portrait. La
case garde alors le MÊME RECTANGLE 5:6 — sans quoi la grille se déchirerait
à chaque trou — et reçoit le monogramme de `avatar.css`, étiré à la boîte.
============================================================ */
.lcdi-person--annuaire { gap: var(--space-2); }
.lcdi-person--annuaire .lcdi-person__name { font-size: var(--type-h5); }
.lcdi-person--annuaire .lcdi-person__links { gap: var(--space-3); padding-top: var(--space-1); }
.lcdi-person--annuaire .lcdi-person__links svg { width: 22px; height: 22px; }
/* Le monogramme occupe la case entière : `avatar.css` donne la peinture et la
proportion de lettre, la case donne la boîte. */
.lcdi-person__photo > .lcdi-avatar {
--avatar-size: 100%;
width: 100%;
height: 100%;
border-radius: 0;
/* La lettre se dimensionne ici sur la LARGEUR de la case (une case en % ne
peut pas nourrir le `calc()` du composant) : 34 % rend ~64 px dans une
case de 190 px, soit la présence d'un visage sans devenir une affiche. */
font-size: 34cqw;
}
/* La case devient un conteneur de requête pour que `cqw` ait un référent ;
sans cette ligne, l'unité retomberait sur le viewport. */
.lcdi-person__photo { container-type: inline-size; }
@media (max-width: 767px) {
.lcdi-person__name { font-size: var(--type-h5); }
.lcdi-person__links svg { width: 26px; height: 26px; }
.lcdi-person--annuaire .lcdi-person__name { font-size: var(--type-h6); }
.lcdi-person--annuaire .lcdi-person__role { font-size: var(--type-caption); }
.lcdi-person--annuaire .lcdi-person__org { font-size: var(--type-fine); }
}