/* =============================================================
   MUSKALAB — RETRO-FUTURIST PRINT DESIGN
   Papier crème + encre charbon + orange imprimé
   Typo : Archivo Black (display) / Space Mono (texte)
   ============================================================= */

:root {
  --paper: #efe9dd;
  --paper-2: #f5f0e6;
  --ink: #2b2a26;
  --ink-soft: #4a4840;
  --ink-faint: rgba(43, 42, 38, 0.35);
  --orange: #e85c1e;
  --orange-dark: #c74e12;
  --olive: #8a8778;
  --font-display: "Archivo Black", sans-serif;
  --font-mono: "Space Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

a {
  color: var(--orange);
}

/* Grain papier global */
.site-shell {
  min-height: 100vh;
  position: relative;
}

.site-shell::before {
  background-image: radial-gradient(rgba(43, 42, 38, 0.045) 1px, transparent 1.4px);
  background-size: 5px 5px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 3;
}

.organic-edge {
  filter: contrast(1.04);
  mix-blend-mode: multiply;
}

/* --- Fond : diagonales discrètes conservées ------------------- */
.motion-backdrop {
  background: var(--paper);
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 0;
  --layer-one-x: 0px; --layer-one-y: 0px; --layer-one-angle: 0deg; --layer-one-scale: 1; --layer-one-opacity: 0.5;
  --layer-two-x: 0px; --layer-two-y: 0px; --layer-two-angle: 0deg; --layer-two-scale: 1; --layer-two-opacity: 0.4;
  --layer-three-x: 0px; --layer-three-y: 0px; --layer-three-angle: 0deg; --layer-three-scale: 1; --layer-three-opacity: 0.35;
  --parallax-bg-y: 0px; --parallax-scan-y: 0px;
}

.video-layer {
  left: -18vw;
  position: absolute;
  transform-origin: center;
  will-change: transform, opacity;
}

.layer-one {
  animation: driftOne 14s ease-in-out infinite alternate;
  background: linear-gradient(90deg, transparent, rgba(43, 42, 38, 0.05), transparent);
  height: 34vh;
  opacity: var(--layer-one-opacity);
  top: 13vh;
  width: 146vw;
}

.layer-two {
  animation: driftTwo 17s ease-in-out infinite alternate;
  background: linear-gradient(90deg, transparent, rgba(232, 92, 30, 0.05), transparent);
  height: 22vh;
  opacity: var(--layer-two-opacity);
  top: 49vh;
  width: 126vw;
}

.layer-three {
  animation: driftThree 12s ease-in-out infinite alternate;
  background: linear-gradient(90deg, transparent 8%, rgba(43, 42, 38, 0.04), rgba(232, 92, 30, 0.04), transparent 86%);
  height: 12vh;
  opacity: var(--layer-three-opacity);
  top: 78vh;
  width: 162vw;
}

@keyframes driftOne {
  from { transform: translate3d(var(--layer-one-x), var(--layer-one-y), 0) rotate(calc(-7deg + var(--layer-one-angle))) scale(var(--layer-one-scale)); }
  to { transform: translate3d(calc(var(--layer-one-x) + 60px), var(--layer-one-y), 0) rotate(calc(-7deg + var(--layer-one-angle))) scale(var(--layer-one-scale)); }
}

@keyframes driftTwo {
  from { transform: translate3d(var(--layer-two-x), var(--layer-two-y), 0) rotate(calc(5deg + var(--layer-two-angle))) scale(var(--layer-two-scale)); }
  to { transform: translate3d(calc(var(--layer-two-x) - 70px), var(--layer-two-y), 0) rotate(calc(5deg + var(--layer-two-angle))) scale(var(--layer-two-scale)); }
}

@keyframes driftThree {
  from { transform: translate3d(var(--layer-three-x), var(--layer-three-y), 0) rotate(calc(-4deg + var(--layer-three-angle))) scale(var(--layer-three-scale)); }
  to { transform: translate3d(calc(var(--layer-three-x) + 50px), var(--layer-three-y), 0) rotate(calc(-4deg + var(--layer-three-angle))) scale(var(--layer-three-scale)); }
}

.scanline {
  background-image: repeating-linear-gradient(0deg, rgba(43, 42, 38, 0.025) 0, rgba(43, 42, 38, 0.025) 1px, transparent 1px, transparent 9px);
  inset: 0;
  position: absolute;
  transform: translate3d(0, var(--parallax-scan-y), 0);
}

.category-hover-bands {
  display: none;
}

/* --- Topbar --------------------------------------------------- */
.topbar {
  align-items: center;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 42px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  gap: 12px;
  padding: 0;
}

.brand-icon {
  background: var(--orange);
  border: 2px solid var(--ink);
  flex: none;
  height: 38px;
  padding: 5px;
  width: 38px;
}

.brand-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-name .brand-lab {
  color: var(--orange);
}

.brand-sub {
  color: var(--ink-soft);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-align: left;
  text-transform: uppercase;
}

.brand-chevron {
  height: 16px;
  transition: transform 180ms ease;
  width: 16px;
}

.brand[aria-expanded="true"] .brand-chevron {
  transform: rotate(180deg);
}

.brand-menu {
  position: relative;
}

.brand-dropdown {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(43, 42, 38, 0.2);
  display: flex;
  flex-direction: column;
  left: 0;
  min-width: 220px;
  padding: 8px 0;
  position: absolute;
  top: calc(100% + 10px);
  z-index: 30;
}

.brand-dropdown[hidden] {
  display: none;
}

.brand-dropdown a {
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  padding: 9px 18px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;
}

.brand-dropdown a:hover {
  background: var(--ink);
  color: var(--paper);
  padding-left: 26px;
}

.topbar-right {
  align-items: center;
  display: flex;
  gap: 14px;
}

.bio-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--ink-faint);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  gap: 7px;
  letter-spacing: 0.16em;
  padding: 8px 12px;
  text-transform: uppercase;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.bio-button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.bio-button i,
.bio-button svg {
  height: 14px;
  width: 14px;
}

.mockup-switcher {
  display: inline-flex;
}

.switch {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 8px 13px;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

.switch + .switch {
  border-left: 0;
}

.switch.is-active {
  background: var(--ink);
  color: var(--paper);
}

.switch:hover:not(.is-active) {
  background: rgba(43, 42, 38, 0.08);
}

/* --- Structure générale --------------------------------------- */
main {
  position: relative;
  z-index: 1;
}

.mockup {
  display: block;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 clamp(16px, 4vw, 42px) 60px;
}

/* Le backdrop est positionné (fixed, z:0) : tout contenu de section doit
   être positionné aussi pour peindre au-dessus de son fond opaque. */
.mockup > :not(.motion-backdrop) {
  position: relative;
  z-index: 1;
}

.content-section {
  margin-top: 76px;
}

.section-heading {
  margin-bottom: 28px;
}

.section-heading h2 {
  align-items: center;
  display: flex;
  font-size: 2.3rem;
  gap: 16px;
  margin: 10px 0 12px;
}

.section-heading h2::before {
  background: var(--orange);
  border: 2px solid var(--ink);
  content: "";
  flex: none;
  height: 16px;
  width: 16px;
}

.section-heading h2::after {
  background: var(--ink);
  content: "";
  flex: 1;
  height: 2px;
  opacity: 0.7;
}

.section-heading p {
  color: var(--ink-soft);
  font-size: 0.86rem;
  max-width: 640px;
}

.eyebrow {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  margin: 0;
  text-transform: uppercase;
}

/* --- Boutons presse vintage ----------------------------------- */
.button,
.bT {
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.button.primary {
  align-items: center;
  background: var(--orange);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--paper-2);
  gap: 10px;
  padding: 13px 22px;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.button.primary:hover {
  background: var(--orange-dark);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(2px, 2px);
}

.button.primary::after {
  content: "→";
  transition: transform 250ms ease;
}

.button.primary:hover::after {
  transform: translateX(6px);
}

.button.ghost {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  overflow: hidden;
  padding: 13px 22px;
  position: relative;
}

.button.ghost::before {
  background: var(--ink);
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
  z-index: 0;
}

.button.ghost:hover::before {
  transform: scaleX(1);
}

.button.ghost > * ,
.button.ghost {
  position: relative;
}

.button.ghost:hover {
  color: var(--paper);
}

.button.ghost span,
.button.ghost {
  z-index: 1;
}

.bT {
  align-items: center;
  background: var(--ink);
  border: none;
  color: var(--paper-2);
  font-family: var(--font-display);
  font-size: 0.74rem;
  gap: 14px;
  justify-content: space-between;
  letter-spacing: 0.18em;
  min-width: 180px;
  padding: 13px 18px;
}

.bT .ar {
  transition: transform 300ms ease;
}

.bT:hover .ar {
  transform: translateX(8px);
}

.bT.or {
  background: var(--orange);
}

/* Filtres : petits boutons contour à remplissage encre */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.content-filter {
  background: transparent;
  border: 1.6px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  isolation: isolate;
  letter-spacing: 0.12em;
  overflow: hidden;
  padding: 8px 15px;
  position: relative;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.content-filter::before {
  background: var(--ink);
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
  z-index: -1;
}

.content-filter:hover::before,
.content-filter.is-active::before {
  transform: scaleX(1);
}

.content-filter:hover,
.content-filter.is-active {
  color: var(--paper);
}

.content-filter.is-active {
  border-color: var(--orange);
}

.content-filter.is-active::before {
  background: var(--orange);
}

.halftone-button::after {
  background-image: radial-gradient(circle, currentColor 1.15px, transparent 1.35px);
  background-size: 7px 7px;
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(101%);
  transition: opacity 220ms ease, transform 400ms cubic-bezier(.4,0,.2,1);
  z-index: -1;
}

.halftone-button:hover::after,
.halftone-button:focus-visible::after {
  opacity: 0.32;
  transform: translateY(0);
}

/* --- Hero ------------------------------------------------------ */
.hero-refonte {
  align-items: center;
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
  padding-top: 54px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.hero-welcome {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  margin: 0;
}

.hero-brandmark {
  color: var(--ink);
  font-size: clamp(4.5rem, 7.2vw, 6rem);
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
}

.hero-brandmark span {
  color: var(--ink);
}

.hero-subtitle {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.hero-rule {
  background: var(--ink);
  border: none;
  height: 2px;
  margin: 4px 0;
  max-width: 420px;
  width: 60%;
}

.lead {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.feature-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 22px;
}

.feature-chip {
  align-items: center;
  border: 1px solid var(--ink-faint);
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.feature-chip:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.feature-chip i,
.feature-chip svg {
  color: var(--orange);
  flex: none;
  height: 20px;
  transition: transform 380ms cubic-bezier(0.34, 1.4, 0.5, 1);
  width: 20px;
}

.feature-chip:hover i,
.feature-chip:hover svg {
  transform: rotate(-10deg) scale(1.2);
}

.feature-chip b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Affiche héro (poster) */
.hero-poster {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(43, 42, 38, 0.16);
  padding: 14px;
  position: relative;
  min-width: 0;
}

.hero-poster-inner {
  border: 1px solid var(--ink-faint);
  padding: 10px;
}

.hero-poster svg {
  display: block;
  height: auto;
  width: 100%;
}

/* --- Cartes services (croquis animés) -------------------------- */
.service-strip {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 70px;
}

.sketch-card {
  background: var(--paper-2);
  border: 1.6px solid var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.sketch-card:hover,
.sketch-card:focus-visible {
  box-shadow: 6px 6px 0 rgba(43, 42, 38, 0.18);
  transform: translateY(-4px);
}

.sketch-card .hd {
  align-items: center;
  background: var(--ink);
  color: var(--paper-2);
  display: flex;
  font-family: var(--font-display);
  font-size: 0.72rem;
  justify-content: space-between;
  letter-spacing: 0.16em;
  padding: 11px 15px;
  text-transform: uppercase;
}

.sketch-card.or .hd {
  background: var(--orange);
}

.sketch-card .hd .ar {
  transition: transform 300ms ease;
}

.sketch-card:hover .hd .ar,
.sketch-card:focus-visible .hd .ar {
  transform: translateX(7px);
}

.sketch-card .ill {
  align-items: center;
  display: flex;
  height: 150px;
  justify-content: center;
  padding: 16px 10px 4px;
}

.sketch-card .tx {
  padding: 6px 17px 4px;
}

.sketch-card .tt {
  font-size: 0.92rem;
  margin: 0 0 7px;
}

.sketch-card .ds {
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0;
}

.sketch-card .lk {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 12px 17px 15px;
  position: relative;
  text-transform: uppercase;
}

.sketch-card .lk::after {
  background: var(--orange);
  bottom: 11px;
  content: "";
  height: 2px;
  left: 17px;
  position: absolute;
  transition: width 300ms ease;
  width: 0;
}

.sketch-card:hover .lk::after,
.sketch-card:focus-visible .lk::after {
  width: 110px;
}

/* --- Bandeau chiffres ------------------------------------------ */
.stat-band {
  background: var(--ink);
  color: var(--paper-2);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 70px;
}

.stat {
  border-right: 1px solid rgba(245, 240, 230, 0.14);
  cursor: default;
  padding: 26px 16px;
  text-align: center;
  transition: background 260ms ease;
}

.stat:last-child {
  border-right: none;
}

.stat:hover {
  background: #3a3833;
}

.stat .n {
  color: var(--orange);
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
}

.stat .l {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  opacity: 0.85;
  text-transform: uppercase;
}

/* --- Grilles vidéos / lab -------------------------------------- */
.video-grid,
.lab-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.video-card,
.lab-card {
  background: var(--paper-2);
  border: 1.6px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.video-card:hover,
.lab-card:hover {
  box-shadow: 6px 6px 0 rgba(43, 42, 38, 0.18);
  transform: translateY(-4px);
}

.video-card-thumb,
.lab-card-thumb {
  border-bottom: 1.6px solid var(--ink);
  display: block;
  overflow: hidden;
  position: relative;
}

.video-card-thumb img,
.lab-card-thumb img {
  aspect-ratio: 16 / 9;
  display: block;
  filter: saturate(0.82) contrast(1.02);
  object-fit: cover;
  transition: transform 400ms ease, filter 400ms ease;
  width: 100%;
}

.video-card:hover .video-card-thumb img,
.lab-card:hover .lab-card-thumb img {
  filter: saturate(1) contrast(1.05);
  transform: scale(1.045);
}

.video-card-thumb::after,
.lab-card-thumb::after {
  background-image: radial-gradient(rgba(43, 42, 38, 0.16) 1px, transparent 1.5px);
  background-size: 4px 4px;
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}

.video-card-body,
.lab-card-body {
  display: block;
  padding: 12px 15px 14px;
}

.video-meta {
  color: var(--orange);
  display: flex;
  font-size: 0.66rem;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.16em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.youtube-mark i,
.youtube-mark svg {
  height: 16px;
  width: 16px;
}

.video-card h3,
.lab-card h3 {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  line-height: 1.35;
}

.lab-card-meta {
  color: var(--orange);
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.lab-card-footer {
  border-top: 1px dashed var(--ink-faint);
  color: var(--ink-soft);
  display: block;
  font-size: 0.68rem;
  margin-top: 10px;
  padding-top: 8px;
}

.lab-more-feature {
  background: var(--paper-2);
  border: 1.6px solid var(--ink);
  color: var(--ink);
  display: grid;
  grid-template-rows: auto 112px 1fr;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.lab-more-feature:hover {
  box-shadow: 7px 7px 0 var(--orange);
  transform: translate(-3px, -3px);
}

.lab-more-head {
  align-items: center;
  background: var(--orange);
  color: var(--paper-2);
  display: flex;
  font-family: var(--font-display);
  font-size: 0.68rem;
  justify-content: space-between;
  letter-spacing: 0.15em;
  padding: 9px 12px;
  text-transform: uppercase;
}

.lab-more-head svg { height: 14px; width: 14px; }

.lab-more-illustration {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.lab-more-illustration::before,
.lab-more-illustration::after {
  border: 1px solid var(--orange);
  border-radius: 50%;
  content: "";
  height: 70px;
  opacity: 0.2;
  position: absolute;
  width: 70px;
}

.lab-more-illustration::after {
  height: 92px;
  width: 92px;
}

.lab-more-illustration svg {
  height: 70px;
  overflow: visible;
  position: relative;
  width: 96px;
  z-index: 1;
}

.lab-more-feature .draw-line {
  stroke-dasharray: 180;
  stroke-dashoffset: 92;
  transition: stroke-dashoffset 900ms ease;
}

.lab-more-liquid {
  transition: y 700ms cubic-bezier(.4,0,.2,1);
}

.lab-more-stamp {
  opacity: 0;
  transform: rotate(-14deg) scale(.72);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 300ms ease, transform 300ms ease;
}

.lab-more-feature:hover .lab-more-stamp,
.lab-more-feature:focus-visible .lab-more-stamp {
  opacity: 1;
  transform: rotate(-14deg) scale(1);
  transition-delay: 450ms;
}

.lab-more-feature:hover .draw-line { stroke-dashoffset: 0; }
.lab-more-feature:hover .orbit-dot { animation: labOrbit 2.6s linear infinite; transform-origin: 48px 35px; }

.lab-more-copy { padding: 12px 14px 15px; }
.lab-more-copy strong { display: block; font-family: var(--font-display); font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase; }
.lab-more-copy p { color: var(--ink-soft); font-size: 0.72rem; line-height: 1.55; margin: 7px 0 12px; }
.lab-more-cta { border-bottom: 2px solid var(--orange); color: var(--orange); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; padding-bottom: 3px; text-transform: uppercase; }

@keyframes labOrbit { to { transform: rotate(360deg); } }

/* --- Musique ---------------------------------------------------- */
.music-player {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
}

.visualizer-wrap {
  background: var(--ink);
  border-right: 2px solid var(--ink);
  min-height: 240px;
  position: relative;
}

.visualizer-wrap canvas {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.track-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.track-kicker {
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0;
  text-transform: uppercase;
}

.track-panel h3 {
  font-size: 1.1rem;
}

.music-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.music-controls label {
  display: flex;
  flex-direction: column;
  font-size: 0.68rem;
  gap: 5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.music-controls select {
  background: var(--paper);
  border: 1.6px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 8px 10px;
}

.shuffle-button {
  background: var(--orange);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--paper-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 10px 16px;
  text-transform: uppercase;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.shuffle-button:hover {
  box-shadow: 1px 1px 0 var(--ink);
  transform: translate(2px, 2px);
}

audio {
  width: 100%;
}

/* --- Blog : panneau de 3 encadrés ------------------------------- */
.blog-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 24px;
}

.blog-frame {
  background: var(--paper-2);
  border: 1.6px solid var(--ink);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.blog-frame:hover {
  box-shadow: 6px 6px 0 rgba(43, 42, 38, 0.18);
  transform: translateY(-4px);
}

.blog-frame-media {
  border-bottom: 1.6px solid var(--ink);
  display: block;
  overflow: hidden;
  position: relative;
}

.blog-frame-media img {
  aspect-ratio: 16 / 9;
  display: block;
  filter: saturate(0.85);
  object-fit: cover;
  transition: transform 400ms ease;
  width: 100%;
}

.blog-frame:hover .blog-frame-media img {
  transform: scale(1.045);
}

.blog-frame-media::after {
  background-image: radial-gradient(rgba(43, 42, 38, 0.16) 1px, transparent 1.5px);
  background-size: 4px 4px;
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}

.blog-frame-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px 16px;
}

.blog-frame-meta {
  color: var(--orange);
  display: flex;
  font-size: 0.64rem;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.blog-frame h3 {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.blog-frame p {
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.55;
  margin: 0;
}

.blog-frame .lk {
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-top: auto;
  text-transform: uppercase;
}

.blog-actions {
  display: flex;
  justify-content: center;
}

/* --- Footer ------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: var(--paper-2);
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  margin-top: 90px;
  padding: 34px clamp(16px, 4vw, 42px);
  position: relative;
  z-index: 1;
}

.footer-lab-orbit {
  align-items: center;
  align-self: center;
  border: 1px solid var(--orange);
  border-radius: 50%;
  color: var(--paper-2);
  display: flex;
  flex: 0 0 82px;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 0.58rem;
  gap: 3px;
  height: 82px;
  justify-content: center;
  letter-spacing: 0.12em;
  position: relative;
  text-decoration: none;
}

.footer-lab-orbit::before,
.footer-lab-orbit::after {
  border: 1px dashed var(--orange);
  border-radius: 50%;
  content: "";
  inset: -8px;
  opacity: 0.8;
  position: absolute;
  animation: footerOrbit 12s linear infinite;
}

.footer-lab-orbit::after { border-style: dotted; inset: -14px; animation-direction: reverse; animation-duration: 18s; opacity: 0.45; }
.footer-lab-orbit:hover::before { animation-duration: 2.5s; }
.footer-lab-orbit svg { color: var(--orange); height: 13px; width: 13px; }
@keyframes footerOrbit { to { transform: rotate(360deg); } }

.footer-brand {
  align-items: center;
  display: flex;
  gap: 14px;
}

.footer-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-brand strong .brand-lab {
  color: var(--orange);
}

.footer-brand span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  opacity: 0.75;
  text-transform: uppercase;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-contact a,
.footer-contact-button {
  align-items: center;
  color: var(--paper-2);
  display: inline-flex;
  font-size: 0.8rem;
  gap: 9px;
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-contact-button { background: transparent; border: 0; cursor: pointer; font-family: inherit; padding: 0; }

.footer-contact a:hover,
.footer-contact-button:hover {
  color: var(--orange);
}

.footer-contact i,
.footer-contact svg,
.footer-contact-button i,
.footer-contact-button svg {
  color: var(--orange);
  height: 15px;
  width: 15px;
}

.footer-credit {
  align-items: center;
  display: flex;
  font-size: 0.68rem;
  gap: 8px;
  letter-spacing: 0.14em;
  opacity: 0.7;
  text-transform: uppercase;
}

/* --- Modales ------------------------------------------------------ */
.project-modal,
.bio-modal,
.contact-modal {
  display: none;
  inset: 0;
  position: fixed;
  z-index: 50;
}

.project-modal.is-open,
.bio-modal.is-open,
.contact-modal.is-open {
  display: block;
}

.project-modal-backdrop,
.bio-modal-backdrop,
.contact-modal-backdrop {
  background: rgba(43, 42, 38, 0.55);
  inset: 0;
  position: absolute;
}

.project-modal-panel {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(43, 42, 38, 0.3);
  display: flex;
  flex-direction: column;
  inset: 4vh 4vw;
  position: absolute;
}

.project-modal-panel header {
  align-items: center;
  background: var(--ink);
  color: var(--paper-2);
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
}

.project-modal-panel header h2 {
  color: var(--paper-2);
  font-size: 1rem;
}

.project-modal-panel header .eyebrow {
  font-size: 0.62rem;
}

.modal-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.modal-view-button {
  align-items: center;
  background: transparent;
  border: 1.6px solid var(--paper-2);
  border-radius: 0;
  color: var(--paper-2);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  transition: background 180ms ease, color 180ms ease;
  width: 34px;
}

.modal-view-button:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.modal-view-button i,
.modal-view-button svg {
  height: 16px;
  width: 16px;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--paper-2);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 2px 8px;
  transition: color 160ms ease, transform 200ms ease;
}

.modal-close:hover {
  color: var(--orange);
  transform: rotate(90deg);
}

.modal-frame-wrap {
  flex: 1;
  overflow: hidden;
}

.modal-frame-wrap iframe {
  border: 0;
  height: 100%;
  width: 100%;
}

/* Bio popup */
.bio-modal-panel {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(43, 42, 38, 0.3);
  left: 50%;
  max-height: min(90vh, 860px);
  max-width: 980px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
}

.bio-modal.is-open .bio-modal-panel,
.contact-modal.is-open .contact-modal-panel { animation: modalPressIn 420ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes modalPressIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)) rotate(-1deg); } to { opacity: 1; transform: translate(-50%, -50%) rotate(0); } }

.bio-modal-header {
  align-items: center;
  background: var(--ink);
  color: var(--paper-2);
  display: flex;
  justify-content: space-between;
  padding: 11px 16px;
}

.bio-modal-header h2 {
  color: var(--paper-2);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
}
.bio-header-code { color: var(--orange); display: block; font-size: .5rem; font-weight: 800; letter-spacing: .18em; margin-bottom: 3px; }

.bio-modal-body {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: 190px minmax(0, 1fr);
  max-height: calc(min(90vh, 860px) - 62px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 22px;
  scrollbar-color: var(--orange) rgba(43, 42, 38, 0.12);
  scrollbar-width: thin;
}
.bio-profile-column { display: grid; gap: 12px; }

.bio-portrait {
  flex: 0 0 190px;
  overflow: hidden;
  position: relative;
}
.bio-target { border: 1px solid var(--paper-2); border-radius: 50%; height: 38px; opacity: .7; position: absolute; right: 10px; top: 10px; width: 38px; }
.bio-target::before,.bio-target::after { background: var(--orange); content: ""; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); }
.bio-target::before { height: 1px; width: 50px; }.bio-target::after { height: 50px; width: 1px; }

.bio-modal-body img {
  border: 2px solid var(--ink);
  filter: saturate(0.85);
  flex: none;
  display: block;
  width: 100%;
}

.bio-scan { background: var(--orange); height: 2px; left: 0; opacity: 0.8; position: absolute; right: 0; top: 0; animation: bioScan 3.2s ease-in-out infinite; }
@keyframes bioScan { 0%,100% { transform: translateY(8px); opacity: .2; } 50% { transform: translateY(150px); opacity: .9; } }
.bio-copy { min-width: 0; }
.bio-role { color: var(--orange) !important; font-size: .62rem !important; font-weight: 800; letter-spacing: .12em; margin-bottom: 10px !important; text-transform: uppercase; }
.bio-lede { max-width: 650px; }
.bio-signals { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.bio-signals span { border: 1px solid var(--orange); color: var(--orange); font-size: .58rem; font-weight: 800; letter-spacing: .1em; padding: 5px 7px; text-transform: uppercase; }
.bio-circuit-map { border: 1px dotted rgba(43,42,38,.42); height: 116px; margin-top: 16px; overflow: hidden; position: relative; }
.bio-circuit-map::before,.bio-circuit-map::after { background: var(--ink); content: ""; left: 50%; opacity: .35; position: absolute; top: 50%; transform: translate(-50%,-50%); }
.bio-circuit-map::before { height: 1px; width: 78%; }
.bio-circuit-map::after { height: 72%; width: 1px; }
.bio-circuit-core { align-items: center; animation: bioCore 2.6s steps(2,end) infinite; background: var(--orange); border: 2px solid var(--ink); color: white; display: flex; font: 400 .68rem var(--font-display); height: 42px; justify-content: center; left: 50%; letter-spacing: .08em; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 42px; z-index: 2; }
.bio-circuit-core::first-letter { color: inherit; }
.bio-circuit-particle { background: var(--orange); border: 1px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 3px rgba(232,92,30,.12); height: 8px; left: 50%; opacity: 0; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 8px; z-index: 3; }
.bio-circuit-map:hover .bio-circuit-core { animation: bioCubeTurn 1.8s cubic-bezier(.22,.8,.24,1) infinite; }
.bio-circuit-map:hover .particle-ai { animation: bioParticleAi 1.8s ease-out infinite; }
.bio-circuit-map:hover .particle-da { animation: bioParticleDa 1.8s .18s ease-out infinite; }
.bio-circuit-map:hover .particle-3d { animation: bioParticle3d 1.8s .36s ease-out infinite; }
.bio-circuit-map:hover .particle-edu { animation: bioParticleEdu 1.8s .54s ease-out infinite; }
.bio-circuit-node { animation: bioNode 2.8s ease-in-out infinite; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); font-size: .48rem; font-style: normal; font-weight: 800; letter-spacing: .1em; padding: 4px 6px; position: absolute; z-index: 2; }
.bio-circuit-node::before { background: var(--orange); border-radius: 50%; content: ""; height: 5px; position: absolute; width: 5px; }
.node-ai { left: 7%; top: 15%; }.node-ai::before { right: -17px; top: 8px; }
.node-da { right: 7%; top: 15%; animation-delay: -.7s; }.node-da::before { left: -17px; top: 8px; }
.node-3d { bottom: 14%; left: 7%; animation-delay: -1.4s; }.node-3d::before { right: -17px; top: 8px; }
.node-pedago { bottom: 14%; right: 7%; animation-delay: -2.1s; }.node-pedago::before { left: -17px; top: 8px; }
@keyframes bioCore { 50% { box-shadow: 0 0 0 7px rgba(232,92,30,.12); } }
@keyframes bioCubeTurn { 0% { box-shadow: 0 0 0 0 rgba(232,92,30,.24); transform: translate(-50%,-50%) rotate(45deg) scale(1); } 70%,100% { box-shadow: 0 0 0 9px rgba(232,92,30,0); transform: translate(-50%,-50%) rotate(405deg) scale(1.06); } }
@keyframes bioParticleAi { 0%,10% { left: 50%; opacity: 0; top: 50%; } 22% { opacity: 1; } 78% { left: 14%; opacity: 1; top: 25%; } 100% { left: 10%; opacity: 0; top: 20%; } }
@keyframes bioParticleDa { 0%,10% { left: 50%; opacity: 0; top: 50%; } 22% { opacity: 1; } 78% { left: 86%; opacity: 1; top: 25%; } 100% { left: 90%; opacity: 0; top: 20%; } }
@keyframes bioParticle3d { 0%,10% { left: 50%; opacity: 0; top: 50%; } 22% { opacity: 1; } 78% { left: 14%; opacity: 1; top: 75%; } 100% { left: 10%; opacity: 0; top: 80%; } }
@keyframes bioParticleEdu { 0%,10% { left: 50%; opacity: 0; top: 50%; } 22% { opacity: 1; } 78% { left: 86%; opacity: 1; top: 75%; } 100% { left: 90%; opacity: 0; top: 80%; } }
@keyframes bioNode { 0%,100% { border-color: var(--ink); transform: translateY(0); } 50% { border-color: var(--orange); transform: translateY(-2px); } }
.bio-status { align-items: flex-start; border: 1px dotted var(--ink); display: flex; font-size: .55rem; gap: 8px; line-height: 1.45; padding: 9px; text-transform: uppercase; }
.bio-status i { animation: bioPulse 1.8s ease-in-out infinite; background: var(--orange); border-radius: 50%; flex: none; height: 7px; margin-top: 3px; width: 7px; }
@keyframes bioPulse { 50% { box-shadow: 0 0 0 6px rgba(232,92,30,.16); opacity: .65; } }
.bio-cv-link { align-items: center; background: var(--ink); border: 1px solid var(--ink); color: var(--paper-2); display: flex; font-size: .58rem; font-weight: 800; gap: 9px; justify-content: space-between; letter-spacing: .1em; padding: 10px; text-decoration: none; text-transform: uppercase; }
.bio-cv-link:hover { background: var(--orange); }.bio-cv-link svg { height: 14px; width: 14px; }
.bio-expertise-grid { border-block: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3,1fr); margin-top: 18px; }
.bio-expertise-grid article { min-width: 0; padding: 14px 12px 14px 0; }
.bio-expertise-grid article + article { border-left: 1px solid rgba(43,42,38,.25); padding-left: 12px; }
.bio-expertise-grid b { color: var(--orange); display: block; font-size: .55rem; margin-bottom: 8px; }
.bio-expertise-grid strong { display: block; font: 400 .7rem var(--font-display); letter-spacing: .04em; margin-bottom: 6px; text-transform: uppercase; }
.bio-expertise-grid p { font-size: .64rem; line-height: 1.5; }
.bio-timeline { display: grid; grid-template-columns: repeat(5,1fr); margin-top: 18px; position: relative; }
.bio-timeline::before { background: var(--ink); content: ""; height: 1px; left: 0; position: absolute; right: 0; top: 8px; }
.bio-timeline span { min-width: 0; padding-right: 8px; position: relative; }
.bio-timeline span::before { background: var(--paper); border: 2px solid var(--orange); border-radius: 50%; content: ""; display: block; height: 9px; margin-bottom: 7px; position: relative; width: 9px; z-index: 1; }
.bio-timeline b { color: var(--orange); display: block; font-size: .56rem; }.bio-timeline em { color: var(--ink-soft); display: block; font-size: .5rem; font-style: normal; line-height: 1.4; }
.bio-career,.bio-collaborations { border-top: 1px solid var(--ink); margin-top: 19px; padding-top: 15px; }
.bio-section-title { align-items: end; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 10px; }
.bio-section-title span { color: var(--orange); font-size: .48rem; font-weight: 800; letter-spacing: .16em; }
.bio-section-title h3 { font-size: .68rem; letter-spacing: .08em; }
.bio-career-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.bio-career-grid article { border-top: 1px dotted rgba(43,42,38,.32); min-width: 0; padding: 9px 10px 9px 0; }
.bio-career-grid article:nth-child(even) { border-left: 1px dotted rgba(43,42,38,.32); padding-left: 10px; }
.bio-career-grid b { color: var(--orange); display: block; font-size: .49rem; letter-spacing: .08em; margin-bottom: 4px; text-transform: uppercase; }
.bio-career-grid strong { display: block; font-size: .59rem; line-height: 1.45; }
.bio-career-grid p { color: var(--ink-soft); font-size: .52rem; line-height: 1.5; margin-top: 5px; }
.bio-career-grid .bio-career-featured { border-left: 0; grid-column: 1 / -1; padding-left: 0; }
.bio-collaborations > p { font-size: .62rem; margin-bottom: 9px; }
.bio-collaboration-list { display: flex; flex-wrap: wrap; gap: 5px; }
.bio-collaboration-list span { background: var(--ink); color: var(--paper-2); font-size: .48rem; letter-spacing: .06em; padding: 4px 6px; text-transform: uppercase; }
.bio-tool-line { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.bio-tool-line span { background: rgba(43,42,38,.08); font-size: .5rem; letter-spacing: .08em; padding: 4px 6px; text-transform: uppercase; }

.bio-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.bio-modal-body p {
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
}

/* Contact popup */
.contact-modal-panel {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--orange);
  left: 50%;
  max-width: 700px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
}

.contact-modal-header { align-items: center; background: var(--ink); color: var(--paper-2); display: flex; justify-content: space-between; padding: 13px 18px; }
.contact-modal-header span { color: var(--orange); font-size: .56rem; font-weight: 800; letter-spacing: .16em; }
.contact-modal-header h2 { color: var(--paper-2); font-size: 1rem; margin-top: 2px; }
.contact-form { display: grid; gap: 14px; padding: 22px; }
.contact-intro { color: var(--ink-soft); font-size: .76rem; line-height: 1.55; margin: 0; }
.contact-form-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.contact-form label { display: grid; gap: 6px; }
.contact-form label > span { font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); font: 0.78rem/1.5 var(--font-mono); padding: 10px; resize: vertical; width: 100%; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 2px; }
.contact-honeypot { left: -10000px; position: absolute !important; }
.contact-form-footer { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
#contactStatus { color: var(--ink-soft); font-size: .68rem; margin: 0; }
#contactStatus.is-error { color: #a42f22; }
#contactStatus.is-success { color: #28704d; }
.contact-submit { align-items: center; background: var(--orange); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: white; cursor: pointer; display: inline-flex; font: 700 .68rem var(--font-mono); gap: 10px; isolation: isolate; letter-spacing: .1em; overflow: hidden; padding: 11px 14px; position: relative; text-transform: uppercase; }
.contact-submit:disabled { cursor: wait; opacity: .55; }
.contact-submit svg { height: 15px; width: 15px; }

@media (min-width: 901px) and (max-width: 1100px) {
  .hero-brandmark {
    font-size: 4rem;
  }
}

@media (max-width: 1000px) {
  .hero-refonte {
    grid-template-columns: 1fr;
  }

  .hero-poster {
    max-width: 560px;
  }
}

@media (max-width: 900px) {
  .hero-brandmark {
    font-size: 5rem;
  }

  .hero-subtitle {
    font-size: 1.3rem;
  }

  .hero-refonte {
    grid-template-columns: 1fr;
  }

  .music-player {
    grid-template-columns: 1fr;
  }

  .visualizer-wrap {
    border-right: none;
    border-bottom: 2px solid var(--ink);
  }
}

@media (max-width: 560px) {
  .topbar {
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand-icon {
    height: 34px;
    width: 34px;
  }

  .brand-name {
    font-size: 0.95rem;
  }

  .brand-sub,
  .brand-chevron,
  .bio-button span {
    display: none;
  }

  .topbar-right {
    gap: 8px;
  }

  .bio-button {
    height: 34px;
    justify-content: center;
    padding: 8px;
    width: 34px;
  }

  .switch {
    padding: 7px 9px;
  }

  .hero-refonte {
    padding-top: 36px;
  }

  .hero-brandmark {
    font-size: 2.8rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .section-heading h2 {
    font-size: 1.7rem;
  }

  .feature-strip {
    grid-template-columns: 1fr;
  }

  .bio-modal-body {
    grid-template-columns: 1fr;
  }

  .bio-profile-column { align-items: start; grid-template-columns: 150px minmax(0,1fr); }
  .bio-portrait { flex-basis: auto; grid-row: span 2; max-width: 150px; }
  .bio-expertise-grid { grid-template-columns: 1fr; }
  .bio-expertise-grid article + article { border-left: 0; border-top: 1px solid rgba(43,42,38,.2); padding-left: 0; }
  .bio-timeline { grid-template-columns: repeat(3,1fr); row-gap: 12px; }
  .bio-career-grid { grid-template-columns: 1fr; }
  .bio-career-grid article:nth-child(even) { border-left: 0; padding-left: 0; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-footer { align-items: stretch; flex-direction: column; }
  .contact-submit { justify-content: center; }

  .stat-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat {
    border-bottom: 1px solid rgba(245, 240, 230, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}