/* =============================================================================
   GrowLED Academy — habillage « espace dédié » (2026-08-07).
   Charge APRÈS academy-front-20260805e.css : n'y touche pas, ne fait
   qu'étendre/surcharger. Réutilise les tokens --ga-* déjà déclarés sur
   .gwps-academy / .gwps-academy-step / .gwps-academy-parcours, en ajoute
   quelques-uns pour le traitement « nuit / lampe LED » du hero et des notes
   de Joseph. Toujours préfixé par les conteneurs de page — rien ne fuit
   hors des pages Academy. Icônes : même technique que le thème (masque CSS
   currentColor sur data-URI), donc zéro image à charger, zéro dépendance.
   ============================================================================= */

.gwps-academy,
.gwps-academy-step,
.gwps-academy-parcours {
  --ga-night: #150c22;
  --ga-night-2: #1c0f2e;
  --ga-glow-amber: #ffbf5c;
  --ga-glow-violet: #9169d4;
}

/* -----------------------------------------------------------------------
   Icônes de thème (une par étape) — masque CSS, currentColor, pas d'image.
   Partagées entre la page d'accueil (.ga-step-icon dans chaque carte) et
   la page d'étape (icône unique dans le hero, sélectionnée via data-step-pos
   porté par la racine .gwps-academy-step).
   ----------------------------------------------------------------------- */
.ga-step-icon,
.ga-hero-icon {
  --ga-ic: none;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--ga-ic) center/contain no-repeat;
  mask: var(--ga-ic) center/contain no-repeat;
}

[data-pos="1"] .ga-step-icon, [data-step-pos="1"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V9l8-5 8 5v11'/><path d='M4 20h16'/><path d='M9.5 20v-6.5h5V20'/></svg>"); }
[data-pos="2"] .ga-step-icon, [data-step-pos="2"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 3v2.2M12 18.8V21M4.9 4.9l1.6 1.6M17.5 17.5l1.6 1.6M3 12h2.2M18.8 12H21M4.9 19.1l1.6-1.6M17.5 6.5l1.6-1.6'/></svg>"); }
[data-pos="3"] .ga-step-icon, [data-step-pos="3"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><path d='M12 12c0-4.5 3-7 5.5-6S20 10 16 11M12 12c-5 0-8 2-7.5 4.5S8 20 9.5 16.5M12 12c3 3 3 6 1 7.5s-5 .5-5-2.5'/></svg>"); }
[data-pos="4"] .ga-step-icon, [data-step-pos="4"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><path d='M6 9h12l-1.5 11.3a1 1 0 0 1-1 .7H8.5a1 1 0 0 1-1-.7L6 9z'/><path d='M4.5 9h15'/><path d='M9 9a3 3 0 0 1 6 0'/></svg>"); }
[data-pos="5"] .ga-step-icon, [data-step-pos="5"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21v-9.5'/><path d='M12 11.5C12 7.5 8.2 6 5 7c0 4 3.2 6 7 4.5z'/><path d='M12 14C12 11 14.8 10 18 11c0 3-2.2 5-6 3z'/></svg>"); }
[data-pos="6"] .ga-step-icon, [data-step-pos="6"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><path d='M12 3.3s6.2 7 6.2 11.1A6.2 6.2 0 0 1 5.8 14.4C5.8 10.3 12 3.3 12 3.3z'/></svg>"); }
[data-pos="7"] .ga-step-icon, [data-step-pos="7"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'><circle cx='12' cy='7.4' r='2.3'/><circle cx='16.6' cy='12' r='2.3'/><circle cx='12' cy='16.6' r='2.3'/><circle cx='7.4' cy='12' r='2.3'/><circle cx='12' cy='12' r='1.7' fill='black' stroke='none'/></svg>"); }
[data-pos="8"] .ga-step-icon, [data-step-pos="8"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 10.5h9.5l6-3.2v3.2h-2.3'/><path d='M3.5 10.5v6.2a2 2 0 0 0 2 2h5.5a2 2 0 0 0 2-2v-6.2'/><path d='M8.5 6v1.6'/></svg>"); }
[data-pos="9"] .ga-step-icon, [data-step-pos="9"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'><circle cx='6.7' cy='6' r='2'/><circle cx='6.7' cy='18' r='2'/><path d='M8.2 7.3 19 18M8.2 16.7 19 6' stroke-linecap='round'/></svg>"); }
[data-pos="10"] .ga-step-icon, [data-step-pos="10"] .ga-hero-icon { --ga-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.3 10h15.4l-1.8 9.4a1 1 0 0 1-1 .8H7a1 1 0 0 1-1-.8L4.3 10z'/><path d='M2.3 10h19.4'/><path d='M8 10a4 5.5 0 0 1 8 0'/></svg>"); }

/* ═════════════════════════════ LANDING /academy ══════════════════════════ */

.gwps-academy .ga-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(560px 360px at 82% -10%, color-mix(in srgb, var(--ga-glow-amber) 45%, transparent), transparent 70%),
    radial-gradient(760px 520px at 15% 115%, color-mix(in srgb, var(--ga-glow-violet) 32%, transparent), transparent 72%),
    linear-gradient(160deg, var(--ga-night) 0%, var(--ga-night-2) 100%);
}

.gwps-academy .ga-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(520px 340px at 78% -6%, #000 8%, transparent 74%);
  mask-image: radial-gradient(520px 340px at 78% -6%, #000 8%, transparent 74%);
  pointer-events: none;
}

.gwps-academy .ga-hero > * {
  position: relative;
}

/* Progression réelle si connecté : pastille discrète sous le fil d'auteur */
.gwps-academy .ga-hero .ga-progress-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 14px 7px 8px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: 13px;
  color: #e6d9f7;
}

.gwps-academy .ga-hero .ga-progress-chip b {
  color: #fff;
}

/* -------------------------------------------------------------------------
   Étapes : d'une grille de cartes identiques à une frise verticale — chaque
   étape porte une icône de thème et une pastille d'état, reliées par une
   ligne en pointillés. L'ordre n'est pas décoratif ici : suivre le parcours
   dans le désordre casse la pédagogie (chaque étape s'appuie sur la
   précédente), la frise le rend visible d'un coup d'œil.
   ------------------------------------------------------------------------- */

.gwps-academy .ga-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-template-columns: unset;
  gap: 20px;
  padding-left: 54px;
}

.gwps-academy .ga-steps::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ga-line, #e7e1f0) 0 7px, transparent 7px 14px);
}

.gwps-academy .ga-step {
  position: relative;
}

.gwps-academy .ga-step a {
  display: flex;
  grid-template-columns: unset;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px 22px;
  border-left: 1px solid rgba(43, 17, 66, .08);
  text-align: left;
}

.gwps-academy .ga-step-icon {
  position: absolute;
  left: -54px;
  top: 18px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ga-violet);
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px -4px rgba(43, 17, 66, .5);
  z-index: 1;
}

.gwps-academy .ga-state-read .ga-step-icon { background: var(--ga-amber); }
.gwps-academy .ga-state-done .ga-step-icon { background: var(--ga-green); }

.gwps-academy .ga-step-num {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  font-size: 12px;
  background: var(--ga-bg-light);
  color: var(--ga-muted);
  font-weight: 700;
}

.gwps-academy .ga-state-done .ga-step-num,
.gwps-academy .ga-state-read .ga-step-num { background: transparent; color: transparent; width: 26px; }

.gwps-academy .ga-state-done .ga-step-num::before {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-green-dark);
  font-size: 15px;
  font-weight: 900;
}

.gwps-academy .ga-step-title {
  grid-row: unset;
  padding-right: 34px;
}

.gwps-academy .ga-step-intro {
  grid-column: unset;
}

.gwps-academy .ga-step-meta {
  grid-column: unset;
  margin-top: 2px;
}

@media (min-width: 768px) {
  .gwps-academy .ga-steps {
    grid-template-columns: unset;
    padding-left: 64px;
  }

  .gwps-academy .ga-steps::before {
    left: 25px;
  }

  .gwps-academy .ga-step-icon {
    left: -64px;
    width: 44px;
    height: 44px;
    padding: 11px;
  }
}

/* ═══════════════════════════ PAGE ÉTAPE /etape ═══════════════════════════ */

.gwps-academy-step {
  position: relative;
}

.gwps-academy-step .ga-step-head {
  padding-top: 4px;
}

.gwps-academy-step .ga-step-head::before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--ga-violet);
  margin-bottom: 18px;
}

.gwps-academy-step .ga-hero-icon {
  display: none;
}

/* L'icône se dessine par-dessus le badge violet ci-dessus, positionnée en
   absolu pour ne pas dépendre d'un markup supplémentaire dans le tpl. */
.gwps-academy-step .ga-step-head {
  position: relative;
}

.gwps-academy-step .ga-step-head .ga-hero-icon {
  display: block;
  position: absolute;
  top: 11px;
  left: 11px;
  width: 24px;
  height: 24px;
  color: #f4ecff;
}

.gwps-academy-step .ga-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ga-violet);
  margin: -6px 0 4px;
}

#center_column .gwps-academy-step .ga-eyebrow { color: var(--ga-violet) !important; }

.gwps-academy-step .ga-intro::first-letter {
  font-weight: 800;
  font-size: 2.5em;
  line-height: .78;
  float: left;
  padding: .03em .06em 0 0;
  color: var(--ga-violet);
}

#center_column .gwps-academy-step .ga-intro::first-letter { color: var(--ga-violet) !important; }

/* -----------------------------------------------------------------------
   Encadrés éditoriaux : icône badge en pastille (masque CSS), plus de
   respiration, sans toucher au balisage existant.
   ----------------------------------------------------------------------- */
.gwps-academy-step .ga-body .ga-practice,
.gwps-academy-step .ga-body .ga-mistake,
.gwps-academy-step .ga-body .ga-product-choice {
  position: relative;
  padding-left: 64px;
  border-left: none;
  border: 1px solid rgba(43, 17, 66, .08);
}

.gwps-academy-step .ga-body .ga-practice::before,
.gwps-academy-step .ga-body .ga-mistake::before,
.gwps-academy-step .ga-body .ga-product-choice::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 26px;
  height: 26px;
  background-color: currentColor;
}

.gwps-academy-step .ga-body .ga-practice::before {
  color: var(--ga-green-dark);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M4 20c0-9 6-15 16-15-1 10-7 16-16 15z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M4 20c0-9 6-15 16-15-1 10-7 16-16 15z'/></svg>") center/contain no-repeat;
}

.gwps-academy-step .ga-body .ga-mistake::before {
  color: #8a5a00;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4M12 17h.01M10.3 3.9 2.7 17a2 2 0 0 0 1.7 3h15.2a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4M12 17h.01M10.3 3.9 2.7 17a2 2 0 0 0 1.7 3h15.2a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/></svg>") center/contain no-repeat;
}

.gwps-academy-step .ga-body .ga-product-choice::before {
  color: var(--ga-violet);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m9 11 3 3L22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m9 11 3 3L22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>") center/contain no-repeat;
}

/* Note de Joseph : traitement « nuit » distinct des autres encadrés, pour
   qu'elle se reconnaisse d'un coup d'œil comme la voix du fondateur. */
.gwps-academy-step .ga-joseph-note {
  background: linear-gradient(155deg, var(--ga-night-2), var(--ga-night));
  border-left: none;
  border-radius: 16px;
  color: #efe4fb;
  position: relative;
  overflow: hidden;
}

.gwps-academy-step .ga-joseph-note::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px 180px at 92% -15%, color-mix(in srgb, var(--ga-glow-amber) 35%, transparent), transparent 72%);
  pointer-events: none;
}

.gwps-academy-step .ga-joseph-note > * { position: relative; }

.gwps-academy-step .ga-joseph-note strong { color: var(--ga-glow-amber); }
#center_column .gwps-academy-step .ga-joseph-note strong { color: var(--ga-glow-amber) !important; }

.gwps-academy-step .ga-joseph-note p { color: #f1e7fb; }

.gwps-academy-step .ga-joseph-note .ga-signature { color: #cdbbe6; }

/* Sommaire : accent visuel discret, sans changer sa structure */
.gwps-academy-step .ga-toc {
  border-left: 4px solid var(--ga-green);
}

/* Chiffres cités en cours de paragraphe : mis en valeur comme des données de
   mesure plutôt que noyés dans le texte (thème « on mesure, pas on devine »). */
.gwps-academy-step .ga-body strong {
  font-variant-numeric: tabular-nums;
}

/* Navigation précédente / suivante : pilules pleines plutôt que rectangles */
.gwps-academy-step .ga-prev,
.gwps-academy-step .ga-next {
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .gwps-academy .ga-step a,
  .gwps-academy-step .ga-prev,
  .gwps-academy-step .ga-next {
    transition: none;
  }
}