/* ============================================================
   Motionary, base layer

   TOUTES les couleurs du site viennent de ce bloc. Aucun hex
   n'est ecrit en dur ailleurs, sauf le noir des masques CSS qui
   n'a pas de valeur chromatique.

   Les valeurs ci-dessous sont la palette par defaut, Lime Spark
   sur Graphite, et servent aussi de repli si JavaScript est coupe.
   assets/js/theme.js les recalcule a partir de deux couleurs
   seulement, un accent et une surface. Voir assets/js/palettes.js
   ============================================================ */

:root{
  /* --- accent --- */
  --accent:#B6FF2E;
  --accent-rgb:182,255,46;
  --accent-2:#8FCC1F;      /* accent assombri, degrades */
  --accent-lite:#C8FF5C;   /* accent eclairci, survol */
  --accent-deep:#2E3A16;   /* fin de degrade tres sombre */
  --on-accent:#171A0E;     /* texte et formes posees SUR l'accent */
  --on-accent-rgb:23,26,14;

  /* --- accents secondaires, derives par rotation de teinte --- */
  --a2:#5DD6FF;  --a2-rgb:93,214,255;
  --a3:#2F6BFF;
  --a4:#FF5C9E;

  /* --- semantiques --- */
  --danger:#FF5C5C;  --danger-rgb:255,92,92;
  --danger-bg:#3A2A2E;
  --warn:#FFC93C;

  /* --- surfaces, du plus profond au plus contraste --- */
  --void:#12141A;   --void-rgb:18,20,26;    /* noir absolu, pilule iOS */
  --bg:#191B21;     --bg-rgb:25,27,33;      /* fond de page */
  --stage:#1B1E25;  --stage-rgb:27,30,37;   /* fond des scenes de demo */
  --panel:#20232B;                          /* champs, segments, onglets */
  --s0:#22262F;                             /* cadres internes de demo */
  --card:#23262F;                           /* surface des cartes */
  --card-2:#292D37;                         /* surface surelevee */

  /* --- rampe de gris des demos, contraste croissant sur --card --- */
  --s1:#2A2F3A;
  --s2:#31363F;
  --s3:#3A404E;   /* le plus utilise, barres inactives */
  --s4:#4A5262;
  --s5:#4C5464;
  --s6:#5A6273;

  /* --- texte --- */
  --ink:#EDEFF3;  --ink-rgb:237,239,243;
  --ink-2:#A7AEBC;
  --ink-3:#6F7788;

  /* --- filets et ombres --- */
  --line:rgba(237,239,243,.11);
  --line-2:rgba(237,239,243,.22);
  --line-card:rgba(237,239,243,.16);
  --shadow-rgb:0,0,0;
  --shadow:0 1px 0 rgba(237,239,243,.04) inset, 0 12px 30px rgba(0,0,0,.35);

  /* --- alias historiques, ne pas utiliser dans du code neuf --- */
  --lime:var(--accent);
  --lime-dim:var(--accent-2);
  --lime-soft:rgba(var(--accent-rgb),.14);
  --graphite:var(--card);
  --logo-bg:#23262F;

  /* --- non chromatique --- */
  --r:14px;
  --r-s:10px;
  --font:"Inter","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* transition douce au changement de palette, coupee si l'utilisateur
   a demande moins de mouvement */
html.theming *{transition:background-color .35s ease, border-color .35s ease, color .35s ease, fill .35s ease}
@media (prefers-reduced-motion:reduce){ html.theming *{transition:none} }

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:140px}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 420px at 50% -160px,rgba(var(--accent-rgb),.07),transparent 70%);
  background-repeat:no-repeat;
}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
/* reset destine aux icones au trait, loupe, chevrons, bouton copier */
svg{stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* le logo est un dessin plein et non une icone au trait, il doit echapper au reset,
   sinon chaque forme recoit un contour blanc herite et le carre vire au gris laiteux */
.mark,.mark *,.pal-mark svg,.pal-mark svg *{stroke:none;stroke-width:0;shape-rendering:geometricPrecision}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.dim{color:var(--ink-3)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--lime);color:var(--on-accent);padding:8px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:6px}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
.mark{display:block;width:34px;height:34px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-size:16.5px;letter-spacing:-.02em}
.brand-txt i{font-style:normal;font-size:11.5px;color:var(--ink-3)}

.search{position:relative;flex:1;min-width:180px;max-width:560px}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-3)}
.search input{
  width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:11px 42px 11px 40px;font-size:13.5px;outline:none;
  transition:border-color .18s ease, background .18s ease;
}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{border-color:rgba(var(--accent-rgb),.5);background:var(--s0)}
.search kbd{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font:600 11px/1 var(--mono);color:var(--ink-3);border:1px solid var(--line-2);
  border-radius:5px;padding:4px 6px;pointer-events:none;
}
.search input:focus + kbd{opacity:0}

.top-actions{display:flex;align-items:center;gap:9px;flex:none}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:6px 10px;border-radius:7px;color:var(--ink-3);transition:.16s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--lime);color:var(--on-accent)}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-2);transition:.16s;
}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2)}
.icon-btn[aria-pressed="true"]{background:var(--lime);color:var(--on-accent);border-color:transparent}
.icon-btn[aria-pressed="true"] svg{fill:currentColor;stroke:none}
.ghost-btn{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-2);font-size:12.5px;font-weight:600;transition:.16s;
}
.ghost-btn svg{width:15px;height:15px}
.ghost-btn:hover{color:var(--ink);border-color:var(--line-2)}
.cta{background:var(--lime);color:var(--on-accent);font-weight:700;font-size:13px;padding:10px 18px;border-radius:10px;transition:.16s}
.cta:hover{background:var(--accent-lite)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;padding-bottom:12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-2);font-size:12.5px;font-weight:600;transition:.18s;
}
.tab .n{font:600 10.5px/1 var(--mono);color:var(--ink-3);background:rgba(var(--ink-rgb),.05);padding:3px 6px;border-radius:5px}
.tab:hover{color:var(--ink);border-color:var(--line-2)}
.tab.on{background:var(--lime);color:var(--on-accent);border-color:transparent}
.tab.on .n{background:rgba(var(--shadow-rgb),.16);color:var(--on-accent)}
.tab.soon{opacity:.5}

/* ---------- sections ---------- */
.sec{margin:34px 0 0}
.sec-head{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.sec-head .chev{width:18px;height:18px;color:var(--ink-3);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sec[data-open="0"] .chev{transform:rotate(-90deg)}
.sec-head h2{font-size:17px;letter-spacing:-.02em;font-weight:650}
.sec-head .sub{color:var(--ink-3);font-size:12.5px;flex:1}
.sec-head .n{font:600 11px/1 var(--mono);color:var(--lime);background:var(--lime-soft);padding:5px 8px;border-radius:6px}
.sec-head:hover h2{color:var(--lime)}

.grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:18px 0 6px;
}
.sec[data-open="0"] .grid{display:none}
@media (max-width:1000px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:660px){
  .grid{grid-template-columns:1fr}
  .top-in{flex-wrap:wrap}
  .search{order:3;flex-basis:100%;max-width:none}
  .brand-txt i{display:none}
}

/* ---------- card ---------- */
.card{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line-card);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.10), 0 6px 18px rgba(var(--shadow-rgb),.07);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  animation:cardIn .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card:hover{border-color:rgba(var(--accent-rgb),.55);
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.12), 0 10px 26px rgba(var(--shadow-rgb),.12)}
.stage{border-bottom-color:var(--line-card)}
.card.hit{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-soft)}

/* le titre et le bouton partagent une ligne, le texte prend ensuite
   toute la largeur utile de la carte */
.body{display:flex;flex-direction:column;padding:13px 15px 15px;flex:1}
.head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.term{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.term-fr{font-size:12px;color:var(--lime);font-weight:600;margin-top:1px}
/* textes explicatifs justifies, avec cesure pour eviter les rivieres */
.desc{font-size:12.6px;color:var(--ink-2);margin-top:11px;
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.desc.fr{margin-top:9px}
.desc.fr{color:var(--ink-3);font-style:italic}
.pal-lead{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.desc mark{background:var(--lime-soft);color:var(--lime);border-radius:3px;padding:0 2px}
.term mark{background:var(--lime-soft);color:var(--lime);border-radius:3px;padding:0 2px}

/* langue */
.head-txt{display:flex;flex-direction:column;min-width:0}
body.lang-en .fr,body.lang-en .term-fr{display:none}
body.lang-fr .en{display:none}
body.lang-fr .term{font-size:13px;color:var(--ink-3);font-weight:600;order:2}
body.lang-fr .term-fr{font-size:14.5px;color:var(--ink);font-weight:650;order:1;margin-top:0}
/* en mode EN+FR les titres de section et d'onglet restent en anglais */
body.lang-both .tab .fr,body.lang-both .sec-head .fr{display:none}

/* ---------- logo, pilote par la palette ---------- */
.mark .mk-bg{fill:var(--logo-bg)}
.mark .mk-fg{fill:var(--accent)}

/* ---------- tiroir de palette ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:70;
  background:var(--panel);border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(var(--shadow-rgb),.4);
  transform:translateX(100%);visibility:hidden;
  transition:transform .38s cubic-bezier(.2,.9,.25,1), visibility .38s;
  display:flex;flex-direction:column;
}
.drawer.open{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){ .drawer{transition:none} }
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:none}
.drawer-head h2{font-size:14px;font-weight:650}
.drawer-body{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.pal-lead{font-size:12.5px;color:var(--ink-3);line-height:1.5}

.pal-list{display:flex;flex-direction:column;gap:8px}
.pal{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:9px 11px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);transition:border-color .18s, box-shadow .18s}
.pal:hover{border-color:var(--line-2)}
.pal.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
.pal-chips{display:flex;flex:none}
.pal-chips i{display:block;width:20px;height:32px}
.pal-chips i:first-child{border-radius:7px 0 0 7px}
.pal-chips i:last-child{border-radius:0 7px 7px 0}
.pal-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pal-txt b{font-size:12.5px;font-weight:650}
.pal-txt em{font-style:normal;font-size:11px;color:var(--ink-3)}
.pal-mark{flex:none;line-height:0;opacity:.9}

.pal-custom{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.pal-lbl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.pal-inputs{display:flex;gap:10px}
.pal-inputs label{flex:1;display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:11px;border:1px solid var(--line);background:var(--card);font-size:12px}
.pal-inputs input[type=color]{width:30px;height:30px;padding:0;border:0;border-radius:8px;
  background:none;cursor:pointer;flex:none}
.pal-inputs input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.pal-inputs input[type=color]::-webkit-color-swatch{border:1px solid var(--line-2);border-radius:8px}


/* termes voisins */
.near{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px}
.near-lbl{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);width:100%;margin-bottom:1px}
.chip{
  font-size:11px;font-weight:600;line-height:1;padding:5px 8px;border-radius:7px;
  background:rgba(var(--ink-rgb),.04);border:1px solid var(--line);color:var(--ink-3);transition:.16s;
}
.chip:hover{color:var(--lime);border-color:rgba(var(--accent-rgb),.4);background:var(--lime-soft)}
body.lang-both .chip .fr{display:none}

/* bouton copier */
.copy{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:var(--r-s);
  background:var(--card-2);border:1px solid var(--line);color:var(--ink-2);
  transition:transform .14s cubic-bezier(.2,.8,.2,1), background .18s, color .18s, border-color .18s;
}
.copy svg{width:16px;height:16px}
.copy:hover{background:var(--lime);color:var(--on-accent);border-color:transparent}
.copy:active{transform:scale(.9)}
.copy.done{background:var(--lime);color:var(--on-accent);border-color:transparent}
.copy .ok{display:none}
.copy.done .ok{display:block}
.copy.done .ic{display:none}

/* ---------- stage, socle commun de toutes les demos ---------- */
.stage{
  position:relative;height:224px;background:var(--stage);border-bottom:1px solid var(--line);
  overflow:hidden;display:grid;place-items:center;
  background-image:radial-gradient(circle at 1px 1px,rgba(var(--ink-rgb),.05) 1px,transparent 0);
  background-size:14px 14px;
}
.stage *{animation-play-state:paused}
.card.live .stage *{animation-play-state:running}
body.still .stage *,
body.still .card.live .stage *{animation-play-state:paused !important}

/* primitives de dessin */
.stage .sq{width:34px;height:34px;border-radius:9px;background:var(--lime);display:block}
.stage .sq.g{background:var(--s3)}
.stage .sq.o{background:none;border:2px solid var(--lime)}
.stage .dot{width:10px;height:10px;border-radius:50%;background:var(--lime);display:block}
.stage .bar{height:8px;border-radius:4px;background:var(--s3);display:block}
.stage .bar.a{background:var(--lime)}
.stage .row{display:flex;gap:6px;align-items:center}
.stage .col{display:flex;flex-direction:column;gap:6px}
.stage .lbl{font:600 9.5px/1 var(--mono);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.stage .cur{
  position:absolute;width:14px;height:14px;border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 4px rgba(var(--ink-rgb),.16);pointer-events:none;z-index:5;
}
.stage .frame{
  width:92px;height:78px;border-radius:10px;background:var(--s1);border:1px solid var(--line-2);
  position:relative;overflow:hidden;
}
.stage .abs{position:absolute}

/* ---------- etat vide, footer, toast, modal ---------- */
.empty{text-align:center;padding:70px 0;display:grid;gap:14px;justify-items:center;color:var(--ink-2)}
.foot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;padding-top:40px;padding-bottom:50px;margin-top:40px;border-top:1px solid var(--line);color:var(--ink-2);font-size:12.5px}
/* La mention Akirys, seul contenu du pied. Mono en capitales espacees,
   le meme registre que les badges de propriete et les etiquettes des
   scenes, elle appartient donc a la page au lieu d y etre posee.
   Discrete au repos, l accent n arrive qu au survol. */
.foot .by a{font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  text-decoration:none;transition:color .18s ease}
.foot .by a b{font-weight:700;color:var(--ink-2);transition:color .18s ease}
.foot .by a:hover{color:var(--ink-2)}
.foot .by a:hover b{color:var(--accent)}
/* Les liens legaux, sous la mention. Obligatoires et donc toujours
   atteignables, mais sans peser sur la fin de page. */
.foot-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.foot-links a{color:var(--ink-3);text-decoration:none;font-size:12.5px;
  transition:color .18s ease}
.foot-links a:hover{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ .foot-links a{transition:none} }
@media (prefers-reduced-motion:reduce){
  .foot .by a,.foot .by a b{transition:none}
}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;
  background:var(--lime);color:var(--on-accent);font-weight:650;font-size:13px;padding:11px 16px;border-radius:11px;
  box-shadow:0 12px 30px rgba(var(--shadow-rgb),.4);opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .32s cubic-bezier(.2,1.5,.4,1);
  display:flex;align-items:center;gap:12px;
}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:2px}

.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:22px;background:rgba(var(--void-rgb),.68);backdrop-filter:blur(6px);animation:fadeIn .18s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-in{width:min(760px,100%);background:var(--card);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;animation:popIn .3s cubic-bezier(.2,1.2,.3,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:14px;font-weight:650}
#modal-text{
  width:100%;height:min(52vh,420px);resize:none;border:0;outline:none;padding:16px;
  background:var(--stage);color:var(--ink-2);font:13px/1.65 var(--mono);white-space:pre-wrap;
}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border-top:1px solid var(--line);font-size:11.5px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage *{animation:none !important}
  .card{animation:none}
}