/**
 * Motif iris — la signature graphique du site (CDC §4.4).
 * Règle absolue : jamais plus d'une déclinaison ANIMÉE par écran visible.
 */

/* ============================================================
   Commun à complet / médaillon / qr — anneaux, paupière, pupille
   ============================================================ */
.iris svg{width:100%;height:100%;overflow:visible}
.iris__ring{fill:none;transform-origin:center}
.r-out{stroke:var(--teal-200);stroke-width:1;opacity:.55;animation:iris-spin 46s linear infinite}
.r-mid{stroke:var(--teal-600);stroke-width:1.2;opacity:.5;animation:iris-spin 30s linear infinite reverse}
.r-in{stroke:var(--bord-600);stroke-width:1;opacity:.35;animation:iris-spin 22s linear infinite}
@keyframes iris-spin{to{transform:rotate(360deg)}}

.iris__lash{stroke:var(--teal-600);stroke-width:1.1;opacity:.3;transform-origin:center;animation:iris-breathe 6s var(--ease) infinite}
@keyframes iris-breathe{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.035);opacity:.6}}

.iris__pupil{fill:var(--teal-900);transition:r .5s var(--ease)}
.iris__glint{fill:#fff;opacity:.85}
.iris__media{transition:transform 1.1s var(--ease)}
.slide-media{opacity:0;transition:opacity .8s var(--ease)}
.slide-media.is-on{opacity:1}

/* ============================================================
   Complet — hero
   ============================================================ */
/* Réduit (était 660px) : à cette taille, le médaillon (carré, ratio 1:1)
   était le principal responsable de la hauteur du hero — bien plus haut
   que la colonne de texte à côté de lui (grid align-items:center prend la
   hauteur du plus grand des 2) — empêchant les 3 cartes citoyennes
   d'apparaître sans défiler sur une hauteur d'écran standard (2026-08). */
.iris--complet{position:relative;aspect-ratio:1;width:100%;max-width:320px;margin-inline:auto}

/* ============================================================
   Médaillon — en-tête de page interne (CDC §8.2)
   ============================================================ */
/* Réduit (était 170px) : à 170px le médaillon dépassait largement la
   hauteur du bloc titre/fil d'Ariane, ce qui gonflait l'espace au-dessus
   ET en dessous du texte dans l'en-tête (les 2 colonnes sont centrées
   verticalement — la ligne entière prend la hauteur de la plus grande
   des deux). */
.iris--medaillon{position:relative;aspect-ratio:1;width:100%;max-width:120px}
.iris__gradient-fallback{
  position:absolute;top:22%;left:22%;width:56%;height:56%;border-radius:50%;
  background:linear-gradient(120deg,var(--teal-600),var(--teal-900),var(--teal-200));
  background-size:220% 220%;
  animation:iris-gradient-shift 8s var(--ease) infinite;
}
@keyframes iris-gradient-shift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ============================================================
   Filigrane — angle de section (cercles concentriques en border)
   Position laissée au composant hôte (position:relative sur le parent).
   ============================================================ */
.iris--filigrane{
  position:absolute;pointer-events:none;
  width:var(--iris-size,240px);height:var(--iris-size,240px);
  border-radius:50%;border:var(--iris-border,30px) solid var(--iris-color,var(--teal-050));
  opacity:.5;
}

/* ============================================================
   Chargement — pupille qui se contracte/dilate
   ============================================================ */
.iris--chargement{width:64px;height:64px}
.iris__pupil--pulse{animation:iris-pulse 1.6s var(--ease) infinite}
@keyframes iris-pulse{0%,100%{r:42px}50%{r:30px}}

/* ============================================================
   Puce — devant chaque .eyebrow (pseudo-élément, pas de <svg>)
   ============================================================ */
.eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:2px solid var(--teal-600);
  box-shadow:0 0 0 3px var(--teal-050);
  flex:none;
}

/* ============================================================
   QR — l'œil au centre d'un QR code (CDC §11.2)
   ============================================================ */
.iris--qr{width:64px;height:64px}