/* ============================================================
   Genius — animations de chargement (18/09/2026)
   « L'atelier Genius » (génération de campagnes), « Storyboard » (génération vidéo), indicateur de lecteur.
   Décoratives et honnêtes : aucune progression inventée. transform / opacity uniquement, lentes, prefers-reduced-motion respecté.
   Utilisées par index.html (vrais écrans) et dev-loaders.html (aperçu de développement).
   ============================================================ */

/* ---------- Atelier : génération de campagnes ---------- */
.gl-atelier{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 20px 24px;width:100%}
.gl-stage{position:relative;width:300px;height:190px;margin-bottom:14px;flex:none}
.gl-blob{position:absolute;left:50%;top:50%;width:230px;height:150px;margin:-75px 0 0 -115px;border-radius:48% 52% 46% 54% / 60% 44% 56% 40%;background:var(--lemon);opacity:.9;animation:gl-blob 9s ease-in-out infinite}
@keyframes gl-blob{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.04)}}
.gl-star{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;animation:gl-breathe 3.2s ease-in-out infinite;transform-origin:center;filter:drop-shadow(0 6px 10px rgba(22,75,63,.18))}
@keyframes gl-breathe{0%,100%{transform:rotate(-7deg) scale(.94);opacity:.85}50%{transform:rotate(7deg) scale(1.04);opacity:1}}
.gl-card{position:absolute;width:84px;height:62px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(24,37,31,.35);padding:9px 10px;display:flex;flex-direction:column;gap:5px;opacity:0;will-change:transform}
.gl-card i{display:block;border-radius:3px;background:var(--line-2)}
.gl-line{height:5px;width:80%}.gl-line.w50{width:50%}.gl-line.w65{width:65%}
.gl-img{height:18px;width:100%;border-radius:6px;background:var(--lemon-2)!important}
.gl-btn{height:9px;width:36%;border-radius:999px;background:var(--primary)!important;margin-top:auto}
.gl-card-mail{animation:gl-card-a 9s cubic-bezier(.45,.05,.35,1) infinite,gl-in .6s var(--ease,ease) forwards}
.gl-card-sms{animation:gl-card-b 9s cubic-bezier(.45,.05,.35,1) infinite,gl-in .6s var(--ease,ease) .3s forwards;border-radius:16px 16px 16px 4px}
.gl-card-visual{animation:gl-card-c 9s cubic-bezier(.45,.05,.35,1) infinite,gl-in .6s var(--ease,ease) .6s forwards}
.gl-card-visual .gl-img{height:28px}
@keyframes gl-in{from{opacity:0}to{opacity:1}}
/* trois positions (gauche · haut-droite · bas-droite), chaque carte tourne d'une position à l'autre, avec un léger flottement */
@keyframes gl-card-a{0%,26%{transform:translate(28px,64px) rotate(-6deg)}33%,60%{transform:translate(188px,14px) rotate(4deg)}67%,93%{transform:translate(198px,112px) rotate(-3deg)}100%{transform:translate(28px,64px) rotate(-6deg)}}
@keyframes gl-card-b{0%,26%{transform:translate(188px,14px) rotate(4deg)}33%,60%{transform:translate(198px,112px) rotate(-3deg)}67%,93%{transform:translate(28px,64px) rotate(-6deg)}100%{transform:translate(188px,14px) rotate(4deg)}}
@keyframes gl-card-c{0%,26%{transform:translate(198px,112px) rotate(-3deg)}33%,60%{transform:translate(28px,64px) rotate(-6deg)}67%,93%{transform:translate(188px,14px) rotate(4deg)}100%{transform:translate(198px,112px) rotate(-3deg)}}
.gl-t{font-size:16px;font-weight:600;color:var(--ink)}
.gl-s{font-size:14px;color:var(--muted)}
.gl-steps{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted-2)}
.gl-step{display:inline-flex;align-items:center;gap:6px}.gl-step i{width:7px;height:7px;border-radius:999px;background:var(--line);flex:none}
.gl-step.now{color:var(--primary);font-weight:600}.gl-step.now i{background:var(--primary);animation:gl-pulse 1.4s ease-in-out infinite}
.gl-step.done{color:var(--muted)}.gl-step.done i{background:var(--green)}
@keyframes gl-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
.gl-late{font-size:12.5px;color:var(--muted-2);margin-top:8px}
/* version compacte : une ligne, dans un bandeau (régénération = anciens résultats conservés) */
.gl-atelier.compact{flex-direction:row;gap:14px;padding:10px 14px;text-align:left;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);flex:1 1 320px;min-width:0}
.gl-atelier.compact .gl-stage{width:96px;height:56px;margin:0;transform-origin:left center}
.gl-atelier.compact .gl-blob{width:80px;height:48px;margin:-24px 0 0 -40px}
.gl-atelier.compact .gl-star{width:22px;height:22px;margin:-11px 0 0 -11px}
.gl-atelier.compact .gl-card{width:30px;height:22px;padding:4px 4px;gap:2px;border-radius:5px}
.gl-atelier.compact .gl-line{height:2px}.gl-atelier.compact .gl-img{height:6px;border-radius:2px}.gl-atelier.compact .gl-btn{height:3px}
.gl-atelier.compact .gl-card-mail{animation-name:gl-mini-a,gl-in}.gl-atelier.compact .gl-card-sms{animation-name:gl-mini-b,gl-in}.gl-atelier.compact .gl-card-visual{animation-name:gl-mini-c,gl-in}
@keyframes gl-mini-a{0%,26%{transform:translate(4px,18px) rotate(-6deg)}33%,60%{transform:translate(60px,2px) rotate(4deg)}67%,93%{transform:translate(64px,32px) rotate(-3deg)}100%{transform:translate(4px,18px) rotate(-6deg)}}
@keyframes gl-mini-b{0%,26%{transform:translate(60px,2px) rotate(4deg)}33%,60%{transform:translate(64px,32px) rotate(-3deg)}67%,93%{transform:translate(4px,18px) rotate(-6deg)}100%{transform:translate(60px,2px) rotate(4deg)}}
@keyframes gl-mini-c{0%,26%{transform:translate(64px,32px) rotate(-3deg)}33%,60%{transform:translate(4px,18px) rotate(-6deg)}67%,93%{transform:translate(60px,2px) rotate(4deg)}100%{transform:translate(64px,32px) rotate(-3deg)}}
.gl-atelier.compact .gl-t{font-size:13.5px}.gl-atelier.compact .gl-s{font-size:12.5px}.gl-atelier.compact .gl-txt{display:flex;flex-direction:column;min-width:0}
/* version « carte » : remplit la zone image d'une carte de proposition */
.gl-atelier.card{padding:12px 10px;gap:2px;height:100%;justify-content:center}
.gl-atelier.card .gl-stage{width:200px;height:120px;margin-bottom:6px}
.gl-atelier.card .gl-blob{width:150px;height:96px;margin:-48px 0 0 -75px}
.gl-atelier.card .gl-star{width:32px;height:32px;margin:-16px 0 0 -16px}
.gl-atelier.card .gl-card{width:56px;height:40px;padding:6px 7px;gap:3px;border-radius:8px}
.gl-atelier.card .gl-line{height:3px}.gl-atelier.card .gl-img{height:11px}.gl-atelier.card .gl-btn{height:5px}
.gl-atelier.card .gl-card-mail{animation-name:gl-mid-a,gl-in}.gl-atelier.card .gl-card-sms{animation-name:gl-mid-b,gl-in}.gl-atelier.card .gl-card-visual{animation-name:gl-mid-c,gl-in}
@keyframes gl-mid-a{0%,26%{transform:translate(16px,40px) rotate(-6deg)}33%,60%{transform:translate(126px,8px) rotate(4deg)}67%,93%{transform:translate(132px,72px) rotate(-3deg)}100%{transform:translate(16px,40px) rotate(-6deg)}}
@keyframes gl-mid-b{0%,26%{transform:translate(126px,8px) rotate(4deg)}33%,60%{transform:translate(132px,72px) rotate(-3deg)}67%,93%{transform:translate(16px,40px) rotate(-6deg)}100%{transform:translate(126px,8px) rotate(4deg)}}
@keyframes gl-mid-c{0%,26%{transform:translate(132px,72px) rotate(-3deg)}33%,60%{transform:translate(16px,40px) rotate(-6deg)}67%,93%{transform:translate(126px,8px) rotate(4deg)}100%{transform:translate(132px,72px) rotate(-3deg)}}
.gl-atelier.card .gl-t{font-size:13px}.gl-atelier.card .gl-s{font-size:12px}

/* apparition des résultats : fondu + léger décalage, 50 ms entre les cartes (style inline animation-delay) */
.gl-reveal{animation:gl-reveal .32s var(--ease,ease) both}
@keyframes gl-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gl-fade-out{animation:gl-fadeout .22s ease both}
@keyframes gl-fadeout{to{opacity:0}}

/* ---------- Storyboard : génération vidéo (cadre au format du lecteur, 9:16) ---------- */
.vl{position:relative;width:216px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px 18px}
.vl-blob{position:absolute;left:-30px;top:-20px;width:190px;height:170px;border-radius:52% 48% 44% 56% / 58% 42% 58% 42%;background:var(--lemon);opacity:.85;animation:gl-blob 12s ease-in-out infinite}
.vl-star{position:absolute;right:12px;top:12px;width:22px;height:22px;opacity:.75;animation:gl-breathe 4s ease-in-out infinite;transform-origin:center}
.vl-frames{position:relative;display:flex;flex-direction:column;gap:10px}
.vl-frame{position:relative;height:64px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 16px -12px rgba(24,37,31,.4);padding:9px 10px;display:flex;gap:8px;align-items:flex-end;will-change:transform;animation:vl-focus 12s ease-in-out infinite}
.vl-frame:nth-child(2){animation-delay:-8s}.vl-frame:nth-child(3){animation-delay:-4s}
.vl-frame i{display:block;border-radius:4px;background:var(--line-2)}
.vl-shape{width:30px;height:100%;border-radius:8px!important;background:var(--lemon-2)!important}
.vl-shape.tall{width:22px}.vl-shape.wide{width:42px;height:60%}
.vl-lines{flex:1;display:flex;flex-direction:column;gap:5px}.vl-lines i{height:4px;width:80%}.vl-lines i:last-child{width:55%}
@keyframes vl-focus{0%,22%{transform:scale(1);box-shadow:0 6px 16px -12px rgba(24,37,31,.4)}30%,52%{transform:scale(1.035);box-shadow:0 14px 26px -14px rgba(22,75,63,.45)}60%,100%{transform:scale(1);box-shadow:0 6px 16px -12px rgba(24,37,31,.4)}}
.vl-timeline{position:relative;height:6px;border-radius:999px;background:var(--line);margin-top:4px;overflow:hidden}
.vl-timeline::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(24,37,31,.10) 22px 23px)}
.vl-cursor{position:absolute;top:-4px;left:0;width:14px;height:14px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 4px rgba(231,243,175,.9),0 0 16px 4px rgba(231,243,175,.8);animation:vl-cursor 7s ease-in-out infinite}
@keyframes vl-cursor{0%{transform:translateX(0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translateX(166px);opacity:0}}
.vl-txt{position:relative;text-align:center;margin-top:2px}
.vl-t{font-size:13px;font-weight:600;color:var(--ink)}.vl-s{font-size:11.5px;color:var(--muted);margin-top:2px}
.vl-wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.vl-side{flex:1 1 220px;min-width:0}
/* transition vers le vrai lecteur */
.vl-player{animation:gl-reveal .4s var(--ease,ease) both}

/* ---------- Lecteur : chargement / mise en mémoire tampon (discret, garde le poster) ---------- */
.vp{position:relative;display:inline-block;line-height:0}
.vp-buf{position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:999px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .9s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Réduction des mouvements : composition statique + libellé d'état ---------- */
@media (prefers-reduced-motion:reduce){
  .gl-blob,.gl-star,.gl-card,.vl-blob,.vl-star,.vl-frame,.vl-cursor,.gl-step.now i{animation:none!important}
  .gl-card{opacity:1}
  .gl-card-mail{transform:translate(28px,64px) rotate(-6deg)}.gl-card-sms{transform:translate(188px,14px) rotate(4deg)}.gl-card-visual{transform:translate(198px,112px) rotate(-3deg)}
  .gl-atelier.compact .gl-card-mail{transform:translate(4px,18px) rotate(-6deg)}.gl-atelier.compact .gl-card-sms{transform:translate(60px,2px) rotate(4deg)}.gl-atelier.compact .gl-card-visual{transform:translate(64px,32px) rotate(-3deg)}
  .gl-atelier.card .gl-card-mail{transform:translate(16px,40px) rotate(-6deg)}.gl-atelier.card .gl-card-sms{transform:translate(126px,8px) rotate(4deg)}.gl-atelier.card .gl-card-visual{transform:translate(132px,72px) rotate(-3deg)}
  .vl-cursor{transform:translateX(70px);opacity:1}
  .gl-reveal,.vl-player{animation:none}
}
.rm .gl-blob,.rm .gl-star,.rm .gl-card,.rm .vl-blob,.rm .vl-star,.rm .vl-frame,.rm .vl-cursor,.rm .gl-step.now i{animation:none!important}
.rm .gl-card{opacity:1}
.rm .gl-card-mail{transform:translate(28px,64px) rotate(-6deg)}.rm .gl-card-sms{transform:translate(188px,14px) rotate(4deg)}.rm .gl-card-visual{transform:translate(198px,112px) rotate(-3deg)}
.rm .gl-atelier.compact .gl-card-mail{transform:translate(4px,18px) rotate(-6deg)}.rm .gl-atelier.compact .gl-card-sms{transform:translate(60px,2px) rotate(4deg)}.rm .gl-atelier.compact .gl-card-visual{transform:translate(64px,32px) rotate(-3deg)}
.rm .gl-atelier.card .gl-card-mail{transform:translate(16px,40px) rotate(-6deg)}.rm .gl-atelier.card .gl-card-sms{transform:translate(126px,8px) rotate(4deg)}.rm .gl-atelier.card .gl-card-visual{transform:translate(132px,72px) rotate(-3deg)}
.rm .vl-cursor{transform:translateX(70px);opacity:1}

@media (max-width:480px){.gl-stage{transform:scale(.86);transform-origin:center top;margin-bottom:-6px}}

/* ---------- Image : modification ciblée (kit v2 variante image) : cercle citron, carte inclinée, étoile ---------- */
.il{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 10px}
.il.compact{flex-direction:row;text-align:left;gap:12px;padding:8px 10px}
.il-stage{position:relative;width:96px;height:96px;flex:none}.il.compact .il-stage{width:44px;height:44px}
.il-circle{position:absolute;inset:0;border-radius:999px;background:var(--lemon);animation:gl-blob 8s ease-in-out infinite}
.il-card{position:absolute;left:50%;top:50%;width:58%;height:42%;margin:-21% 0 0 -29%;border-radius:10%;background:var(--surface);box-shadow:0 10px 20px -10px rgba(22,75,63,.45);transform:rotate(-8deg);animation:il-float 4.5s ease-in-out infinite;display:grid;place-items:center}
.il.compact .il-card{border-radius:4px}
.il-card img{width:38%;height:auto}
@keyframes il-float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-4px) rotate(-5deg)}}
.il-t{font-size:13.5px;font-weight:600;color:var(--ink)}.il-s{font-size:12.5px;color:var(--muted)}
.il.error .il-circle{background:var(--red-soft);animation:none}.il.error .il-t{color:var(--red)}
.gl-retry{margin-top:6px}
@media (prefers-reduced-motion:reduce){.il-circle,.il-card{animation:none!important}}
.rm .il-circle,.rm .il-card{animation:none!important}