/* =============================================================================
   iris.css — OBTURATEUR PHOTO au survol des pastilles rondes
   =============================================================================
   Repris de la maquette figee : style.css l. 2787-2832, a la ligne pres.
   Les commentaires d'origine sont conserves : ils portent des allers-retours
   avec Fix (geometrie fournie en SVG le 06/07, cycle accelere le 07/07) que
   plus aucune autre source ne documente.

   ⚠️ FICHIER PARTAGE, mappe en SECOND d'une paire (§2.5 du guide). Deux types le
   consommeront : `pg_dest` (les pastilles de destinations) et, plus tard, la
   grille des photographes (`.gd-carte__pic`). Il ne porte donc AUCUNE regle de
   mise en page propre a l'un d'eux — seulement l'obturateur et son accueil.
   ⚠️ Au TROISIEME consommateur, le promouvoir dans `components.css` (seuil du
   §5.2). Pas avant : deux usages ne font pas un composant global.

   ⚠️ CE N'EST PAS UNE ANIMATION AU DEFILEMENT. Elle ne depend ni du moteur RAF
   (D118) ni d'un IntersectionObserver : c'est un `:hover` pur, arme par une
   injection SVG au chargement. Elle est donc portee des maintenant, contrairement
   au compteur des chiffres cles et au sequencement de section.

   ⚠️ LA PAGE EQUIPE EN EST EXCLUE, et c'est une decision de Fix du 07/07 ecrite
   dans le code : `ON_applyIris()` ne selectionne QUE `.pg-dest__pic, .gd-carte__pic`.
   Deux commentaires de la maquette affirment pourtant l'inverse (« injecte dans
   les portraits equipe ET toutes les pastilles ») — ils sont PERIMES. Le code
   fait foi. Ne pas « reparer » `equipe-grille.css` en s'appuyant dessus : son
   propre encadre explique deja pourquoi il n'y a pas d'obturateur la-bas.
   ============================================================================= */

/* l'iris DÉBORDE de 8% : l'anneau (r=96) et les ancres des courbes passent JUSTE HORS du cercle
   de l'image (retour Fix 06/07 : « agrandir le cercle pour qu'on ne le voie pas »).
   width/height EXPLICITES : un svg positionné en absolu ne s'étire pas avec inset seul. */
.iris{ position:absolute; left:-20%; top:-20%; width:140%; height:140%; max-width:none; z-index:5;
  pointer-events:none; opacity:0; }   /* AGRANDI ~140% (retour Fix : combler le vide dans les coins carrés) ; z-index:5 : passe AU-DESSUS du viseur reflex au survol */
.iris__rot{ transform-origin:50% 50%; }
.iris__blade{ fill:var(--noir); transform:translateX(104px); }   /* lamelles NOIRES (retour Fix 06/07) */
/* les COURBES noires n'apparaissent qu'autour de la fermeture (fondu) : pendant le glissement,
   elles traverseraient l'ouverture (elles ne peuvent pas passer "sous" la lamelle voisine en SVG) */
/* traits ULTRA-FINS (épaisseur alignée sur le SVG v2 de Fix : 0.5px dans une box 192.5 ≈ 0.6 ici,
   soit ~1px affiché) et GRIS, VISIBLES pendant tout le cycle (retours Fix 06/07 : on doit voir
   les lamelles ET leur contour — seul le cercle extérieur ne doit pas se voir) */
.iris__edge{ fill:none; stroke:#c9c9c9; stroke-width:.6; stroke-linecap:round;
  transform:translateX(104px); }   /* contours GRIS CLAIR sur lamelles noires (retour Fix 06/07) */
.iris__ring{ display:none; }   /* anneau extérieur RETIRÉ (retour Fix 07/07) — partout (équipe, pastilles, photographes) */
/* cycle ACCÉLÉRÉ à 0.55s (retour Fix 07/07 ; était 0.75s). Déclencheur GÉNÉRIQUE .iris-trigger (posé par
   irisEverywhere de main.js sur la carte parente ou la pastille elle-même) : portraits équipe
   ET pastilles rondes .pg-dest__pic de tout le site. */
.iris-trigger:hover .iris{
  animation:irisFade .55s cubic-bezier(.6,0,.35,1) 1 both; }
.iris-trigger:hover .iris .iris__rot{
  animation:irisTurn .55s cubic-bezier(.6,0,.35,1) 1 both; }
.iris-trigger:hover .iris .iris__blade{
  animation:irisSlide .55s cubic-bezier(.6,0,.35,1) 1 both; }
.iris-trigger:hover .iris .iris__edge{
  animation:irisSlide .55s cubic-bezier(.6,0,.35,1) 1 both; }   /* même glissement que la surface */
/* PHOTO -> NOIR & BLANC révélé à la réouverture, puis RETOUR EN COULEUR LENT en fin d'animation
   (retours Fix 06/07 : « comme une photo qu'on vient de prendre », « passage gris -> couleur un
   peu plus long ») — bascule gris PENDANT que l'obturateur couvre la photo (fenêtre fermée du
   cycle .75s = 14-20% de 2.2s) ; gris tenu jusqu'à 45% puis retour couleur sur ~1.1s */
.iris-trigger:hover .iris-pic{
  animation:picFlash 2.2s ease 1 both; }
/* les pastilles rondes accueillent l'iris : découpe circulaire + repère local */
.pg-dest__pic{ position:relative; overflow:hidden; }
/* retour N&B -> couleur DOUX (retour Fix 06/07) : ease-in-out sur ~1.3s, départ imperceptible */
@keyframes picFlash{ 0%{filter:grayscale(0)} 14%{filter:grayscale(0)} 20%{filter:grayscale(1)}
  40%{filter:grayscale(1); animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
  98%{filter:grayscale(0)} 100%{filter:grayscale(0)} }
@keyframes irisFade{ 0%{opacity:0} 7%{opacity:1} 90%{opacity:1} 100%{opacity:0} }
/* rotation d'ensemble INVERSÉE au retour : aller-retour = le « clic-clac » (retour Fix 06/07) */
@keyframes irisTurn{ 0%{transform:rotate(16deg)} 42%{transform:rotate(0deg)}
  58%{transform:rotate(0deg)} 100%{transform:rotate(16deg)} }
@keyframes irisSlide{ 0%{transform:translateX(104px)} 42%{transform:translateX(0)}
  58%{transform:translateX(0)} 100%{transform:translateX(104px)} }
@media (prefers-reduced-motion: reduce){ .iris{ display:none; }
  .iris-trigger:hover .iris-pic{ animation:none; } }
