/* =============================================================================
   GrowLED Academy — refonte homepage "box de culture" (2026-08-07c).

   Contexte : /academy refaite deux fois le jour même, rejetée deux fois par
   le commanditaire. 1er retour : "ça fait pas propre". 2e retour, sur la
   version alors en ligne (grille de cartes blanches plates, cf.
   academy-front-20260807b.css section ".ga-steps") : "vraiment nul, digne
   d'un vieux blog". Ce fichier remplace entièrement la mise en scène du hero
   et du parcours d'étapes sur /academy :
     - hero en deux colonnes : message + widget de progression (anneau SVG
       connecté / carte de déblocage anonyme), sur fond "nuit" avec halo
       ambré et trame de grille (déjà posés par academy-front-20260807.css,
       repris tels quels ici, pas redéfinis) ;
     - parcours en zigzag (carte à gauche, à droite, alternées), relié par
       une ligne pointillée à nœuds, avec le numéro de chaque étape en très
       grand fantôme derrière la carte (desktop) — plus aucune grille de
       cartes identiques.

   Charge en TOUT DERNIER, après academy-front-20260805e.css,
   academy-front-20260807.css et academy-front-20260807b.css (cf. les 3
   contrôleurs front) : aucun des trois n'est modifié, celui-ci les surcharge
   en jouant sur l'ordre de cascade à spécificité égale ou supérieure — même
   technique que academy-front-20260807b.css avant lui. Les icônes par étape
   réutilisent le système de masque CSS déjà déclaré dans
   academy-front-20260807.css ([data-pos="N"] .ga-step-icon, currentColor) :
   aucune icône redéfinie ici, uniquement sa taille/couleur/position dans la
   nouvelle carte. Mobile-first ; les tokens --ga-* viennent des fichiers
   précédents (déclarés sur .gwps-academy à la racine).
   ============================================================================= */

.gwps-academy {
  --ga-line: #e7e1f0;
}

/* ═════════════════════════════════ HERO ═══════════════════════════════════ */

.gwps-academy .ga-hero {
  padding: 0;
  overflow: hidden;
}

.gwps-academy .ga-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 38px 24px;
}

.gwps-academy .ga-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ga-glow-amber);
}

.gwps-academy .ga-hero h1 {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.01em;
}

.gwps-academy .ga-hero-lead {
  max-width: 46ch;
}

.gwps-academy .ga-hero-main .ga-authorline {
  margin: 22px 0 0;
}

/* --- Widget latéral : anneau (connecté) ou carte de déblocage (anonyme) --- */

.gwps-academy .ga-hero-side {
  display: flex;
  justify-content: center;
}

.gwps-academy .ga-ring-card,
.gwps-academy .ga-unlock-card {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .6);
  text-align: center;
}

.gwps-academy .ga-ring {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 14px;
}

.gwps-academy .ga-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gwps-academy .ga-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 9;
}

.gwps-academy .ga-ring-fill {
  fill: none;
  stroke: var(--ga-glow-amber);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}

.gwps-academy .ga-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  color: #fff;
}

.gwps-academy .ga-ring-value strong {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.gwps-academy .ga-ring-value em {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: #cdbbe6;
}

.gwps-academy .ga-ring-label {
  margin: 0 0 20px;
  font-size: 13px;
  color: #cdbbe6;
}

.gwps-academy .ga-hero-side .ga-hero-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.gwps-academy .ga-hero-done {
  margin: 0;
  color: #cdefb0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}

.gwps-academy .ga-unlock-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b9e792;
}

.gwps-academy .ga-unlock-card h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 800;
}

.gwps-academy .ga-unlock-note {
  margin: 16px 0 0;
  color: #d9ccec;
  font-size: 14px;
  line-height: 1.5;
}

.gwps-academy .ga-unlock-login {
  display: inline-block;
  margin-top: 12px;
  color: #f1e7fb;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
}

#center_column .gwps-academy .ga-unlock-login { color: #f1e7fb !important; }
#center_column .gwps-academy .ga-unlock-card h2 { color: #fff !important; }
#center_column .gwps-academy .ga-hero-side .ga-hero-cta { color: #fff !important; }
/* Le thème impose #center_column strong{color:#b51b5d !important} : sans cet
   override, le "1" du compteur d'anneau (X/10) hérite du rose du thème au
   lieu du blanc attendu sur fond nuit (constaté en capture 2026-08-07). */
#center_column .gwps-academy .ga-ring-value strong { color: #fff !important; }

@media (min-width: 900px) {
  .gwps-academy .ga-hero-grid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 64px 58px;
  }

  .gwps-academy .ga-hero-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .gwps-academy .ga-hero h1 {
    font-size: 50px;
  }

  .gwps-academy .ga-hero-side {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}

/* ═════════════════════════ BANDEAU BADGES (connecté) ══════════════════════ */

.gwps-academy .ga-badges-section {
  background: linear-gradient(135deg, #f4eefb, #fdf7ea);
  border: 1px solid rgba(43, 17, 66, .10);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 26px 0 34px;
}

.gwps-academy .ga-badges-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.gwps-academy .ga-badges-head h2 {
  margin: 0;
  color: var(--ga-violet);
  font-size: 16px;
  font-weight: 800;
}

.gwps-academy .ga-badges-xp {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ga-muted);
  white-space: nowrap;
}

.gwps-academy .ga-badges-xp strong {
  color: var(--ga-violet);
  font-size: 15px;
}

.gwps-academy .ga-badges-section .ga-badges-strip {
  margin: 0;
}

#center_column .gwps-academy .ga-badges-head h2 { color: var(--ga-violet) !important; }
#center_column .gwps-academy .ga-badges-xp strong { color: var(--ga-violet) !important; }

/* ══════════════════════════ LE CHEMIN (ZIGZAG) ═════════════════════════════
   10 étapes reliées par une ligne pointillée à nœuds, numéro géant en
   fantôme derrière chaque carte (desktop). Mobile : une colonne, ligne et
   numéros repliés à gauche en petit (le numéro vit alors dans le nœud, le
   fantôme géant est un flourish desktop uniquement — display:none en
   dessous de 900px, donc aucun risque de débordement horizontal). */

.gwps-academy .ga-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-template-columns: unset;
  list-style: none;
  gap: 6px;
  margin: 8px 0 0;
  padding: 6px 0 6px 46px;
}

.gwps-academy .ga-steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ga-line) 0 6px, transparent 6px 13px);
  z-index: 0;
}

.gwps-academy .ga-step {
  position: relative;
  padding: 16px 0;
}

.gwps-academy .ga-step-node {
  position: absolute;
  left: -42px;
  top: 20px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ga-line);
  color: var(--ga-muted);
  font-size: 11px;
  font-weight: 800;
  z-index: 2;
}

.gwps-academy .ga-state-read .ga-step-node {
  background: var(--ga-amber);
  border-color: var(--ga-amber);
  color: #fff;
}

.gwps-academy .ga-state-done .ga-step-node {
  background: var(--ga-green);
  border-color: var(--ga-green);
  color: #fff;
}

.gwps-academy .ga-state-preview .ga-step-node {
  border-style: dashed;
  border-color: rgba(43, 17, 66, .3);
  color: var(--ga-muted);
  opacity: .75;
}

.gwps-academy .ga-step-current .ga-step-node {
  box-shadow: 0 0 0 4px rgba(59, 17, 85, .16);
}

/* Numéro géant en fantôme : masqué en mobile (cf. commentaire de section),
   activé uniquement à partir du breakpoint desktop plus bas. */
.gwps-academy .ga-step-ghost {
  display: none;
}

.gwps-academy .ga-steps .ga-step-card,
.gwps-academy .ga-steps .ga-step a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  background: #fff;
  border: 1px solid rgba(43, 17, 66, .08);
  border-radius: 18px;
  padding: 20px 20px 20px 60px;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--ga-shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.gwps-academy .ga-steps .ga-step a:hover,
.gwps-academy .ga-steps .ga-step a:focus {
  text-decoration: none;
  box-shadow: var(--ga-shadow-hover);
  transform: translateY(-3px);
}

.gwps-academy .ga-steps .ga-step a:focus-visible {
  outline: 3px solid var(--ga-violet);
  outline-offset: 2px;
}

/* Icône de thème (masque déjà déclaré dans academy-front-20260807.css via
   [data-pos="N"] .ga-step-icon) : ici, seulement taille/couleur/position. */
.gwps-academy .ga-steps .ga-step-icon {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  color: var(--ga-violet);
}

.gwps-academy .ga-state-read .ga-step-icon { color: var(--ga-amber); }
.gwps-academy .ga-state-done .ga-step-icon { color: var(--ga-green-dark); }
.gwps-academy .ga-state-preview .ga-step-icon { color: var(--ga-muted); opacity: .5; }

/* Coche verte (étape terminée) — badge plein, coin haut droit. */
.gwps-academy .ga-step-check {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ga-green);
}

.gwps-academy .ga-step-check::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: #fff;
  -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='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L19 7'/></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='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L19 7'/></svg>") center/contain no-repeat;
}

/* Cadenas d'aperçu (étapes 2-10 en anonyme) : réutilise .ga-step-lock défini
   dans academy-front-20260807b.css (positionné en haut à droite, masque
   currentColor sur --ga-muted) — pas de redéfinition nécessaire ici. */

.gwps-academy .ga-steps .ga-step-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ga-muted);
}

.gwps-academy .ga-steps .ga-step-title {
  display: block;
  padding-right: 34px;
  color: var(--ga-violet);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.gwps-academy .ga-steps .ga-step-intro {
  display: block;
  color: var(--ga-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.gwps-academy .ga-steps .ga-step-meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ga-muted);
}

.gwps-academy .ga-state-read .ga-step-meta { color: #8a5a00; }
.gwps-academy .ga-state-done .ga-step-meta { color: var(--ga-green-dark); }

.gwps-academy .ga-steps .ga-step-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--ga-violet);
  color: #fff;
}

.gwps-academy .ga-steps .ga-step-tag-free { background: var(--ga-green); }

#center_column .gwps-academy .ga-steps .ga-step-tag { color: #fff !important; }
#center_column .gwps-academy .ga-steps .ga-step-title { color: var(--ga-violet) !important; }

/* --- États : la carte se voit, pas seulement le nœud --------------------- */

.gwps-academy .ga-state-read .ga-step a {
  border-left: 4px solid var(--ga-amber);
  box-shadow: 0 12px 26px -18px rgba(242, 161, 20, .65), var(--ga-shadow);
}

.gwps-academy .ga-state-done .ga-step a {
  border-left: 4px solid var(--ga-green);
}

.gwps-academy .ga-state-preview .ga-step a {
  border: 1px dashed rgba(43, 17, 66, .28);
  background: #fbfafd;
}

.gwps-academy .ga-step-current .ga-step a {
  border-color: var(--ga-violet);
  border-left-color: var(--ga-violet);
  box-shadow: 0 0 0 3px rgba(59, 17, 85, .14), var(--ga-shadow-hover);
}

.gwps-academy .ga-step-free .ga-step a {
  border-color: var(--ga-green);
  border-left-color: var(--ga-green);
  box-shadow: 0 0 0 3px rgba(122, 193, 67, .18), var(--ga-shadow);
}

/* ------------------------------- Desktop : zigzag ------------------------- */

@media (min-width: 900px) {
  .gwps-academy .ga-steps {
    padding: 10px 0;
    gap: 0;
  }

  .gwps-academy .ga-steps::before {
    left: 50%;
    margin-left: -1px;
  }

  .gwps-academy .ga-step {
    padding: 14px 0;
  }

  /* Quinconce réelle : chaque rangée remonte sur la précédente. Les cartes
     alternent de colonne, elles ne peuvent pas se chevaucher entre elles :
     seuls la ligne centrale et les fantômes traversent, et c'est voulu. */
  .gwps-academy .ga-step + .ga-step {
    margin-top: -104px;
  }

  .gwps-academy .ga-step-node {
    left: 50%;
    top: 44px;
    margin-left: -15px;
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .gwps-academy .ga-step-ghost {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 136px;
    font-weight: 900;
    line-height: 1;
    color: rgba(59, 17, 85, .10);
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }

  .gwps-academy .ga-steps .ga-step-card,
  .gwps-academy .ga-steps .ga-step a {
    width: 44%;
    padding: 26px 26px 26px 66px;
  }

  .gwps-academy .ga-step-left .ga-step-card,
  .gwps-academy .ga-step-left a {
    margin-right: 56%;
  }

  .gwps-academy .ga-step-right .ga-step-card,
  .gwps-academy .ga-step-right a {
    margin-left: 56%;
  }

  /* Le numéro géant occupe la colonne LIBRE, en face de la carte :
     jamais derrière elle. C'est lui qui donne l'échelle. */
  .gwps-academy .ga-step-left .ga-step-ghost {
    right: 9%;
    left: auto;
    text-align: right;
  }

  .gwps-academy .ga-step-right .ga-step-ghost {
    left: 9%;
    right: auto;
    text-align: left;
  }

  .gwps-academy .ga-steps .ga-step-icon {
    left: 26px;
    top: 26px;
    width: 32px;
    height: 32px;
  }

  .gwps-academy .ga-step-check {
    right: 22px;
    top: 22px;
  }

  .gwps-academy .ga-steps .ga-step-title {
    font-size: 20px;
  }

  .gwps-academy .ga-steps .ga-step-intro {
    font-size: 15px;
  }
}

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