/* ═══════════════════════════════════════════════════════════════════
   LUMEN — la charte graphique d'Arborescence, « aube en forêt »
   Un seul fichier de jetons et de composants, partagé par l'accueil,
   les hubs et les vitrines. Tout est en variables : une page n'a
   jamais à connaître une couleur.

   CLAIR PAR DÉFAUT, ET C'EST UNE DÉCISION.
   La v2 de septembre 2026 était sombre par défaut (obsidienne, sève
   fluorescente, verre dépoli, liserés coniques). Verdict de
   l'utilisateur, sans appel : « hyper digital ». Le site avait perdu
   ce qui le distinguait — un matin en montagne, du papier, un arbre
   dessiné. Cette version reprend la palette « aube » du premier
   accueil : brume matinale, humus, sève de forêt, lumière rasante.
   Le mode sombre existe toujours (crépuscule), mais il se demande.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F7F9F4;          /* brume matinale */
  --bg-2:#EFF4EA;
  --bg-3:#E4ECDF;
  --surface:#FFFFFF;
  --surface-2:#F2F6EE;
  --hair:#DCE5D6;
  --hair-2:#C5D3BD;
  --ink:#1C2A20;         /* humus profond */
  --ink-2:#4F6154;
  --ink-3:#7B8C7E;
  --sap:#3C7A4E;         /* sève de forêt : porte du blanc (5,4) */
  --sap-2:#2E6440;
  --sap-deep:#D6E8D8;
  --leaf:#7FB069;        /* feuille jeune */
  --gold:#B8781F;        /* lumière rasante, assez sombre pour du texte (4,6) */
  --gold-2:#8F5E08;
  --gold-lum:#D9963C;    /* le même or, pour les aplats et les dessins */
  --sky:#3E86A0;
  --violet:#6D4FD6;
  --rose:#B9433A;
  --glow:0 0 0 4px rgba(217,150,60,.16);
  --shadow:0 1px 2px rgba(28,42,32,.05),0 8px 24px -12px rgba(28,42,32,.16);
  --shadow-lift:0 2px 4px rgba(28,42,32,.06),0 24px 48px -20px rgba(28,42,32,.28);
  --r:16px; --r-s:10px; --r-l:26px;
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Seravek","Segoe UI",-apple-system,system-ui,sans-serif;
  --mono:"Cascadia Code","Consolas",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --mx:50%; --my:50%;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0D1410; --bg-2:#111A14; --bg-3:#16211A;
  --surface:#16211A; --surface-2:#1B2820;
  --hair:#24332A; --hair-2:#34473B;
  --ink:#E8F0E7; --ink-2:#A9BCAC; --ink-3:#7E9283;
  --sap:#8ECF9E; --sap-2:#6FB883; --sap-deep:#1E3A28; --leaf:#A8D48C;
  --gold:#E9B767; --gold-2:#F2CB8A; --gold-lum:#E9B767;
  --sky:#7FB0C4; --violet:#B39DF5; --rose:#E08A82;
  --glow:0 0 0 4px rgba(233,183,103,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45),0 24px 48px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}
/* Une page qui posait encore l'ancien réglage explicite « clair »
   ne doit rien changer : c'est déjà le défaut. */
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--sap);text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.018em;
  line-height:1.05;margin:0;text-wrap:balance;font-variation-settings:"opsz" 144,"SOFT" 30}
h1{font-size:clamp(2.6rem,7vw,5.6rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
h3{font-size:1.35rem;line-height:1.2}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
:is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--sap);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:9999;background:var(--sap);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:700}
.skip:focus{top:0}

/* ── L'air : du papier, pas des néons ─────────────────────────────
   La v2 posait ici trois halos flous (vert, or, cyan) en dérive
   continue : c'est exactement ce qui faisait « écran ». Reste un fond
   uni, une lueur rasante très pâle en haut à gauche — le soleil du
   héros — et le grain du premier accueil, en multiplication, qui
   donne de la matière à tout le reste. Les <i> sont conservés pour
   les pages qui les posent encore : ils ne dessinent plus rien. */
.lumen-air{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(900px 600px at 10% -8%,rgba(217,150,60,.10),transparent 62%),
    var(--bg)}
.lumen-air::after{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>")}
:root[data-theme="dark"] .lumen-air::after{mix-blend-mode:screen;opacity:.2}
.lumen-air i{display:none}

/* ── Barre de navigation : une pastille qui flotte ────────────── */
#nav{position:sticky;top:12px;z-index:500;margin-top:12px;padding:0 12px;transition:background .3s,border-color .3s}
#nav .wrap{display:flex;align-items:center;gap:6px;min-height:66px;flex-wrap:wrap;
  background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--hair);border-radius:18px;
  box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
#nav.stuck .wrap{box-shadow:var(--shadow-lift)}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);margin-right:10px;flex:none}
.brand svg{width:22px;height:26px;overflow:visible}
.wordmark{font-family:var(--display);font-size:.98rem;letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:"opsz" 9,"SOFT" 0}
.nlinks{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nlinks a{padding:7px 11px;border-radius:9px;font-size:.88rem;color:var(--ink-2)}
.nlinks a:hover{color:var(--ink);background:var(--surface-2)}
.navtools{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.iconbtn{width:38px;height:38px;border-radius:99px;border:1px solid var(--hair);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:border-color .2s,color .2s}
.iconbtn:hover{border-color:var(--hair-2);color:var(--ink)}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){
  #nav .wrap{min-height:58px;gap:2px}
  /* Le menu passe sur sa propre ligne et défile de côté : quatre
     familles ne tiennent pas de front sur un téléphone. */
  /* #nav devant : nav.js injecte `.nlinks{flex-wrap:wrap}` après cette
     feuille, et à spécificité égale c'est lui qui gagnait — le menu
     retombait sur deux lignes au lieu de défiler. */
  #nav .nlinks{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding:2px 0 8px;margin-top:-4px;
    mask:linear-gradient(90deg,#000 88%,transparent)}
  .nlinks::-webkit-scrollbar{display:none}
  .nlinks .an-g,.nlinks a{flex:none}
  #nav .navtools .btn span,#nav .navtools .btn{padding:9px 12px}
  #nav .navtools .btn{font-size:0;gap:0;width:38px;height:38px;justify-content:center;padding:0}
  #nav .navtools .btn svg{width:18px;height:18px}
  .wordmark{display:none}
}

/* ── Boutons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:99px;
  font-weight:700;font-size:.93rem;white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s;position:relative;isolation:isolate}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Des aplats pleins, une ombre douce : un bouton, pas une lampe. En
   mode sombre la sève est claire, donc l'encre y est sombre. */
.btn-sap{background:var(--sap);color:#fff;box-shadow:var(--shadow)}
.btn-sap:hover{background:var(--sap-2);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
:root[data-theme="dark"] .btn-sap{color:#0D1410}
:root[data-theme="dark"] .btn-sap:hover{background:var(--sap)}
.btn-ghost{background:var(--surface);border-color:var(--hair-2);color:var(--ink);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--sap);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-gold{background:var(--gold-lum);color:#1A1000;box-shadow:var(--shadow)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-line{background:none;border-color:var(--hair-2);color:var(--ink-2)}
.btn-line:hover{color:var(--ink);border-color:var(--ink-3)}
.btn-sm{padding:9px 15px;font-size:.84rem}

/* ── Étiquettes, kicker, pilules ──────────────────────────────── */
.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;
  font-size:.78rem;font-weight:600;background:var(--surface);border:1px solid var(--hair);color:var(--ink-2);white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--sap)}
.pill.gold i{background:var(--gold-lum)}
.pill.sky i{background:var(--sky)}
.lede{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--ink-2);max-width:62ch;line-height:1.6}
.em{font-style:italic;color:var(--sap);font-variation-settings:"opsz" 144,"SOFT" 100}
.gold-em{font-style:italic;color:var(--gold)}

/* ── Sections et grilles ──────────────────────────────────────── */
section{padding:clamp(72px,10vw,128px) 0;position:relative}
section.tight{padding-top:36px}
.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:46px}
.sec-head p{color:var(--ink-2);max-width:52ch}
@media(max-width:860px){.sec-head{grid-template-columns:1fr;gap:16px}}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── Cartes : du papier posé sur la table ─────────────────────────
   Plus de liseré conique ni de projecteur qui suit la souris : une
   feuille, un filet, une ombre qui se soulève au survol. Le
   « projecteur » de lumen.js continue d'écrire --mx/--my ; personne
   ne les lit plus ici. */
.card{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:26px;overflow:hidden;box-shadow:var(--shadow);transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-3px);border-color:var(--hair-2);box-shadow:var(--shadow-lift)}
.card h3{margin:0 0 8px}
.card p{color:var(--ink-2);font-size:.95rem}
.card .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--sap-deep);border:1px solid var(--hair);color:var(--sap)}
.card .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card .ic.gold{background:color-mix(in srgb,var(--gold-lum) 16%,var(--surface));color:var(--gold)}
.card .ic.sky{background:color-mix(in srgb,var(--sky) 14%,var(--surface));color:var(--sky)}
.card .ic.violet{background:color-mix(in srgb,var(--violet) 12%,var(--surface));color:var(--violet)}
.card .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:.88rem;color:var(--sap)}
.card .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .3s var(--ease)}
.card:hover .go svg{transform:translateX(5px)}
a.card{color:inherit;display:block}

/* vitrine : capture en tête de carte */
.shot{position:relative;margin:-26px -26px 20px;aspect-ratio:16/9.6;overflow:hidden;background:var(--bg-3);border-bottom:1px solid var(--hair)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transform:scale(1.02);transition:transform .8s var(--ease),filter .5s;filter:saturate(1.05)}
.card:hover .shot img{transform:scale(1.07)}
.shot .tag{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 10px;border-radius:99px;background:rgba(28,42,32,.72);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.shot::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(to top,var(--bg-2),transparent);opacity:.8}

/* ── Chiffres, marquee, bandeaux ──────────────────────────────── */
.stat{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--ink);font-variation-settings:"opsz" 144}
.stat small{display:block;font-family:var(--body);font-size:.78rem;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
.marquee{overflow:hidden;mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);border-block:1px solid var(--hair);padding:18px 0}
.marquee .track{display:flex;gap:44px;width:max-content;animation:defile 42s linear infinite}
.marquee span{font-family:var(--display);font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:44px}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-lum);opacity:.8}
@keyframes defile{to{transform:translateX(-50%)}}

/* ── Apparition au défilement ─────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.js-off .rv{opacity:1;transform:none}

/* ── Champs ───────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.field :is(input,select,textarea){width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--hair-2);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--sap);box-shadow:var(--glow)}
textarea{resize:vertical;min-height:120px}

/* ── Pied ─────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair);padding:54px 0 70px;color:var(--ink-3);font-size:.9rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer h4{font-family:var(--body);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
footer a{color:var(--ink-2);display:block;padding:4px 0}
footer a:hover{color:var(--sap)}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ═══ Finitions ═══════════════════════════════════════════════════
   Les détails qui font qu'une page est faite à la main plutôt que
   générée : la sélection prend la couleur de la sève, les liens du
   corps se soulignent d'un trait qui pousse, la barre porte un filet
   d'or qui dit où on en est, les menus s'ouvrent comme une feuille
   qu'on déplie. Tout se coupe sous « mouvement réduit ». */
::selection{background:var(--sap-deep);color:var(--ink)}
:root[data-theme="dark"] ::selection{background:var(--sap-deep);color:var(--ink)}
.lede a,.card p a,.sec-head p a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;
  transition:background-size .35s var(--ease);padding-bottom:1px}
.lede a:hover,.card p a:hover,.sec-head p a:hover{background-size:100% 1px}

/* la barre : un filet d'or qui avance avec la lecture */
/* Posé sur #nav et non sur la pastille : `overflow:hidden` sur elle
   couperait les menus déroulants, qui en dépassent. Les bouts sont
   rentrés du rayon pour rester dans l'arrondi. */
#nav{position:sticky}
#nav::after{content:"";position:absolute;left:30px;right:30px;bottom:1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-lum),var(--sap));transform-origin:left;
  transform:scaleX(var(--lu,0));opacity:.85;transition:transform .1s linear;pointer-events:none}
#nav .nlinks a,#nav .an-t{position:relative}
#nav .an-t{opacity:.9;border-radius:9px;transition:background .18s,color .18s}
#nav .an-t:hover,#nav .an-g:focus-within .an-t{background:var(--surface-2)!important;color:var(--ink)}
#nav .an-t.actif{color:var(--sap)}
/* le menu : du papier qui se déplie */
#nav .an-d{--an-bg:var(--surface);--an-fg:var(--ink);--an-bord:var(--hair);
  border-radius:14px;padding:8px;box-shadow:var(--shadow-lift);margin-top:10px;
  animation:lumen-deplie .22s var(--ease) both;transform-origin:top left}
#nav .an-d::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
#nav .an-d .an-st{color:var(--gold);opacity:1;font-family:var(--mono);letter-spacing:.2em;font-size:.6rem}
#nav .an-d a{border-radius:8px;padding:8px 12px;opacity:.86}
#nav .an-d a:hover{background:var(--sap-deep);opacity:1;color:var(--sap)}
:root[data-theme="dark"] #nav .an-d a:hover{color:var(--ink)}
#nav .an-rch{border-color:var(--hair-2);color:var(--ink-2)}
#nav .an-rch:hover{border-color:var(--sap);color:var(--ink);opacity:1}
@keyframes lumen-deplie{from{opacity:0;transform:translateY(-6px) scaleY(.96)}to{opacity:1;transform:none}}

/* le héros : le texte se pose ligne après ligne, une seule fois */
.hero .kicker,.hero h1,.hero .lede,.hero .cta,.hero .pills{animation:lumen-pose .9s var(--ease) both}
.hero h1{animation-delay:.08s}.hero .lede{animation-delay:.22s}.hero .cta{animation-delay:.34s}.hero .pills{animation-delay:.44s}
@keyframes lumen-pose{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.capture .hero :is(.kicker,h1,.lede,.cta,.pills){animation:none}
.kicker::before{transform-origin:left;transition:transform .8s var(--ease)}
.rv:not(.in) .kicker::before{transform:scaleX(0)}

/* la vague : le paysage se termine en courbe, pas au cordeau */
.vague{position:absolute;left:0;right:0;bottom:-1px;z-index:2;pointer-events:none;display:block;width:100%;height:clamp(28px,5vw,64px);color:var(--bg)}
.vague path{fill:currentColor}

/* le manifeste : une phrase à la fois, une racine qui se dessine */
.manifeste{text-align:center;padding:clamp(56px,8vw,96px) 0 0}
.manifeste blockquote{margin:0 auto;max-width:30ch;font-family:var(--display);font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 100;text-wrap:balance}
.manifeste .mrot{position:relative;min-height:5.2em}
.manifeste .mrot blockquote{position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);pointer-events:none}
.manifeste .mrot blockquote.on{position:relative;opacity:1;transform:none;pointer-events:auto}
.manifeste .mroot{width:92px;height:auto;margin:18px auto 8px;display:block;color:var(--sap)}
.manifeste .mroot path{stroke-dasharray:60;stroke-dashoffset:60;animation:lumen-racine 1.6s var(--ease) forwards}
.manifeste .mroot path:nth-child(2){animation-delay:.5s}.manifeste .mroot path:nth-child(3){animation-delay:.9s}
@keyframes lumen-racine{to{stroke-dashoffset:0}}
.manifeste cite{display:block;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.manifeste .mdots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.manifeste .mdots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--hair-2);cursor:pointer;transition:background .3s,transform .3s}
.manifeste .mdots button[aria-current="true"]{background:var(--sap);transform:scale(1.25)}

/* la frise : elle s'arrête sous la souris, pour qu'on puisse lire */
.marquee:hover .track{animation-play-state:paused}
.marquee span{color:var(--ink-2);opacity:.75}

/* les cartes : l'icône se penche un peu, la flèche part */
.card .ic{transition:transform .35s var(--ease)}
.card:hover .ic{transform:rotate(-6deg) scale(1.06)}
.card .num{transition:opacity .35s,transform .35s var(--ease)}
.card:hover .num{opacity:.14!important;transform:translateY(-3px)}

/* le pied : une assise, et l'arbre du logo qui remonte au survol */
footer{background:var(--bg-2);border-top:1px solid var(--hair)}
footer a{transition:color .2s,transform .2s var(--ease)}
footer a:hover{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .hero :is(.kicker,h1,.lede,.cta,.pills){animation:none}
  .rv:not(.in) .kicker::before{transform:none}
  .manifeste .mroot path{animation:none;stroke-dashoffset:0}
  #nav .an-d{animation:none}
}