/* perzh — feuille de style (V2, d'après la maquette Claude Design « perzh-2 »). */

/* ── Polices (Barlow, licence SIL OFL, auto-hébergées) ── */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlowc-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlowc-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlowc-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlowc-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Jetons ── */
:root{
  --bg:#f2f2f3; --surface:#e9e9ea; --text:#1d1f20;
  --accent:#5980a6; --a100:#eef6ff; --a200:#d6ebff; --a300:#b5d9fd; --a400:#94bce3;
  --a600:#597ea3; --a700:#416180; --a800:#2c455d; --a900:#1d2d3d; --n900:#2b2b2d;
  --divider:color-mix(in srgb,#1d1f20 16%,transparent);
  --head:"Barlow Condensed",system-ui,sans-serif; --body:"Barlow",system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px); --sec:clamp(64px,10vh,112px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.55 var(--body);text-wrap:pretty}
h1,h2,h3,p{margin:0}
h1,h2,h3,.head{font-family:var(--head);font-weight:600}
a{color:var(--a700);text-underline-offset:3px}a:hover{color:var(--a800)}
img{display:block;max-width:100%;height:auto}
:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.wrap{max-width:1280px;margin:0 auto}
.acc{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--text);color:var(--bg);padding:10px 14px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Cadre « blueprint » ── */
.bp{position:relative;border:1px solid var(--divider)}
.bp>.c{position:absolute;width:11px;height:11px;color:color-mix(in srgb,var(--text) 55%,transparent);pointer-events:none}
.bp>.c::before,.bp>.c::after{content:"";position:absolute;background:currentColor}
.bp>.c::before{left:5px;top:0;width:1px;height:100%}.bp>.c::after{top:5px;left:0;width:100%;height:1px}
.bp>.tl{top:-6px;left:-6px}.bp>.tr{top:-6px;right:-6px}.bp>.bl{bottom:-6px;left:-6px}.bp>.br{bottom:-6px;right:-6px}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 20px;font:600 16px/1.2 var(--head);letter-spacing:.02em;text-decoration:none;color:var(--text);border:1px solid var(--divider);background:transparent;cursor:pointer}
.btn:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn-primary:hover{background:var(--a600);color:var(--bg)}

/* ── En-têtes de section ── */
.sec{padding:var(--sec) var(--pad)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 48px;padding-bottom:20px;border-bottom:1px solid var(--divider)}
.kicker{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--a700);margin-bottom:12px}
.h2{text-transform:uppercase;font-size:clamp(36px,5vw,72px);line-height:.95}
.side{max-width:32ch;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--text) 70%,transparent)}

/* ── Navigation ── */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;padding:10px var(--pad);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--divider)}
.brand{display:flex;align-items:center;gap:8px;font:500 24px/1 var(--body);letter-spacing:-.01em;color:var(--a900);text-decoration:none;margin-right:auto;min-height:44px}
.brand:hover{color:var(--a900)}
.brand img{width:30px;height:30px}
.brand .dot{color:var(--accent)}
.nav-links{display:flex;gap:4px 24px;flex-wrap:wrap;font-size:14px}
.nav-links a{color:var(--text);text-decoration:none;padding:12px 0}
.nav-links a:hover{color:var(--a700)}
.lang{display:inline-flex;border:1px solid var(--divider);font:600 13px/1 var(--head);letter-spacing:.08em}
.lang a,.lang span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;text-decoration:none;color:var(--text)}
.lang [aria-current]{background:var(--text);color:var(--bg)}
.nav .btn{font-size:15px;padding:8px 16px}
@media (max-width:820px){.nav-links{display:none}}
@media (max-width:400px){.nav .btn{display:none}}

/* ── Ouverture ── */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vh,104px) var(--pad) 0;background-image:linear-gradient(var(--divider) 1px,transparent 1px),linear-gradient(90deg,var(--divider) 1px,transparent 1px);background-size:96px 96px;background-position:-1px -1px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,transparent 0%,var(--bg) 75%);pointer-events:none}
.hero-in{position:relative;display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-end;justify-content:space-between;padding-bottom:56px}
.hero-l{flex:2 1 520px;min-width:0}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--a700);margin-bottom:20px}
.eyebrow i{width:8px;height:8px;background:var(--accent)}
.hero h1{text-transform:uppercase;font-size:clamp(50px,8.4vw,132px);line-height:.92;margin-left:-.05em}
.hero h1 span{display:block}
.hero-r{flex:1 1 300px;max-width:420px;display:flex;flex-direction:column;gap:24px}
.hero-r p{font-size:18px;line-height:1.5;color:color-mix(in srgb,var(--text) 82%,transparent)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.marquee{position:relative;margin:0 calc(-1*var(--pad));border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);background:var(--bg);overflow:hidden;padding:14px 0}
.marquee-track{display:flex;align-items:center;width:max-content;white-space:nowrap;animation:pz-marquee 48s linear infinite}
.marquee-track>div{display:flex;align-items:center}
.marquee-track span{font:600 clamp(20px,2vw,28px)/1 var(--head);text-transform:uppercase;letter-spacing:.02em;padding:0 24px}
.marquee-track b{color:var(--accent);font-size:20px;font-weight:400}
@keyframes pz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Leçons ── */
.lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0 40px}
.lesson{padding:32px 0;border-bottom:1px solid var(--divider);display:flex;flex-direction:column;gap:12px}
.lesson .n{font:400 18px/1 var(--head);color:var(--a700)}
.lesson .q{font:600 clamp(26px,2.4vw,34px)/1.08 var(--head)}
.lesson .r{font-size:15px;color:color-mix(in srgb,var(--text) 72%,transparent)}

/* ── Le monde (onglets) ── */
.dark{background:var(--a900);color:var(--bg)}
.dark .sec-head{border-color:color-mix(in srgb,var(--bg) 22%,transparent)}
.dark .kicker{color:var(--a300)}
.dark .side{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.monde{display:flex;flex-wrap:wrap;gap:32px 64px;margin-top:40px}
.tabs{flex:1 1 240px;max-width:300px;display:flex;flex-direction:column}
.tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:baseline;gap:14px;min-height:44px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--bg) 14%,transparent);color:color-mix(in srgb,var(--bg) 55%,transparent);transition:color .3s}
.tab:hover,.tab[aria-selected="true"]{color:var(--bg)}
.tab:focus-visible{outline:2px solid var(--a300);outline-offset:2px}
.tab .n{font:400 15px/1 var(--head);color:var(--a300)}
.tab .t{font:600 24px/1.1 var(--head);text-transform:uppercase;letter-spacing:.02em}
.tab .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;overflow:hidden}
.tab .bar i{display:block;height:100%;width:0;background:var(--a300)}
.tab[aria-selected="true"] .bar i{width:100%}
.tab.run .bar i{width:0;animation:pz-fill var(--dwell,6500ms) linear forwards}
@keyframes pz-fill{from{width:0%}to{width:100%}}
.panels{flex:3 1 420px;min-width:0;min-height:320px;display:flex;flex-direction:column;justify-content:center}
.panel .idx{font:400 18px/1 var(--head);color:var(--a300)}
.panel h3{text-transform:uppercase;font-size:clamp(42px,6vw,88px);line-height:.92;margin-top:8px}
.panel .fact{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:44ch;margin-top:20px;color:color-mix(in srgb,var(--bg) 82%,transparent)}
.panel .ask{font:600 clamp(26px,3vw,42px)/1.1 var(--head);max-width:26ch;margin-top:28px;padding-left:20px;border-left:2px solid var(--a400);color:var(--a200)}
.js .panel.enter .fact{animation:pz-up .6s cubic-bezier(.2,.7,.2,1) both}
.js .panel.enter .ask{animation:pz-up .7s cubic-bezier(.2,.7,.2,1) 1s both}
@keyframes pz-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* sans JS : les cinq constats s'affichent l'un sous l'autre */
.no-js .panel+.panel{margin-top:48px}

/* ── Participer ── */
.part-h{font-size:clamp(34px,4.6vw,64px);line-height:1;max-width:24ch}
.part-p{font-size:16px;max-width:60ch;margin-top:16px;color:color-mix(in srgb,var(--text) 78%,transparent)}
.senses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 40px}
.sense{padding:24px 0;display:flex;gap:16px;align-items:baseline}
.sense .rn{font:400 36px/1 var(--head);color:var(--accent)}
.sense h3{text-transform:uppercase;font-size:22px;line-height:1.1}
.sense p{font-size:14px;line-height:1.5;margin-top:4px;color:color-mix(in srgb,var(--text) 75%,transparent)}
.proj-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;margin-top:40px}
.proj-head h3{text-transform:uppercase;font-size:clamp(26px,2.8vw,38px);line-height:1}
.proj-head span{font-size:14px;color:color-mix(in srgb,var(--text) 66%,transparent)}
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:32px;margin-top:28px}
.card{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--divider);cursor:pointer;transition:border-color .25s,background .25s;font-family:var(--body);color:var(--text)}
.card:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.card .nm{font:600 32px/1 var(--head)}
.card .bf{font-size:15px;line-height:1.45;color:color-mix(in srgb,var(--text) 72%,transparent)}
.card .af{font:600 21px/1.15 var(--head);padding-top:12px;border-top:1px solid var(--divider);flex:1}
.card .go{font-size:13px;color:var(--a700);font-weight:500}

/* ── Fiche projet (dialog) ── */
dialog.fiche{width:min(720px,calc(100% - 24px));max-height:90vh;padding:0;border:1px solid var(--divider);background:var(--bg);color:var(--text);box-shadow:0 12px 32px color-mix(in srgb,var(--n900) 22%,transparent);overflow:auto}
dialog.fiche::backdrop{background:color-mix(in srgb,var(--n900) 62%,transparent);backdrop-filter:blur(4px)}
.fiche-in{padding:clamp(24px,4vw,40px)}
.fiche-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.fiche-k{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--a700)}
.fiche-name{font:600 clamp(36px,5vw,56px)/1 var(--head);margin-top:6px}
.x{width:44px;height:44px;padding:0;font-size:22px}
.fiche .bf{font-size:16px;line-height:1.5;margin-top:24px;color:color-mix(in srgb,var(--text) 75%,transparent)}
.fiche .af{font:600 24px/1.2 var(--head);margin-top:8px}
.rows{margin-top:24px;display:grid;grid-template-columns:120px minmax(0,1fr)}
.rows>*{padding:14px 0;border-top:1px solid var(--divider)}
.rows .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--text) 62%,transparent);padding-right:16px}
.rows .v{font-size:15px;line-height:1.5}
.rows .v ul{margin:0;padding-left:18px}.rows .v li+li{margin-top:4px}
.rows>.last{border-bottom:1px solid var(--divider)}
@media (max-width:560px){.rows{grid-template-columns:1fr}.rows .k{padding-bottom:0}.rows .v{border-top:0;padding-top:6px}}
.fiche-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}

/* ── Captures d'écran (dans les fiches) ── */
.shots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.48fr);gap:12px;margin-top:24px;align-items:start}
@media (max-width:560px){.shots{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.shots figure{margin:0}
.shots figcaption{font-size:12px;margin-top:6px;color:color-mix(in srgb,var(--text) 60%,transparent)}
.shot{display:block;position:relative;aspect-ratio:16/10;border:1px solid var(--divider);background:color-mix(in srgb,var(--text) 6%,var(--bg));overflow:hidden}
.shot.phone{aspect-ratio:9/16}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot .ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;font-size:12px;color:color-mix(in srgb,var(--text) 62%,transparent);background-image:repeating-linear-gradient(45deg,transparent 0 10px,color-mix(in srgb,var(--text) 4%,transparent) 10px 11px)}
.shot .ph b{font:600 14px/1.2 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--a700)}
.shot.missing img{display:none}.shot.missing .ph{display:flex}

/* ── Fabrication ── */
.grid-bg{border-top:1px solid var(--divider);background-color:var(--surface);background-image:linear-gradient(var(--divider) 1px,transparent 1px),linear-gradient(90deg,var(--divider) 1px,transparent 1px);background-size:96px 96px}
.fab-h{text-transform:uppercase;font-size:clamp(40px,6vw,92px);line-height:.92}
.loop{position:relative;margin-top:36px}
.loop-rail{position:absolute;left:12.5%;right:12.5%;top:22px;height:1px;background:var(--divider)}
.loop-rail i{position:absolute;top:-4px;width:9px;height:9px;margin-left:-4px;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent);animation:pz-travel 3.3s linear infinite}
@keyframes pz-travel{0%{left:0%}100%{left:100%}}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.step .dot{width:44px;height:44px;display:grid;place-items:center;font:400 17px/1 var(--head);border:1px solid var(--accent);background:var(--bg);transition:all .35s}
.js .step .dot{border-color:var(--divider)}
.js .step.on .dot{border-color:var(--accent)}
.js .step.cur .dot{background:var(--accent);color:var(--bg)}
.step .lbl{font:600 clamp(18px,2vw,24px)/1 var(--head);text-transform:uppercase}
.fab-row{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:center;margin-top:48px}
.pillars{flex:3 1 480px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:600px){.pillars{grid-template-columns:1fr}}
.pillar{padding:20px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.pillar h3{text-transform:uppercase;font-size:22px;line-height:1.05}
.pillar h3 span{color:var(--a700)}
.pillar p{font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--text) 78%,transparent)}
.stance{flex:2 1 300px;max-width:420px;padding:32px 28px;background:var(--accent);border-color:var(--accent);color:var(--bg);display:flex;flex-direction:column;gap:16px}
.stance .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.stance .t{font:600 clamp(32px,3.4vw,48px)/.95 var(--head);text-transform:uppercase}
.stance p{font-size:15px;line-height:1.5}
.stance .c{color:var(--a200)}

/* ── Contact ── */
.contact{padding:clamp(56px,9vh,96px) var(--pad) 32px}
.contact-row{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-end}
.contact h2{text-transform:uppercase;font-size:clamp(40px,6vw,88px);line-height:.92}
.contact h2 span{color:var(--a300)}
.btn-light{background:var(--bg);color:var(--a900);border-color:var(--bg);font-size:18px;padding:14px 24px}
.btn-light:hover{background:var(--a200);color:var(--a900)}
.btn-light .c{color:var(--a300)}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:56px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent);font-size:13px;color:color-mix(in srgb,var(--bg) 72%,transparent)}
.foot .brand-f{display:flex;align-items:center;gap:8px;font:500 22px/1 var(--body);letter-spacing:-.01em;color:var(--bg)}
.foot .brand-f img{width:28px;height:28px}
.foot .brand-f .dot{color:var(--a400)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot nav a{color:color-mix(in srgb,var(--bg) 85%,transparent);text-decoration:none}
.foot nav a:hover{color:var(--bg)}

/* ── Apparition au défilement (active seulement avec JS et sans « mouvement réduit ») ── */
.motion [data-rv]{opacity:0;transform:translateY(28px)}
.motion [data-rv].in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.marquee-track,.loop-rail i{animation:none}}