/* ClicksBuilder Academy — lecons/edutech-clicksbuilder-academy.html
   S'ajoute à css/edutech-traitement-texte-academy.css (même moteur que
   ClicksDoc Academy) : couleurs de marque ClicksBuilder (bleu → violet → rose),
   hero animé, module Pro violet, textes arabes de droite à gauche. */

.cba-hero {
  --cb1: #3e7cb1; --cb2: #8b5fbf; --cb3: #e8547f;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(125deg, var(--cb1), var(--cb2) 52%, var(--cb3));
  background-size: 180% 180%;
  animation: cba-sky 16s ease-in-out infinite alternate;
}
@keyframes cba-sky { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
.cba-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;
}
.cba-hero .breadcrumb, .cba-hero .breadcrumb a, .cba-hero .breadcrumb span { color: rgba(255, 255, 255, .88); }
.cba-hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(40, 10, 70, .25); }
.cba-hero p { color: rgba(255, 255, 255, .92); max-width: 46rem; }
.cba-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;
}
.cba-hero .btn-primary { background: #fff; color: #5b3e8f; box-shadow: 0 14px 30px -12px rgba(20, 10, 50, .7); }
.cba-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .08); }
.cba-hero .btn-ghost:hover { background: rgba(255, 255, 255, .18); }

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

.cba-stats { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.cba-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;
}
.cba-stats li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .22); }
.cba-stats b { display: block; font: 700 1.7rem/1 "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.cba-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, #3e7cb1, #8b5fbf 55%, #e8547f); color: #fff; border-color: transparent; }
.academy-progress-fill { background: linear-gradient(90deg, #3e7cb1, #8b5fbf 55%, #e8547f); }
.howto-num { background: linear-gradient(135deg, #3e7cb1, #8b5fbf 55%, #e8547f); 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(91, 62, 143, .55); }

/* encadré Gratuit / Forfait */
.cba-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(62, 124, 177, .1), rgba(139, 95, 191, .12) 55%, rgba(232, 84, 127, .1));
  box-shadow: inset 0 0 0 1px rgba(139, 95, 191, .28);
}
.cba-plan-ico {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, #8b5fbf, #e8547f); font-size: 1.3rem;
  box-shadow: 0 10px 22px -10px rgba(139, 95, 191, .9);
}
.cba-plan h3 { margin: .1rem 0 .3rem; font-size: 1.02rem; }
.cba-plan p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* module violet (Forfait Enseignant) */
.academy-module[data-accent="violet"] { --accent: #8b5fbf; --accent-ink: #5b3e8f; --g1: #8b5fbf; --g2: #e8547f; }
.module-head { position: relative; }
.module-pro {
  margin-inline-start: .6rem; padding: .25rem .7rem; border-radius: 999px;
  background: #fff; color: #5b3e8f; font: 800 .72rem/1.2 "Nunito", sans-serif; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45);
}
.academy-module.is-pro { box-shadow: 0 0 0 2px rgba(139, 95, 191, .35), 0 18px 40px -26px rgba(91, 62, 143, .7); }

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

/* 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) {
  .cba-stats li { min-width: 0; flex: 1 1 30%; padding: .6rem .7rem; }
  .cba-stats b { font-size: 1.3rem; }
  .cba-plan { flex-direction: column; }
  .module-pro { position: absolute; top: .55rem; right: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cba-hero, .cba-blob { animation: none; }
}