/* =========================================================================
   ETHAN TESTUD · PORTFOLIO
   ---------------------------------------------------------------------------
   Système en 4 règles, appliquées partout :
   1. Un seul corps de texte : Archivo étendu, 12 px, capitales.
      Les données (années, numéros, compteurs) en IBM Plex Mono.
   2. Le rouge est réservé à la typographie de titre et aux LED :
      grands titres affiche, intitulés de section, état actif, pictos.
   3. Les images restent dans leurs vraies couleurs. Au survol : léger zoom
      et grain photo, la légende passe au rouge.
   4. Chaque page intérieure s'ouvre de la même façon : titre rouge calé
      sur la largeur + crédits en colonnes (référence affiche Still Working).
      L'accueil est l'exception : l'index des projets sur image plein écran.
   ========================================================================= */

:root {
  --bg: #0d0d0d;
  --ink: #ebebe8;
  --ink-2: rgba(235, 235, 232, 0.5);
  --line: rgba(235, 235, 232, 0.14);
  --tile: #1c1c1c;
  --red: #e3170a;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad: 16px;
  --bar: 64px;
  --top: 92px;
  --ease: cubic-bezier(0.25, 0.8, 0.2, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ecece9; --ink: #111; --ink-2: rgba(17, 17, 17, 0.5);
  --line: rgba(17, 17, 17, 0.14); --tile: #d8d8d4;
  color-scheme: light;
}

/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-sans); font-stretch: 112%; font-variation-settings: "wdth" 112;
  font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono, .y, .n { font-family: var(--f-mono); font-stretch: normal; font-variation-settings: normal; letter-spacing: 0.02em; }
.mono { font-size: 11px; }
.dim { color: var(--ink-2); }
.red { color: var(--red); }
.skip { position: absolute; left: -999px; top: 6px; z-index: 300; background: var(--red); color: #fff; padding: 6px 10px; }
.skip:focus { left: 6px; }

/* grain photo très léger sur tout le site */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 400; opacity: 0.06; mix-blend-mode: overlay;
  background-image: var(--grain); background-size: 180px;
}
@keyframes grainmove { 0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -2%); } 100% { transform: translate(0, 0); } }

/* pictogrammes : la LED passe au rouge au survol */
.picto { display: inline-block; vertical-align: middle; flex: none; overflow: visible; }
.picto-led { fill: currentColor; transition: fill 0.2s var(--ease); }
a:hover .picto-led, button:hover .picto-led, .is-hot .picto-led, .picto.lit .picto-led { fill: var(--red); }

/* --------------------------------------------------------- barre de menu --
   Référence Teenage Engineering : chaque entrée = un pictogramme,
   son nom en gras et deux petites lignes d'information. */
.menubar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: var(--bar);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--pad);
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.menubar.on-image { color: #fff; background: rgba(10, 10, 10, 0.3); border-bottom-color: rgba(255, 255, 255, 0.14); }
.menubar nav { display: flex; gap: 30px; align-items: center; }
.mi { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 10px; }
.mi .picto { width: 30px; height: 30px; grid-row: 1 / span 2; }
.mi b { font-weight: 600; text-transform: lowercase; font-size: 14px; letter-spacing: 0; line-height: 1.05; }
.mi small { font-family: var(--f-mono); font-stretch: normal; font-variation-settings: normal; font-size: 9px; line-height: 1.25; opacity: 0.55; text-transform: lowercase; white-space: pre; }
.mi[aria-current="page"] b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mi[aria-current="page"] .picto-led { fill: var(--red); }
.mi:hover small { opacity: 0.9; }
.menubar .end { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.menubar .name { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; text-transform: lowercase; line-height: 0.9; }
.menubar .end button:hover, .menubar .end a:hover { opacity: 0.55; }
.menubar .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }
/* -------------------------------------- image : survol commun à tout le site
   .media enveloppe chaque vignette (bureau, archives, labo, galeries). */
.media { display: block; position: relative; overflow: hidden; background: var(--tile); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.media::after {
  content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none;
  background-image: var(--grain); background-size: 140px; mix-blend-mode: overlay;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
a:hover .media img, button:hover .media img, .is-hot .media img { transform: scale(1.04); }
a:hover .media::after, button:hover .media::after, .is-hot .media::after { opacity: 0.3; }
.media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.media .ph .picto { width: 28px; height: 28px; }

/* légende sous image : picto + titre à gauche, année à droite */
.cap { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-top: 8px; }
.cap .t { display: flex; align-items: center; gap: 8px; min-width: 0; transition: color 0.2s; }
.cap .t .picto { width: 13px; height: 13px; }
.cap .k { grid-column: 1 / -1; color: var(--ink-2); }
a:hover .cap .t, button:hover .cap .t, .is-hot .cap .t { color: var(--red); }

/* ============================================================ ACCUEIL
   Index des projets principaux sur l'image du projet actif. */
.lumi { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #0d0d0d; color: #fff; }
.lumi-media, .lumi-media figure { position: absolute; inset: 0; margin: 0; }
.lumi-media figure { opacity: 0; transition: opacity 1s var(--ease); overflow: hidden; }
.lumi-media figure.is-active { opacity: 1; }
.lumi-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; }
.lumi-media figure.is-active img { transform: scale(1); }
.lumi-media figure::before {
  content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none;
  background-image: var(--grain); background-size: 140px; mix-blend-mode: overlay; opacity: 0.22;
  animation: grainmove 0.6s steps(3) infinite;
}
.lumi::after { /* bandeau sombre diffus derrière l'index, pour la lisibilité */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 14%, transparent 25%, rgba(0,0,0,0.32) 42%, rgba(0,0,0,0.32) 62%, transparent 80%);
}
.lumi-index {
  position: absolute; z-index: 3; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--f-mono); font-stretch: normal; font-variation-settings: normal; font-size: clamp(15px, 1.4vw, 24px); letter-spacing: 0.01em;
}
.lumi-index a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 16px; padding: 5px 0;
  color: rgba(255, 255, 255, 0.72); text-shadow: 0 0 14px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: color 0.25s var(--ease);
}
.lumi-index a.is-active, .lumi-index a:hover { color: #fff; }
.lumi-index a.is-active .t::before { content: "● "; color: var(--red); }
.lumi-index .t { grid-column: 1 / span 3; }
.lumi-index .k { grid-column: 4 / span 3; }
.lumi-index .s { grid-column: 7 / span 4; }
.lumi-index .y { grid-column: 12 / span 1; text-align: right; }
.lumi-index .t, .lumi-index .k, .lumi-index .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lumi-more { position: absolute; z-index: 3; left: var(--pad); bottom: 16px; color: rgba(255, 255, 255, 0.75); text-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }
.lumi-more:hover { color: #fff; }

/* ======================================================= TITRE AFFICHE */
.poster { position: relative; overflow: hidden; color: var(--red); }
.poster.has-bg { min-height: 100svh; background: #111; }
.poster-bg { position: absolute; inset: 0; }
.poster-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.5) contrast(1.15); }
.poster-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5)); }
.poster-in { position: relative; z-index: 2; display: flex; flex-direction: column; padding: var(--top) var(--pad) 40px; }
.poster.has-bg .poster-in { min-height: 100svh; padding-bottom: 28px; }
.fit {
  margin: 0; font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  line-height: 0.82; letter-spacing: 0.02em; white-space: nowrap; color: var(--red); width: max-content; font-size: 12vw;
}
.credits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin-top: 18px; font-size: 11px; line-height: 1.3; }
.credits p { margin: 0 0 10px; }
.credits dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 14px; }
.credits dt { white-space: nowrap; }
.credits dd { margin: 0; text-align: right; }
.credits a:hover { text-decoration: underline; }
.poster-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 700; font-stretch: 125%; font-variation-settings: "wdth" 125; }
.poster-foot .picto { width: 16px; height: 16px; }

/* intitulé de section commun (projet, archives, à propos) */
.sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 70px var(--pad) 20px; }
.sec .n { grid-column: 1 / span 1; color: var(--red); font-size: 11px; }
.sec h2 { grid-column: 2 / span 3; margin: 0; font: inherit; color: var(--red); }
.sec p { grid-column: 6 / span 6; margin: 0; max-width: 64ch; }
.sec .aside { grid-column: 12 / span 1; text-align: right; color: var(--ink-2); }

/* =============================================================== BUREAU */
.desk { position: relative; height: calc(100svh - 40px); min-height: 600px; overflow: hidden; margin: 0 var(--pad); border: 1px solid var(--line); }
.win {
  position: absolute; z-index: 5; width: var(--w, 160px);
  touch-action: none; user-select: none; cursor: grab;
  transition: left 0.9s var(--ease), top 0.9s var(--ease);
}
.win.dragging { cursor: grabbing; transition: none; }
.win .media { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); }
.win .media img { height: auto; max-height: 22vh; pointer-events: none; }
.win .media .ph { position: static; aspect-ratio: 4 / 3; }
.win .cap { display: flex; justify-content: center; padding-top: 6px; font-size: 10px; color: var(--ink-2); }
.win.feat .cap { color: var(--ink); }
.desk-list {
  position: absolute; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%);
  list-style: none; margin: 0; padding: 0; text-align: center; color: #fff; mix-blend-mode: difference;
}
.desk-list a { display: block; font-size: clamp(22px, 2.5vw, 40px); line-height: 1.04; font-weight: 500; transition: letter-spacing 0.4s var(--ease); }
.desk-list a:hover, .desk-list a.is-hot { letter-spacing: 0.06em; }
.desk-list sup { font-family: var(--f-mono); font-size: 10px; vertical-align: super; margin-left: 4px; opacity: 0.6; }
.desk-list .more { margin-top: 18px; font-size: 11px; opacity: 0.6; }
.desk-list .more a { font-size: 11px; display: inline; }

/* ================================================================ LISTES */
.ilist { list-style: none; margin: 0; padding: 0 var(--pad); }
.ilist li a { display: grid; grid-template-columns: 44px 24px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) 50px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); transition: color 0.2s, padding 0.3s var(--ease); }
.ilist li:last-child a { border-bottom: 1px solid var(--line); }
.ilist li a:hover { color: var(--red); padding-left: 8px; }
.ilist .picto { width: 15px; height: 15px; }
.ilist .y { text-align: right; }

.toolbar { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 var(--pad) 22px; }
.toolbar button { display: inline-flex; align-items: center; gap: 6px; }
.toolbar button[aria-pressed="true"] { color: var(--red); }
.toolbar .c { font-family: var(--f-mono); opacity: 0.5; font-size: 9px; align-self: flex-start; }
.toolbar .picto { width: 12px; height: 12px; }

/* ================================================================== LABO */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 8px; padding: 0 var(--pad); }
.tile { display: block; width: 100%; text-align: left; }
.tile .media { aspect-ratio: 1; }
.tile .cap { font-size: 10px; }

/* ================================================================ PROJET */
.gal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 0 var(--pad); }
.gal figure { margin: 0; grid-column: span 6; }
.gal figure.half { grid-column: span 3; }
.gal figure.third { grid-column: span 2; }
.gal .zoom { display: block; width: 100%; cursor: zoom-in; }
.gal .zoom .media img { height: auto; }
.gal figcaption { padding-top: 6px; color: var(--ink-2); font-size: 10px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; margin: 70px var(--pad) 0; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================== À PROPOS */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; padding: 30px var(--pad) 0; }
.cols h3 { font: inherit; color: var(--red); margin: 0 0 10px; }
.cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* ============================================================== LIGHTBOX */
.lightbox { position: fixed; inset: 0; z-index: 300; background: #0b0b0b; color: #ededeb; display: grid; grid-template-rows: auto 1fr auto; padding: 14px var(--pad); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lb-top, .lb-bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lb-stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 14px 0; }
.lb-stage img { max-width: 100%; max-height: calc(100svh - 90px); object-fit: contain; }
.lightbox button { display: inline-flex; gap: 6px; align-items: center; }
.lightbox button:hover { color: var(--red); }
.lightbox .picto { width: 14px; height: 14px; }

/* ================================================================== PIED */
main { padding-bottom: 110px; }
main.flush { padding-bottom: 0; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 18px var(--pad) 24px; border-top: 1px solid var(--line); }
.foot a:hover { color: var(--red); }

.fade { opacity: 0; transition: opacity 0.9s var(--ease); }
.fade.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade { opacity: 1; }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1100px) {

  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --pad: 12px; --top: 84px; }
  .menubar nav { gap: 16px; }
  .mi small { display: none; }
  .mi .picto { width: 22px; height: 22px; grid-row: auto; }
  .mi { grid-template-columns: auto; justify-items: center; gap: 2px; }
  .mi b { font-size: 11px; }
  .menubar .name { font-size: 15px; }

  .lumi-index a { grid-template-columns: minmax(0, 1fr) auto; font-size: 16px; padding: 6px 0; }
  .lumi-index .t { grid-column: 1; } .lumi-index .y { grid-column: 2; }
  .lumi-index .k, .lumi-index .s { display: none; }

  .credits { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .sec { grid-template-columns: 1fr; gap: 8px; padding-top: 50px; }
  .sec .n, .sec h2, .sec p, .sec .aside { grid-column: 1; text-align: left; }

  /* le bureau devient une pile décalée qui défile */
  .desk { height: auto; min-height: 0; overflow: visible; border: 0; margin: 0; padding: 0 var(--pad); display: flex; flex-direction: column; }
  .desk-list { position: static; transform: none; order: -1; margin: 0 0 40px; mix-blend-mode: normal; color: var(--ink); text-align: left; }
  .desk-list a { font-size: 26px; }
  .wins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px 10px; }
  .win { position: relative; left: auto !important; top: auto !important; width: auto; cursor: pointer; }
  .win:nth-child(3n + 1) { grid-column: 1 / span 4; }
  .win:nth-child(3n + 2) { grid-column: 3 / span 4; }
  .win:nth-child(3n) { grid-column: 2 / span 3; }
  .win .media img { max-height: none; }

  .gal figure.half, .gal figure.third { grid-column: span 6; }
  .ilist li a { grid-template-columns: 30px 18px minmax(0, 1fr) 40px; }
  .ilist .k, .ilist .c2 { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .cols, .credits { grid-template-columns: 1fr; }
}

/* ================================================================ MOTION
   Sobre : quelques fondus courts, une seule courbe (--ease).
   Pas de rideau, pas de curseur, pas d'animation en boucle. */
.fit .mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
.fit .ch { display: inline-block; transform: translateY(100%); }
.motion .fit .ch { animation: rise 0.9s var(--ease) 0.05s forwards; }
@keyframes rise { to { transform: translateY(0); } }

.credits > *, .poster-foot > *, .desk-list li, .lumi-index li { opacity: 0; }
.motion .credits > *, .motion .poster-foot > *, .motion .desk-list li, .motion .lumi-index li { animation: fadein 0.6s var(--ease) 0.35s forwards; }
@keyframes fadein { to { opacity: 1; } }

.rv, .rv-img { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); }
.rv.in, .rv-img.in { opacity: 1; transform: none; }

.motion .win { animation: fadein 0.6s var(--ease) backwards; animation-delay: calc(0.2s + var(--i, 0) * 0.02s); }

/* accueil : fondu enchaîné entre les images, barre de temps */
.lumi-time { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: 44px; height: 1px; background: rgba(255, 255, 255, 0.2); }
.lumi-time i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.lumi-time i.run { animation: time var(--dur, 4.5s) linear forwards; }
@keyframes time { to { transform: scaleX(1); } }
.lumi-count { position: absolute; z-index: 3; right: var(--pad); bottom: 16px; color: rgba(255, 255, 255, 0.75); font-family: var(--f-mono); font-size: 11px; }

/* listes : fin soulignement rouge au survol */
.ilist li a { position: relative; }
.ilist li a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.ilist li a:hover::after { transform: scaleX(1); }

/* ====================================================== GRILLE (accueil)
   Référence Map Project Office : deux colonnes à hauteurs alternées,
   légende en gras sous l'image. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 16px; padding: 0 var(--pad); align-items: start; }
.grid .card .media img { height: auto; aspect-ratio: 4 / 5; }
.grid .card:nth-child(4n + 2) .media img, .grid .card:nth-child(4n + 3) .media img { aspect-ratio: 4 / 3; }
.grid .card .cap { grid-template-columns: 1fr auto; padding-top: 10px; }
.grid .card .cap .t { font-weight: 600; font-size: 14px; }
.grid .card .cap .plus { font-size: 18px; line-height: 1; transition: transform 0.3s var(--ease); }
.grid .card:hover .cap .plus { transform: rotate(90deg); color: var(--red); }


@media (prefers-reduced-motion: reduce) {
  .fit .ch, .credits > *, .poster-foot > *, .desk-list li, .lumi-index li, .rv, .rv-img { opacity: 1 !important; transform: none !important; }
}.menubar .theme { text-transform: lowercase; font-size: 11px; opacity: 0.7; }
.win { text-align: left; padding: 0; }
.win .cap { color: var(--ink); }

/* index des archives : au survol, la miniature glisse dans la ligne,
   de la droite vers la gauche, entre la fin du titre et l'année */
.ilist li a { position: relative; overflow: hidden; }
.ilist .thumb {
  position: absolute; top: 4px; bottom: 4px; left: 50%; right: 66px;
  overflow: hidden; pointer-events: none;
}
.ilist .thumb img {
  position: absolute; top: 0; height: 100%; width: auto; aspect-ratio: 16 / 10; object-fit: cover;
  left: 100%; transform: translateX(-100%); opacity: 0;
  transition: left 0.8s var(--ease), transform 0.8s var(--ease), opacity 0.25s var(--ease);
}
.ilist li a:hover .thumb img { left: 0; transform: translateX(0); opacity: 1; }
.ilist li a .k, .ilist li a .c2 { transition: opacity 0.25s var(--ease); }
.ilist li a:hover .k, .ilist li a:hover .c2 { opacity: 0; }
@media (hover: none) { .ilist .thumb { display: none; } }.ilist li a { transition: color 0.2s, padding 0.5s var(--ease); }
.ilist li a:hover { padding-top: 30px; padding-bottom: 30px; }
.ilist .thumb { top: 6px; bottom: 6px; }
@media (hover: none) { .ilist li a:hover { padding-top: 9px; padding-bottom: 9px; } }

/* grand écran : la miniature a sa propre colonne, entre le titre et le type */
@media (min-width: 901px) {
  .ilist li a { grid-template-columns: 44px 24px minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 3fr) minmax(0, 3fr) 50px; }
  .ilist .thumb { position: relative; top: auto; bottom: auto; left: auto; right: auto; align-self: stretch; margin: -24px 0; }
  .ilist li a:hover .k, .ilist li a:hover .c2 { opacity: 1; }
}

/* =============================================== ACCUEIL : CARTOGRAPHIE
   Compétences en anneau (cercle vide), projets au centre (point plein),
   traits fins entre les deux ; au survol tout ce qui est lié passe au rouge. */
.map { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.map-bg, .map-bg figure { position: absolute; inset: 0; margin: 0; }
.map-bg figure { opacity: 0; transition: opacity 0.6s var(--ease); }
.map-bg figure.on { opacity: 1; }
.map-bg img { width: 100%; height: 100%; object-fit: cover; }
.map-bg::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: 0.78; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.map-lines line { stroke: var(--line); stroke-width: 1; transition: stroke 0.3s var(--ease), opacity 0.3s var(--ease); }
.map.focus .map-lines line { opacity: 0.25; }
.map.focus .map-lines line.on { stroke: var(--red); opacity: 1; }

.node { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity 0.3s var(--ease), color 0.3s var(--ease); }
.node i { flex: none; border-radius: 50%; transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease); }
.skill { flex-direction: row; font-size: 11px; color: var(--ink-2); }
.skill.left { flex-direction: row-reverse; }
.skill i { width: 9px; height: 9px; border: 1px solid currentColor; background: var(--bg); }
.skill em { font-style: normal; font-size: 9px; opacity: 0.7; vertical-align: super; }
.proj { font-size: clamp(13px, 1.1vw, 17px); font-weight: 600; color: var(--ink); flex-direction: column; gap: 6px; }
.proj i { width: 11px; height: 11px; background: var(--ink); }
.proj em { font-style: normal; font-size: 10px; font-weight: 400; color: var(--ink-2); }
.map.focus .node { opacity: 0.3; }
.map.focus .node.on { opacity: 1; color: var(--red); }
.map.focus .node.on i { border-color: var(--red); background: var(--red); transform: scale(1.3); }
.map.focus .proj.on em { color: var(--red); }

.map-head { position: absolute; z-index: 3; top: calc(var(--bar) + 16px); left: var(--pad); display: flex; gap: 16px; }
.map-legend { position: absolute; z-index: 3; top: calc(var(--bar) + 16px); right: var(--pad); display: flex; gap: 16px; color: var(--ink-2); }
.map-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.map-legend .lg-s { border: 1px solid currentColor; }
.map-legend .lg-p { background: var(--ink); }
.map-info { position: absolute; z-index: 3; left: var(--pad); bottom: 44px; display: grid; gap: 3px; max-width: 48ch; }
.map-info b { color: var(--red); font-weight: 600; font-size: 14px; }
.map-more { position: absolute; z-index: 3; left: var(--pad); bottom: 16px; color: var(--ink-2); }
.map-more:hover { color: var(--red); }
.motion .node { animation: fadein 0.6s var(--ease) backwards; animation-delay: 0.25s; }
.motion .map-lines { animation: fadein 1s var(--ease) 0.4s backwards; }

/* version mobile : la carte devient une liste de projets avec leurs compétences */
.map-list { display: none; list-style: none; margin: 0; padding: calc(var(--top) - 10px) var(--pad) 10px; }
.map-list li a { display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.map-list .n { grid-row: 1 / span 2; color: var(--red); font-size: 11px; }
.map-list b { font-size: 18px; font-weight: 600; }
.map-list .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.map-list .tags span { font-size: 10px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-2); }
@media (max-width: 600px) {
  .map { display: none; }
  .map-list { display: block; }
}

/* cartographie : les noms restent lisibles, les traits s'arrêtent avant les mots */
.node span { background: var(--bg); padding: 2px 6px; transition: background-color 0.5s var(--ease), color 0.3s var(--ease); }
.map.focus .proj { opacity: 1; }
.map.focus .proj:not(.on) i { background: var(--ink); }

/* grille de l'accueil : trois colonnes, hauteurs alternées (colonne du milieu plus basse) */
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; }
.grid .card .media img, .grid .card:nth-child(4n + 2) .media img, .grid .card:nth-child(4n + 3) .media img { aspect-ratio: 4 / 5; }
.grid .card:nth-child(3n + 2) .media img { aspect-ratio: 4 / 3; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } .grid .card .media img { aspect-ratio: 4 / 5 !important; } }
/* fond des étiquettes : translucide et flouté (les traits restent devinés derrière) */
.node span { background: color-mix(in srgb, var(--bg) 40%, transparent); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 3px; }
.node span { border-radius: 7px; }

/* barre : navigation à gauche, nom au centre, lumière + à propos à droite */
.menubar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; }
.menubar .name { justify-self: center; text-align: center; }
.menubar .end { margin-left: 0; justify-self: end; gap: 26px; }

/* fiche sous l'en-tête (pages projet et à propos) : hors de l'affiche, en couleur de texte */
.info { color: var(--ink); padding: 34px var(--pad) 10px; margin-top: 0; }
.info p:first-child { color: var(--red); }
.motion .info > * { animation: none; opacity: 1; transform: none; }
/* entrée de menu sans complément : le nom est centré verticalement sur l'icône */
.mi:not(:has(small)) .picto { grid-row: auto; }
.mi:not(:has(small)) b { align-self: center; }

/* ======================================== LABO : TAPIS DE DÉCOUPE
   Mode clair : tapis noir, traits blancs. Mode sombre : l'inverse.
   Quadrillage 20 px / 100 px, diagonale à 45°, graduations et numéros sur les bords. */
:root { --mat-bg: #e8e8e4; --mat-ink: #111; --mat-minor: rgba(17, 17, 17, 0.1); --mat-major: rgba(17, 17, 17, 0.32); }
:root[data-theme="light"] { --mat-bg: #121212; --mat-ink: #efefec; --mat-minor: rgba(255, 255, 255, 0.09); --mat-major: rgba(255, 255, 255, 0.3); }
.desk {
  color: var(--mat-ink); border-color: var(--mat-major); border-radius: 6px;
  background-color: var(--mat-bg);
  background-image:
    linear-gradient(var(--mat-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-major) 1px, transparent 1px),
    linear-gradient(var(--mat-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-minor) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: 20px 20px, 20px 20px, 20px 20px, 20px 20px;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
/* diagonale à 45° partant du coin, et graduations le long du bord haut et gauche */
.desk::before {
  content: ""; position: absolute; inset: 20px 0 0 20px; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), var(--mat-major) calc(50% - 0.6px), var(--mat-major) calc(50% + 0.6px), transparent calc(50% + 0.6px)) 0 0 / min(100%, 900px) min(100%, 900px) no-repeat;
}
.desk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg, var(--mat-major) 0 1px, transparent 1px 10px) 20px 0 / calc(100% - 20px) 6px no-repeat,
    repeating-linear-gradient(90deg, var(--mat-ink) 0 1px, transparent 1px 50px) 20px 0 / calc(100% - 20px) 11px no-repeat,
    repeating-linear-gradient(180deg, var(--mat-major) 0 1px, transparent 1px 10px) 0 20px / 6px calc(100% - 20px) no-repeat,
    repeating-linear-gradient(180deg, var(--mat-ink) 0 1px, transparent 1px 50px) 0 20px / 11px calc(100% - 20px) no-repeat;
  opacity: 0.8;
}
.mat-n { position: absolute; z-index: 0; font-family: var(--f-mono); font-size: 9px; color: var(--mat-ink); opacity: 0.55; pointer-events: none; line-height: 1; }
.desk .wins { position: relative; z-index: 1; }
.desk .win .cap, .desk .win.feat .cap { color: var(--mat-ink); }
.desk .win .media { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.75); }
@media (max-width: 900px) { .desk { background-image: none; } .desk::before, .desk::after, .mat-n { display: none; } }
/* tapis minimaliste : seulement un quadrillage large et discret */
:root { --mat-major: rgba(17, 17, 17, 0.12); }
:root[data-theme="light"] { --mat-major: rgba(255, 255, 255, 0.1); }
.desk {
  background-image: linear-gradient(var(--mat-major) 1px, transparent 1px), linear-gradient(90deg, var(--mat-major) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px;
  border-color: var(--mat-major);
}
.desk::before, .desk::after, .mat-n { display: none; }

/* labo : images arrondies */
.win .media, .win .media img { border-radius: 8px; overflow: hidden; }

/* archives : miniatures légèrement arrondies */
.ilist .thumb, .ilist .thumb img { border-radius: 5px; }

/* accueil : six vignettes régulières (3 × 2) */
.grid.six { gap: 40px 16px; }
.grid.six .card .media img, .grid.six .card:nth-child(n) .media img { aspect-ratio: 4 / 3; }
.grid.six .card .media, .grid.six .card .media img { border-radius: 8px; overflow: hidden; }
@media (max-width: 900px) and (min-width: 601px) { .grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid.six .card .media img { aspect-ratio: 4 / 3 !important; } }

/* cartographie contenue dans un cadre, sous son titre */
.map { height: auto; min-height: 0; overflow: visible; padding: calc(var(--bar) + 52px) var(--pad) 24px; }
.map-box { position: relative; height: calc(100svh - var(--bar) - 100px); min-height: 540px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.map-info { left: 20px; bottom: 18px; }

/* accueil : vignette avec visionneuse 3D */
.card.has-model .media.model { position: relative; display: block; aspect-ratio: 4 / 3; background: #dcdcd9; border-radius: 8px; overflow: hidden; }
.card.has-model model-viewer { width: 100%; height: 100%; --poster-color: transparent; cursor: grab; }
.card.has-model model-viewer:active { cursor: grabbing; }
.card.has-model .tag3d { position: absolute; top: 10px; left: 12px; font-size: 10px; color: #111; opacity: 0.55; pointer-events: none; }
.card.has-model .cap { display: grid; }
.card.has-model .cap:hover .plus { transform: rotate(90deg); color: var(--red); }
/* le modèle ne se manipule pas : clic = page projet */
.card.has-model model-viewer { pointer-events: none; cursor: pointer; }
.card.has-model:hover .cap .plus { transform: rotate(90deg); color: var(--red); }

/* cartographie : au survol d'un projet, son modèle 3D tourne lentement en fond */
.map-bg::after { content: none; }
.map-bg figure:not(.model)::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: 0.78; }
.map-bg figure.model model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; pointer-events: none; opacity: 0.9; }

/* cartographie : fiche projet floutée qui glisse depuis la droite */
.map-card { position: absolute; z-index: 4; top: 14px; right: 14px; bottom: 14px; width: min(360px, 32%); display: flex; flex-direction: column; gap: 12px; padding: 18px; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 8px;
  transform: translateX(calc(100% + 24px)); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.35s var(--ease); pointer-events: none; }
.map-card.open { transform: none; opacity: 1; pointer-events: auto; }
.mc-t { display: flex; align-items: baseline; gap: 8px; }
.mc-t em { font-style: normal; font-size: 10px; color: var(--ink-2); }
.mc-t b { font-size: 20px; font-weight: 700; font-stretch: 112%; text-transform: uppercase; color: var(--red); }
.mc-v { position: relative; aspect-ratio: 4 / 3; flex: none; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mc-v figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.4s var(--ease); }
.mc-v figure.on { opacity: 1; }
.mc-v img { width: 100%; height: 100%; object-fit: cover; }
.mc-v model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; pointer-events: none; }
.mc-s { margin: 0; font-weight: 600; font-size: 13px; }
.mc-d { margin: 0; color: var(--ink-2); line-height: 1.5; font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; }
.mc-k { margin: 0; font-size: 10px; color: var(--ink-2); text-transform: uppercase; }
.mc-a { margin-top: auto; font-size: 11px; color: var(--ink); }
.mc-a:hover { color: var(--red); }
.map .map-info:empty { display: none; }

/* fiche ouverte : la carte se réduit vers la gauche pour rester visible en entier */
.map-stage { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.map.shift .map-stage { transform: translateX(14px) scale(var(--s, 0.7)); }

/* carte allégée : les traits n'apparaissent qu'au survol */
.map-lines line { opacity: 0; }
.map.focus .map-lines line { opacity: 0; }
.map.focus .map-lines line.on { opacity: 1; }

/* ===================================================== PROJETS (accueil)
   Référence PIC : en-tête sur deux moitiés, vue grille / index, filtre. */
.pj-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding: calc(var(--top) + 28px) var(--pad) 18px; }
.pj-head h1 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; }
.pj-head sup, .pj-filter sup { font-size: 9px; font-weight: 400; margin-left: 3px; color: var(--ink-2); vertical-align: super; }
.pj-views { display: flex; gap: 14px; }
.pj-head button { font: inherit; font-size: 15px; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; }
.pj-views button[aria-pressed="false"] { color: var(--ink-2); }
.pj-views button:hover { color: var(--ink); }
.pj-filter-btn { position: absolute; right: var(--pad); }
.pj-head { position: relative; }
.pj-head .pj-filter-btn { bottom: 18px; }

/* grille : deux colonnes, image 16/10 */
.pj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 10px; padding: 0 var(--pad) 80px; }
.pj-grid .card { display: block; }
.pj-grid .card .media, .pj-grid .card .media img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; border-radius: 6px; }
.pj-grid .card.has-model .media.model { aspect-ratio: 16 / 10; border-radius: 6px; }
.pj-cap { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding-top: 10px; }
.pj-cap .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-2); }
.pj-cap .n { font-size: 10px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }
.pj-cap b { grid-column: 1 / -1; font-size: 15px; font-weight: 500; }
.pj-grid .card:hover .pj-cap b { color: var(--red); }

/* index : lignes fines, un clic déplie une bande d'images */
.pj-index { list-style: none; margin: 0; padding: 0 var(--pad) 80px; }
.pj-index li { border-top: 1px solid var(--line); }
.pj-index li:last-child { border-bottom: 1px solid var(--line); }
.pj-index .row { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr 60px 20px; gap: 12px; align-items: center; padding: 7px 4px; background: none; border: 0; font: inherit; font-size: 11px; text-transform: uppercase; color: var(--ink); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s; }
.pj-index .row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-index .row .ar { text-align: right; transition: transform 0.3s var(--ease); }
.pj-index .row:hover, .pj-index li.open .row { background: var(--ink); color: var(--bg); }
.pj-index li.open .row .ar { transform: rotate(180deg); }
.pj-index .strip { display: flex; gap: 6px; overflow-x: auto; max-height: 0; transition: max-height 0.45s var(--ease), padding 0.45s var(--ease); scrollbar-width: none; }
.pj-index li.open .strip { max-height: 220px; padding: 6px 0; }
.pj-index .strip a { flex: none; height: 200px; }
.pj-index .strip img { height: 100%; width: auto; display: block; border-radius: 4px; }
.pj-index .strip .go { display: flex; align-items: center; padding: 0 24px; font-size: 11px; color: var(--ink-2); }
.pj-index .strip .go:hover { color: var(--red); }

/* filtre : grande liste dans la moitié droite, les autres atténuées */
.pj-filter { display: grid; grid-template-columns: 1fr 1fr; padding: 0 var(--pad) 80px; }
.pj-filter ul { grid-column: 2; list-style: none; margin: 0; padding: 0; }
.pj-filter button { font: inherit; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.12; font-weight: 400; letter-spacing: -0.02em; background: none; border: 0; padding: 0; color: var(--ink-2); opacity: 0.6; cursor: pointer; transition: color 0.2s, opacity 0.2s; }
.pj-filter button:hover, .pj-filter button.on { color: var(--ink); opacity: 1; }
.pj-grid.off, .pj-index.off { display: none; }

@media (max-width: 700px) {
  .pj-grid { grid-template-columns: 1fr; }
  .pj-index .row { grid-template-columns: 34px 1fr 1fr 20px; }
  .pj-index .row span:nth-child(4), .pj-index .row span:nth-child(5) { display: none; }
  .pj-filter { grid-template-columns: 1fr; } .pj-filter ul { grid-column: 1; }
}
.pj-grid[hidden], .pj-index[hidden], .pj-filter[hidden], .pj-grid .card[hidden], .pj-index li[hidden] { display: none; }
@media (max-width: 700px) {
  .pj-head { grid-template-columns: 1fr auto; row-gap: 14px; }
  .pj-head h1 { grid-column: 1 / -1; }
  .pj-head .pj-filter-btn { position: static; justify-self: end; }
}
/* index au survol : bande d'images plus compacte, comme la référence */
.pj-index li.open .strip { max-height: 170px; padding: 4px 0 6px; }
.pj-index .strip a { height: 150px; }
.pj-index .strip img { border-radius: 2px; }
/* filtre : se déplie en poussant les projets vers le bas */
.pj-filter { max-height: 0; overflow: hidden; padding-bottom: 0; transition: max-height 0.55s var(--ease), padding 0.55s var(--ease); }
.pj-filter.open { max-height: 560px; padding-bottom: 40px; }
.pj-index li.open { cursor: pointer; }
/* grille sur trois colonnes ; l'en-tête et le filtre s'alignent sur la 2e colonne */
.pj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj-head { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
.pj-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
.pj-filter ul { grid-column: 2 / -1; }
@media (max-width: 1000px) and (min-width: 701px) { .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .pj-grid { grid-template-columns: 1fr; }
  .pj-head { grid-template-columns: 1fr auto; }
  .pj-filter { grid-template-columns: 1fr; } .pj-filter ul { grid-column: 1; }
}
.poster-bg img { object-position: var(--pos, center); }
/* en-tête projet : assombrissement allégé */
.poster-bg img { filter: grayscale(1) brightness(0.85) contrast(1.1); }
.poster-bg::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25)); }
/* galerie 2 × 2 qui tient dans un écran (ex. étude acoustique) */
.gal.quad figure { grid-column: span 3; }
.gal.quad .zoom .media, .gal.quad .zoom .media img { height: calc((100svh - var(--bar) - 96px) / 2); width: 100%; }
.gal.quad .zoom .media img { object-fit: contain; }
.gal.quad .zoom .media { background: none; }
@media (max-width: 700px) { .gal.quad figure { grid-column: span 6; } .gal.quad .zoom .media, .gal.quad .zoom .media img { height: auto; } }
/* galerie : quatre images sur une ligne (ex. détails) */
.gal.row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gal.row4 figure { grid-column: span 1; }
.gal.row4 .zoom .media img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 700px) { .gal.row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gal.row4 figure { grid-column: span 1; } }
/* page projet : le contenu sous l'en-tête n'occupe que 75 % de la largeur, centré */
@media (min-width: 901px) {
  body[data-page="project"] #main > :not(.poster) { width: 75%; margin-left: auto; margin-right: auto; }
}
/* fiche projet sous l'en-tête : plus lisible (texte courant en bas-de-casse, valeurs alignées à gauche) */
.info.credits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; padding-top: 44px; padding-bottom: 24px; }
.info.credits p { margin: 0; }
.info.credits p:first-child { grid-column: 1; font-size: 14px; line-height: 1.35; }
.info.credits p:nth-child(2) { grid-column: 2 / -1; text-transform: none; font-size: 17px; line-height: 1.5; letter-spacing: 0; max-width: 62ch; }
.info.credits dl { grid-column: span 2; grid-template-columns: 96px 1fr; gap: 9px 16px; padding-top: 16px; border-top: 1px solid var(--line); align-content: start; }
.info.credits dt { color: var(--ink-2); font-size: 10px; padding-top: 2px; }
.info.credits dd { text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.4; }
@media (max-width: 900px) {
  .info.credits { grid-template-columns: 1fr; gap: 18px; }
  .info.credits p:first-child, .info.credits p:nth-child(2), .info.credits dl { grid-column: 1; }
}
/* chiffres clés en texte (fin de projet) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; padding: 0 var(--pad); }
.stat { display: grid; gap: 6px; align-content: start; padding: 20px 0 28px; border-top: 1px solid var(--line); }
.stat b { font-size: clamp(32px, 3.4vw, 52px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; text-transform: none; }
.stat span { font-size: 12px; }
.stat small { font-size: 12px; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }
/* interrupteur clair / sombre : lune à gauche (sombre), soleil à droite (clair) */
.menubar .theme { padding: 4px; background: none; border: 0; cursor: pointer; color: var(--ink); }
.theme .sw { position: relative; display: block; width: 46px; height: 24px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); transition: border-color 0.2s; }
.theme:hover .sw { border-color: var(--ink-2); }
.theme .sw svg { position: absolute; top: 4px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: 0.45; transition: opacity 0.3s; z-index: 1; }
.theme .moon { left: 4px; } .theme .sun { right: 4px; }
.theme .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform 0.35s var(--ease); }
.theme[aria-checked="true"] .knob { transform: translateX(22px); }
/* l'icône sous la pastille passe en couleur de fond pour rester lisible */
.theme[aria-checked="false"] .moon, .theme[aria-checked="true"] .sun { opacity: 1; color: var(--bg); }