/* ClicksLab Academy — lecons/edutech-clickslab-academy.html
   S'ajoute à css/edutech-traitement-texte-academy.css (même moteur que
   ClicksDoc Academy) : couleurs de ClicksLab (orange → rose → bleu),
   hero animé avec circuit, textes arabes de droite à gauche. */

.cla-hero {
  --cb1: #ff8c42; --cb2: #f15bb5; --cb3: #3a86ff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(125deg, var(--cb1), var(--cb2) 52%, var(--cb3));
  background-size: 180% 180%;
  animation: cla-sky 16s ease-in-out infinite alternate;
}
@keyframes cla-sky { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
.cla-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask: linear-gradient(100deg, transparent 15%, #000 75%);
  mask: linear-gradient(100deg, transparent 15%, #000 75%);
  pointer-events: none;
}
.cla-hero .breadcrumb, .cla-hero .breadcrumb a, .cla-hero .breadcrumb span { color: rgba(255, 255, 255, .88); }
.cla-hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(40, 10, 70, .25); }
.cla-hero p { color: rgba(255, 255, 255, .92); max-width: 46rem; }
.cla-hero .kicker {
  display: inline-block; padding: .3rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  color: #fff;
}
.cla-hero .btn-primary { background: #fff; color: #c2410c; box-shadow: 0 14px 30px -12px rgba(20, 10, 50, .7); }
.cla-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .08); }
.cla-hero .btn-ghost:hover { background: rgba(255, 255, 255, .18); }

.cla-blob {
  position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(46px); opacity: .55; pointer-events: none;
  animation: cla-float 14s ease-in-out infinite alternate;
}
.cla-blob.b1 { width: 340px; height: 340px; right: -60px; top: -90px; background: #ffd166; }
.cla-blob.b2 { width: 260px; height: 260px; right: 22%; bottom: -120px; background: #4cc9f0; animation-delay: -5s; }
.cla-blob.b3 { width: 200px; height: 200px; left: -70px; bottom: -60px; background: #63e6be; animation-delay: -9s; }
@keyframes cla-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 24px) scale(1.12); } }

.cla-stats { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.cla-stats li {
  min-width: 112px; padding: .7rem 1.05rem; border-radius: 16px;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s;
}
.cla-stats li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .22); }
.cla-stats b { display: block; font: 700 1.7rem/1 "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.cla-stats span { font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }

/* barre de langue et de progression aux couleurs de ClicksBuilder */
.academy-langbtn.is-active { background: linear-gradient(135deg, #ff8c42, #f15bb5 55%, #3a86ff); color: #fff; border-color: transparent; }
.academy-progress-fill { background: linear-gradient(90deg, #ff8c42, #f15bb5 55%, #3a86ff); }
.howto-num { background: linear-gradient(135deg, #ff8c42, #f15bb5 55%, #3a86ff); color: #fff; }
.howto-card { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.howto-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(194, 65, 12, .4); }

/* encadré Gratuit / Forfait */
.cla-plan {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 1.3rem auto 0; max-width: 52rem; padding: 1.05rem 1.3rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 140, 66, .1), rgba(241, 91, 181, .1) 55%, rgba(58, 134, 255, .1));
  box-shadow: inset 0 0 0 1px rgba(241, 91, 181, .28);
}
.cla-plan-ico {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, #ff8c42, #f15bb5); font-size: 1.3rem;
  box-shadow: 0 10px 22px -10px rgba(241, 91, 181, .9);
}
.cla-plan h3 { margin: .1rem 0 .3rem; font-size: 1.02rem; }
.cla-plan p { margin: 0; color: var(--ink-soft); font-size: .92rem; }


/* modules violets (2 et 7) */
.academy-module[data-accent="violet"] { --accent: #8b5fbf; --accent-ink: #5b3e8f; --g1: #8b5fbf; --g2: #f15bb5; }

/* GIF au format exact du tournage (1440 × 860) */
.step-gif-wrap, .capstone-gif-wrap { aspect-ratio: 1440 / 860; }

/* arabe : chaque texte est en RTL, la mise en page reste en LTR (comme ClicksDoc Academy) */
[dir="rtl"] { font-family: "Cairo", "Nunito", sans-serif; }
h1[dir="rtl"], h2[dir="rtl"], h3[dir="rtl"], .stitle[dir="rtl"] { text-align: right; }
.howto-card [dir="rtl"], .academy-capstone [dir="rtl"] { text-align: center; }

@media (max-width: 640px) {
  .cla-stats li { min-width: 0; flex: 1 1 30%; padding: .6rem .7rem; }
  .cla-stats b { font-size: 1.3rem; }
  .cla-plan { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .cla-hero, .cla-blob { animation: none; }
}

/* GIFs Full HD (1920 px) : affichés en grand dans la carte, et en vraie taille dans la loupe */
.step-gif-wrap { max-width: 1040px; }
.capstone-gif-wrap { max-width: 1040px; }
#img-lightbox-img { max-width: 1920px; }