/* =============================================================================
   GrowLED Academy : composants éditoriaux de lisibilité (2026-08-08, task-30).

   Fondation visuelle pour casser les pavés de prose des corps d'étape :
   chaque type d'information (énumération, choix entre options, calcul,
   phrase choc, nuance, comparaison chiffrée, ratio, séquence, idée reçue)
   prend un format dédié. Classes toutes préfixées `ga-ed-` (ÉDitorial) pour
   ne jamais collisionner avec les classes `ga-*` déjà utilisées par le
   module (ga-practice, ga-mistake, ga-joseph-note, ga-product-choice,
   ga-keypoints, ga-table-wrap, ga-toc, ga-checklist, etc.).

   Fichier strictement ADDITIF : aucun fichier existant n'est modifié. Charge
   en tout dernier sur les 3 pages du module (après
   academy-front-20260807d.css et views/dist/academy.css, cf. les 3
   contrôleurs front) : rien à surcharger, il ne fait qu'ajouter de nouveaux
   sélecteurs `ga-ed-*` qui n'existent nulle part ailleurs.

   Onze dispositifs au total, deux vagues de démonstration validées par le
   commanditaire :
     Vague 1 (démonstration « lisibilite-avant-apres.html », étape 1) :
       1. ga-ed-mesures   : rangée de points à vérifier, icône + libellé
       2. ga-ed-punch     : citation détachée à liseré ambré
       3. ga-ed-spectre   : chips groupées par famille, barre de dégradé
       4. ga-ed-cards     : cartes comparables (silhouette, badge reco)
       5. ga-ed-aparte    : note discrète en aparté
       6. ga-ed-schema    : schéma-colonne à segments proportionnels
       7. ga-ed-gammes    : cartes de gammes produit
     Vague 2 (démonstration « lisibilite-demo2-azote.html », étape 7) :
       8. ga-ed-frise     : séquence d'étapes numérotées, flèche de liaison
       9. ga-ed-mythe     : idée reçue barrée / réalité en gras
      10. ga-ed-ratios    : proportions d'une étiquette en segments empilés
      11. ga-ed-barres    : comparaison chiffrée en barres verticales groupées

   ── Unités : PAS de rem ──────────────────────────────────────────────────
   La racine du thème (warehouse-e4, cf. themes/warehouse-e4/css/global.css)
   est en `html{font-size:62.5%}`, donc 1rem = 10px et non 16px dans ce
   contexte réel. Les deux démonstrations sont conçues pour un rem = 16px
   (page HTML autonome, racine par défaut du navigateur) : les recopier
   telles quelles afficherait tout à 62,5 % de la taille voulue. Toutes les
   tailles ci-dessous sont donc en px (converties ×16 depuis les rem des
   démonstrations), exactement comme l'a déjà fait la « passe lisibilité du
   2026-08-05 » du fichier academy-front-20260805e.css (voir son commentaire
   d'en-tête à ce sujet) pour la même raison. Les media queries à seuil en
   rem des démonstrations sont converties en px pour la même cohérence,
   même si, techniquement, un rem dans une media query se résout toujours
   sur 16px quel que soit le html{font-size} du document (particularité de
   la spec CSS) : la conversion n'est donc pas strictement nécessaire pour
   les media queries, elle est faite uniquement par cohérence avec le reste
   du fichier, qui est intégralement en px.

   ── Palette ───────────────────────────────────────────────────────────────
   Les teintes --violet/--green/--amber de la démonstration sont strictement
   identiques aux tokens --ga-violet/--ga-green/--ga-amber déjà déclarés sur
   .gwps-academy/.gwps-academy-step/.gwps-academy-parcours (voir
   academy-front-20260805e.css) : réutilisés tels quels, rien à ajouter pour
   ceux-là. --ga-line existe déjà aussi (academy-front-20260807c.css). En
   revanche le module n'avait pas de variantes « soft / deep / faint » ni de
   rouge ni de tons de série N/P/K : ajoutées ci-dessous comme propriétés
   personnalisées supplémentaires sur les mêmes sélecteurs racine, à la
   manière de la déclaration `--ga-line` dans academy-front-20260807c.css
   (additif, ne redéfinit aucun token existant).

   Tons de série N/P/K : valeurs imposées par le commanditaire (validées
   daltonisme), non modifiées. Une variante sombre existe dans la
   démonstration (calibrée pour un canevas --ground/--card sombre que ce
   module n'a pas : aucune des pages Academy n'a de mode sombre, aucun
   `prefers-color-scheme`/`data-theme` n'existe ailleurs dans ce module).
   Activer la branche sombre des seules 3 couleurs de série sur une page qui
   reste blanche partout ailleurs recalerait leur contraste hors du calibrage
   validé (calibrage fait pour un fond sombre, pas pour #fff) : elle n'est
   donc PAS activée ici, seulement documentée en commentaire pour référence
   si le module gagne un jour un vrai mode sombre densemble.
   Variante sombre documentée (non active) :
     --serie-n: #ba861f; --serie-p: #9d81c9; --serie-k: #55a53c;
     --rouge-soft: #331816; --rouge-deep: #f0a49e;

   ── Collisions de spécificité rencontrées dans ce thème ─────────────────
   - `#center_column strong{color:#b51b5d!important}` (custom-growled-
     2026-260427.css) : contournée en n'utilisant JAMAIS <strong> dans ces
     composants (uniquement <b>, <span>, <p>, <div>).
   - `#center_column h3{padding:20px 0;font-weight:600}` (même fichier) :
     collision réelle avec les <h3> de section (qui héritent par ailleurs de
     .gwps-academy-step .ga-body h3 { color:violet; font-weight:700; font-
     size:20px } déjà déclaré et jusqu'ici jamais exercé, aucun <h3> n'était
     utilisé dans un corps d'étape avant ce fichier) : override dédié
     ci-dessous, plus spécifique (1 id + 2 classes + 1 type > 1 id + 1 type).
   - `.panierlienhaut b{font-weight:600;font-size:1.5em}` : scopée au lien
     panier du header, ne concerne pas nos <b>.
   - Reset normalize.css du thème (global.css) : `*{box-sizing:border-box}`
     (hérité, rien à refaire) et `b,strong{font-weight:700}` (déjà ce qu'on
     veut). Aucun <a> dans ces composants : la règle
     `#center_column a{color:#777}` ne s'applique donc jamais ici.
   - `svg{fill:currentcolor}` : règle globale posée par DEUX feuilles d'un
     module sans rapport (modules/ybc_blog/views/css/blog_all.css et
     sidebar.css, chargées après ce fichier). Un attribut de présentation
     SVG (`fill="none"` posé dans le markup) a la priorité la PLUS BASSE de
     toute la cascade CSS auteur : n'importe quelle règle, même un sélecteur
     de type nu comme `svg{}`, le bat, peu importe l'ordre de chargement.
     Sans contre-mesure, toutes les icônes de ces composants se seraient
     affichées pleines au lieu de tracées. Contournée en déclarant
     `fill: none` explicitement (propriété CSS, pas attribut) sur
     `.ga-ed-mesure svg` et `.ga-ed-aparte svg` : une règle avec sélecteur de
     classe (spécificité 0,1,1) bat le `svg{}` nu (0,0,1) qui posait
     problème.
   - **`.not-index #columns .content-inner #center_column * { border-color:
     #ececec }`** (modules/themeeditor/css/themeeditor_s_1.css) : LA collision
     de spécificité la plus large du thème (0 id... non : 2 id + 2 classes =
     spécificité 0,2,2,0, via #columns/#center_column + .not-index/.content-
     inner), posée sur un sélecteur universel `*` sous #center_column. Toutes
     les pages Academy portent `.not-index` sur <body> : cette règle bat
     TOUTE déclaration `border-color`/`border-left`/`border` de ce fichier
     qui n'a qu'une spécificité de classe (0,0,1,0 à 0,0,2,0), y compris
     `.ga-ed-punch`, `.ga-ed-boxsvg`, `.ga-ed-chip.hl`, `.ga-ed-card.reco` et
     `.ga-ed-gamme.avant` : les cinq bordures de couleur qui portent le
     signal visuel de « mise en avant » du système rendaient toutes en gris
     #ececec avant correction (mesuré en runtime, task-31). Découverte tardive
     (absente de cet inventaire jusqu'à task-32) : l'inventaire avait été
     fait par lecture de fichiers, pas par mesure sur la page réelle.
     Parade posée en fin de fichier (section « PARADE BORDER-COLOR ») :
     réemploi du même préfixe d'ancêtres (`.not-index #columns .content-inner
     #center_column`) devant chacun des 5 sélecteurs concernés, ce qui porte
     leur spécificité à 0,2,3,0 (strictement supérieure à 0,2,2,0 de la règle
     du thème), sans un seul `!important`. Choix délibéré de ne PAS corriger
     de la même façon les bordures neutres (`.ga-ed-card`, `.ga-ed-gamme`,
     `.ga-ed-colonne`, `.ga-ed-donnees td/th`, qui utilisent `--ga-line
     #e7e1f0`) : elles aussi écrasées en #ececec par cette même règle, mais
     la différence avec #e7e1f0 est visuellement imperceptible (deux gris
     très clairs à un delta de 3 unités de canal) et ce ne sont pas des
     mécanismes de mise en avant ; ajouter 4 sélecteurs de plus à la parade
     n'aurait aucun bénéfice visuel mesurable pour un coût de maintenance
     réel (surenchère de spécificité inutile).

   Mobile d'abord (390px = cible de référence). prefers-reduced-motion
   respecté : les seules transitions décoratives (survol des barres) sont
   coupées ci-dessous pour les utilisateurs qui la demandent.
   ============================================================================= */

.gwps-academy,
.gwps-academy-step,
.gwps-academy-parcours {
  /* #948aa8 (valeur d'origine) ne passait que 3,25:1 sur fond blanc pour ses
     6 usages (.ga-ed-flab, .ga-ed-haut, .ga-ed-gs, .ga-ed-schema-titre,
     .ga-ed-rg-lab, .ga-ed-g-titre), sous le seuil AA de 4,5:1 pour du texte
     de moins de 14px. Remonté au ton --ga-muted déjà utilisé ailleurs dans
     le module (mesuré à 5,55:1) : un seul token corrige les 6 sélecteurs
     d'un coup (task-32, I4). */
  --ga-ed-faint: #6d6480;
  --ga-ed-violet-soft: #f1eaf9;
  --ga-ed-green-soft: #eaf5df;
  --ga-ed-green-deep: #2f5c14;
  --ga-ed-amber-soft: #fdf3e0;
  --ga-ed-amber-deep: #7e5710;
  --ga-ed-rouge-soft: #fbeae8;
  --ga-ed-rouge-deep: #8c2f28;
  --ga-ed-ground: var(--ga-bg-light, #f7f5fa);
  --ga-ed-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  /* Séries N / P / K : couleurs imposées, ne pas retoucher (cf. en-tête). */
  --ga-serie-n: #e0a02e;
  --ga-serie-p: #7a5fa8;
  --ga-serie-k: #5d9c3a;
}

/* Sous-titres <h3> introduits par ces composants : héritent de
   .gwps-academy-step .ga-body h3 (violet, 700, 20px, academy-front-
   20260805e.css). Seule la collision avec #center_column h3 (padding +
   font-weight forcés par le thème, cf. en-tête) est corrigée ici. */
#center_column .gwps-academy-step .ga-body h3 {
  padding: 0 !important;
  font-weight: 700 !important;
}

/* ═══════════════════════ 1. MESURES (checklist icônée) ═══════════════════ */
/* Rangée de points à vérifier, icône + libellé court. Énumération de
   critères binaires (« à vérifier »), jamais de valeur chiffrée à comparer. */

.ga-ed-mesures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 19px;
}

.ga-ed-mesure {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ga-ed-violet-soft);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ga-text, #221c2b);
}

.ga-ed-mesure svg {
  width: 20px;
  height: 20px;
  color: var(--ga-violet, #3b1155);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

/* ═══════════════════════ 2. PUNCH (citation détachée) ════════════════════ */
/* Une phrase choc isolée du fil de la prose, jamais plus d'une phrase. */

.ga-ed-punch {
  border-left: 3px solid var(--ga-amber, #f2a114);
  background: var(--ga-ed-amber-soft);
  border-radius: 0 10px 10px 0;
  padding: 13px 16px;
  margin: 18px 0 21px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ga-text, #221c2b);
}

/* ═══════════════════════ 3. SPECTRE (chips groupées) ═════════════════════ */
/* Énumération de données homogènes (dimensions, références...) regroupées
   par famille, avec mise en évidence optionnelle des valeurs de repère. */

.ga-ed-spectre {
  margin: 16px 0 6px;
}

.ga-ed-spectre-bar {
  height: 8px;
  border-radius: 999px;
  margin: 0 0 13px;
  background: linear-gradient(90deg, var(--ga-green, #7ac143), var(--ga-amber, #f2a114), var(--ga-violet, #3b1155));
  opacity: .5;
}

.ga-ed-familles {
  display: grid;
  gap: 9px;
}

.ga-ed-famille {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 11px;
  align-items: baseline;
}

.ga-ed-flab {
  font-family: var(--ga-ed-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ga-ed-faint);
}

.ga-ed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ga-ed-chip {
  display: inline-block;
  font-family: var(--ga-ed-mono);
  font-size: 12px;
  padding: 3px 8px;
  background: var(--ga-ed-ground);
  border: 1px solid var(--ga-line, #e7e1f0);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  white-space: nowrap;
  color: var(--ga-text, #221c2b);
}

.ga-ed-chip.hl {
  border-color: var(--ga-green, #7ac143);
  background: var(--ga-ed-green-soft);
  font-weight: 700;
}

@media (max-width: 480px) {
  .ga-ed-famille {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ═══════════════════════ 4. CARDS (cartes comparables) ═══════════════════ */
/* Choix à faire entre options du même type : silhouette optionnelle,
   chiffre clé, usage en une ligne, recommandation marquée par la variante
   .reco + badge. */

.ga-ed-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 11px;
  margin: 16px 0 10px;
}

.ga-ed-card {
  border: 1px solid var(--ga-line, #e7e1f0);
  border-radius: 12px;
  /* padding-top réservé à 34px (au lieu de 14px) sur TOUTES les cartes, avec
     ou sans badge : .ga-ed-badge-reco est sorti du flux (position:absolute
     ci-dessous) pour ne plus décaler la carte .reco de ~24px par rapport
     aux autres (I7, task-32). L'espace réservé est identique que la carte
     porte le badge ou non : silhouette/dim/haut/plantes/usage démarrent
     donc toujours à la même hauteur d'une carte à l'autre. */
  padding: 34px 14px 13px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}

.ga-ed-card.reco {
  border-color: var(--ga-green, #7ac143);
  box-shadow: 0 0 0 1px var(--ga-green, #7ac143);
}

.ga-ed-silh {
  display: flex;
  align-items: flex-end;
  height: 44px;
  /* Garde-fou I6 : une .ga-ed-boxsvg dimensionnée en style inline au-delà de
     44px de haut (le contrat plafonne désormais la formule à cette valeur)
     est coupée plutôt que de déborder au-dessus de la carte. */
  overflow: hidden;
}

.ga-ed-boxsvg {
  border: 2px solid var(--ga-violet, #3b1155);
  border-radius: 3px 3px 0 0;
  border-bottom-width: 3px;
  opacity: .8;
}

.ga-ed-dim {
  font-family: var(--ga-ed-mono);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ga-text, #221c2b);
}

.ga-ed-haut {
  font-family: var(--ga-ed-mono);
  font-size: 11px;
  color: var(--ga-ed-faint);
}

.ga-ed-plantes {
  font-size: 13px;
  color: var(--ga-muted, #6d6480);
}

.ga-ed-plantes b {
  color: var(--ga-ed-green-deep);
  font-weight: 700;
  font-size: 15px;
}

.ga-ed-usage {
  font-size: 12px;
  color: var(--ga-muted, #6d6480);
  line-height: 1.4;
}

.ga-ed-badge-reco {
  /* Sorti du flux flex (cf. .ga-ed-card padding-top ci-dessus, I7) : posé
     dans la zone réservée en haut de la carte, sans ajouter de hauteur au
     flux ni décaler le reste du contenu. */
  position: absolute;
  top: 13px;
  left: 14px;
  right: 14px;
  font-family: var(--ga-ed-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ga-ed-green-deep);
  font-weight: 700;
}

/* ═══════════════════════ 5. APARTÉ (note discrète) ════════════════════════ */
/* Nuance, exception ou « pourquoi » qui explique sans interrompre le fil.
   Icône ronde générique ; peut contenir un <b> en tête de phrase (graisse
   normale du navigateur, aucune règle du thème ne la perturbe, cf. en-tête)
   et, pour une variation chiffrée (hausse/baisse), les utilitaires
   .ga-ed-up / .ga-ed-down ci-dessous. */

.ga-ed-aparte {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ga-muted, #6d6480);
  margin: 14px 0 19px;
  padding: 11px 13px;
  background: var(--ga-ed-ground);
  border-radius: 10px;
}

.ga-ed-aparte svg {
  width: 18px;
  height: 18px;
  color: var(--ga-ed-faint);
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
}

.ga-ed-aparte p {
  margin: 0;
}

.ga-ed-aparte .ga-ed-fleches {
  font-family: var(--ga-ed-mono);
  font-variant-numeric: tabular-nums;
}

.ga-ed-up {
  color: var(--ga-ed-green-deep);
  font-weight: 700;
}

.ga-ed-down {
  color: var(--ga-ed-rouge-deep);
  font-weight: 700;
}

/* ═══════════════════════ 6. SCHÉMA (colonne à segments) ══════════════════ */
/* Calcul ou décomposition d'un total en parts : colonne empilée, flex de
   chaque segment piloté par --seg en style inline, légende à points de
   couleur. Classes de couleur généralisées v/g/a (violet/vert/ambre) : pas
   de nom métier figé (les anciennes equip/utile/pot de la démonstration ne
   collent qu'au budget hauteur d'une box), réutilisables sur tout calcul à
   trois parts ou moins. */

.ga-ed-schema-titre {
  font-family: var(--ga-ed-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ga-ed-faint);
  margin: 0 0 8px;
}

.ga-ed-schema {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 19px;
  align-items: stretch;
  margin: 18px 0 19px;
}

.ga-ed-colonne {
  width: 84px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ga-line, #e7e1f0);
}

.ga-ed-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--ga-ed-mono);
  font-size: 10px;
  line-height: 1.25;
  padding: 3px;
  flex: var(--seg, 1) 1 0%;
}

.ga-ed-seg.v { background: var(--ga-ed-violet-soft); color: var(--ga-violet, #3b1155); font-weight: 700; }
.ga-ed-seg.g { background: var(--ga-ed-green-soft); color: var(--ga-ed-green-deep); font-weight: 700; }
.ga-ed-seg.a { background: var(--ga-ed-amber-soft); color: var(--ga-ed-amber-deep); font-weight: 700; }

.ga-ed-legende {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 13px;
  padding: 2px 0;
  gap: 8px;
}

.ga-ed-lg {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.ga-ed-pt {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
  top: 1px;
  display: inline-block;
}

.ga-ed-pt.v { background: var(--ga-violet, #3b1155); opacity: .55; }
.ga-ed-pt.g { background: var(--ga-green, #7ac143); }
.ga-ed-pt.a { background: var(--ga-amber, #f2a114); }

.ga-ed-num {
  font-family: var(--ga-ed-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ga-text, #221c2b);
}

.ga-ed-sub {
  color: var(--ga-muted, #6d6480);
  font-size: 12px;
}

/* ═══════════════════════ 7. GAMMES (cartes de gamme) ══════════════════════ */
/* Présentation de plusieurs gammes/offres du même type. Variante .avant
   (mise en avant) pour la gamme à souligner. */

.ga-ed-gammes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 11px;
  margin: 14px 0 5px;
}

.ga-ed-gamme {
  border: 1px solid var(--ga-line, #e7e1f0);
  border-radius: 12px;
  padding: 14px 14px;
}

.ga-ed-gamme .ga-ed-gt {
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--ga-text, #221c2b);
}

.ga-ed-gamme .ga-ed-gs {
  font-family: var(--ga-ed-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ga-ed-faint);
  display: block;
  margin-bottom: 6px;
}

.ga-ed-gamme p {
  margin: 0;
  font-size: 13px;
  color: var(--ga-muted, #6d6480);
  line-height: 1.45;
}

.ga-ed-gamme.avant {
  border-color: var(--ga-violet, #3b1155);
}

.ga-ed-gamme.avant .ga-ed-gt {
  color: var(--ga-violet, #3b1155);
}

/* ═══════════════════════ 8. FRISE (séquence d'étapes) ═════════════════════ */
/* Processus ou repère en plusieurs temps (3 à 4 cases). Flèche de liaison
   entre cases, verticale sous 544px (34rem). */

.ga-ed-frise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 19px;
}

.ga-ed-frise.n4 {
  grid-template-columns: repeat(4, 1fr);
}

.ga-ed-etapef {
  position: relative;
  background: var(--ga-ed-violet-soft);
  border-radius: 10px;
  padding: 11px 13px 10px;
}

.ga-ed-etapef .ga-ed-fn {
  font-family: var(--ga-ed-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ga-violet, #3b1155);
  font-weight: 700;
  display: block;
  margin-bottom: 3px;
}

.ga-ed-etapef .ga-ed-ft {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  display: block;
  color: var(--ga-text, #221c2b);
}

.ga-ed-etapef .ga-ed-fs {
  font-size: 12px;
  color: var(--ga-muted, #6d6480);
  line-height: 1.35;
  display: block;
  margin-top: 2px;
}

.ga-ed-etapef:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ga-ed-faint);
  font-weight: 700;
  z-index: 1;
}

@media (max-width: 544px) {
  .ga-ed-frise,
  .ga-ed-frise.n4 {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ga-ed-etapef:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -17px;
    transform: translateX(-50%);
  }
}

/* ═══════════════════════ 9. MYTHE (idée reçue / réalité) ══════════════════ */
/* Corrige une croyance répandue : faux barré à gauche, vrai en gras à
   droite. Empile sous 480px (30rem). */

.ga-ed-mythe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 19px;
}

.ga-ed-my {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
}

.ga-ed-my .ga-ed-lab {
  font-family: var(--ga-ed-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.ga-ed-my.faux {
  background: var(--ga-ed-rouge-soft);
}

.ga-ed-my.faux .ga-ed-lab {
  color: var(--ga-ed-rouge-deep);
}

.ga-ed-my.faux .ga-ed-txt {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--ga-muted, #6d6480);
}

.ga-ed-my.vrai {
  background: var(--ga-ed-green-soft);
  font-weight: 700;
  color: var(--ga-text, #221c2b);
}

.ga-ed-my.vrai .ga-ed-lab {
  color: var(--ga-ed-green-deep);
}

@media (max-width: 480px) {
  .ga-ed-mythe {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════ 10. RATIOS (segments proportionnels) ═══════════ */
/* Rapport, pas une quantité (typiquement un NPK d'étiquette) : barre
   horizontale par profil, segments proportionnels, filet de 2px entre eux,
   libellé mono à gauche. Groupes titrés. Segments nommés .ga-ed-ratio-seg
   (et non .ga-ed-seg, déjà pris par le schéma-colonne du dispositif 6, qui
   n'a pas la même charte de couleurs) : n/p/k sur --ga-serie-n/p/k. */

.ga-ed-ratios {
  display: grid;
  gap: 13px;
  margin: 16px 0 8px;
}

.ga-ed-ratio-groupe .ga-ed-rg-lab {
  font-family: var(--ga-ed-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ga-ed-faint);
  margin: 0 0 6px;
}

.ga-ed-ratio {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 11px;
  align-items: center;
  margin-bottom: 7px;
}

.ga-ed-ratio .ga-ed-rl {
  font-family: var(--ga-ed-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ga-text, #221c2b);
}

.ga-ed-ratio .ga-ed-barre {
  display: flex;
  gap: 2px;
  height: 16px;
  border-radius: 5px;
  overflow: hidden;
}

.ga-ed-ratio-seg {
  min-width: 2px;
}

.ga-ed-ratio-seg.n { background: var(--ga-serie-n); }
.ga-ed-ratio-seg.p { background: var(--ga-serie-p); }
.ga-ed-ratio-seg.k { background: var(--ga-serie-k); }

.ga-ed-legende-npk {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--ga-muted, #6d6480);
  margin: 8px 0 0;
  flex-wrap: wrap;
}

.ga-ed-legende-npk span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ga-ed-legende-npk i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  font-style: normal;
}

@media (max-width: 480px) {
  .ga-ed-ratio {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ═══════════════════════ 11. BARRES (comparaison groupée) ═══════════════ */
/* Deux ou trois nombres qui se comparent entre deux états : barres
   verticales groupées (deux groupes, deux séries), valeur au-dessus de
   chaque barre, libellé de groupe dessous, ligne de base, légende avec
   multiplicateurs. <details> replie les mêmes valeurs en tableau : lisible
   au clavier/lecteur d'écran indépendamment de la position des barres.
   Hauteur pilotée par --h en style inline (pourcentage de la hauteur totale
   du cluster). */

.ga-ed-barres {
  margin: 18px 0 6px;
}

.ga-ed-barres .ga-ed-g-titre {
  font-family: var(--ga-ed-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ga-ed-faint);
  /* 26px (au lieu de 14px) : .ga-ed-val remonte de 23px au-dessus de la
     barre la plus haute (--h:100%, qui démarre juste sous ce titre) ; sous
     23px de marge le badge de valeur mordait sur le titre (B3, task-32). */
  margin: 0 0 26px;
}

.ga-ed-clusters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  /* align-items:start (et non plus end, B3) : chaque groupe est un bloc
     cluster(190px fixe) + base + libellé de longueur variable. En "end", un
     libellé qui passe à la ligne pousse tout le bloc voisin vers le bas et
     désaligne les deux lignes de base de ~22px mesurés. En "start", les deux
     .ga-ed-cluster (hauteur fixe) démarrent toujours au même y, donc leurs
     bases restent alignées quelle que soit la longueur du libellé en
     dessous. */
  align-items: start;
  padding: 0 8px;
}

/* 3 groupes : ajoute la classe n3 sur .ga-ed-clusters (comme n4 sur
   .ga-ed-frise), plutôt qu'une grille figée à 2 colonnes qui écrase un 3e
   groupe à demi-largeur (B3, task-32). Au-delà de 3 groupes, ce composant
   n'est plus adapté : utilise ga-ed-cards ou ga-ed-spectre à la place. */
.ga-ed-clusters.n3 {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 480px) {
  .ga-ed-clusters.n3 {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.ga-ed-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
  justify-items: center;
  height: 190px;
  position: relative;
}

.ga-ed-barv {
  position: relative;
  width: 100%;
  /* Plafonne la largeur en grand écran (~300px mesurés en 1440 sans cette
     règle : plus large que haut, B3, task-32). */
  max-width: 64px;
  border-radius: 4px 4px 0 0;
  height: var(--h, 10%);
  transition: filter .15s ease;
}

.ga-ed-barv:hover {
  filter: brightness(1.08);
}

.ga-ed-barv.n { background: var(--ga-serie-n); }
.ga-ed-barv.k { background: var(--ga-serie-k); }

.ga-ed-barv .ga-ed-val {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ga-ed-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ga-text, #221c2b);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ga-ed-cluster-lab {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 9px;
  color: var(--ga-text, #221c2b);
}

.ga-ed-base {
  height: 1px;
  background: var(--ga-line, #e7e1f0);
}

.ga-ed-mult {
  display: flex;
  justify-content: center;
  gap: 19px;
  margin-top: 13px;
  font-family: var(--ga-ed-mono);
  font-size: 12px;
  flex-wrap: wrap;
}

.ga-ed-mult span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ga-ed-mult i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  font-style: normal;
}

.ga-ed-donnees {
  margin-top: 13px;
  font-size: 13px;
  color: var(--ga-muted, #6d6480);
}

.ga-ed-donnees summary {
  cursor: pointer;
  font-family: var(--ga-ed-mono);
  font-size: 11px;
  color: var(--ga-text, #221c2b);
}

.ga-ed-donnees table {
  border-collapse: collapse;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.ga-ed-donnees td,
.ga-ed-donnees th {
  border: 1px solid var(--ga-line, #e7e1f0);
  padding: 5px 10px;
  text-align: right;
}

.ga-ed-donnees th {
  font-family: var(--ga-ed-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ═══════════════════════ ACCESSIBILITÉ ════════════════════════════════════ */

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

/* ═══════════════════ PARADE BORDER-COLOR (task-32, B1) ════════════════════
   `.not-index #columns .content-inner #center_column * { border-color:
   #ececec }` (modules/themeeditor/css/themeeditor_s_1.css) a une spécificité
   de 0,2,2,0 (2 id #columns/#center_column + 2 classes .not-index/.content-
   inner), posée sur un sélecteur universel : elle bat toute déclaration
   border-color de ce fichier qui n'a qu'une spécificité de classe. Mesuré en
   runtime avant cette parade : .ga-ed-punch, .ga-ed-boxsvg, .ga-ed-chip.hl et
   .ga-ed-gamme.avant rendaient TOUS `border-color: rgb(236,236,236)` au lieu
   de leur couleur voulue ; .ga-ed-card.reco aussi, mais restait visuellement
   sauvé par son box-shadow (ligne ci-dessus).

   Parade : réemployer le même préfixe d'ancêtres que la règle du thème
   (`.not-index #columns .content-inner #center_column`), ce qui porte la
   spécificité de chacune des 5 règles ci-dessous à 0,2,3,0 (strictement
   supérieure à 0,2,2,0), sans un seul !important. Toutes les pages Academy
   ont `.not-index` sur <body>, `#columns`/`.content-inner`/`#center_column`
   dans leur structure (vérifié en runtime, task-32) : ce préfixe n'est donc
   pas fragile sur ce module. Si le thème changeait un jour cette structure,
   c'est cette règle du thème elle-même qui cesserait de s'appliquer, pas
   cette parade. */

.not-index #columns .content-inner #center_column .ga-ed-punch {
  border-left-color: var(--ga-amber, #f2a114);
}

.not-index #columns .content-inner #center_column .ga-ed-boxsvg {
  border-color: var(--ga-violet, #3b1155);
}

.not-index #columns .content-inner #center_column .ga-ed-chip.hl {
  border-color: var(--ga-green, #7ac143);
}

.not-index #columns .content-inner #center_column .ga-ed-card.reco {
  border-color: var(--ga-green, #7ac143);
}

.not-index #columns .content-inner #center_column .ga-ed-gamme.avant {
  border-color: var(--ga-violet, #3b1155);
}