/* ==========================================================
   UGCS — Personnes (1.6.2)
   ==========================================================
   Feuille du bloc ugcs/personnes (front + aperçu éditeur).
   Mise en forme de UGCS_Annuaire_Front::rendre_carte() et de
   l'en-tête partagé (rendre_entete()).

   1.6.1 : la carte devient HORIZONTALE partout (photo à gauche,
   texte à droite), d'après la maquette ChatGPT transmise par le
   Product Owner le 2026-10-19. Jusqu'à la 1.6.0, elle était
   verticale (photo 16:9 au-dessus du texte) et ne passait en
   horizontal qu'en mobile (≤ 767px d'écran).

   Corrections imposées par le Product Owner à la référence :
     - rayon 8px en dur (décision 1.4.0) au lieu de
       var(--ugcs-radius, 4px) : aucune variable de rayon
       n'existe dans le thème enfant ni dans l'extension, on
       n'en crée pas ;
     - #EDE7EF (gris clair de la charte) pour la bordure et le
       fond d'attente de la photo ; #A35BB5 seulement en
       ornement (contour de focus), jamais pour du texte
       (contraste ≈ 4,45:1 < 4,5:1, règle de
       assets/css/personne.css) ;
     - aucune section __contact (téléphone et courriel exclus) ;
     - le filet violet sous le nom (__identity::after) disparaît :
       la règle est supprimée plutôt que masquée ;
     - SEUILS SUR LA LARGEUR RÉELLE DU BLOC (container queries),
       pas sur la largeur de l'écran. Constat mesuré sur
       /club/equipe/ : le bloc y est posé dans un accordéon
       Kadence, et à 375px d'écran la grille ne fait que 214px.
       Avec les media queries de la référence, la colonne texte
       tombait à ≈ 75px et les mots se coupaient en plein milieu
       (« Gw/ena/elle », « Prés/iden/t ») sous l'effet du
       word-break: break-word du thème.

   Corrections propres à l'intégration, expliquées sur place :
     - photo en position absolue dans son cadre : c'est le
       TEXTE (ou la hauteur minimale) qui fixe la hauteur de la
       carte, jamais le rapport de la photo — sinon un portrait
       très allongé (ou l'image de repli, 640 × 360 déclarés)
       étirerait la carte ;
     - grille en <ul>/<li> (sémantique de liste) : marges et
       puces du thème neutralisées ;
     - nom en capitales par le CSS (inchangé depuis la 1.4.0) ;
     - le survol du lien « Voir la fiche » garde le violet
       principal, seule la flèche bouge ;
     - prefers-reduced-motion : transitions ET déplacements de
       survol supprimés.

   Structure :

     <section class="ugcs-people">            ← conteneur « ugcs-personnes »
       <header class="ugcs-people__header">   (__kicker, __title)
       <ul class="ugcs-people__grid">
         <li class="ugcs-people__item">       ← conteneur « ugcs-personne-carte »
           <div class="ugcs-person-card">
             __media > __photo
             __body  > __identity (__firstname, __lastname)
                       __functions (__function-primary, -secondary)
                       __footer > __detail (… __arrow)

   Pourquoi DEUX conteneurs : une requête @container interroge
   l'ancêtre, jamais l'élément lui-même. La section pilote donc
   les colonnes de la grille (son enfant), et chaque <li> pilote
   la carte qu'il contient. Les deux sont nommés : une requête ne
   peut pas viser par erreur un conteneur posé plus haut par le
   thème ou par un autre bloc.

   GRILLE (largeur de la section .ugcs-people)
     < 640px : une colonne ; ≥ 640px : deux colonnes, gap 24px.
     À 640px tout juste, chaque carte fait (640 − 24) / 2 = 308px.

   CARTE (largeur du <li>), quatre paliers :

   ≥ 480px : LARGE (valeurs desktop de la référence)
   ┌────────────┬──────────────────────────────────┐
   │            │ Prénom NOM            (1.25rem)  │
   │   PHOTO    │ Fonction                         │
   │   160px    │ Fonction 2                       │
   │            │                                  │
   │ min 200px  │ Voir la fiche →                  │
   └────────────┴──────────────────────────────────┘
                  padding 24px 26px

   300 → 479px : COMPACTE (variante ≤ 520px de la référence) —
   aussi la valeur de BASE, voir « Repli » plus bas
   ┌─────────┬───────────────────────┐
   │  PHOTO  │ Prénom NOM (1.05rem)  │
   │  105px  │ Fonction              │
   │ min 145 │ Voir la fiche →       │
   └─────────┴───────────────────────┘
               padding 16px

   200 → 299px : ÉTROITE (accordéon de /club/equipe/ en mobile)
   ┌──────┬─────────────┐
   │PHOTO │ Prénom      │
   │ 78px │ NOM (1rem)  │
   │min108│ Fonction    │
   │      │ Voir la     │
   │      │ fiche →     │
   └──────┴─────────────┘
            padding 12px

   < 200px : EMPILÉE (photo AU-DESSUS du texte)
   ┌───────────┐
   │   PHOTO   │
   │  carrée   │
   │  (1 / 1)  │
   ├───────────┤
   │ Prénom    │
   │ NOM       │
   │ Fonction  │
   │ Voir la   │
   │ fiche →   │
   └───────────┘
     padding 12px

   Choix des seuils :
     - 480px (large) : en dessous, 160px de photo + 52px de
       marges laisseraient moins de 266px au texte, trop peu pour
       des noms en 1.25rem ;
     - 300px (étroite), et non ≈ 360px comme envisagé : à 360px,
       la grille à deux colonnes (cartes de 308 à 359px entre
       640 et 743px de section) basculerait dans le palier
       étroit, la photo passant brutalement de 160px à 78px au
       moment où la grille se dédouble. Sous 300px, aucune carte
       de la grille à deux colonnes n'est concernée (308px
       minimum), et la compacte laisse encore 300 − 2 − 105 − 32
       = 161px au texte ;
     - 78px de photo et 12px de marges en palier étroit : sur les
       214px mesurés dans l'accordéon, il reste
       214 − 2 (bordures) − 78 − 24 = 110px au texte, assez pour
       ne plus couper les prénoms et les fonctions courantes.
       Hauteur minimale 108px : même proportion que la compacte
       (105 / 145) ;
     - 200px (empilée), décision du Product Owner du 2026-10-19 :
       mesuré sur un mobile de 375px avec le texte agrandi à 200 %
       (zoom du texte seul de Firefox, taille de police d'Android),
       les marges du thème, en rem, réduisent l'accordéon et la
       carte à 128px ; côte à côte, il ne restait que
       128 − 2 − 78 − 24 = 24px au texte (colonne de 48px mesurée,
       marges comprises) : une lettre par ligne et le lien « Voir
       la fiche » ROGNÉ par l'overflow. Une vraie perte pour un
       usage d'accessibilité légitime, pas un cas limite. Empilée, le texte reprend toute
       la largeur : 128 − 2 − 24 = 102px. Les seuils étant en px, le
       zoom du texte ne les déplace pas : c'est bien la largeur
       réelle de la carte qui déclenche le palier.
       Effet de bord voulu : sur un mobile de 360px (carte ≈ 199px
       dans l'accordéon de /club/equipe/), la carte est aussi
       empilée — 173px de texte au lieu de 95, plus de nom coupé.

   Repli sans container queries (navigateurs anciens) : les
   règles @container sont ignorées en bloc. La base est donc la
   carte COMPACTE et la grille à UNE colonne : lisible dès que la
   carte dépasse ≈ 300px, à défaut d'être optimale sur grand
   écran. En deçà (accordéon de /club/equipe/ en mobile), le texte
   retombe à ≈ 75px et retrouve les coupures en plein mot : défaut
   accepté, limité aux navigateurs antérieurs à Chrome 105,
   Safari 16 et Firefox 110 (2022-2023).

   LIMITES CONNUES, acceptées par le Product Owner (2026-10-19) :
   - Coupures en plein mot possibles en palier ÉTROIT (carte de
     200 à 299px, ≈ 110 à 210px de texte) pour un nom en
     capitales grasses de plus de dix lettres. Rien n'est perdu ni
     rogné (le word-break: break-word de Kadence passe à la
     ligne), seulement coupé. Mesures de la 1.6.1 avant le palier
     empilé : « BLANCHARD » coupé à 360px d'écran, 14 mots à
     320px ; ces deux largeurs tombent désormais dans le palier
     empilé.
   - Effondrement à largeur 0 dans un parent dimensionné par son
     contenu. container-type: inline-size sur la <section> annule
     sa largeur intrinsèque : son width: 100% ne la sauve que si le
     parent a une largeur définie. Concernés : un Groupe en largeur
     « Ajuster » dans une Rangée ou une Pile du cœur ; une Rangée
     sans retour à la ligne (le bloc y rétrécit fortement) ; une
     colonne Kadence en direction horizontale. Sans risque :
     colonnes et grille du cœur, Row Layout et accordéon Kadence,
     Rangée avec retour à la ligne, Pile en enfant direct. Aucun
     cas sur le site au 2026-10-19 ; si un jour un tel montage
     s'impose, la parade est une enveloppe intérieure portant le
     conteneur (touche le balisage de render.php).

   Une seule personne : première colonne, ni centrée ni étirée
   (comportement naturel de la grille, rien à forcer).

   Règles de conduite (celles des autres blocs de l'annuaire) :
   - tout est rangé sous .ugcs-people et ses classes : aucune
     règle globale, aucun style h2/h3/h4 générique, pas de
     font-family (la typographie vient du thème : police du
     Customizer Kadence) ;
   - variables LOCALES au bloc, jamais sur :root ;
   - espacements critiques en !important (.entry-content p, ul,
     li, img du thème plus spécifiques que nos classes) ;
   - écart entre cartes porté par le gap de la grille SEUL :
     aucune marge sur les cartes ni sur les <li>.
   ========================================================== */


/* ===== VARIABLES ET CONTENEUR ===== */

.ugcs-people {
	--ugcs-purple: #5B2167;
	--ugcs-purple-light: #A35BB5;
	--ugcs-border: #EDE7EF;
	--ugcs-dark: #171934;
	--ugcs-white: #FFFFFF;

	width: 100%;

	/* Conteneur de la grille : voir « Pourquoi DEUX
	   conteneurs » dans l'en-tête. */
	container-name: ugcs-personnes;
	container-type: inline-size;
}

.ugcs-people *,
.ugcs-people *::before,
.ugcs-people *::after {
	box-sizing: border-box;
}


/* ===== EN-TÊTE DU BLOC =====
   Mêmes valeurs que l'en-tête de l'Organigramme
   (blocks/organigramme/style.css) : un seul style d'en-tête pour
   les blocs de l'annuaire. Taille du titre : celle du thème. */

.ugcs-people__header {
	margin: 0 0 2.75rem !important;
}

.ugcs-people__kicker {
	margin: 0 0 0.5rem !important;
	color: var(--ugcs-purple);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ugcs-people__title {
	margin: 0 !important;
	color: var(--ugcs-purple);
}

/* Même resserrement que l'en-tête de l'Organigramme en mobile
   (blocks/organigramme/style.css) : l'en-tête suit le seuil
   d'écran du reste du site, seules la grille et la carte
   suivent la largeur du bloc. */
@media (max-width: 767px) {

	.ugcs-people__header {
		margin-bottom: 2rem !important;
	}
}


/* ===== GRILLE =====
   Base : une colonne (repli sans container queries compris).
   Deux colonnes dès que la SECTION fait 640px. */

.ugcs-people__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@container ugcs-personnes (min-width: 640px) {

	.ugcs-people__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Le <li> est la cellule de grille : aucune marge (l'écart est
   porté par le gap seul), aucune puce. C'est aussi le conteneur
   qui mesure la largeur réelle de SA carte. */
.ugcs-people__item {
	display: block;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	container-name: ugcs-personne-carte;
	container-type: inline-size;
}


/* ===== CARTE =====
   Les quatre dimensions qui changent d'un palier à l'autre sont
   des variables locales à la carte : chaque palier (plus bas) ne
   redéfinit que ces variables. Valeurs de base = palier
   COMPACT (voir « Repli » dans l'en-tête).

     --ugcs-carte-photo    largeur de la colonne photo
     --ugcs-carte-hauteur  hauteur minimale de la carte
     --ugcs-carte-marge    padding du texte
     --ugcs-carte-nom      taille du prénom et du nom */

.ugcs-person-card {
	--ugcs-carte-photo: 105px;
	--ugcs-carte-hauteur: 145px;
	--ugcs-carte-marge: 16px;
	--ugcs-carte-nom: 1.05rem;

	display: grid;
	grid-template-columns: var(--ugcs-carte-photo) minmax(0, 1fr);
	min-width: 0;
	/* height: 100% : deux cartes d'une même rangée gardent la
	   même hauteur (le <li> est étiré par la grille). */
	height: 100%;
	min-height: var(--ugcs-carte-hauteur);
	overflow: hidden;
	background: var(--ugcs-white);
	border: 1px solid var(--ugcs-border);
	border-radius: 8px;
	transition: border-color 180ms ease, transform 180ms ease;
}

@media (hover: hover) {
	.ugcs-person-card:hover {
		border-color: rgba(91, 33, 103, 0.28);
		transform: translateY(-2px);
	}
}

/* Cadre de la photo : étiré sur toute la hauteur de la carte
   (alignement par défaut de la grille), fond gris de la charte
   pendant le chargement. Pas de rayon propre : l'overflow de la
   carte arrondit déjà les deux angles de gauche (ceux du haut
   en palier empilé). */
.ugcs-person-card__media {
	position: relative;
	overflow: hidden;
	width: var(--ugcs-carte-photo);
	min-height: var(--ugcs-carte-hauteur);
	background: var(--ugcs-border);
}

/* Photo (ou image de repli, classe --repli : même traitement)
   posée en absolu dans le cadre, pour qu'elle n'impose jamais sa
   propre hauteur (voir l'en-tête). !important sur les dimensions
   et la marge : .entry-content img du thème (height: auto,
   max-width) écraserait le remplissage du cadre. */
.ugcs-person-card__photo {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0 !important;
	object-fit: cover;
	/* On privilégie le haut du portrait afin de limiter les visages coupés. */
	object-position: center 20%;
	transition: transform 300ms ease;
}

@media (hover: hover) {
	.ugcs-person-card:hover .ugcs-person-card__photo {
		transform: scale(1.015);
	}
}

.ugcs-person-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--ugcs-carte-marge);
}


/* ===== IDENTITÉ =====
   Prénom et nom sur une même ligne, qui passe à la ligne si la
   place manque (flex-wrap) ; l'espace visible vient du gap (le
   blanc entre les deux spans, ignoré par flex, reste lu par les
   lecteurs d'écran et copié).
   Nom en capitales par le CSS seulement (même règle que la carte
   compacte, assets/css/personne.css) : la casse saisie sur la
   fiche reste celle lue par les lecteurs d'écran et copiée. */

.ugcs-person-card__identity {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	margin: 0 0 10px;
	padding: 0;
	overflow-wrap: break-word;
}

/* min-width: 0 et max-width: 100% : chaque span est un élément
   flex, dont la largeur minimale par défaut est celle de son mot
   le plus long — overflow-wrap: break-word ne la réduit pas. Sans
   ces deux règles, un nom long (ou un texte agrandi à 200 %, ou
   un espacement de lettres imposé par l'utilisateur) déborderait
   des ≈ 110px du palier étroit et serait ROGNÉ par l'overflow:
   hidden de la carte (WCAG 1.4.4, 1.4.10, 1.4.12). Le
   word-break: break-word de .entry-content (thème Kadence)
   masque le défaut sur la page, mais pas dans l'aperçu de
   l'éditeur ni hors du contenu : la protection doit venir du
   bloc, pas du thème. */
.ugcs-person-card__firstname,
.ugcs-person-card__lastname {
	min-width: 0;
	max-width: 100%;
	color: var(--ugcs-dark);
	font-size: var(--ugcs-carte-nom);
	line-height: 1.2;
}

.ugcs-person-card__firstname {
	font-weight: 400;
}

.ugcs-person-card__lastname {
	font-weight: 700;
	text-transform: uppercase;
}


/* ===== FONCTIONS ===== */

.ugcs-person-card__functions {
	margin: 0;
	color: var(--ugcs-purple);
	overflow-wrap: break-word;
}

.ugcs-person-card__function-primary {
	font-weight: 600;
	line-height: 1.35;
}

.ugcs-person-card__function-secondary {
	margin-top: 2px;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.35;
}


/* ===== LIEN VERS LA FICHE =====
   Émis seulement si les fiches publiques existent (voir
   rendre_carte()). Poussé en bas de carte (margin-top: auto) :
   les liens de deux cartes voisines restent alignés. */

.ugcs-person-card__footer {
	margin-top: auto;
	padding-top: 16px;
}

/* flex-wrap et max-width : la largeur minimale du lien est
   « fiche » + écart + flèche, soit ≈ 140px avec un texte agrandi
   à 200 %, plus que les ≈ 110px du palier étroit. Sans retour à
   la ligne permis, la fin du lien serait rognée par l'overflow:
   hidden de la carte (WCAG 1.4.4, 1.4.10). Sans effet visible
   tant que le lien tient sur une ligne. */
.ugcs-person-card__detail {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	width: fit-content;
	max-width: 100%;
	color: var(--ugcs-purple);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.ugcs-person-card__arrow {
	display: inline-block;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 180ms ease;
}

/* Survol : la couleur ne change pas (le violet clair, #A35BB5,
   n'atteint pas 4,5:1 sur blanc pour ce texte), seule la flèche
   avance. */
.ugcs-person-card__detail:hover {
	color: var(--ugcs-purple);
}

.ugcs-person-card__detail:hover .ugcs-person-card__arrow {
	transform: translateX(4px);
}

/* Contour de focus : couleur d'ornement (contraste non textuel
   ≥ 3:1 sur blanc). */
.ugcs-person-card__detail:focus-visible {
	outline: 2px solid var(--ugcs-purple-light);
	outline-offset: 4px;
}


/* ===== PALIER LARGE (carte ≥ 480px) =====
   Valeurs desktop de la référence. */

@container ugcs-personne-carte (min-width: 480px) {

	.ugcs-person-card {
		--ugcs-carte-photo: 160px;
		--ugcs-carte-hauteur: 200px;
		--ugcs-carte-marge: 24px 26px;
		--ugcs-carte-nom: 1.25rem;
	}
}


/* ===== PALIER ÉTROIT (carte < 300px) =====
   Photo réduite et marges resserrées pour laisser au moins
   110px au texte (calcul dans l'en-tête). Nom à 1rem : un nom
   en capitales grasses de neuf ou dix lettres tient encore sur
   110px. Fonctions légèrement réduites pour la même raison. */

@container ugcs-personne-carte (max-width: 299.98px) {

	.ugcs-person-card {
		--ugcs-carte-photo: 78px;
		--ugcs-carte-hauteur: 108px;
		--ugcs-carte-marge: 12px;
		--ugcs-carte-nom: 1rem;
	}

	.ugcs-person-card__identity {
		margin-bottom: 8px;
	}

	.ugcs-person-card__function-primary {
		font-size: 0.9rem;
	}

	.ugcs-person-card__function-secondary {
		font-size: 0.85rem;
	}

	.ugcs-person-card__footer {
		padding-top: 12px;
	}
}


/* ===== PALIER EMPILÉ (carte < 200px) =====
   Photo AU-DESSUS du texte (décision PO du 2026-10-19, calcul
   dans l'en-tête). Placé APRÈS le palier étroit, qui s'applique
   aussi sous 200px : ses tailles de texte et ses marges (12px)
   sont conservées, seules la grille et la photo changent ici.

   La photo reste en absolu dans son cadre : c'est le cadre qui
   reçoit une hauteur propre (aspect-ratio carré), faute de
   quoi il mesurerait 0 sans hauteur de rangée à épouser
   (--ugcs-carte-hauteur à 0 : les 108px du palier étroit
   empêcheraient le cadre d'être carré sous 110px de large).
   Rangées « auto 1fr » : si la carte est plus haute que son
   contenu, le corps prend la hauteur restante et le lien reste
   en bas (margin-top: auto du pied). Une carte de moins de
   200px n'existe que dans la grille à une colonne (308px
   minimum à deux colonnes) : simple précaution. */

@container ugcs-personne-carte (max-width: 199.98px) {

	.ugcs-person-card {
		--ugcs-carte-hauteur: 0;

		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}

	.ugcs-person-card__media {
		width: auto;
		aspect-ratio: 1 / 1;
	}
}


/* ===== RÉDUCTION DES ANIMATIONS ===== */

@media (prefers-reduced-motion: reduce) {

	.ugcs-person-card,
	.ugcs-person-card__photo,
	.ugcs-person-card__arrow {
		transition: none;
	}

	.ugcs-person-card:hover,
	.ugcs-person-card:hover .ugcs-person-card__photo,
	.ugcs-person-card__detail:hover .ugcs-person-card__arrow {
		transform: none;
	}
}