/* ─────────── Grille : 12 colonnes, 1rem de marge et de gouttière, 1rem = 1/144 de l'écran ─────────── */
:root {
  --g: 1rem;
  --m: max(16px, 1rem); /* marge des bords de l'écran */
  --c: calc((100vw - (var(--m) * 2 + var(--g) * 11)) / 12);
  --grey: #c9c9c9;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease2: cubic-bezier(.19, 1, .22, 1);
  --logo: 13rem;
  --spread: 17.8rem;
}

html { font-size: .694444vw; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #fff; color: #000; }
body {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2 { font: inherit; }
img { display: block; user-select: none; -webkit-user-drag: none; }

/* ─────────── Lignes qui montent ─────────── */
.ln_ { display: block; overflow: hidden; }
.ln {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform .5s cubic-bezier(.7, 0, .84, 0);
}
.is-in .ln {
  transform: none;
  transition: transform 1.1s var(--ease) var(--d, 0s);
}

/* Soulignement animé (liens) */
.ul .ln, .ul.ln { position: relative; display: inline-block; }
.ul .ln::after, .ul.ln::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: .1rem solid currentColor;
  transform-origin: left;
  transition: transform .6s var(--ease);
}
.ul:hover .ln::after, .ul.ln:hover::after { transform: scaleX(0); transform-origin: right; }

/* ─────────── Chargement ─────────── */
#loader {
  position: fixed; inset: 0; z-index: 40;
  background: #000;
  transition: background-color .9s ease;
}
#loader.is-done { background: rgba(0, 0, 0, 0); pointer-events: none; }
#loader-count {
  position: absolute; right: var(--m); top: 50%;
  transform: translateY(-50%);
  color: #fff; font-variant-numeric: tabular-nums;
  transition: opacity .3s;
}
#loader-img {
  position: absolute; left: 50%; top: 50%;
  width: 8.6rem; height: 8.6rem;
  transform: translate(-50%, -50%);
  overflow: hidden;
  transition: opacity .3s;
}
#loader-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
#loader.is-done #loader-count, #loader.is-done #loader-img { opacity: 0; }

/* ─────────── Crochets ─────────── */
#logo {
  position: fixed; left: 50%; top: 50%; z-index: 60;
  width: var(--logo); height: var(--logo);
  transform: translate3d(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px)), 0);
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
  transition: opacity .6s, width 1.2s var(--ease), height 1.2s var(--ease);
}
#logo.is-travel { transition: opacity .6s, width 1.2s var(--ease), height 1.2s var(--ease), transform 1.1s var(--ease); }
#logo svg {
  position: absolute; top: 0;
  width: 45%; height: 100%;
  overflow: visible;
  transition: transform 1.2s var(--ease);
}
#logo .lg-l { left: 0; }
#logo .lg-r { right: 0; }
#logo.is-spread .lg-l { transform: translate3d(calc(var(--spread) * -1), 0, 0); }
#logo.is-spread .lg-r { transform: translate3d(var(--spread), 0, 0); }
/* sur l'accueil, les crochets fermés font le cadre rond de la photo (taille posée par le script) */
body.is-home { --logo: var(--hero-logo, 13rem); }

/* ─────────── En-tête ─────────── */
#header {
  position: fixed; top: calc(var(--m) + env(safe-area-inset-top, 0px)); left: var(--m); right: var(--m); z-index: 55;
  display: flex; justify-content: space-between; align-items: flex-start;
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
}
#header-title {
  display: block; pointer-events: all;
  font-size: 9.7rem; line-height: .74; letter-spacing: -.055em;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: scale(.145);
  transition: transform 1.4s var(--ease2), opacity .5s;
  margin-top: -.02em;
}
#header-title .ht_ { display: block; overflow: hidden; padding: .04em .06em .02em 0; }
#header-title .ht { display: block; transform: translate3d(0, 115%, 0); transition: transform 1.2s var(--ease) .1s; }
#header.is-in #header-title .ht { transform: none; }
/* sur l'accueil le grand nom suffit : le petit nom en haut à gauche s'efface */
body.is-home #header-title { opacity: 0; pointer-events: none; }
#header-title.is-2l { line-height: .8; }
#header-title sup {
  display: inline-flex; align-items: center; justify-content: center;
  width: .27em; height: .27em; margin-left: .03em;
  border: .022em solid currentColor; border-radius: 50%;
  font-size: 1em; vertical-align: top;
  position: relative; top: .02em;
}
#header-title sup i { font-style: normal; font-size: .1em; letter-spacing: 0; line-height: 1; font-weight: 500; }

#header-right { display: flex; align-items: flex-start; gap: var(--g); }
#header-right > * { width: var(--c); overflow: hidden; }
#header-menu, #header-contact_ { pointer-events: all; }
#header-right > #header-menu { width: auto; min-width: var(--c); white-space: nowrap; }
#header-menu > a:not(:last-child)::after { content: ",\00a0"; }
#header-menu > a, #header-time > span, #header-contact {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform .5s cubic-bezier(.7, 0, .84, 0);
}
#header.is-in #header-menu > a, #header.is-in #header-time > span, #header.is-in #header-contact {
  transform: none; transition: transform 1.1s var(--ease) var(--d, 0s);
}
#header-menu > a > span { position: relative; }
#header-menu > a > span::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: .1rem solid; transform: scaleX(0); transform-origin: right;
  transition: transform .8s var(--ease2);
}
#header-menu > a.is-on > span::before, #header-menu > a:hover > span::before { transform: scaleX(1); transform-origin: left; }
#header-contact_ { text-align: right; }

/* ─────────── Accueil ─────────── */
#home { position: fixed; inset: 0; overflow: hidden; transition: opacity .55s ease; }
#home.is-out { opacity: 0; pointer-events: none; }
body.is-loading #home { pointer-events: none; }
#home-in { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }

/* Premier écran, d'après le croquis : 3 colonnes (expérience · carte · langues) et 3 rangées (nom · carte · formation) */
#hero {
  position: relative;
  height: 100vh; height: 100svh;
  display: grid;
  grid-template-columns: calc(var(--c) * 3 + var(--g) * 2) minmax(0, 1fr) calc(var(--c) * 3 + var(--g) * 2);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: calc(var(--g) * 2);
  row-gap: 2.4rem;
  padding: calc(var(--m) + env(safe-area-inset-top, 0px) + 3rem) var(--m) calc(var(--m) + env(safe-area-inset-bottom, 0px));
}
#hero-name {
  grid-column: 1 / -1; justify-self: center;
  font-weight: 400; font-size: 6.4rem; line-height: .85; letter-spacing: -.05em; white-space: nowrap;
}
.hn_ { display: block; overflow: hidden; padding: .08em .05em .02em; }
.hn { display: block; transform: translate3d(0, 110%, 0); transition: transform .5s cubic-bezier(.7, 0, .84, 0); }
#home.is-in .hn { transform: none; transition: transform 1.3s var(--ease) .3s; }

/* colonnes du CV */
/* les deux colonnes commencent à la même hauteur, celle du cadre du haut */
#cv-left { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; width: max-content; max-width: 100%; display: grid; gap: 3.6rem; }
#cv-xp { grid-column: 3; grid-row: 2; align-self: start; }
.cv-t { font-weight: 600; margin-bottom: 1.2rem; }
.cv-list { list-style: none; display: grid; gap: .6rem; }
.cv-list .cv-i { display: grid; grid-template-columns: 5.6rem 1fr; gap: 1rem; }
.cv-y { color: #8c8c8c; font-variant-numeric: tabular-nums; }
.cv-list a.cv-i .cv-x { background: linear-gradient(currentColor, currentColor) 0 100% / 0 .1rem no-repeat; transition: background-size .6s var(--ease); }
.cv-list a.cv-i:hover .cv-x, .cv-list a.cv-i:focus-visible .cv-x { background-size: 100% .1rem; }
.cv-lang .cv-l { display: grid; grid-template-columns: 6.4rem 1fr; align-items: center; gap: 1rem; }
.cv-lang i { position: relative; display: block; height: .2rem; background: rgba(0, 0, 0, .12); }
.cv-lang em { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: #000; transform: scaleX(0); transform-origin: left; transition: transform .4s; }
#home.is-in .cv-lang em { transform: none; transition: transform 1.6s var(--ease) 1s; }
.cv-mail .ln { user-select: text; }

/* la carte : la photo au centre, reliée par des traits aux cadres des compétences */
#map {
  grid-column: 2; grid-row: 2; position: relative; min-height: 0; container-type: size;
  --fw: min(44cqw, 47cqh); /* largeur commune des trois cadres */
  --tg: min(10cqw, 12cqh); /* écart entre les deux cadres du bas */
  --ph-d: min(17cqw, 22cqh);
}
#map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#map-lines line { stroke: #000; stroke-width: 1; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset .5s ease; }
#map-lines circle { fill: #000; opacity: 0; transition: opacity .3s; }
#home.is-in #map-lines line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .7s; }
#home.is-in #map-lines circle { opacity: 1; transition: opacity .4s 1.6s; }
#hero-ph {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: var(--ph-d); aspect-ratio: 1; margin: 0;
  border-radius: 50%; overflow: hidden;
  transform: translate(-50%, -50%);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.4s var(--ease) .25s;
}
#hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
#home.is-entered #hero-ph { clip-path: circle(50% at 50% 50%); }

.mp { position: absolute; z-index: 2; width: var(--w); display: flex; flex-direction: column; gap: .8rem; opacity: 0; transform: translate3d(0, 2rem, 0); transition: opacity .5s, transform .5s; }
#home.is-in .mp { opacity: 1; transform: none; transition: opacity 1s ease var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.mp { --w: var(--fw); }
.mp-programmation { left: calc(50% - var(--fw) / 2); top: 0; }
.mp-musique { left: calc(50% - var(--fw) - var(--tg) / 2); bottom: 0; }
.mp-evenementiel { left: calc(50% + var(--tg) / 2); bottom: 0; }
.mp-link { position: absolute; inset: 0; z-index: 1; outline: none; }
.mp-link:focus-visible { outline: .2rem solid #000; outline-offset: .6rem; }
.mp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mp-t { font-size: 2.6rem; line-height: .95; letter-spacing: -.045em; }
.mp-s { color: #8c8c8c; white-space: nowrap; }
.mp-bot { display: flex; justify-content: flex-end; align-items: baseline; gap: 1.6rem; }
.mp-go { position: relative; white-space: nowrap; }
.mp-go::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: .1rem solid; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.mp:hover .mp-go::after, .mp:focus-within .mp-go::after { transform: scaleX(1); transform-origin: left; }
.fr-box { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; container-type: size; background: #ececec; transition: filter .6s ease, opacity .6s ease; }
/* au survol d'un cadre, les autres passent en retrait (gris) */
#map:has(.mp:hover) .mp:not(:hover) .fr-box { filter: grayscale(1); opacity: .55; }

/* bouton son des vidéos */

/* ── Cadre « code » : l'éditeur tape, puis l'appli s'ouvre ── */
.fc { position: absolute; inset: 0; background: #0e1014; color: #d9dce3; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.fc-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 6cqw;
  display: flex; align-items: center; gap: 1cqw; padding: 0 2.4cqw;
  border-bottom: 1px solid #20242d; font-size: 1.7cqw; color: #8a8f99;
}
.fc-bar i { flex: none; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #2c313b; }
.fc-file { margin-left: 1.4cqw; color: #d9dce3; }
.fc-run { margin-left: auto; font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
.fc-code {
  position: absolute; left: 0; right: 0; top: 6cqw; bottom: 0; margin: 0;
  padding: 2.6cqw 3cqw; font: inherit; font-size: 1.95cqw; line-height: 1.6;
  white-space: pre; overflow: hidden; counter-reset: ln;
}
.fc-code .l { display: block; min-height: 1.6em; }
.fc-code .l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 3.4ch; color: #4b505b; }
.fc-code .k { color: #7d9bff; }
.fc-code .s { color: #b9d97a; }
.fc-code .c { color: #6b707b; font-style: italic; }
.fc-code .n { color: #f0a35e; }
.fc-caret { display: inline-block; width: .55em; height: 1.15em; margin-left: .05em; vertical-align: -.2em; background: #d9dce3; animation: fc-blink 1s steps(1) infinite; }
@keyframes fc-blink { 50% { opacity: 0; } }
.fc-app { position: absolute; left: 0; right: 0; top: 6cqw; bottom: 0; margin: 0; transform: translate3d(0, 101%, 0); transition: transform .9s var(--ease); }
.fc.is-app .fc-app { transform: none; }
.fc-app img { width: 100%; height: 100%; object-position: 50% 0; }
.fc-app figcaption { position: absolute; left: 2.4cqw; bottom: 2cqw; font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; font-size: 1.9cqw; color: #fff; mix-blend-mode: difference; }
.fc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ── Cadre « photo » ── */
.fph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fph-zoom 18s ease-in-out infinite alternate; }
@keyframes fph-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ── Cadre « beats » : séquenceur 16 pas ── */
.fb { position: absolute; inset: 0; background: #0b0b0b; color: #f3f1ec; display: grid; grid-template-rows: 1fr auto; gap: 3cqw; padding: 3.4cqw; }
.fb-name { transform-origin: left bottom; }
.fb.is-kick .fb-name { animation: fb-kick .24s ease-out; }
@keyframes fb-kick { from { transform: scale(1.06); } to { transform: scale(1); } }
.fb-main { display: flex; flex-direction: column; min-width: 0; }
.fb-name { display: block; font-weight: 400; font-size: 10cqw; line-height: .82; letter-spacing: -.055em; }
.fb-meta { display: block; margin-top: 1.4cqw; font-size: 1.8cqw; opacity: .6; }
.fb-grid { margin-top: auto; display: grid; gap: .7cqw; }
.fb-row { display: grid; grid-template-columns: 6.5cqw repeat(16, 1fr); gap: .45cqw; align-items: center; font-size: 1.5cqw; }
.fb-row span { opacity: .5; }
.fb-row i { display: block; aspect-ratio: 1; background: #1c1c1c; }
.fb-row i:nth-of-type(4n + 1) { background: #272727; }
.fb-row i.on { background: #5c5c5c; }
.fb-row i.ph { box-shadow: inset 0 0 0 1px rgba(243, 241, 236, .4); }
.fb-row i.on.ph { background: #d6261c; }
.fb-wave { grid-column: 1 / -1; display: flex; align-items: center; gap: .4cqw; height: 8cqw; }
.fb-wave i { flex: 1; height: calc(var(--h, .5) * 100%); background: #333; }
.fb-wave i.done { background: #f3f1ec; }

/* ── Cadre « prospect » : le quadrillage de Scout ── */
.fp { position: absolute; inset: 0; background: #ecebe8; color: #111; display: flex; flex-direction: column; gap: 2cqw; padding: 3cqw; }
.fp-head { display: flex; justify-content: space-between; gap: 2cqw; font-size: 1.8cqw; }
.fp-st { opacity: .55; font-variant-numeric: tabular-nums; }
.fp-map { flex: 1; min-height: 0; width: 100%; display: block; }
.fp-cnt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; border-top: 1px solid rgba(0, 0, 0, .18); padding-top: 1.6cqw; }
.fp-cnt b { display: block; font-weight: 400; font-size: 7cqw; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.fp-cnt span { font-size: 1.6cqw; opacity: .6; }

/* ── Cadre « board » : tableau à volets ── */
.fv { --tw: 2.55cqw; position: absolute; inset: 0; background: #101010; color: #f3f1ec; padding: 3.4cqw; display: flex; flex-direction: column; gap: 1.8cqw; }
.fv-head { display: flex; justify-content: space-between; font-size: 1.8cqw; color: #c49c8b; }
.fv-clock { font-variant-numeric: tabular-nums; }
.fv-cols, .fv-row { display: grid; grid-template-columns: 9cqw calc(var(--tw) * 18 + .3cqw * 17) calc(var(--tw) * 9 + .3cqw * 8); justify-content: start; align-items: center; column-gap: 1.6cqw; }
.fv-cols { font-size: 1.4cqw; opacity: .45; }
.fv-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.5cqw; }
.fv-y { font-size: 1.5cqw; opacity: .55; font-variant-numeric: tabular-nums; }
.fv-t { display: flex; gap: .3cqw; }
.fv-t b { position: relative; display: grid; place-items: center; width: var(--tw); height: calc(var(--tw) * 1.45); background: #1f1f1f; border-radius: .3cqw; font: 500 2.1cqw/1 ui-monospace, "SF Mono", Menlo, monospace; }
.fv-t b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .75); }
.fv-ro b { color: #c49c8b; }

/* ── Cadre « lang » : le mot se recompose ── */
.fl { position: absolute; inset: 0; background: #2f5bff; color: #fff; display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 4cqw; padding: 0 4cqw; }
.fl-w { display: block; font-weight: 400; font-size: 12cqw; line-height: .9; letter-spacing: -.055em; white-space: nowrap; }
.fl-side { display: grid; gap: 1.1cqw; font-size: 1.25cqw; }
.fl-row { display: grid; grid-template-columns: 8cqw 1fr; align-items: center; gap: 1.4cqw; opacity: .45; transition: opacity .4s; }
.fl-row.on { opacity: 1; }
.fl-row i { position: relative; display: block; height: .3cqw; background: rgba(255, 255, 255, .25); }
.fl-row em { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: #fff; }
.fl-where { margin-top: 1cqw; min-height: 2.4em; }

/* petits cadres (portable, téléphone) : textes un peu plus grands */
@container (max-width: 560px) {
  .fc-code { font-size: 2.3cqw; padding: 2.6cqw 2.4cqw; }
  .fc-bar, .fc-app figcaption { font-size: 2.8cqw; }
  .fb-meta { font-size: 2.8cqw; }
  .fb-row { font-size: 2.3cqw; grid-template-columns: 9cqw repeat(16, 1fr); }
  .fp-head, .fp-cnt span, .fv-head { font-size: 2.8cqw; }
  .fv-y, .fv-cols { font-size: 2.2cqw; }
  .fv { --tw: 4cqw; gap: 2.4cqw; }
  .fv-ro, .fv-cols span:nth-child(3) { display: none; }
  .fv-cols, .fv-row { grid-template-columns: 12cqw calc(var(--tw) * 18 + .3cqw * 17); }
  .fv-t b { font-size: 3.2cqw; }
  .fv-y { font-size: 2.6cqw; }
  .fl { grid-template-columns: 1fr; align-content: center; gap: 5cqw; padding: 0 6cqw; }
  .fl-w { font-size: 17cqw; }
  .fl-side { font-size: 3.2cqw; gap: 2cqw; }
  .fl-row { grid-template-columns: 20cqw 1fr; }
  .fl-row i { height: .8cqw; }
}

/* ─────────── Pages compétences (modèle Apple : page sombre, on en apprend plus en descendant) ─────────── */
#work {
  --ink: #f5f5f7; --mute: #86868b; --line: #2a2a2c; --card: #161617;
  position: fixed; inset: 0; z-index: 30;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: #000; color: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
  outline: none;
}
body.is-work { touch-action: pan-y; }
body.is-work #work { opacity: 1; visibility: visible; transition: opacity .7s ease .1s; }
body.is-work #logo { opacity: 0; }
/* la barre flottante remplace l'en-tête du site sur ces pages */
#header { transition: opacity .4s ease; }
body.is-work #header { opacity: 0; pointer-events: none; }
body.is-work #header * { pointer-events: none !important; }
#wk { font-size: 1.8rem; line-height: 1.45; letter-spacing: -.012em; transition: opacity .45s ease; }
#work.is-out #wk { opacity: 0; }

/* barre flottante : la page, ses sections, l'accueil, la suite */
#lnav { position: fixed; z-index: 56; left: 50%; top: calc(var(--m) + env(safe-area-inset-top, 0px)); width: min(110rem, calc(100vw - var(--m) * 2)); transform: translate3d(-50%, -1rem, 0); opacity: 0; transition: opacity .5s, transform .7s var(--ease); }
#work.is-in #lnav { opacity: 1; transform: translate3d(-50%, 0, 0); }
.lnav-in {
  position: relative; display: flex; align-items: center; gap: 2rem;
  height: 5.4rem; padding: 0 1rem 0 2.2rem; border-radius: 1.8rem;
  background: rgba(29, 29, 31, .74); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-size: 1.4rem;
}
#ln-title { display: flex; align-items: center; gap: .8rem; font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
#ln-title i { width: .8rem; height: .8rem; border-right: .15rem solid; border-bottom: .15rem solid; transform: translateY(-.25rem) rotate(45deg); transition: transform .3s; }
#ln-title[aria-expanded="true"] i { transform: translateY(.15rem) rotate(-135deg); }
#ln-menu { position: absolute; left: 0; top: calc(100% + .8rem); min-width: 28rem; padding: .8rem; border-radius: 1.8rem; background: rgba(29, 29, 31, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: grid; }
#ln-menu[hidden] { display: none; }
#ln-menu a { padding: 1rem 1.4rem; border-radius: 1rem; font-size: 1.7rem; color: #a1a1a6; transition: background .2s, color .2s; }
#ln-menu a:hover, #ln-menu a.is-on { color: var(--ink); background: rgba(255, 255, 255, .08); }
.ln-sec { display: flex; gap: 2.4rem; margin-left: auto; }
.ln-sec button { color: #a1a1a6; white-space: nowrap; transition: color .2s; }
.ln-sec button:hover, .ln-sec button.is-on { color: var(--ink); }
.pill { display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.4rem; border-radius: 99rem; font-size: 1.35rem; white-space: nowrap; transition: transform .2s, background .2s, opacity .2s; }
.pill:hover { transform: scale(1.03); }
.pill-o { box-shadow: inset 0 0 0 1px rgba(245, 245, 247, .45); color: var(--ink); }
.pill-a { background: var(--acc); color: var(--acc-ink, #000); }
#lnav .pill-a { color: #000; }

/* titres et sur-titres */
.eye { color: var(--mute); font-size: 2rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 1.6rem; }
.h2 { font-size: 8rem; font-weight: 600; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.s-sec { width: min(120rem, calc(100% - var(--m) * 2)); margin: 0 auto; padding: 20rem 0; }

/* ouverture : le média s'agrandit jusqu'à remplir l'écran */
.s-hero { position: relative; height: 210vh; }
.sh-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* le cadre grandit vraiment (son contenu se recompose à chaque taille, rien n'est rogné) */
.sh-media {
  --q: calc(1 - var(--p, 0));
  position: absolute; background: #111; container-type: size; overflow: hidden;
  left: calc(var(--q) * 17%); right: calc(var(--q) * 17%);
  top: calc(var(--q) * 14%); bottom: calc(var(--q) * 36%);
  border-radius: calc(var(--q) * 2.6rem);
}
.sh-media > img, .sh-media > video { width: 100%; height: 100%; object-fit: cover; }
.sh-media > .sh-poster { position: absolute; inset: 0; container-type: size; }
.sh-media > .sh-anim { position: absolute; inset: 0; container-type: size; }
/* l'animation en grand : on garde ses proportions dans le cadre de départ, puis plein écran */
.sh-anim .fb, .sh-anim .fp, .sh-anim .fv, .sh-anim .fl { padding-top: max(3.4cqw, calc(var(--p, 0) * 9rem)); }
.sh-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .7)); opacity: var(--p, 0); }
.sh-cap { position: absolute; z-index: 2; left: 5rem; bottom: 5rem; display: grid; gap: .4rem; font-size: 2rem; opacity: calc((var(--p, 0) - .75) * 4); }
.sh-cap b { font-size: 4.2rem; font-weight: 600; letter-spacing: -.035em; }
.sh-txt { position: absolute; left: max(var(--m), 4rem); bottom: 7vh; max-width: 92rem; opacity: calc(1 - var(--p, 0) * 2.2); transform: translate3d(0, calc(var(--p, 0) * -8rem), 0); }
.sh-eye { color: var(--mute); font-size: 1.8rem; margin-bottom: .6rem; }
.sh-name { font-size: 3rem; font-weight: 600; letter-spacing: -.025em; margin-bottom: .8rem; }
.sh-tag { font-size: 7.4rem; font-weight: 600; line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.sh-bar {
  position: absolute; right: max(var(--m), 4rem); bottom: 7vh;
  display: flex; align-items: center; gap: 1.8rem;
  padding: .8rem .8rem .8rem 2rem; border-radius: 99rem;
  background: rgba(29, 29, 31, .8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font-size: 1.5rem; color: #d2d2d7;
  opacity: calc(1 - var(--p, 0) * 2.2);
}
.sh-hint { position: absolute; left: 50%; top: calc(64% + 1.6rem); transform: translateX(-50%); color: var(--mute); font-size: 1.4rem; opacity: calc(1 - var(--p, 0) * 4); }
#work .sh-txt, #work .sh-bar { transition: none; }
.fx .sh-tag, .fx .sh-name, .fx .sh-eye { transform: translate3d(0, 3rem, 0); opacity: 0; transition: transform 1.2s var(--ease), opacity 1s ease; }
.fx .sh-name { transition-delay: .08s; } .fx .sh-tag { transition-delay: .16s; }
#work.is-in .fx .sh-tag, #work.is-in .fx .sh-name, #work.is-in .fx .sh-eye { transform: none; opacity: 1; }

/* aperçu : le texte s'éclaire mot à mot */
.words { font-size: 5.4rem; font-weight: 600; line-height: 1.12; letter-spacing: -.035em; }
.words span { color: #3a3a3c; transition: color .4s ease; }
.words span.on { color: var(--ink); }
.why { margin-top: 16rem; }
.why3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.why3 > div { border-top: 1px solid var(--line); padding-top: 2.4rem; }
.why3 b { display: block; font-size: 6.4rem; font-weight: 600; line-height: 1; letter-spacing: -.05em; color: var(--acc); margin-bottom: 2.4rem; }
.why3 p { font-size: 3rem; font-weight: 600; line-height: 1.12; letter-spacing: -.025em; }

/* trois cadres (page Musique) : photo du studio, titre Spotify, site qui défile */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.cd { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; margin: 0; color: inherit; }
.cd-box { position: relative; aspect-ratio: 4 / 5; border-radius: 2.2rem; overflow: hidden; background: var(--card); container-type: size; transition: transform .6s var(--ease); }
a.cd:hover .cd-box, a.cd:focus-visible .cd-box { transform: scale(1.02); }
.cd-cap { display: grid; gap: .3rem; }
.cd-cap b { font-size: 2.4rem; font-weight: 600; letter-spacing: -.025em; }
.cd-cap span { color: var(--mute); }
.cd-photo img { width: 100%; height: 100%; object-fit: cover; }
.ph-empty { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #1b1b1d 0 1.4rem, #161617 1.4rem 2.8rem); color: var(--mute); }
.ph-empty span { padding: .8rem 1.6rem; border: 1px dashed #3a3a3c; border-radius: 99rem; }

/* Spotify : un vinyle qui tourne derrière la pochette, un égaliseur qui bat */
.cd-sp .cd-box { background: radial-gradient(120% 80% at 50% 0%, #2b1608, #0b0b0b 70%); }
.sp-disc {
  position: absolute; left: 50%; top: 9cqh; width: 64cqw; aspect-ratio: 1; margin-left: -14cqw; border-radius: 50%;
  /* reflet en croix : c'est lui qui montre que le disque tourne */
  background:
    conic-gradient(from 0deg, transparent 0 18%, rgba(255, 255, 255, .13) 24%, transparent 30% 68%, rgba(255, 255, 255, .13) 74%, transparent 80%),
    repeating-radial-gradient(circle, #111 0 .35cqw, #1c1c1c .35cqw .7cqw);
  animation: sp-spin 5s linear infinite;
}
.sp-disc img { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; object-fit: cover; }
.sp-cover { position: absolute; left: 50%; top: 9cqh; width: 64cqw; aspect-ratio: 1; margin-left: -44cqw; border-radius: 1.2rem; object-fit: cover; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .55); }
/* nombre d'écoutes */
.sp-streams { position: absolute; left: 8cqw; right: 8cqw; top: calc(9cqh + 67cqw); display: flex; align-items: baseline; gap: 2.4cqw; }
.sp-streams b { font-size: 15cqw; font-weight: 600; letter-spacing: -.05em; line-height: .9; background: linear-gradient(180deg, #fff 30%, #1ed760); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-streams span { color: #c9b8a6; font-size: 5.4cqw; }
/* mosaïque : 9 pochettes qui changent de place */
.sp-mosaic { position: absolute; left: 6cqw; right: 6cqw; top: 6cqw; aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.sp-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .8rem; transition: transform .35s ease, opacity .35s ease; }
.sp-mosaic img.is-flip { transform: rotateY(90deg); opacity: .3; }
.cd-sp.is-mosaic .sp-streams { top: calc(6cqw + 92cqw); }
.cd-sp.is-mosaic .sp-eq { display: none; }
.sp-mosaic a { display: block; border-radius: .8rem; overflow: hidden; transition: transform .25s; }
.sp-mosaic a:hover { transform: scale(1.05); }
.sp-eq { position: absolute; left: 8cqw; right: 8cqw; bottom: 17cqh; height: 9cqh; display: flex; align-items: flex-end; gap: 1.2cqw; }
.sp-eq i { flex: 1; height: 30%; border-radius: 99rem; background: #1ed760; animation: sp-eq 1.1s ease-in-out infinite alternate; }
.sp-eq i:nth-child(3n) { animation-duration: .8s; } .sp-eq i:nth-child(4n + 1) { animation-duration: 1.4s; } .sp-eq i:nth-child(5n + 2) { animation-delay: -.5s; } .sp-eq i:nth-child(7n) { animation-delay: -.9s; }
.sp-go { position: absolute; left: 8cqw; bottom: 5cqh; background: #1ed760; color: #000; font-weight: 600; }
@keyframes sp-spin { to { transform: rotate(1turn); } }
@keyframes sp-eq { from { height: 15%; } to { height: 100%; } }

/* site : fenêtre de navigateur, la page défile toute seule */
.bw-bar { position: absolute; left: 0; right: 0; top: 0; height: 9cqh; display: flex; align-items: center; gap: 1.6cqw; padding: 0 4cqw; background: #202022; font-size: 4.2cqw; color: #a1a1a6; z-index: 1; }
.bw-bar i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #3a3a3c; }
.bw-bar span { flex: 1; margin-left: 2cqw; padding: .8cqh 3cqw; border-radius: 99rem; background: #2c2c2e; text-align: center; }
.bw-view { position: absolute; left: 0; right: 0; top: 9cqh; bottom: 0; overflow: hidden; background: #0b0b0b; container-type: size; }
.bw-view img { display: block; width: 100%; height: auto; animation: bw-scroll 22s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes bw-scroll {
  0%, 8% { transform: translateY(0); }
  24%, 32% { transform: translateY(calc((-100% + 100cqh) * .2)); }
  48%, 56% { transform: translateY(calc((-100% + 100cqh) * .62)); }
  76%, 84% { transform: translateY(calc(-100% + 100cqh)); }
  100% { transform: translateY(0); }
}

/* mes musiques : 6 cadres, forme d'onde réelle qui bouge avec le son */
.s-tracks .h2, .s-prog .h2 { margin-bottom: 6rem; }
.tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.tk { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.tk-box { position: relative; aspect-ratio: 4 / 3; border-radius: 2.2rem; overflow: hidden; background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--tc) calc(var(--lv, 0) * 55% + 12%), transparent), #121213 70%); }
.tk-cv { position: absolute; left: 6%; right: 6%; top: 10%; bottom: 22%; width: 88%; height: 68%; cursor: pointer; }
.tk-play { position: absolute; left: 6%; bottom: 7%; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: #f5f5f7; display: grid; place-items: center; transition: transform .2s; }
.tk-play:hover { transform: scale(1.06); }
.tk-play i { width: 0; height: 0; margin-left: .35rem; border-left: 1.3rem solid #000; border-top: .8rem solid transparent; border-bottom: .8rem solid transparent; }
.tk.is-play .tk-play i { width: 1.2rem; height: 1.4rem; margin: 0; border: 0; border-left: .4rem solid #000; border-right: .4rem solid #000; }
.tk-time { position: absolute; right: 6%; bottom: 9%; color: var(--mute); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.tk-cap { display: grid; gap: .3rem; }
.tk-cap b { font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; }
.tk-cap span { color: var(--mute); }
.tk.is-soon .tk-box { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #141415 0 1.4rem, #101011 1.4rem 2.8rem); color: #48484a; }

/* résultats */
.s-res .h2 { margin-bottom: 6rem; }
.rs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.rs { display: grid; gap: 2.4rem; padding: 2.6rem; border-radius: 2.2rem; background: var(--card); }
.rs span { color: var(--mute); }
.rs b { font-size: 6rem; font-weight: 600; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs:nth-child(3) b { color: var(--acc); }
.rs-note { margin-top: 2.4rem; color: var(--mute); }

/* mes programmes : deux cadres côte à côte */
.pg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.pg { margin: 0; display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.pg-box { position: relative; aspect-ratio: 16 / 10; border-radius: 2.2rem; overflow: hidden; background: #0b0b0b; }
.pg-box video { width: 100%; height: 100%; object-fit: cover; }
.pg figcaption { display: grid; gap: .4rem; }
.pg figcaption b { font-size: 2.8rem; font-weight: 600; letter-spacing: -.03em; }
.pg figcaption span { color: var(--mute); }
/* plugins : les interfaces se succèdent avec un léger zoom */
.pg-slides { position: absolute; inset: 0; background: #0b0b0b; }
.pg-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; animation: pg-slide calc(var(--n) * 4.5s) infinite; animation-delay: calc(var(--j) * 4.5s); }
@keyframes pg-slide {
  0% { opacity: 0; transform: scale(1.08); }
  6%, 30% { opacity: 1; }
  36%, 100% { opacity: 0; transform: scale(1); }
}

/* médias : ils grandissent en entrant dans l'écran */
.s-media { padding: 8rem var(--m); }
.sm-fig {
  position: relative; margin: 0 auto; width: min(124rem, 100%);
  border-radius: 2.6rem; overflow: hidden; background: var(--card);
  transform: scale(calc(.84 + .16 * min(1, var(--p, 0) * 2.4)));
  transform-origin: 50% 0;
}
.sm-fig img, .sm-fig video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); }
.s-media.is-tall .sm-fig { width: min(52rem, 100%); }
.sm-cap { width: min(124rem, 100%); margin: 2.4rem auto 0; display: flex; justify-content: space-between; gap: 3rem; color: var(--mute); }
.sm-cap b { color: var(--ink); font-weight: 600; }
.s-media.is-tall .sm-cap { width: min(52rem, 100%); }
.sd { display: flex; gap: 2rem; width: min(124rem, 100%); margin: 0 auto; align-items: flex-start; }
.sd figure { flex: var(--r) 1 0; width: 0; margin: 0; border-radius: 2.2rem; overflow: hidden; }
.sd figure:nth-child(2) { transform: translate3d(0, calc((1 - var(--p, 0)) * 10rem), 0); }
.sd img { display: block; width: 100%; height: auto; }

/* galerie qui glisse de côté pendant qu'on descend */
.s-gal { position: relative; }
.sg-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 4rem; }
.sg-head { padding: 0 max(var(--m), 4rem); }
.sg-track { display: flex; gap: 2rem; padding: 0 max(var(--m), 4rem); width: max-content; will-change: transform; }
.sg-track img { height: min(52vh, 46rem); aspect-ratio: 1; object-fit: cover; border-radius: 2.2rem; }

/* parcours : lignes qui arrivent une à une */
.s-xp .h2 { margin-bottom: 7rem; }
.xr { display: grid; grid-template-columns: 16rem 1fr 1.1fr; gap: .8rem 3rem; padding: 2.8rem 0; border-top: 1px solid var(--line); }
.xr h3 { grid-column: 2 / 4; font-size: 3.6rem; font-weight: 600; line-height: 1.05; letter-spacing: -.035em; }
.xr-y { grid-row: 1 / 3; color: var(--mute); padding-top: .6rem; font-variant-numeric: tabular-nums; }
.xr-r { grid-column: 2; color: var(--mute); }
.xr-t { grid-column: 3; color: #d2d2d7; }

/* chiffres qui comptent */
.fig3 { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4rem; }
.fig3 b {
  display: block; font-size: 11rem; font-weight: 600; line-height: .95; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 20%, var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fig3 p { margin-top: 2rem; color: var(--mute); max-width: 34rem; }

/* outils : deux bandeaux qui défilent en sens inverse */
.s-stack { padding: 18rem 0; overflow: hidden; }
.s-sec-in { width: min(120rem, calc(100% - var(--m) * 2)); margin: 0 auto 6rem; }
.mq-row { display: flex; gap: 1.6rem; width: max-content; margin-top: 1.6rem; will-change: transform; }
.mq-row span { font-size: 4.6rem; font-weight: 600; letter-spacing: -.035em; padding: 1.2rem 3.2rem; border-radius: 99rem; border: 1px solid #3a3a3c; white-space: nowrap; }
.mq-row span:nth-child(3n + 1) { background: var(--acc); color: var(--acc-ink); border-color: transparent; }

/* niveaux */
.lvr { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 3rem; padding: 2.6rem 0; border-top: 1px solid var(--line); }
.lvr b { font-size: 5.4rem; font-weight: 600; letter-spacing: -.045em; }
.lvr i { position: relative; display: block; height: .7rem; border-radius: 99rem; background: #2a2a2c; overflow: hidden; }
.lvr em { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: 99rem; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) calc(var(--i, 0) * .1s + .2s); }
.lvr.is-vis em, :not(.fx) > .s-lv .lvr em { transform: none; }

/* contact */
.s-cta { text-align: center; }
.cta-l { font-size: 4.4rem; font-weight: 600; letter-spacing: -.035em; margin-top: 2rem; user-select: text; }
.s-cta .h2 { margin-bottom: 4rem; }

/* suite : la compétence suivante */
.s-next { display: flex; flex-direction: column; align-items: center; gap: 4rem; padding: 16rem var(--m) 18rem; border-top: 1px solid #1d1d1f; text-align: center; }
.nx { display: grid; gap: 1.6rem; justify-items: center; }
.nx .eye { margin: 0; }
.nx-t { font-size: 13rem; font-weight: 600; line-height: .95; letter-spacing: -.055em; transition: color .4s ease; }
.nx:hover .nx-t, .nx:focus-visible .nx-t { color: var(--nacc); }
.nx-s { color: var(--mute); }

/* apparition en douceur (seulement quand le script tourne) */
.fx .rv { opacity: 0; transform: translate3d(0, 4rem, 0); transition: opacity 1s ease calc(var(--i, 0) * .08s), transform 1.2s var(--ease) calc(var(--i, 0) * .08s); }
.fx .rv.is-vis { opacity: 1; transform: none; }
#work :focus-visible { outline: .2rem solid var(--acc); outline-offset: .4rem; }

/* affiche typographique (à la place d'une photo) */
.po { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 7cqw; letter-spacing: -.02em; }
.po span { font-size: 6.4cqw; line-height: 1.15; }
.po-lang b { font-weight: 400; font-size: 13cqw; line-height: .92; letter-spacing: -.05em; }

/* ─────────── Mobile ─────────── */
@media (max-width: 800px) {
  html { font-size: 2.6vw; }
  :root { --logo: 8rem; --spread: 11.6rem; --c: calc((100vw - (var(--m) * 2 + var(--g) * 3)) / 4); }
  #header-title { font-size: 5.8rem; transform: scale(.22); }
  #header-right > * { width: auto; }
  #header-time, #header-contact_ { display: none; }
  #header-right { gap: 2rem; }
  #hero { height: auto; display: flex; flex-direction: column; gap: 6rem; padding-top: calc(var(--m) + env(safe-area-inset-top, 0px) + 6rem); padding-bottom: 8rem; }
  #hero-name { font-size: 8.4rem; white-space: normal; text-align: center; line-height: .82; }
  #map { order: 1; container-type: inline-size; display: flex; flex-direction: column; gap: 5.5rem; --ph-d: 46vw; }
  #map-lines { display: none; }
  #hero-ph { position: relative; left: auto; top: auto; transform: none; align-self: center; margin-bottom: 1rem; }
  .mp { position: relative; left: auto; right: auto; top: auto; bottom: auto; --w: 100%; }
  .mp-t { font-size: 3rem; }
  #cv-xp { align-self: stretch; }
  #cv-left { align-self: flex-start; }
  #cv-xp { order: 2; }
  #cv-left { order: 3; gap: 5rem; }
  .cv-list .cv-i { grid-template-columns: 7rem 1fr; }
  /* pages compétences */
  .lnav-in { gap: 1rem; padding: 0 .8rem 0 1.6rem; height: 5rem; }
  .ln-sec, #ln-home { display: none; }
  #ln-next { margin-left: auto; }
  #ln-title { font-size: 1.8rem; }
  .s-sec { padding: 13rem 0; }
  .h2 { font-size: 5.2rem; }
  .eye { font-size: 1.7rem; }
  .sh-media { left: calc(var(--q) * 4%); right: calc(var(--q) * 4%); top: calc(var(--q) * 13%); bottom: calc(var(--q) * 44%); border-radius: calc(var(--q) * 2rem); }
  .sh-txt { left: var(--m); right: var(--m); bottom: 17vh; }
  .sh-tag { font-size: 4.8rem; }
  .sh-bar { left: var(--m); right: var(--m); bottom: 5vh; justify-content: space-between; font-size: 1.3rem; }
  .sh-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sh-hint { display: none; }
  .sh-cap { left: var(--m); bottom: 4rem; }
  .sh-cap b { font-size: 3.2rem; }
  .words { font-size: 3.4rem; }
  .why { margin-top: 10rem; }
  .why3, .fig3, .cards3, .pg-2 { grid-template-columns: 1fr; }
  .tk-grid, .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .rs { padding: 2rem; gap: 1.6rem; min-width: 0; }
  .rs b { font-size: 3.4rem; white-space: normal; }
  .tk-play { width: 3.8rem; height: 3.8rem; }
  .tk-time { display: none; }
  .cards3 { gap: 4rem; }
  .why3 p { font-size: 2.6rem; }
  .s-media { padding: 5rem var(--m); }
  .sm-fig { border-radius: 1.8rem; }
  .sm-cap { flex-direction: column; gap: .4rem; }
  .sd { flex-direction: column; }
  .sd figure { width: 100%; flex: none; }
  .xr { grid-template-columns: 1fr; }
  .xr-y, .xr h3, .xr-r, .xr-t { grid-column: 1; grid-row: auto; }
  .fig3 b { font-size: 9rem; }
  .mq-row span { font-size: 3rem; padding: 1rem 2.4rem; }
  .lvr b { font-size: 3.6rem; }
  .cta-l { font-size: 3rem; overflow-wrap: anywhere; }
  .nx-t { font-size: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ln, #logo svg, #header-title, .hn, #hero-ph, #hero-ph img, .rv, .lvr em { transition-duration: .01s !important; }
  .sp-disc, .sp-eq i, .bw-view img { animation: none !important; }
  .pg-slides img { animation: none !important; }
  .pg-slides img:first-child { opacity: 1; }
}