/* ============================================================================
   Marylink — Animation 2 : « Un prompt jetable devient une pratique réutilisable »
   Page Solution. Scope total sous #mlk-practice. Une note « prompt brut » se voit
   emboîter 4 briques visuelles (Cadre → Composants → Gouvernance → Usage), puis se
   fige : tag jetable→réutilisable, tampon « Validée », badges. Lecture rapide, peu
   de texte. Déclenché au scroll, rejouable. Respecte prefers-reduced-motion (état
   final figé). Sans dépendance, sans image.
   ========================================================================== */
#mlk-practice{
  --p-blue:#5062ff;--p-violet:#7c5cff;--p-teal:#0fb39a;--p-amber:#c9871f;
  --p-line:#e7e3f6;--p-ink:#1a1633;--p-dim:#6b6685;
  --ease:cubic-bezier(.22,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  position:relative;max-width:680px;margin:36px auto 0;
  font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--p-ink);
}
#mlk-practice *{box-sizing:border-box}

/* ---------- Rail de progression (5 états) --------------------------------- */
#mlk-practice .xf2-rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin:0 4px 18px;gap:0}
#mlk-practice .xf2-rail-line{position:absolute;left:9%;right:9%;top:7px;height:2px;background:var(--p-line);border-radius:2px}
#mlk-practice .xf2-rail-fill{position:absolute;left:9%;top:7px;height:2px;width:0;background:linear-gradient(90deg,var(--p-blue),var(--p-violet));border-radius:2px;transition:width .55s var(--ease)}
#mlk-practice .step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
#mlk-practice .step .d{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--p-line);transition:border-color .4s,background .4s,transform .4s var(--spring)}
#mlk-practice .step .l{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.03em;color:#aaa4c2;text-transform:uppercase;line-height:1.25;max-width:80px;transition:color .4s}
#mlk-practice .step.done .d{border-color:var(--p-violet);background:var(--p-violet)}
#mlk-practice .step.done .l{color:var(--p-dim)}
#mlk-practice .step.cur .d{border-color:var(--p-violet);background:#fff;transform:scale(1.22);box-shadow:0 0 0 4px rgba(124,92,255,.16)}
#mlk-practice .step.cur .l{color:var(--p-violet)}

/* ---------- Carte ---------------------------------------------------------- */
#mlk-practice .xf2-card{
  position:relative;background:#fff;border:1px dashed #c9c2e8;border-radius:18px;
  padding:20px 20px 18px;overflow:hidden;
  box-shadow:0 22px 50px -42px rgba(60,54,140,.5),inset 0 1px 0 #fff;
  transition:border-color .55s,border-style .1s,box-shadow .55s;
}
#mlk-practice .xf2-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:0;
  background:linear-gradient(90deg,var(--p-blue),var(--p-violet),var(--p-teal));transition:height .55s var(--ease)}
#mlk-practice.is-final .xf2-card{border-style:solid;border-color:#cfe9e2;box-shadow:0 34px 70px -40px rgba(15,140,120,.42)}
#mlk-practice.is-final .xf2-card::before{height:4px}

/* tampon « Validée » (état final) */
#mlk-practice .xf2-stamp{
  position:absolute;top:14px;right:14px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0a7a68;border:2px solid #1aa589;border-radius:9px;padding:5px 10px;background:rgba(223,247,241,.82);
  transform:rotate(-9deg) scale(1.5);opacity:0;transition:opacity .35s,transform .45s var(--spring);pointer-events:none}
#mlk-practice .xf2-stamp .ck{font-size:13px;font-weight:900}
#mlk-practice .xf2-stamp .sv{font-weight:600;color:#3aa18f}
#mlk-practice.is-final .xf2-stamp{opacity:1;transform:rotate(-9deg) scale(1);transition-delay:.18s}

/* en-tête : libellé (morph) + titre + statut */
#mlk-practice .xf2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#mlk-practice .xf2-htxt{min-width:0}
#mlk-practice .xf2-kicker{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
#mlk-practice .xf2-type{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--p-violet);background:#f1edff;border:1px solid #e3dcff;border-radius:6px;padding:3px 8px;
  opacity:0;transform:translateY(-3px);transition:opacity .4s,transform .4s}
#mlk-practice.is-final .xf2-type{opacity:1;transform:none}
#mlk-practice .xf2-label{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--p-dim);transition:color .5s}
#mlk-practice.is-final .xf2-label{color:var(--p-teal)}
#mlk-practice .xf2-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.015em;line-height:1.12;
  margin:2px 0 0;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .5s,margin .4s}
#mlk-practice.is-final .xf2-title{max-height:60px;opacity:1;margin-top:4px}
#mlk-practice .xf2-status{
  flex:none;font-size:10.5px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;transition:color .5s,background .5s,border-color .5s,opacity .35s}
#mlk-practice .xf2-status .sd{width:6px;height:6px;border-radius:50%;background:currentColor}
#mlk-practice .xf2-status{color:var(--p-amber);background:#fbf2e0;border:1px solid #f1ddb4}
#mlk-practice.is-final .xf2-status{opacity:0} /* remplacé par le tampon en final */

/* prompt brut (toujours visible) — note « jetable » */
#mlk-practice .xf2-raw{
  position:relative;margin-top:14px;border-left:3px solid #ddb15f;background:#fbf6ec;border-radius:0 10px 10px 0;
  padding:11px 14px 11px 14px;font-size:13.5px;line-height:1.5;color:#4a4566;
  transition:border-color .55s,background .55s}
#mlk-practice.is-final .xf2-raw{border-left-color:var(--p-teal);background:#f1fbf8}
#mlk-practice .xf2-raw .q{font-style:italic}
#mlk-practice .xf2-raw .rtag{
  display:inline-block;vertical-align:middle;margin-right:8px;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#9a6a12;background:#f5e6c6;border-radius:5px;padding:2px 7px;transition:color .5s,background .5s}
#mlk-practice.is-final .xf2-raw .rtag{color:#0a7a68;background:#cdeee5}

/* ---------- Briques (Cadre / Composants / Gouvernance / Usage) ------------- */
#mlk-practice .xf2-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
#mlk-practice .xf2-grp{ /* chaque brique = une cellule qui s'emboîte */
  opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity .4s var(--ease),transform .5s var(--spring)}
#mlk-practice .xf2-grp.on{opacity:1;transform:none}
#mlk-practice .xf2-tile{
  position:relative;display:flex;align-items:center;gap:11px;height:100%;
  background:#faf9ff;border:1px solid var(--p-line);border-radius:13px;padding:11px 13px 11px 15px;overflow:hidden;
  transition:border-color .35s,box-shadow .35s,background .35s}
#mlk-practice .xf2-tile::before{ /* liseré de couleur = identité de la brique */
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:13px 0 0 13px;background:var(--tone)}
#mlk-practice .xf2-grp.on .xf2-tile{box-shadow:0 10px 22px -16px rgba(60,54,140,.45)}
#mlk-practice .xf2-ic{
  flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;line-height:1;
  background:var(--tone-soft);box-shadow:inset 0 0 0 1px var(--tone-ring)}
#mlk-practice .xf2-tt{display:flex;flex-direction:column;gap:5px;min-width:0}
#mlk-practice .xf2-tt .w{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15.5px;letter-spacing:-.01em;line-height:1.02;color:var(--tone-ink)}
/* parts de la brique = mini-chips distincts (fin du « tout au même niveau ») */
#mlk-practice .xf2-tt .cs{display:flex;flex-wrap:wrap;gap:4px}
#mlk-practice .xf2-tt .c{
  font-size:10.5px;font-weight:600;line-height:1;color:var(--tone-ink);
  background:var(--tone-soft);border:1px solid var(--tone-ring);border-radius:6px;padding:3px 6px;white-space:nowrap}
/* teintes par brique (variables → liseré, icône, chips, mot) */
#mlk-practice .t-blue  {--tone:var(--p-blue);  --tone-ink:#3947d6;--tone-soft:#eceeff;--tone-ring:rgba(80,98,255,.22)}
#mlk-practice .t-violet{--tone:var(--p-violet);--tone-ink:#6a45e6;--tone-soft:#f2ecff;--tone-ring:rgba(124,92,255,.22)}
#mlk-practice .t-amber {--tone:var(--p-amber); --tone-ink:#9a6a12;--tone-soft:#fbf1d9;--tone-ring:rgba(201,135,31,.26)}
#mlk-practice .t-teal  {--tone:var(--p-teal);  --tone-ink:#0a8a76;--tone-soft:#ddf6ef;--tone-ring:rgba(15,179,154,.26)}
#mlk-practice .xf2-grp.on .xf2-tile{border-color:var(--tone-ring);background:#fff}
/* pulsation brève de l'icône quand la brique s'emboîte */
#mlk-practice .xf2-grp.on .xf2-ic{animation:xf2pop .5s var(--spring)}
@keyframes xf2pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- Badges finaux -------------------------------------------------- */
#mlk-practice .xf2-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .5s,margin-top .45s}
#mlk-practice.is-final .xf2-badges{max-height:80px;opacity:1;margin-top:15px}
#mlk-practice .xf2-badges span{
  font-size:11.5px;font-weight:700;letter-spacing:.005em;border-radius:9px;padding:5px 11px 5px 8px;
  display:inline-flex;align-items:center;gap:6px;color:#0a6e5e;background:#fff;border:1px solid #cce9e0;
  box-shadow:0 1px 2px rgba(15,140,120,.07);
  transform:translateY(6px) scale(.92);opacity:0;transition:transform .42s var(--spring),opacity .42s}
#mlk-practice.is-final .xf2-badges span{transform:none;opacity:1}
#mlk-practice.is-final .xf2-badges span:nth-child(2){transition-delay:.09s}
#mlk-practice.is-final .xf2-badges span:nth-child(3){transition-delay:.18s}
#mlk-practice.is-final .xf2-badges span:nth-child(4){transition-delay:.27s}
#mlk-practice .xf2-badges span .ck{
  flex:none;width:15px;height:15px;border-radius:5px;padding:2px;background:#dcf6ef;
  fill:none;stroke:#12a98f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Légende + bouton rejouer -------------------------------------- */
#mlk-practice .xf2-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
#mlk-practice .xf2-cap{font-size:15px;font-weight:500;color:var(--p-dim);line-height:1.4;min-height:20px;opacity:0;transition:opacity .4s}
#mlk-practice .xf2-cap.show{opacity:1}
#mlk-practice .xf2-cap b{color:var(--p-ink);font-weight:700}
#mlk-practice .xf2-cap .accent{background:linear-gradient(110deg,var(--p-blue),var(--p-violet));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
#mlk-practice .xf2-replay{
  flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--p-violet);
  background:#fff;border:1px solid var(--p-line);border-radius:999px;padding:7px 13px;
  transition:border-color .25s,background .25s,transform .15s,opacity .3s}
#mlk-practice .xf2-replay:hover{border-color:var(--p-violet);background:#f6f3ff;transform:translateY(-1px)}
#mlk-practice .xf2-replay svg{width:13px;height:13px;transition:transform .5s var(--ease)}
#mlk-practice .xf2-replay:hover svg{transform:rotate(-180deg)}

/* ---------- Repli statique (no-JS) ---------------------------------------- */
#mlk-practice .xf2-fallback{background:#fff;border:1px solid var(--p-line);border-radius:18px;padding:20px;box-shadow:0 30px 64px -44px rgba(60,54,140,.5)}
#mlk-practice .xf2-fallback .fl{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--p-teal);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
#mlk-practice .xf2-fallback h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;margin:3px 0 0}
#mlk-practice .xf2-fallback p{font-size:13.5px;color:#4a4566;margin:10px 0 0;line-height:1.5}
#mlk-practice .xf2-fallback .fb{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
#mlk-practice .xf2-fallback .fb span{font-size:11px;font-weight:700;color:#0a7a68;background:#dff7f1;border:1px solid #b6ecdf;border-radius:999px;padding:4px 11px}

/* ---------- Responsive ----------------------------------------------------- */
@media(max-width:600px){
  #mlk-practice{margin-top:26px}
  #mlk-practice .step .l{font-size:8px;max-width:58px}
  #mlk-practice .xf2-head{flex-direction:row} /* statut reste à droite */
  #mlk-practice .xf2-stamp{font-size:9.5px;padding:4px 8px;top:10px;right:10px}
  #mlk-practice .xf2-ic{width:38px;height:38px;font-size:19px}
  #mlk-practice .xf2-tiles{grid-template-columns:1fr} /* briques empilées : aucun mot tronqué */
  #mlk-practice .xf2-foot{flex-direction:column-reverse;align-items:flex-start}
  #mlk-practice .xf2-replay{align-self:flex-end}
}

/* ---------- Accessibilité — reduced motion -------------------------------- */
@media(prefers-reduced-motion:reduce){
  #mlk-practice *{transition-duration:.001s !important;animation-duration:.001s !important}
}