/* Charte graphique Clixite, version 1.0 (octobre 2026). Feuille de style du site charte.clixite.be. */
:root{
  --encre:#0B2239; --papier:#F6F5F0; --blanc:#FFFFFF;
  --turquoise:#19B3D9; --turquoise-texte:#0C7893; --turquoise-doux:#D6F1F8;
  --rose:#FF4F8B; --rose-texte:#D81B60; --signal:#FFD233; --indigo:#193776;
  --ardoise:#4B5A6B; --brume:#CDD5DD; --encre-teintee:#1F3A5A; --surface-sombre:#122D4A;
  --display:'Space Grotesk',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif;
  --editorial:'Fraunces',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --topbar:60px; --side:248px; --gutter:clamp(20px,4vw,56px); --maxw:1180px;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
::selection{background:var(--turquoise-doux);color:var(--encre)}
.hero ::selection,.dark ::selection,.topbar ::selection,footer ::selection,pre ::selection{background:var(--encre-teintee);color:var(--papier)}
html{scrollbar-color:var(--brume) var(--papier);caret-color:var(--turquoise-texte)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar) + 24px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--turquoise-texte);text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--encre)}}
:focus-visible{outline:2px solid var(--turquoise);outline-offset:3px;border-radius:4px}
img,svg,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;font-weight:600;letter-spacing:-0.01em;text-wrap:balance}
h1{font-size:clamp(40px,6vw,76px);font-weight:700;letter-spacing:-0.02em}
h2{font-size:clamp(30px,3.4vw,44px)}
h3{font-size:22px;margin-top:40px;margin-bottom:10px}
h4{font-size:17px;margin-top:24px;margin-bottom:6px}
p{margin:0 0 14px;max-width:66ch;text-wrap:pretty}
ul,ol{margin:0 0 16px;padding-left:22px;max-width:66ch;text-wrap:pretty}
li{margin-bottom:6px}
small,.small{font-size:13px}
code,kbd{font-family:var(--mono);font-size:.86em;background:var(--blanc);border:1px solid var(--brume);border-radius:4px;padding:1px 5px;white-space:nowrap}
pre{font-family:var(--mono);font-size:13px;line-height:1.5;background:var(--encre);color:var(--papier);padding:18px 20px;border-radius:10px;overflow:auto;margin:0}
pre code{background:none;border:0;padding:0;color:inherit;white-space:pre;font-size:inherit}
hr{border:0;border-top:1px solid var(--brume);margin:40px 0}
.x{font-family:var(--editorial);font-style:italic;font-weight:600}
.mono{font-family:var(--mono)}
.muted{color:var(--ardoise)}
.lede{font-size:19px;line-height:1.5;color:var(--encre);max-width:60ch}
.note{font-size:14px;color:var(--ardoise);max-width:62ch}

/* ----- barre haute ----- */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--topbar);background:var(--encre);color:var(--papier);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);z-index:50;border-bottom:1px solid rgba(246,245,240,.08)}
.topbar .brand{display:flex;align-items:center;gap:14px;color:var(--papier);text-decoration:none}
.topbar .brand img{height:30px;width:auto}
.topbar .brand span{font-family:var(--display);font-weight:500;font-size:15px;color:var(--brume)}
.topbar .meta{display:flex;align-items:center;gap:22px;font-size:13px;color:var(--brume)}
.topbar .meta a{color:var(--papier)}
.topbar .meta a.btn{color:var(--encre)}
.topbar .btn{height:36px;padding:0 16px;font-size:13px}
@media (max-width:720px){.topbar .meta .version{display:none}.topbar .brand span{display:none}}

/* ----- héros ----- */
.hero{background:var(--encre);color:var(--papier);padding:calc(var(--topbar) + 56px) var(--gutter) 72px;min-height:calc(100vh - 0px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.hero .o3d-wrap{width:min(100%,1040px);margin:0 auto 20px;position:relative}
.o3d{display:block;width:100%;aspect-ratio:3/1;touch-action:none}
.hero .o3d{cursor:crosshair}
.o3d-fallback{width:min(100%,720px);margin:0 auto}
.linkbtn{background:none;border:0;padding:0;margin-left:10px;font:inherit;color:var(--turquoise);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--papier)}
.hero h1{margin-bottom:14px}
.hero .lede{color:var(--brume);margin:0 auto 24px;line-height:1.58;letter-spacing:.005em}
.hero .hint{font-size:14px;color:var(--brume);opacity:.85}
.hero .hint b{color:var(--papier);font-weight:500}
.hero .hint .touch{display:none}
@media (hover:none){.hero .hint .touch{display:inline}.hero .hint .mouse{display:none}}
.hero .scrolldown{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:1px;height:40px;background:linear-gradient(var(--turquoise),transparent)}

/* ----- X vivant ----- */
.living-x{display:block;width:100%;height:auto;overflow:visible}
.living-x .lx-lens{opacity:0;transition:opacity .6s ease}
.living-x .lx-chant{opacity:0;transform:translate(-8px,-20px)}
.living-x.is-on .lx-lens{opacity:1}
.living-x.is-on .lx-chant{animation:lxchant .6s cubic-bezier(.2,.8,.2,1) 1.6s forwards}
@keyframes lxchant{to{opacity:1;transform:translate(0,0)}}
.living-x .lx-slide-a{transform:translate(-480px,480px);opacity:0}
.living-x .lx-slide-b{transform:translate(480px,-480px);opacity:0}
.living-x.is-on .lx-slide-a{animation:lxslide 1s cubic-bezier(.2,.8,.2,1) .1s forwards}
.living-x.is-on .lx-slide-b{animation:lxslide 1s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes lxslide{30%{opacity:1}to{transform:translate(0,0);opacity:1}}
.living-x.is-still .lx-lens,.living-x.is-still .lx-chant,.living-x.is-still .lx-slide-a,.living-x.is-still .lx-slide-b{animation:none;opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.living-x .lx-lens,.living-x .lx-chant,.living-x .lx-slide-a,.living-x .lx-slide-b{animation:none!important;opacity:1!important;transform:none!important}}

/* ----- structure ----- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:0;max-width:calc(var(--maxw) + var(--side));margin:0 auto;padding:0 var(--gutter)}
.sidenav{position:sticky;top:var(--topbar);align-self:start;height:calc(100vh - var(--topbar));overflow:auto;padding:40px 24px 40px 0;border-right:1px solid var(--brume)}
.sidenav ol{list-style:none;margin:0;padding:0;max-width:none}
.sidenav li{margin:0}
.sidenav a{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:baseline;padding:7px 10px;border-radius:6px;color:var(--ardoise);text-decoration:none;font-size:14px;line-height:1.3}
.sidenav a .n{font-family:var(--mono);font-size:11px;color:var(--ardoise);transition:color .2s}
@media (hover:hover) and (pointer:fine){.sidenav a:hover{color:var(--encre);background:var(--blanc)}}
.sidenav a.active{color:var(--encre);background:var(--blanc)}
.sidenav a.active .n{color:var(--turquoise-texte)}
.sidenav .kit{margin-top:28px;padding-top:20px;border-top:1px solid var(--brume)}
.sidenav .kit p{font-size:13px;color:var(--ardoise);margin-bottom:12px}
main{min-width:0;padding-left:clamp(24px,4vw,64px)}
.mobilenav{display:none}
@media (max-width:1000px){
  .shell{display:block;padding:0 var(--gutter)}
  .sidenav{display:none}
  main{padding-left:0}
  .mobilenav{display:block;position:sticky;top:var(--topbar);z-index:40;background:var(--papier);border-bottom:1px solid var(--brume);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .mobilenav::-webkit-scrollbar{display:none}
  .mobilenav a{display:inline-block;padding:12px 10px;font-size:13px;color:var(--ardoise);text-decoration:none}
  .mobilenav a.active{color:var(--encre);box-shadow:inset 0 -2px 0 var(--turquoise)}
}

/* ----- chapitres ----- */
.chapter{padding:88px 0 40px;border-bottom:1px solid var(--brume)}
.chapter:last-of-type{border-bottom:0}
.chapter header{margin-bottom:40px}
.chapter header h2 .n{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--turquoise-texte);margin-right:16px;letter-spacing:0;vertical-align:.18em}
.chapter header .lede{margin-top:16px}
.spec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 48px;align-items:start;margin:28px 0 44px}
.spec.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.spec > .text p:last-child{margin-bottom:0}
@media (max-width:860px){.spec,.spec.flip{grid-template-columns:1fr}}
.panel{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:28px;display:flex;align-items:center;justify-content:center;min-height:120px}
.panel.dark{background:var(--encre);border-color:var(--encre)}
.panel.tight{padding:16px}
.panel.papier{background:var(--papier)}
.panel.turq{background:var(--turquoise);border-color:var(--turquoise)}
.panel figcaption,.cap{font-size:13px;color:var(--ardoise);margin-top:10px;line-height:1.45}
figure{margin:0}
figure.full{margin:24px 0 36px}
figure.full .panel{padding:36px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:860px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* ----- plateforme ----- */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--brume);border:1px solid var(--brume);border-radius:10px;overflow:hidden;margin:28px 0 36px}
.pillars div{background:var(--blanc);padding:24px 26px}
.pillars h4{margin:0 0 8px;font-size:19px}
.pillars p{margin:0;font-size:15px;color:var(--ardoise)}
@media (max-width:640px){.pillars{grid-template-columns:1fr}}
.markets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0 36px}
.markets > div{border-top:3px solid var(--turquoise);padding-top:16px}
.markets > div + div{border-top-color:var(--rose)}
.markets h4{margin-top:0}
.markets p{font-size:15px}
@media (max-width:640px){.markets{grid-template-columns:1fr}}
.quote{font-family:var(--editorial);font-style:italic;font-weight:500;font-size:clamp(24px,3vw,34px);line-height:1.25;color:var(--encre);max-width:24ch;margin:36px 0}
.quote .x{font-weight:600;color:var(--turquoise-texte)}
.archi{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px;margin:24px 0 32px}
.archi > div{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:20px 22px;font-size:15px}
.archi > div:first-child{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.archi h4{margin-top:0;font-size:17px}
.archi p{margin:0;color:inherit;opacity:.85}
@media (max-width:860px){.archi{grid-template-columns:1fr}}

/* ----- logo ----- */
.logo-hero{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:clamp(28px,6vw,72px);margin:0 0 20px}
.logo-hero svg,.logo-hero img{width:min(100%,720px);margin:0 auto}
.levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 8px}
.levels > div{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:20px 18px 18px;text-align:center}
.levels .box{height:230px;display:flex;align-items:center;justify-content:center;gap:16px}
.levels .box img{flex:none;height:auto}
.levels h4{margin:8px 0 4px;font-size:16px}
.levels p{margin:0;font-size:13px;color:var(--ardoise)}
@media (max-width:860px){.levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.levels{grid-template-columns:1fr}}
.variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 8px}
.variants .panel{padding:28px 22px;flex-direction:column;gap:14px;min-height:200px}
.variants .panel img{width:100%}
.variants .panel.dark figcaption{color:var(--brume)}
@media (max-width:860px){.variants{grid-template-columns:1fr}}
.donts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 8px}
.donts figure{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:22px 18px 16px;position:relative;overflow:hidden}
.donts .pic{height:110px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.donts .pic img{width:78%}
.donts figure::after{content:"";position:absolute;left:14px;right:14px;top:72px;height:2px;background:var(--rose-texte);transform:rotate(-14deg);opacity:.85}
.donts figcaption{font-family:var(--sans);font-size:13px;color:var(--encre);margin-top:14px;text-align:center}
.donts .fond-turq{background:var(--turquoise)}
.donts .stretch img{transform:scaleX(1.35)}
.donts .shadow img{filter:drop-shadow(6px 8px 6px rgba(11,34,57,.45))}
.donts .tilt img{transform:rotate(-12deg)}
.donts .hue img{filter:hue-rotate(120deg)}
@media (max-width:860px){.donts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.donts{grid-template-columns:1fr}}
.rules{columns:2;column-gap:40px;max-width:none}
.rules li{break-inside:avoid;font-size:15px}
@media (max-width:760px){.rules{columns:1}}

/* ----- atelier interférence ----- */
.atelier{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center;background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:32px}
.atelier .living{width:min(100%,360px);margin:0 auto}
.atelier label{display:block;font-size:14px;margin-bottom:8px}
.atelier output{font-family:var(--mono);font-size:13px;color:var(--turquoise-texte)}
.atelier input[type=range]{width:100%;accent-color:var(--turquoise);margin:6px 0 18px}
.atelier .btn{margin-top:4px}
@media (max-width:760px){.atelier{grid-template-columns:1fr}}

/* ----- couleurs ----- */
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:24px 0 12px}
.swatches.secondary{grid-template-columns:repeat(6,minmax(0,1fr))}
.swatch{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;overflow:hidden;cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;display:block;width:100%;transition:border-color .15s ease,transform 160ms var(--ease-out)}
.swatch:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.swatch:hover{border-color:var(--ardoise)}}
.swatch .chip{height:120px;display:flex;align-items:flex-end;padding:10px}
.swatches.secondary .chip{height:72px}
.swatch .chip span{font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.85);color:var(--encre)}
.swatch .info{padding:12px 14px 14px}
.swatch .name{font-family:var(--display);font-weight:600;font-size:15px}
.swatch .vals{font-family:var(--mono);font-size:11px;color:var(--ardoise);margin-top:6px;line-height:1.6;font-variant-numeric:tabular-nums}
.swatch .use{font-size:12.5px;color:var(--encre);margin-top:8px;line-height:1.4}
.swatch .copied{position:absolute}
@media (max-width:1100px){.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.swatches.secondary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.swatches,.swatches.secondary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);background:var(--encre);color:var(--papier);font-size:13px;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease-out,transform .25s var(--ease-out);z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}
.ratio{display:flex;gap:16px;margin:16px 0 32px;flex-wrap:wrap}
.ratio .bar{display:flex;height:44px;width:100%;border-radius:8px;overflow:hidden;border:1px solid var(--brume)}
.ratio .bar span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px}
.contrast{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 28px}
.contrast th,.contrast td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--brume);vertical-align:middle}
.contrast th{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ardoise);background:var(--blanc)}
.contrast td.sample{width:140px}
.contrast td.sample span{display:inline-block;padding:6px 10px;border-radius:6px;font-family:var(--display);font-weight:600}
.contrast td.v{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.ok{color:var(--turquoise-texte);font-family:var(--mono);font-size:12px}
.combos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 28px}
.combos div{height:84px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:15px;border:1px solid var(--brume)}
.combos .no{position:relative;overflow:hidden}
.combos .no::after{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:2px;background:var(--rose-texte);transform:rotate(-20deg)}
@media (max-width:760px){.combos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ----- typographie ----- */
.specimen{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:28px 32px;margin:0 0 16px;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:start}
.specimen .sample{overflow:hidden}
.specimen .sample.display{font-family:var(--display);font-weight:700;font-size:clamp(44px,7vw,92px);line-height:1;letter-spacing:-0.02em}
.specimen .sample.display small{display:block;font-size:22px;font-weight:500;letter-spacing:0;margin-top:14px;color:var(--ardoise)}
.specimen .sample.sans{font-family:var(--sans);font-size:17px;line-height:1.55;max-width:60ch}
.specimen .sample.editorial{font-family:var(--editorial);font-style:italic;font-weight:500;font-size:clamp(28px,4vw,46px);line-height:1.2}
.specimen .sample.mono{font-family:var(--mono);font-size:14px;line-height:1.7}
.specimen .about{font-size:14px;color:var(--ardoise);border-left:1px solid var(--brume);padding-left:20px}
.specimen .about b{display:block;color:var(--encre);font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:6px}
.specimen .about a{display:inline-block;margin-top:8px}
@media (max-width:760px){.specimen{grid-template-columns:1fr}.specimen .about{border-left:0;padding-left:0;border-top:1px solid var(--brume);padding-top:14px}}
.scale{width:100%;border-collapse:collapse;margin:8px 0 28px}
.scale td{padding:12px 10px;border-bottom:1px solid var(--brume);vertical-align:baseline}
.scale td:first-child{font-family:var(--mono);font-size:12px;color:var(--ardoise);width:120px}
.scale td:last-child{font-family:var(--mono);font-size:12px;color:var(--ardoise);text-align:right;width:220px;white-space:nowrap}
.scale .s-display{font-family:var(--display);font-weight:700;font-size:56px;line-height:1;letter-spacing:-0.02em}
.scale .s-h1{font-family:var(--display);font-weight:600;font-size:40px;line-height:1.05;letter-spacing:-0.015em}
.scale .s-h2{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15}
.scale .s-h3{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.25}
.scale .s-quote{font-family:var(--editorial);font-style:italic;font-weight:500;font-size:26px;line-height:1.3}
.scale .s-body{font-size:16px}
.scale .s-small{font-size:13px}
.scale .s-label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.scale .s-data{font-family:var(--mono);font-size:14px}
@media (max-width:640px){.scale td:last-child{display:none}.scale .s-display{font-size:40px}.scale .s-h1{font-size:30px}}

/* ----- système graphique ----- */
.system{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 8px}
.system > div{padding:0}
.system h3{margin:12px 0 6px;font-size:17px}
.system p{font-size:14px;color:var(--ardoise);margin:0}
.system .vis{height:160px;display:flex;align-items:center;justify-content:center;background:var(--blanc);border:1px solid var(--brume);border-radius:10px;overflow:hidden}
.system .vis svg{overflow:hidden;border-radius:4px}
@media (max-width:860px){.system{grid-template-columns:1fr}}
.icons{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:12px 0 24px}
.icons svg{width:28px;height:28px;stroke:var(--encre);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ----- applications ----- */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0 8px}
.apps figure{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:16px;overflow:hidden}
.apps figure img{border-radius:6px;border:1px solid var(--brume);width:auto;max-width:100%;max-height:260px;margin:0 auto}
.apps figure.dark{background:var(--encre);border-color:var(--encre)}
.apps figure.dark img{border-color:var(--encre-teintee)}
.apps figure.dark figcaption{color:var(--brume)}
.apps figure.dark figcaption a{color:var(--turquoise)}
.apps figure.dark figcaption a:hover{color:var(--papier)}
.apps figcaption{font-family:var(--sans);font-size:13px;color:var(--ardoise);margin-top:12px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.apps figcaption a{white-space:nowrap}
@media (max-width:640px){.apps{grid-template-columns:1fr}}
.sigwrap{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:28px;margin:16px 0 20px;overflow:auto}

/* ----- animation ----- */
.anim-stage{background:var(--encre);border-radius:10px;overflow:hidden;position:relative;aspect-ratio:16/9;margin:20px 0 12px;border:1px solid var(--brume)}
.anim-stage .o3d{aspect-ratio:16/9;cursor:pointer}
.anim-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:16px 0 32px;font-size:13px}
.timeline div{background:var(--blanc);border:1px solid var(--brume);padding:12px 12px 14px}
.timeline div:first-child{border-radius:8px 0 0 8px}.timeline div:last-child{border-radius:0 8px 8px 0}
.timeline b{display:block;font-family:var(--mono);font-size:12px;color:var(--turquoise-texte);margin-bottom:6px;font-weight:500}
@media (max-width:760px){.timeline{grid-template-columns:1fr}.timeline div{border-radius:0}}

/* ----- téléchargements ----- */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 32px}
.pack{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.pack.main{background:var(--encre);color:var(--papier);border-color:var(--encre);grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pack.main p{color:var(--brume)}
.pack h3{margin:0;font-size:18px}
.pack p{margin:0;font-size:14px;color:var(--ardoise);flex:1}
.pack .size{font-family:var(--mono);font-size:12px;color:var(--ardoise)}
.pack .btn{align-self:flex-start;margin-top:8px}
@media (max-width:860px){.packs{grid-template-columns:1fr}}
.files{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 32px}
.files th,.files td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--brume);vertical-align:top}
.files th{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ardoise)}
.files td.f{font-family:var(--mono);font-size:12.5px}
.files td.s{font-family:var(--mono);font-size:12px;color:var(--ardoise);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
details.more{margin:0 0 28px}
details.more summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:15px;padding:10px 0}

/* ----- boutons ----- */
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:var(--turquoise);color:var(--encre);font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn{transition:transform 160ms var(--ease-out),background .2s ease,border-color .2s ease}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#3FC3E3;color:var(--encre)}}
.btn.secondary{background:transparent;border:1px solid var(--brume);color:var(--encre)}
@media (hover:hover) and (pointer:fine){.btn.secondary:hover{border-color:var(--encre);background:var(--blanc)}}
.dark .btn.secondary,.pack.main .btn.secondary{color:var(--papier);border-color:var(--encre-teintee)}
.dark .btn.secondary:hover,.pack.main .btn.secondary:hover{background:var(--encre-teintee);color:var(--papier)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ----- kit développeur ----- */
.codeblock{position:relative;margin:12px 0 24px}
.codeblock pre{padding-right:96px}
.codeblock.wrap pre code{white-space:pre-wrap;word-break:break-all}
.codeblock .copy{position:absolute;top:10px;right:10px;height:30px;padding:0 12px;font-size:12px;color:var(--papier);background:var(--encre-teintee);border-color:var(--encre-teintee)}
.codeblock .copy:hover{background:var(--turquoise);color:var(--encre);border-color:var(--turquoise)}
.kv{display:grid;grid-template-columns:200px 1fr;gap:8px 20px;font-size:14px;margin:12px 0 28px}
.kv dt{font-family:var(--mono);font-size:12.5px;color:var(--ardoise)}
.kv dd{margin:0}
@media (max-width:640px){.kv{grid-template-columns:1fr}}

/* ----- voix ----- */
.voice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 28px}
.voice > div{background:var(--blanc);border:1px solid var(--brume);border-radius:10px;padding:20px 22px;font-size:15px}
.voice .bad{color:var(--ardoise);text-decoration:line-through;text-decoration-color:var(--rose-texte);text-decoration-thickness:1.5px;margin-bottom:10px;display:block}
.voice .good{color:var(--encre);display:block}
@media (max-width:640px){.voice{grid-template-columns:1fr}}

/* ----- pied ----- */
footer{background:var(--encre);color:var(--brume);padding:56px var(--gutter) 40px;margin-top:40px}
footer .inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end}
footer img{height:48px;width:auto;margin-bottom:18px}
footer p{margin:0 0 6px;font-size:14px;max-width:52ch}
footer a{color:var(--papier)}
footer .right{font-family:var(--mono);font-size:12px;text-align:right}
@media (max-width:640px){footer .right{text-align:left}}

@media (prefers-reduced-motion:reduce){.btn,.swatch{transition:none}.btn:active,.swatch:active{transform:none}.toast{transition:opacity .2s ease-out;transform:translate(-50%,0)}}