/* =============================================================================
   GrowLED Academy : 12e composant éditorial, `ga-ed-figure` (2026-08-08).

   Les onze composants de `academy-front-20260808.css` dessinent tous leur
   contenu en CSS ou en SVG inline. Aucun n'affiche de fichier image, et le
   module n'avait jusqu'ici aucun dossier `views/img/`. Ce fichier ajoute le
   seul dispositif qui manquait : une figure illustrée, légendée, agrandissable,
   pour les diagnostics purement visuels que la prose ne peut pas transmettre
   (un plant filé, une chlorose internervaire, un port déterminé).

   Fichier strictement ADDITIF : aucun fichier existant n'est modifié. Charge
   après `academy-front-20260808.css` et `views/dist/academy.css` sur les 3
   pages du module (voir les 3 contrôleurs front) : il n'a rien à surcharger,
   il n'ajoute que des sélecteurs `ga-ed-fig*` qui n'existent nulle part
   ailleurs. Le préfixe reste `ga-ed-` (ÉDitorial), comme les onze autres.

   ── Unités : PAS de rem ──────────────────────────────────────────────────
   Même raison que le fichier précédent : la racine du thème warehouse-e4 est
   en `html{font-size:62.5%}`, donc 1 rem = 10 px et non 16 px dans ce
   contexte réel. Tout est en px.

   ── Anti-décalage de mise en page (CLS) ──────────────────────────────────
   L'image porte ses attributs `width="1264" height="848"` dans le balisage,
   ce qui suffit aux navigateurs modernes pour réserver la place avant le
   chargement. `aspect-ratio: 3 / 2` ci-dessous fait la même réservation pour
   les moteurs qui ignorent le ratio implicite des attributs. Les deux
   ensemble : la figure n'a jamais une hauteur de zéro, donc le texte qui la
   suit ne remonte pas puis ne redescend pas au chargement.

   ── Pièges du thème déjà rencontrés, traités ici ─────────────────────────
   1. `svg{fill:currentcolor}` (deux feuilles du module ybc_blog, chargées
      après le CSS Academy) bat un attribut de présentation `fill="none"`
      posé dans le balisage : sans contre-mesure, l'icône de loupe
      s'afficherait pleine au lieu d'être tracée. Neutralisé par une
      déclaration `fill: none` explicite en CSS sur `.ga-ed-fig-zoom svg`,
      exactement comme `academy-front-20260808.css` le fait pour
      `.ga-ed-mesure svg` et `.ga-ed-aparte svg`.
   2. `#center_column a` (thème) pose une couleur et un soulignement sur tout
      lien : le lien d'agrandissement enveloppe une image, un soulignement
      résiduel y serait un artefact. Neutralisé sur `.ga-ed-fig-zoom`.
   3. `.not-index #columns .content-inner #center_column * {border-color:
      #ececec}` (modules/themeeditor/css/themeeditor_s_1.css, spécificité
      0,2,2,0 sur un sélecteur universel) écrase toute couleur de bordure de
      ce fichier. Ce composant n'utilise DÉLIBÉRÉMENT que des bordures
      neutres (--ga-line #e7e1f0), pour lesquelles le fichier précédent a
      documenté que l'écrasement en #ececec est visuellement imperceptible
      (deux gris très clairs à un delta de 3 unités de canal). Aucune parade
      de spécificité n'est donc nécessaire ici, et le composant n'introduit
      volontairement aucun mécanisme de mise en avant par bordure colorée.
   4. `* { outline: none !important }` (modules/ybc_blog/views/css/blog_all.css,
      un fichier de 487 octets qui ne contient QUE cette règle, chargé après le
      CSS Academy) supprime l'anneau de focus de tout élément focalisable du
      site, Academy comprise. Mesuré en runtime avant parade : le lien de la
      figure était bien atteint au clavier (`:focus-visible` actif, vérifié)
      mais rendait `outline-width: 0px`, donc sans aucun repère visuel pour
      qui navigue au clavier. Une déclaration importante posée sur un
      sélecteur universel ne se bat pas par la spécificité seule : la parade
      ci-dessous est la seule déclaration `!important` de ce fichier, et elle
      est bornée au seul `.ga-ed-fig-zoom:focus-visible`. La règle du module
      ybc_blog n'est PAS corrigée ici : elle affecte tout le site et sa reprise
      dépasse le périmètre de ce composant.

   ── Mouvement ────────────────────────────────────────────────────────────
   Une seule transition décorative (renforcement de la pastille de loupe au
   survol), coupée sous `prefers-reduced-motion: reduce` en fin de fichier.

   Mobile d'abord (390px = cible de référence).
   ============================================================================= */

.ga-ed-figure {
  /* `figure` porte une marge par défaut du user-agent (40px à gauche et à
     droite) qui désalignerait la figure du reste du corps d'étape. */
  margin: 22px 0 20px;
  padding: 0;
  border: 1px solid var(--ga-line, #e7e1f0);
  border-radius: 12px;
  overflow: hidden;
  /* Fond identique à celui intégré dans les illustrations elles-mêmes : le
     cadre et l'image se fondent, aucun liseré clair ne se dessine autour du
     dessin. */
  background: var(--ga-ed-ground, #f7f5fa);
}

.ga-ed-fig-zoom {
  display: block;
  position: relative;
  line-height: 0;
  text-decoration: none;
  border: 0;
  /* Le thème colore et souligne tout lien de #center_column : la figure est
     une image cliquable, pas un lien de texte. */
  color: inherit;
}

.ga-ed-fig-zoom:hover,
.ga-ed-fig-zoom:focus {
  text-decoration: none;
}

.ga-ed-fig-zoom:focus-visible {
  /* `!important` volontaire, et le seul du fichier : voir en-tête, piège 4.
     `modules/ybc_blog/views/css/blog_all.css` pose `* { outline: none
     !important }`. Une déclaration importante sur un sélecteur universel ne
     se bat pas par la spécificité seule : il faut une déclaration également
     importante, de spécificité supérieure (ici 0,2,0 contre 0,0,0). Sans
     cette parade, le lien reste atteignable au clavier mais sans aucun
     indicateur visuel, mesuré en runtime à `outline-width: 0px`. */
  outline: 2px solid var(--ga-violet, #3b1155) !important;
  outline-offset: 2px;
}

.ga-ed-fig-img {
  display: block;
  width: 100%;
  height: auto;
  /* Réservation de place identique au ratio natif des illustrations
     (1264 x 848). Voir la note anti-CLS de l'en-tête. */
  aspect-ratio: 3 / 2;
}

/* Pastille de loupe : signale que l'image s'ouvre en grand. Toujours visible
   au tactile (aucun survol possible sur mobile), simplement renforcée au
   survol sur pointeur fin. */
.ga-ed-fig-loupe {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(59, 17, 85, .22);
  color: var(--ga-violet, #3b1155);
  transition: background .18s ease, box-shadow .18s ease;
}

.ga-ed-fig-zoom:hover .ga-ed-fig-loupe {
  background: #fff;
  box-shadow: 0 2px 9px rgba(59, 17, 85, .3);
}

.ga-ed-fig-zoom svg {
  width: 18px;
  height: 18px;
  /* Contre-mesure au `svg{fill:currentcolor}` global : voir en-tête, piège 1. */
  fill: none;
  stroke: currentColor;
}

.ga-ed-fig-leg {
  margin: 0;
  padding: 12px 15px 13px;
  border-top: 1px solid var(--ga-line, #e7e1f0);
  background: #fff;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ga-text, #221c2b);
}

.ga-ed-fig-leg b {
  /* Le thème force tout `<strong>` en rose foncé
     (`#center_column strong{color:#b51b5d!important}`) : comme les onze
     autres composants, cette figure n'utilise que `<b>`. */
  font-weight: 700;
}

.ga-ed-fig-src {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--ga-ed-faint, #6d6480);
}

@media (min-width: 700px) {
  .ga-ed-figure {
    /* Le corps d'étape n'a pas de largeur de lecture propre : il occupe toute
       la colonne centrale du thème, mesurée à 1232px en 1440. Une figure au
       ratio 3:2 laissée à cette largeur ferait 820px de haut et couperait la
       lecture en deux. Plafonnée à 660px (soit 440px de haut) et centrée : la
       figure reste une illustration dans le fil, pas une pleine page. */
    max-width: 660px;
    margin: 26px auto 24px;
  }

  .ga-ed-fig-leg {
    padding: 13px 18px 15px;
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ga-ed-fig-loupe {
    transition: none;
  }
}