/* Animatia · jetons du design system (générés depuis tokens.json) */
:root{
  --surface:#f4f0e8;
  --surface-raised:#fbf9f4;
  --surface-sunk:#e9e3d8;
  --line:#ddd5c7;
  --line-strong:#8a8274;
  --ink:#121212;
  --ink-muted:#57524b;
  --blue:#2f35c6;
  --on-blue:#ffffff;
  --blue-soft:#dcdef6;
  --pink:#f27ab0;
  --on-pink:#121212;
  --pink-ink:#b3306e;
  --pink-soft:#fad2e4;
  --red:#f2552c;
  --on-red:#121212;
  --red-ink:#c23a14;
  --red-soft:#fbd9cd;
  --yellow:#f7d648;
  --on-yellow:#121212;
  --yellow-soft:#fbf0b8;
  --green:#1fa36b;
  --on-green:#121212;
  --green-ink:#157a4e;
  --green-soft:#cdebdb;
  --focus:var(--blue);
  --overlay:#121212b3;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-card:22px;
  --radius-lg:28px;
  --radius-pill:999px;
  --stroke-fine:1.5px;
  --stroke-bold:2px;
  --shadow-1:0 4px 12px #1212120f, 0 1px 2px #1212120a;
  --shadow-2:0 18px 44px #12121224;
  --shadow-pop:0 10px 24px #1212122e;
  --font-display:"Bricolage Grotesque", "Quicksand", system-ui, sans-serif;
  --font-body:"Quicksand", system-ui, sans-serif;
}
[data-theme="studio"]{
  --surface:#121211;
  --surface-raised:#1d1c1a;
  --surface-sunk:#181715;
  --line:#2c2a27;
  --line-strong:#706a60;
  --ink:#f2ede3;
  --ink-muted:#ada699;
  --blue:#8a90ff;
  --on-blue:#121211;
  --blue-soft:#23264a;
  --pink:#ff8fc4;
  --on-pink:#121211;
  --pink-ink:#ff9fcc;
  --pink-soft:#45202f;
  --red:#ff7550;
  --on-red:#121211;
  --red-ink:#ff9a7d;
  --red-soft:#4a2318;
  --yellow:#f7d648;
  --on-yellow:#121211;
  --yellow-soft:#3d3416;
  --green:#3cc98a;
  --on-green:#121211;
  --green-ink:#6edba6;
  --green-soft:#183a2b;
  --overlay:#000000cc;
  --shadow-1:0 4px 12px #00000066;
  --shadow-2:0 18px 44px #00000099;
  --shadow-pop:0 10px 24px #000000a6;
  color-scheme:dark;
}

/* Animatia — composants. Les valeurs viennent de tokens.css (var(--…)). */

:root { --an-ease: cubic-bezier(.2, .7, .2, 1); }
html { background: var(--surface); color: var(--ink); }
body { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
.an-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.an-col { display: flex; flex-direction: column; gap: var(--space-4); }
.an-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1; color: var(--ink); margin: 0; }
.an-muted { color: var(--ink-muted); }
.an-tc { font: 700 13px/1 var(--font-body); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
:where(.an-btn, .an-step, .an-field__control, .an-video-row, .an-dialog__close, .an-player__play, .an-frame):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Button ---------- */
.an-btn { display: inline-flex; align-items: center; gap: var(--space-2); border: var(--stroke-bold) solid transparent; border-radius: var(--radius-pill); padding: 14px 22px; font: 700 15px/1 var(--font-body); color: var(--ink); background: transparent; cursor: pointer; text-decoration: none; transition: transform .28s var(--an-ease), box-shadow .28s var(--an-ease), background .2s; }
.an-btn:hover { transform: translateY(-1px); }
.an-btn:active { transform: translateY(0) scale(.98); }
.an-btn--primary { background: var(--ink); color: var(--surface); box-shadow: var(--shadow-pop); }
.an-btn--secondary { border-color: var(--ink); background: transparent; }
.an-btn--secondary:hover { background: var(--surface-raised); }
.an-btn--ghost { padding-inline: 14px; }
.an-btn--ghost:hover { background: var(--surface-sunk); }
.an-btn--pink { background: var(--pink); color: var(--on-pink); }
.an-btn--small { padding: 9px 14px; font-size: 14px; }
.an-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.an-btn__ico { width: 26px; height: 26px; margin: -6px -10px -6px 2px; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in srgb, currentColor 16%, transparent); transition: transform .28s var(--an-ease); }
.an-btn__ico svg { width: 11px; height: 11px; }
.an-btn--small .an-btn__ico { width: 22px; height: 22px; }
.an-btn:hover .an-btn__ico { transform: translateX(3px); }

/* ---------- Pill ---------- */
.an-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); font: 700 13px/1 var(--font-body); color: var(--ink); background: var(--surface-sunk); white-space: nowrap; }
.an-pill--green { background: var(--green-soft); }
.an-pill--yellow { background: var(--yellow-soft); }
.an-pill--blue { background: var(--blue-soft); }
.an-pill--pink { background: var(--pink-soft); }
.an-pill--red { background: var(--red-soft); }
.an-pill--rec { background: var(--red); color: var(--on-red); }
.an-pill--ink { background: var(--ink); color: var(--surface); }
.an-pill--line { background: transparent; box-shadow: inset 0 0 0 var(--stroke-fine) var(--ink); }
.an-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.an-pill--green .an-pill__dot { background: var(--green); }
.an-pill--yellow .an-pill__dot { background: var(--ink); }
.an-pill--blue .an-pill__dot { background: var(--blue); }
.an-pill--pink .an-pill__dot { background: var(--pink); }
.an-pill--red .an-pill__dot { background: var(--red); }
.an-pill--ink .an-pill__dot, .an-pill--line .an-pill__dot { background: var(--red); }
@keyframes an-blink { 50% { opacity: .25; } }
.an-pill--live .an-pill__dot { animation: an-blink 1.2s steps(1) infinite; }

/* ---------- CBadge (badge circulaire) ---------- */
.an-cbadge { width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; display: inline-grid; place-items: center; font: 800 17px/1 var(--font-display); background: transparent; color: var(--ink); border: var(--stroke-fine) solid var(--ink); flex: none; }
.an-cbadge--pink { background: var(--pink); color: var(--on-pink); border-color: transparent; }
.an-cbadge--blue { background: var(--blue); color: var(--on-blue); border-color: transparent; }
.an-cbadge--yellow { background: var(--yellow); color: var(--on-yellow); border-color: transparent; }
.an-cbadge--ink { background: var(--ink); color: var(--surface); border-color: transparent; }
.an-cbadge--lg { width: 56px; height: 56px; font-size: 24px; }
.an-cbadge--sm { width: 30px; height: 30px; font-size: 14px; }
.an-cbadge svg { width: 48%; height: 48%; }

/* ---------- Highlight (mot en pilule) ---------- */
.an-hl { display: inline-block; padding: .02em .26em .06em; margin: -.02em -.04em; border-radius: var(--radius-pill); background: var(--pink); color: var(--on-pink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.an-hl--yellow { background: var(--yellow); color: var(--on-yellow); }
:where([data-theme="studio"]) .an-hl--yellow { background: var(--pink); color: var(--on-pink); }
.an-hl--blue { background: var(--blue); color: var(--on-blue); }
.an-hl--red { background: var(--red); color: var(--on-red); }
.an-hl--soft { background: var(--pink-soft); color: var(--ink); }
@keyframes an-sweep { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
.an-hl.is-in { animation: an-sweep .55s var(--an-ease) both; }

/* ---------- SectionTag ---------- */
.an-tag { display: inline-flex; align-items: center; gap: 10px; font: 700 11px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.an-tag::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--pink); }
.an-tag--ink::before { background: var(--ink); }
.an-tag--blue { color: var(--blue); }
.an-tag--blue::before { background: var(--blue); }
.an-tag--red { color: var(--red-ink); }
.an-tag--red::before { background: var(--red); }

/* ---------- Tok (jetons) ---------- */
.an-tok { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin: 0 .12em; }
.an-tok i { display: block; flex: none; }
.an-tok__rec { width: .32em; height: .32em; border-radius: 50%; background: var(--red); }
.an-tok__pill { width: .7em; height: .32em; border-radius: 999px; background: var(--pink); }
.an-tok__play { width: 0; height: 0; border-style: solid; border-width: .19em 0 .19em .3em; border-color: transparent transparent transparent var(--pink); }
.an-tok__bar { width: .44em; height: .1em; border-radius: 999px; background: var(--ink); }
.an-tok__box { width: .5em; height: .4em; border-radius: .1em; border: var(--stroke-fine) solid var(--ink); box-sizing: border-box; }
.an-tok__dotb { width: .32em; height: .32em; border-radius: 50%; background: var(--pink); }
.an-tok__dotblue { width: .32em; height: .32em; border-radius: 50%; background: var(--blue); }

/* ---------- Stepper ---------- */
.an-steps { display: flex; align-items: center; gap: 0; padding: 10px; border: var(--stroke-fine) solid var(--ink); border-radius: var(--radius-pill); background: transparent; }
.an-step { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: var(--radius-pill); background: transparent; font: 800 15px/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink); cursor: pointer; flex: none; }
.an-step__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: transparent; color: var(--ink-muted); border: var(--stroke-fine) solid var(--line-strong); box-sizing: border-box; }
.an-step--done .an-step__n { background: var(--pink-soft); color: var(--ink); border-color: transparent; }
.an-step--current { background: var(--pink); color: var(--on-pink); box-shadow: var(--shadow-pop); }
.an-step--current .an-step__n { background: var(--ink); color: var(--pink); border-color: transparent; }
.an-step--todo { color: var(--ink-muted); cursor: default; }
.an-steps__link { flex: 1; height: 0; min-width: 18px; margin: 0 4px; border-top: var(--stroke-fine) dashed var(--line-strong); }
.an-steps__link--done { border-top-style: solid; border-color: var(--ink); }

/* ---------- Card ---------- */
.an-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.an-card--lg { border-radius: var(--radius-lg); padding: var(--space-6); }
.an-card--soft { border-color: transparent; box-shadow: none; }
.an-card--blue { background: var(--blue-soft); }
.an-card--red { background: var(--red-soft); }
.an-card--yellow { background: var(--yellow-soft); }
.an-card--green { background: var(--green-soft); }
.an-card--line { background: transparent; border: var(--stroke-fine) solid var(--ink); box-shadow: none; }
.an-card--pink { background: var(--pink-soft); }
.an-card--solid { background: var(--pink); color: var(--on-pink); border-color: transparent; box-shadow: none; }
.an-card--solid .an-muted, .an-card--solid .an-display { color: var(--on-pink); }
.an-card--solid .an-tag { color: var(--on-pink); }
.an-card--solid .an-tag::before { background: var(--on-pink); }
.an-card__accent { position: absolute; top: 0; left: var(--space-5); width: 56px; height: 4px; border-radius: 0 0 4px 4px; background: var(--an-card-accent, var(--pink)); }
.an-card--lift { transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease); }
.an-card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* ---------- Field ---------- */
.an-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); }
.an-field__label { font-weight: 700; font-size: 15px; color: var(--ink); }
.an-field__control { width: 100%; box-sizing: border-box; border: var(--stroke-bold) solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); padding: 13px 16px; font: 500 16px/1.4 var(--font-body); transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.an-field__control::placeholder { color: var(--ink-muted); }
.an-field__control:hover { border-color: var(--ink); }
.an-field__control:focus { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 45%, transparent); outline: none; }
.an-field--invalid .an-field__control { border-color: var(--red); }
.an-field__control--pill { border-radius: var(--radius-pill); }
textarea.an-field__control { min-height: 110px; resize: vertical; line-height: 1.55; }
.an-field__select { position: relative; }
.an-field__select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.an-field__select .an-field__control { padding-right: 44px; }
.an-field__help { font-size: 13px; color: var(--ink-muted); }
.an-field--invalid .an-field__help { color: var(--red-ink); font-weight: 700; }

/* ---------- Frame (écran au trait) ---------- */
.an-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; box-sizing: border-box; border-radius: var(--radius-md); background: var(--surface-sunk); color: var(--ink); overflow: hidden; border: var(--stroke-fine) solid var(--ink); padding: 0; width: 100%; cursor: default; font-family: var(--font-body); background-size: cover; background-position: center; }
.an-frame--tall { aspect-ratio: 9 / 16; }
.an-frame--square { aspect-ratio: 1; }
.an-frame__tl { position: absolute; top: 14px; left: 16px; display: inline-flex; align-items: center; gap: 6px; }
.an-frame__tr { position: absolute; top: 14px; right: 16px; }
.an-frame__br { position: absolute; bottom: 14px; right: 16px; }
.an-frame__rec { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.an-frame__glyph { width: 40px; height: 40px; color: var(--pink); }

/* ---------- StoryFrame ---------- */
.an-story { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-body); }
.an-story--current .an-frame { outline: 3px solid var(--pink); outline-offset: 3px; }
.an-story__head { display: flex; align-items: center; gap: 8px; }
.an-story__title { font: 800 15px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.an-story__caption { font-size: 13px; line-height: 1.45; color: var(--ink-muted); margin: 0; }

/* ---------- VideoRow ---------- */
.an-video-row { display: flex; align-items: center; gap: var(--space-4); width: 100%; box-sizing: border-box; text-align: left; padding: 12px 18px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--ink); cursor: pointer; font-family: var(--font-body); transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease); }
.an-video-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.an-video-row__title { font: 800 18px/1.2 var(--font-display); letter-spacing: -0.015em; margin: 0; }
.an-video-row__meta { font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
.an-video-row__body { flex: 1; min-width: 0; }
.an-video-row__thumb { width: 88px; flex: none; position: relative; }
.an-video-row__thumb .an-frame { border-radius: 10px; }
.an-video-row__thumb .an-cbadge { position: absolute; right: -8px; bottom: -8px; box-shadow: 0 0 0 3px var(--surface-raised); background-color: var(--surface-raised); }
.an-video-row__thumb .an-cbadge--pink { background-color: var(--pink); }
.an-video-row__thumb svg.an-video-row__play { width: 16px; height: 16px; color: var(--pink); }

/* ---------- PlayerBar ---------- */
.an-player { border-radius: var(--radius-card); overflow: hidden; border: var(--stroke-fine) solid var(--ink); background: var(--surface-raised); font-family: var(--font-body); }
.an-player .an-frame { border-radius: 0; border-width: 0 0 var(--stroke-fine) 0; }
.an-player__play { width: 68px; height: 68px; border-radius: 50%; background: var(--pink); color: var(--on-pink); border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-pop); transition: transform .28s var(--an-ease); position: relative; z-index: 1; }
.an-player__play:hover { transform: scale(1.06); }
.an-player__play svg { width: 24px; height: 24px; margin-left: 3px; }
.an-player__bar { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; }
.an-player__segs { flex: 1; display: flex; gap: 4px; position: relative; }
.an-player__seg { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; position: relative; }
.an-player__seg--done { background: var(--ink); }
.an-player__seg--now::after { content: ""; position: absolute; inset: 0; width: var(--an-progress, 40%); background: var(--pink); border-radius: 999px; }
.an-player__time { color: var(--ink); }
.an-player__now { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); padding: 0 16px 12px; }

/* ---------- Loader ---------- */
.an-loader { display: grid; place-items: center; text-align: center; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-2); font-family: var(--font-body); }
.an-loader--overlay { position: fixed; inset: 0; border-radius: 0; background: var(--overlay); box-shadow: none; }
.an-loader__card { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7); box-shadow: var(--shadow-2); }
.an-loader__screen { width: 240px; margin: 0 auto var(--space-5); }
.an-loader__track { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; gap: 4px; }
.an-loader__track i { flex: 1; height: 6px; border-radius: 999px; background: var(--line); }
.an-loader__track i.is-on { background: var(--pink); }
.an-loader__head { position: absolute; top: 30px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--red); left: 22px; animation: an-scan 2.4s var(--an-ease) infinite; }
.an-loader__head::before { content: ""; position: absolute; top: -4px; left: -3.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
@keyframes an-scan { 0% { left: 22px; } 100% { left: calc(100% - 24px); } }
.an-loader__play { width: 30px; height: 30px; color: var(--pink); margin-top: -14px; }
.an-loader .an-frame__rec { animation: an-blink 1.2s steps(1) infinite; }
.an-loader__title { font: 800 24px/1.1 var(--font-display); letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ink); }
.an-loader__sub { color: var(--ink-muted); margin: 0; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .an-loader__head, .an-loader .an-frame__rec, .an-pill--live .an-pill__dot { animation: none; } .an-hl.is-in { animation: none; } }

/* ---------- Dialog ---------- */
.an-dialog { width: min(520px, 100%); box-sizing: border-box; background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-2); font-family: var(--font-body); color: var(--ink); position: relative; }
.an-dialog__title { font: 800 26px/1.1 var(--font-display); margin: 0 0 var(--space-2); letter-spacing: -0.02em; }
.an-dialog__body { color: var(--ink-muted); margin: 0 0 var(--space-5); }
.an-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.an-dialog__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: var(--stroke-fine) solid var(--ink); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; display: grid; place-items: center; }

/* ---------- Topbar ---------- */
.an-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px var(--space-5); background: var(--surface); border-bottom: var(--stroke-fine) solid var(--ink); font-family: var(--font-body); }
.an-topbar__brand { display: flex; align-items: center; gap: 10px; }
.an-topbar__logo { height: 40px; width: auto; display: block; }
.an-topbar__by { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--line-strong); color: var(--ink); }
.an-topbar__by-word { font: 800 10px/1 var(--font-display); letter-spacing: -0.01em; }
.an-topbar__by b { font: 800 14px/1 var(--font-display); color: var(--blue); }
.an-topbar__by .an-topbar__by-logo { height: 13px; width: auto; display: block; transform: translateY(1px); }
.an-topbar__nav { display: flex; align-items: center; gap: var(--space-2); }
.an-topbar__link { font: 700 14px/1 var(--font-body); color: var(--ink-muted); text-decoration: none; padding: 10px 12px; border-radius: var(--radius-pill); }
.an-topbar__link:hover { color: var(--ink); background: var(--surface-sunk); }

/* ---------- Formes ---------- */
.an-shape { display: inline-block; vertical-align: middle; }
.an-shape svg { display: block; width: 100%; height: 100%; overflow: visible; }
.an-shape--blend { mix-blend-mode: multiply; }
[data-theme="studio"] .an-shape--blend { mix-blend-mode: screen; }
.an-shape--pink { color: var(--pink); } .an-shape--blue { color: var(--blue); } .an-shape--red { color: var(--red); } .an-shape--yellow { color: var(--yellow); } .an-shape--green { color: var(--green); } .an-shape--ink { color: var(--ink); } .an-shape--line { color: var(--line-strong); }
.an-compo { position: relative; isolation: isolate; }
.an-compo > .an-shape { position: absolute; }

/* ---------- Poussière (grain) ---------- */
/* Trame posée sur un aplat : .an-grain + --an-grain-from (to right, to top…) ; la poussière est noire, plus dense du côté indiqué. */
.an-grain { position: relative; isolation: isolate; }
.an-grain::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 1.7'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  -webkit-mask-image: linear-gradient(var(--an-grain-from, to left), #000, transparent 45%); mask-image: linear-gradient(var(--an-grain-from, to left), #000, transparent 45%); }
[data-theme="studio"] .an-grain::after { mix-blend-mode: screen; filter: invert(1); }

/* Deux versions d'une image selon le thème (logo noir en Beige, logo clair en Studio). */
.an-on-studio { display: none !important; }
[data-theme="studio"] .an-on-beige { display: none !important; }
[data-theme="studio"] .an-on-studio { display: block !important; }

/* ---- Mouvement des compositions et des applications ---- */
@keyframes an-tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes an-float { 50% { transform: translateY(-5px); } }
@keyframes an-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes an-marquee { to { transform: translateX(-50%); } }
@keyframes an-cycle3 { 0%, 28% { opacity: 1; visibility: visible; } 33.3%, 100% { opacity: 0; visibility: hidden; } }
.an-compo--in > .an-shape { animation: an-tile-in .55s var(--an-ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.an-compo--live > .an-shape { animation: an-tile-in .55s var(--an-ease) both, an-float 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 80ms), calc(.6s + var(--i, 0) * -.7s); }
.an-rise > * { animation: an-rise .5s var(--an-ease) both; }
.an-rise > :nth-child(1) { animation-delay: .05s; } .an-rise > :nth-child(2) { animation-delay: .15s; } .an-rise > :nth-child(3) { animation-delay: .25s; } .an-rise > :nth-child(4) { animation-delay: .35s; } .an-rise > :nth-child(5) { animation-delay: .45s; }
.an-marquee { overflow: hidden; white-space: nowrap; border-top: var(--stroke-fine) solid var(--ink); border-bottom: var(--stroke-fine) solid var(--ink); }
.an-marquee__track { display: inline-flex; gap: 40px; padding: 10px 20px; animation: an-marquee 16s linear infinite; font: 700 14px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.an-marquee__track > i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); align-self: center; }
.an-deck { position: relative; }
.an-deck > .an-slide { position: absolute; inset: 0; animation: an-cycle3 12s infinite both; }
.an-deck > .an-slide:nth-child(2) { animation-delay: 4s; } .an-deck > .an-slide:nth-child(3) { animation-delay: 8s; }
.an-slide { background: var(--surface); border: var(--stroke-fine) solid var(--ink); border-radius: var(--radius-md); overflow: hidden; position: relative; isolation: isolate; }
.an-slide__pg { position: absolute; right: 18px; bottom: 14px; font: 700 11px/1 var(--font-body); color: var(--ink-muted); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) {
  .an-compo--in > .an-shape, .an-compo--live > .an-shape, .an-rise > *, .an-marquee__track { animation: none; }
  .an-deck > .an-slide { animation: none; position: relative; } .an-deck > .an-slide + .an-slide { display: none; }
}