/* ============================================================================
   Marylink — « Marylink en trois temps » : chrome PARTAGÉ des 3 scènes animées
   qui remplacent les 3 illustrations statiques (clarify/{fr,en}-1|2|3.webp) sur
   la home. Ce fichier ne porte QUE le cadre commun (carte + en-tête numéroté +
   stage + légende + repli no-JS). Chaque scène injecte ses propres styles+DOM
   via /assets/clarify{1,2,3}.js (asset autonome, scopé #mlk-clarifyN .stage).
   Tokens alignés sur styles.css. Scope total sous .mlk-clarify.
   ========================================================================== */
.mlk-clarify{
  --c-ink:#16122e;--c-muted:#69647f;--c-dim:#6b6685;--c-line:#e9e5f7;--c-soft:#f4f1ff;
  --c-blue:#5062ff;--c-blue-d:#4453e0;--c-violet:#7c5cff;--c-violet-d:#6a45e6;
  --c-aqua:#ed3d74;--c-amber:#ffb978;--c-amber-d:#c9871f;--c-teal:#0fb39a;--c-teal-d:#0a8a76;
  --c-red:#e0556b;--c-green:#12a98f;
  --ease:cubic-bezier(.22,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  position:relative;width:100%;max-width:880px;
  background:#fff;border:1px solid var(--c-line);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -48px rgba(60,70,170,.55),0 6px 18px -14px rgba(60,70,170,.25);
  font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--c-ink);isolation:isolate;
}
.mlk-clarify *{box-sizing:border-box}

/* ---------- En-tête : pastille numérotée + titre + sous-titre + rejouer ---- */
.mlk-clarify-head{display:flex;align-items:flex-start;gap:14px;padding:17px 20px 13px;position:relative;z-index:3}
.mlk-clarify-num{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;color:#fff;line-height:1;
  background:linear-gradient(150deg,var(--c-blue),var(--c-violet));box-shadow:0 8px 18px -9px rgba(80,98,255,.7)}
.mlk-clarify[data-step="1"] .mlk-clarify-num{background:linear-gradient(150deg,#ff9d6b,var(--c-aqua));box-shadow:0 8px 18px -9px rgba(237,61,116,.55)}
.mlk-clarify[data-step="3"] .mlk-clarify-num{background:linear-gradient(150deg,var(--c-violet),var(--c-aqua));box-shadow:0 8px 18px -9px rgba(124,92,255,.6)}
.mlk-clarify-htxt{flex:1;min-width:0;padding-top:1px}
.mlk-clarify-htxt h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(18px,2.3vw,21px);letter-spacing:-.02em;margin:0;line-height:1.08}
.mlk-clarify-htxt p{margin:4px 0 0;color:var(--c-muted);font-size:13.5px;line-height:1.42}
.mlk-clarify-replay{
  flex:none;width:33px;height:33px;border-radius:9px;cursor:pointer;
  border:1px solid var(--c-line);background:#fff;color:var(--c-violet-d);
  display:grid;place-items:center;transition:border-color .2s,background .2s,transform .35s var(--ease)}
.mlk-clarify-replay:hover{border-color:var(--c-violet);background:var(--c-soft)}
.mlk-clarify-replay:hover svg{transform:rotate(-180deg)}
.mlk-clarify-replay svg{width:15px;height:15px;transition:transform .5s var(--ease)}
.mlk-clarify:not(.is-live) .mlk-clarify-replay{display:none}

/* ---------- Stage : conteneur de scène (chaque clarifyN.js peint dedans) --- */
.mlk-clarify-stage{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  container-type:inline-size;
  background:radial-gradient(125% 130% at 50% -10%,#fdfcff 0%,#f3f0ff 100%);
  border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  display:none}
.mlk-clarify.is-live .mlk-clarify-stage{display:block}
.mlk-clarify.is-live .mlk-clarify-fallback{display:none}

/* ---------- Repli statique (no-JS / erreur) : l'illustration d'origine ----- */
.mlk-clarify-fallback{width:100%;height:auto;display:block;border-top:1px solid var(--c-line)}

/* ---------- Légende ------------------------------------------------------- */
.mlk-clarify-cap{margin:0;padding:13px 20px 16px;color:var(--c-muted);font-size:14px;line-height:1.45;text-align:center;position:relative;z-index:3}
.mlk-clarify-cap b{color:var(--c-ink);font-weight:700}

/* ---------- Responsive : la scène garde de la hauteur sur mobile ----------- */
@media(max-width:600px){
  .mlk-clarify-head{padding:14px 15px 11px;gap:11px}
  .mlk-clarify-num{width:33px;height:33px;font-size:16px;border-radius:9px}
  .mlk-clarify-stage{aspect-ratio:auto;min-height:360px}
  .mlk-clarify-cap{padding:11px 15px 14px;font-size:13px}
}

/* ---------- Accessibilité — reduced motion (état final figé côté JS) ------- */
@media(prefers-reduced-motion:reduce){
  .mlk-clarify *{transition-duration:.001s!important;animation-duration:.001s!important}
  .mlk-clarify-replay{display:none!important}
}