/* Page « L'équipe » — feuille DÉDIÉE (ISIDORE, 02/10/2026).
   POURQUOI PAS DANS style.css : la feuille globale est demandée par les 126
   autres pages avec un paramètre de version. La modifier oblige à changer ce
   paramètre PARTOUT, donc à redéployer tout le site — pour un aperçu. Une
   feuille à part ne touche aucune autre page et se jette aussi facilement.
*/

.equipe-bandeau { margin: 0; }
.equipe-bandeau__image { width: 100%; height: auto; display: block; }
.equipe-bandeau__mention,
.equipe-liste__mention { font-size: var(--fs-micro); line-height: 1.5; color: var(--c-muted);
  max-width: var(--container-max); margin: .75rem auto 0; padding: 0 var(--container-gutter); }

.equipe-olivier { display: flex; gap: var(--container-gutter); align-items: flex-start;
  flex-wrap: wrap; margin-top: 1.5rem; }
.equipe-olivier__photo { width: 200px; height: 200px; object-fit: cover;
  border-radius: 50%; flex: 0 0 auto; }
.equipe-olivier__texte { flex: 1 1 22rem; }

.equipe-grille { list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: grid; gap: var(--container-gutter);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.equipe-carte { text-align: center; }

/* L'image vit dans un <button> : focusable au clavier NATIVEMENT, sans
   tabindex. On lui retire l'apparence de bouton de formulaire, mais JAMAIS
   l'anneau de focus — c'est le seul repère d'une personne qui tabule.        */
.equipe-carte__bascule { background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; display: block; width: 100%; }
.equipe-carte__portrait { width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 50%; display: block; }
.equipe-carte__bascule:focus-visible { outline: 3px solid currentColor;
  outline-offset: 3px; border-radius: 50%; }

.equipe-carte__nom { margin: .75rem 0 .15rem; font-size: var(--fs-lede); }
.equipe-carte__role { margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
.equipe-carte__nature { margin: .25rem 0 0; font-size: var(--fs-micro); color: var(--c-muted); }

/* Les marques de chantier de l'aperçu : visibles, et elles doivent l'être.
   Elles disparaîtront avec les textes définitifs, pas avant.                 */
.provisoire { outline: 1px dashed currentColor; outline-offset: 4px; }

@media (max-width: 480px) {
  .equipe-grille { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .equipe-olivier__photo { width: 140px; height: 140px; }
}

/* AJOUTÉ APRÈS MESURE (ISIDORE, 02/10/2026) : cette feuille écrivait 33 valeurs
   EN DUR et n'utilisait AUCUNE des 26 variables de la charte du site. C'est le
   défaut exact que décrivent les outils de design pour agents : un agent qui
   écrit une interface sans référence produit du générique qui ne tient pas à la
   charte. Les tailles, couleurs et gouttières viennent désormais de style.css.  */
.equipe-carte__image-ia { margin: .3rem 0 0; font-size: var(--fs-micro);
  color: var(--c-muted); line-height: 1.35; }

/* Grille : 3 colonnes à 1280, 2 à 768, 1 à 360, vignettes CENTRÉES (Nestor, 12h33,
   point 1 : à 800 px elles s'empilaient en une colonne alignée à gauche, 60 % de la
   largeur vide). Le `auto-fill` avec un minimum de 150 px produisait 5 colonnes au
   large et 1 seule dans le volet : on fixe le nombre par palier au lieu de le
   laisser déduire d'une largeur minimale.                                          */
.equipe-grille { grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 64rem; margin-inline: auto; justify-items: center; }
.equipe-carte { max-width: 16rem; }
@media (min-width: 768px)  { .equipe-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .equipe-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Vide d'un écran entre la légende du bandeau et le portrait (Nestor, point 3) :
   les sections héritaient du grand `--section-pad-y` du site, pensé pour des blocs
   pleine page. Resserré pour cette page seulement.                                 */
.equipe-intro, .equipe-liste, .equipe-ecrire, .equipe-noms { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.equipe-bandeau + .equipe-intro { padding-top: clamp(1rem, .5rem + 1.5vw, 2rem); }

.equipe-carte__fiche { margin: .4rem 0 0; font-size: var(--fs-small); }
.fiche-poste { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.fiche-poste__corps { max-width: var(--container-prose); }
.fiche-poste__corps h2 { margin-top: 2rem; font-size: var(--fs-lede); }
.fiche-poste__retour { font-size: var(--fs-small); }

/* ── Médaillons qui pivotent au survol (demande d'Olivier, 02/10/2026) ──────
   Le dos porte le portrait détendu de Sidonie. Trois soins :
   · le dos est aria-hidden et son texte alternatif est vide : un lecteur
     d'écran lirait sinon deux fois la même personne, et la mention
     d'intelligence artificielle est déjà portée par la face avant ;
   · le pivot répond au SURVOL et au FOCUS CLAVIER : une interaction qui
     n'existe qu'à la souris n'existe pas pour qui tabule ;
   · prefers-reduced-motion coupe l'animation, pas la fonction. Le dos reste
     atteignable au clic. Une personne sensible au mouvement ne doit pas
     perdre le contenu, seulement le mouvement.                              */
.equipe-carte__medaillon { display: block; position: relative; width: 100%;
  aspect-ratio: 1 / 1; transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease); }
.equipe-carte__face { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; backface-visibility: hidden; }
.equipe-carte__face--dos { transform: rotateY(180deg); }
.equipe-carte__bascule:hover .equipe-carte__medaillon,
.equipe-carte__bascule:focus-visible .equipe-carte__medaillon,
.equipe-carte__bascule[aria-pressed="true"] .equipe-carte__medaillon {
  transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .equipe-carte__medaillon { transition: none; }
}

/* Clip de présentation de l'agent (fiche « L'équipe ») */
.equipe-carte__clip { margin: 1rem auto 0; max-width: 16rem; }
.equipe-carte__clip video { width: 100%; height: auto; display: block; }
.equipe-carte__clip figcaption { margin-top: .5rem; text-align: left; font-size: var(--fs-small); color: var(--c-muted); }