/* Direction : le travail d'abord, l'interface s'efface (principes Apple HIG).
   Une seule famille de caractères (celle du système), hiérarchie par la taille et la graisse,
   phrases en casse normale, surfaces grises plutôt que filets.
   La signature manuscrite est le seul élément expressif ; le violet ne sert qu'aux liens et au focus. */
:root {
  --bg: #ffffff;
  --ink: #1d1d1f;          /* texte principal : 16.8:1 sur blanc */
  --grey: #6e6e73;         /* texte secondaire : 5.1:1 sur blanc, 4.7:1 sur --surface */
  --surface: #f5f5f7;      /* fonds de cartes et de contrôles */
  --surface-2: #e8e8ed;
  --line: rgba(0, 0, 0, 0.1);
  --violet: #5b21d6;       /* liens et focus uniquement : 7.6:1 sur blanc */
  --pad: clamp(20px, 5vw, 80px);
  --max: 1440px;
  --radius: 18px;
  --radius-s: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-court: 0.2s;
  --dur-moyen: 0.4s;
  --dur-long: 0.7s;
}

/* Thème sombre, activé par projet (theme: "sombre" dans projects.js) */
body.theme-sombre, .dossier.theme-sombre {
  --bg: #000000;
  --ink: #f5f5f7;          /* 19.3:1 sur noir */
  --grey: #a1a1a6;         /* 8.1:1 sur noir */
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --line: rgba(255, 255, 255, 0.14);
  --violet: #b9a2ff;       /* 9.4:1 sur noir */
}
.theme-sombre .brand img, .theme-sombre .footer-brand { filter: invert(1); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 80px; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
code { font: 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
::selection { background: var(--ink); color: var(--bg); }

/* Titres : casse normale, grande taille, approche serrée */
.caps { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; }

main, .footer { max-width: var(--max); margin-inline: auto; }

/* ---------- Barre du haut + menu ---------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  height: 64px; padding: 0 var(--pad);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@media (prefers-reduced-transparency: reduce) { .topbar { background: var(--bg); backdrop-filter: none; } }
.brand { display: block; margin-right: auto; }
.brand img { height: 28px; width: auto; }
.brand-loup { display: block; width: 52px; height: 52px; background: transparent; --poster-color: transparent; pointer-events: none; }

.menu-btn {
  width: 44px; height: 44px; position: relative;
  background: none; border: 0; cursor: pointer;
}
.menu-btn::before, .menu-btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; height: 1.5px; border-radius: 1px; background: var(--ink);
  transition: transform .3s var(--ease-out), top .3s var(--ease-out);
}
.menu-btn::before { top: 17px; }
.menu-btn::after { top: 25px; }
.menu-open .menu-btn::before { top: 21px; transform: rotate(45deg); }
.menu-open .menu-btn::after { top: 21px; transform: rotate(-45deg); }

.topnav { display: flex; gap: 4px; }
.topnav a {
  font-size: 14px; color: var(--ink); opacity: .8;
  padding: 10px 12px; border-radius: 980px;
  transition: opacity var(--dur-court), background var(--dur-court);
}
.topnav a:hover { opacity: 1; }
.topnav a[aria-current="page"] { opacity: 1; font-weight: 600; }
@media (min-width: 761px) { .menu-btn { display: none; } }
@media (max-width: 760px) { .topnav { display: none; } }

/* Sélecteur de langue : petit contrôle segmenté */
.lang-switch {
  display: flex; align-items: center; padding: 2px; margin-left: 12px;
  background: var(--surface); border-radius: 980px; position: relative; z-index: 31;
}
.lang-switch button {
  min-width: 36px; height: 28px; padding: 0 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  background: none; border: 0; border-radius: 980px; cursor: pointer; color: var(--grey);
  transition: color var(--dur-court), background var(--dur-court);
}
.lang-switch .sep { display: none; }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.theme-sombre .lang-switch button[aria-pressed="true"] { background: var(--surface-2); }

.menu {
  position: fixed; inset: 0; z-index: 25;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 40px;
  padding: 96px var(--pad) 40px;
  background: var(--bg);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.menu-open .menu { opacity: 1; visibility: visible; }
.menu-main { display: grid; gap: 2px; }
.menu-main a { font: 600 32px/1.25 var(--font-display); letter-spacing: -0.025em; }
.menu-projects { display: grid; gap: 4px; font-size: 17px; color: var(--grey); }
.menu-projects a:hover { color: var(--ink); }

/* ---------- Boutons : pilule pleine (action) ou contour (secondaire) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: 980px;
  background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  transition: opacity var(--dur-court);
}
.btn:hover { opacity: .85; }
.btn-ghost { background: var(--surface); color: var(--ink); }
.btn-ghost:hover { opacity: 1; background: var(--surface-2); }

/* ---------- Accueil ---------- */

.hero { padding: clamp(56px, 10vw, 140px) var(--pad) clamp(48px, 7vw, 96px); }
.hero-title img { width: min(100%, 1040px); height: auto; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  margin-top: clamp(28px, 4vw, 48px);
  font: 500 clamp(21px, 2.2vw, 28px)/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--grey);
}
.hero-meta strong { color: var(--ink); font-weight: 600; }
.hero-meta span + span::before { content: "·"; margin-right: 10px; color: var(--grey); }

.section { padding: 0 var(--pad) clamp(88px, 11vw, 160px); }
.section-title { font-size: clamp(32px, 4vw, 56px); line-height: 1.07; color: var(--ink); margin-bottom: clamp(24px, 3vw, 40px); }
.section-title small { display: none; }

/* Grille de projets : deux grandes colonnes, images entières */
.grid { columns: 2 340px; column-gap: clamp(16px, 2vw, 28px); }
.card { display: block; break-inside: avoid; margin-bottom: clamp(32px, 4vw, 56px); }
.card-img { overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.card-img img { width: 100%; height: auto; transition: transform .8s var(--ease-out); }
.card:hover .card-img img { transform: scale(1.02); }
.card h3 { margin: 16px 2px 0; font-size: clamp(21px, 1.8vw, 24px); line-height: 1.2; }
.card p { margin: 4px 2px 0; font-size: 17px; color: var(--grey); }

/* ---------- Accueil : boutons d'action + projets en accès direct ---------- */

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

.showcase-wrap { padding-bottom: clamp(88px, 11vw, 160px); }
.home-projets {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(14px, 1.6vw, 24px);
}
.home-projet { display: block; }
.home-projet-img { overflow: hidden; border-radius: var(--radius); background: var(--surface); aspect-ratio: 4 / 3; }
.home-projet-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.home-projet:hover .home-projet-img img { transform: scale(1.03); }
/* Un projet seul sur la dernière ligne prend toute la largeur */
.home-projet:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.home-projet:last-child:nth-child(3n + 1) .home-projet-img { aspect-ratio: 21 / 8; }
.home-projet-num { display: block; margin: 14px 2px 0; font-size: 13px; color: var(--grey); }
.home-projet h3 { margin: 4px 2px 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; }
.home-projet p { margin: 4px 2px 0; font-size: 15px; color: var(--grey); }
@media (max-width: 900px) { .home-projets { grid-template-columns: repeat(2, 1fr); }
  .home-projet:last-child:nth-child(3n + 1) { grid-column: auto; }
  .home-projet:last-child:nth-child(3n + 1) .home-projet-img { aspect-ratio: 4 / 3; }
  .home-projet:last-child:nth-child(2n + 1) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .home-projets { grid-template-columns: 1fr; } }

/* Contact toujours visible en haut, en pilule pleine */
.topnav a.topnav-cta { background: var(--ink); color: var(--bg); opacity: 1; padding-inline: 16px; margin-left: 4px; }
.topnav a.topnav-cta:hover { opacity: .85; }

/* Barre de lecture des pages projet */
.lecture {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ink); transform-origin: left; transform: scaleX(0);
}

/* Pied de page projet : astuce clavier + les autres projets */
.pager-hint { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--grey); text-align: center; }
@media (hover: none) { .pager-hint { display: none; } }
.autres { margin: 0 var(--pad) clamp(64px, 8vw, 120px); }
.autres h2 { font-size: clamp(21px, 2vw, 28px); margin-bottom: 16px; }
.autres-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.autres-liste a { font-size: 14px; font-weight: 500; line-height: 1.3; }
.autres-liste small { display: block; font-weight: 400; color: var(--grey); }
.autres-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
.autres-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.autres-liste a:hover .autres-img img { transform: scale(1.04); }
.autres-liste a[aria-current="page"] { opacity: .4; pointer-events: none; }

/* En-tête de section avec lien à droite */
.section-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.more-link { font-size: 17px; color: var(--violet); }
.more-link:hover { text-decoration: underline; }
.more-link span { display: inline-block; }

/* ---------- Vrac : le bureau en désordre ---------- */

/* Dossier du Laboratoire : il se déroule de haut en bas par-dessus la page */
.dossier {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--ink);
  animation: derouler .55s var(--ease-out) both;
}
.dossier.ferme { animation: enrouler .3s ease-in both; }
@keyframes derouler { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes enrouler { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@media (prefers-reduced-motion: reduce) { .dossier, .dossier.ferme { animation-duration: .01s; } }
.dossier-barre {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: 64px; padding: 0 var(--pad);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font-size: 14px; color: var(--grey);
}
.dossier-barre b { color: var(--ink); font-weight: 600; }
.dossier-fermer { border: 0; cursor: pointer; font: 500 15px/1 var(--font); box-shadow: 0 0 0 1px var(--line); }
.dossier-corps { max-width: var(--max); margin-inline: auto; padding: clamp(24px, 4vw, 48px) var(--pad) clamp(64px, 8vw, 120px); }
.dossier-tete { margin-bottom: clamp(24px, 3vw, 40px); }
.dossier-corps > .renders, .dossier-corps > .masonry { margin-bottom: 12px; }
.dossier-corps .final-why { margin-top: clamp(56px, 7vw, 104px); }
.dossier-corps .docs { margin-top: 24px; }
.vrac-item.a-dossier { cursor: pointer; }
.vrac-head { display: grid; gap: 8px; margin-bottom: 8px; max-width: 70ch; }
.vrac-head .section-title { margin: 0 0 8px; }
.vrac-intro { font-size: 21px; line-height: 1.38; color: var(--ink); }
.vrac-hint { font-size: 15px; color: var(--grey); }
.vrac-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vrac-tag {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 6px 14px; border-radius: 980px;
  background: var(--surface); border: 0; cursor: pointer;
  font-size: 14px; color: var(--ink);
  transition: background var(--dur-court), color var(--dur-court);
}
.vrac-tag small { color: var(--grey); font-size: 13px; font-variant-numeric: tabular-nums; }
.vrac-tag:hover { background: var(--surface-2); }
.vrac-tag.active { background: var(--ink); color: var(--bg); }
.vrac-tag.active small { color: inherit; opacity: .7; }
.vrac-tag i { display: inline-block; width: 18px; height: 0; border-top: 1.5px solid currentColor; }
.vrac-tag i.fil-affiche { border-top-style: dashed; }
.vrac-tag i.fil-photo { border-top: 2px dotted currentColor; }
.vrac-tag i.fil-3d { border-top-width: 2.5px; }

.vrac-board {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(720px, 62vw, 980px);
  margin-top: 28px; border-radius: var(--radius);
  background-color: var(--surface);
  background-image: radial-gradient(rgba(0, 0, 0, .09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.vrac-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

.fil { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .35; transition: opacity .3s, stroke-width .3s; }
.fil-3d { stroke-width: 1.8; }
.fil-affiche { stroke-dasharray: 4 5; }
.fil-photo { stroke-dasharray: 1 5; stroke-linecap: round; stroke-width: 1.8; }
.vrac-board.focus .fil, .vrac-board.filtered .fil { opacity: .08; }
.vrac-board .fil.hot, .vrac-board.filtered .fil.match { opacity: .9; stroke-width: 2; }

.vrac-item {
  position: absolute; left: 0; top: 0; margin: 0;
  background: #fff; padding: 6px; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .08);
  cursor: grab; user-select: none; will-change: transform;
  transition: opacity .3s, box-shadow .3s;
}
.vrac-item img { width: 100%; height: auto; pointer-events: auto; }
.vrac-item.a-modele { position: relative; background: #000; }
.vrac-item.a-modele img { visibility: hidden; }
.vrac-item.a-video img { visibility: hidden; }
.vrac-item.a-video video { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; background: #000; pointer-events: none; }
.lightbox video.lb-video { max-height: 84vh; max-width: 100%; background: #000; }
.lightbox video.lb-video[hidden] { display: none; }
.vrac-item.a-modele model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; --poster-color: #000; pointer-events: none; }
.vrac-item.sans-fond { background: none; padding: 0; box-shadow: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .16)); }
.vrac-item.sans-fond.hot { box-shadow: none; }
.vrac-item.sans-fond figcaption { left: 0; right: 0; bottom: 0; }
.ideation-une { margin-bottom: clamp(24px, 3vw, 40px); }
/* Le texte vient après les images, bien séparé */
.textes-fin { margin-top: clamp(56px, 7vw, 104px); }
.models-rendus + .renders, .renders + .docs { margin-top: clamp(16px, 2vw, 24px); }
.renders + .final-why, .docs + .final-why { margin-top: clamp(56px, 7vw, 104px); }
.vrac-item.grab { cursor: grabbing; box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 20px 40px rgba(0, 0, 0, .18); }
.vrac-item figcaption {
  position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 6px 8px; border-radius: 3px;
  background: rgba(29, 29, 31, .86); color: #fff; font-size: 12px; line-height: 1.35;
  opacity: 0; transition: opacity .25s;
}
.vrac-item.hot { box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 20px 40px rgba(0, 0, 0, .18); }
.vrac-item.hot figcaption { opacity: 1; }
.vrac-board.filtered .vrac-item:not(.match) { opacity: .15; }

/* ---------- Page Projets ---------- */

.page-head { padding: clamp(40px, 7vw, 100px) var(--pad) clamp(32px, 4vw, 56px); }
.back-link { font-size: 17px; color: var(--violet); }
.back-link:hover { text-decoration: underline; }
.page-title { margin-top: 12px; font-size: clamp(48px, 7vw, 96px); line-height: 1.02; }
.page-title small { display: none; }
.page-intro { margin-top: 16px; max-width: 46ch; font-size: clamp(19px, 1.6vw, 21px); line-height: 1.4; color: var(--grey); }

/* À propos + contact */
.about-text { max-width: 24ch; font: 600 clamp(32px, 4vw, 56px)/1.1 var(--font-display); letter-spacing: -0.025em; }
.about-cols { columns: 2 340px; column-gap: clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 64px); }
.about-cols p { break-inside: avoid; margin-bottom: 1.1em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--grey); }
.about-fin { margin-top: clamp(24px, 3vw, 40px); font: 600 clamp(24px, 2.4vw, 32px)/1.25 var(--font-display); letter-spacing: -0.02em; }
.about-fin strong { font-weight: inherit; }
.contact-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--surface); }
.contact-links { display: grid; gap: 4px; }
.big-link { font-size: clamp(24px, 3.4vw, 48px); line-height: 1.15; word-break: break-word; }
.big-link:hover { color: var(--violet); }

/* ---------- Page projet ---------- */

.project-hero { padding: clamp(16px, 2vw, 32px) var(--pad) 0; }
.project-hero-img { border-radius: var(--radius); overflow: hidden; width: fit-content; max-width: 100%; }
.project-hero-img img { width: auto; max-width: 100%; height: auto; max-height: 82vh; }
.project-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 48px);
}
.project-title { font-size: clamp(40px, 6vw, 80px); line-height: 1.03; }
.project-sub { margin-top: 8px; max-width: 40ch; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; color: var(--grey); }
.project-sub b { display: none; }

/* Onglets du projet : contrôle segmenté collant */
.tabs {
  position: sticky; top: 64px; z-index: 9;
  display: flex; gap: 2px; width: fit-content; max-width: calc(100% - 2 * var(--pad));
  overflow-x: auto; scrollbar-width: none;
  margin: 0 var(--pad); padding: 3px;
  background: var(--surface); border-radius: 980px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: 0 0 auto; display: flex; align-items: center; min-height: 36px;
  padding: 6px 18px; border-radius: 980px;
  font-size: 14px; font-weight: 500; color: var(--grey);
  transition: color var(--dur-court), background var(--dur-court);
}
.tabs a span { display: none; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.theme-sombre .tabs a.active { background: var(--surface-2); }

.project-body { padding: clamp(48px, 6vw, 88px) var(--pad); animation: fade .4s ease both; }
@keyframes fade { from { opacity: 0; } }

/* Rendus : pourquoi la version finale l'a emporté */
.final-why { max-width: 72ch; margin-bottom: clamp(40px, 5vw, 64px); }
.final-why h2 { margin-bottom: 12px; }
.final-why p { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.5; color: var(--grey); }

.process { max-width: 72ch; margin-bottom: clamp(40px, 5vw, 64px); }
.renders + .process { margin-top: clamp(56px, 7vw, 104px); }
.process h2 { margin-bottom: 20px; }
.process ol { list-style: none; margin: 0; padding: 0; }
.process li {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--line, rgba(0, 0, 0, .1));
}
.process li:last-child { border-bottom: 1px solid var(--line, rgba(0, 0, 0, .1)); }
.process-num { font: 600 15px/1.6 var(--font-display); color: var(--grey); font-variant-numeric: tabular-nums; }
.process h3 { font: 600 19px/1.3 var(--font-display); margin: 0 0 6px; }
.process p { font-size: 17px; line-height: 1.5; color: var(--grey); margin: 0; }

.lead {
  max-width: 30ch;
  font: 600 clamp(28px, 3.2vw, 44px)/1.15 var(--font-display); letter-spacing: -0.025em;
  margin-bottom: clamp(40px, 6vw, 80px);
}

h2 { font: 600 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--ink); margin-bottom: 10px; }

/* Explication */
.explain { display: grid; grid-template-columns: minmax(200px, 1fr) 2.6fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.explain.sans-fiche { grid-template-columns: 1fr; }
.facts { position: sticky; top: 132px; padding: 24px; border-radius: var(--radius); background: var(--surface); }
.facts dl { display: grid; gap: 2px 0; font-size: 15px; line-height: 1.45; }
.facts dt { color: var(--grey); font-size: 13px; margin-top: 16px; }
.facts dt:first-child { margin-top: 0; }
.explain-blocks { display: grid; gap: clamp(36px, 4vw, 56px); }
.explain-blocks p { max-width: 64ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--grey); }
.theme-sombre .explain-blocks p { color: var(--grey); }

/* Moodboard */
.mood-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: clamp(40px, 5vw, 72px); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 6px 14px; border-radius: 980px; background: var(--surface); font-size: 15px; }
.palette { list-style: none; display: flex; gap: 10px; }
.palette li { flex: 1; min-width: 0; }
.palette span { display: block; aspect-ratio: 1; border-radius: var(--radius-s); box-shadow: inset 0 0 0 1px var(--line); }
.palette code { display: block; color: var(--grey); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; }

.refs-titre { margin: clamp(40px, 5vw, 72px) 0 20px; font-size: clamp(28px, 3vw, 40px); }
.refs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ref a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 0 0 24px; border-radius: var(--radius); overflow: hidden; background: var(--surface); color: var(--ink); transition: background var(--dur-court); }
.ref a:hover { background: var(--surface-2); }
.ref a > :not(.ref-img) { margin-inline: 22px; }
.ref-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #000; margin-bottom: 16px; }
.ref-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-num { display: none; }
.ref-type { font-size: 13px; color: var(--grey); }
.ref strong { font: 600 19px/1.25 var(--font-display); letter-spacing: -0.015em; }
.ref em { font-style: normal; color: var(--grey); font-size: 15px; }
.ref p { font-size: 15px; line-height: 1.5; margin: 8px 22px auto; }
.ref-lien { margin-top: 14px; font-size: 15px; color: var(--violet); }

.masonry { columns: 3 280px; column-gap: 12px; }
.masonry > * { break-inside: avoid; margin-bottom: 12px; }
.masonry.solo { columns: 1; }
.masonry figure.video { display: grid; justify-items: center; }
.masonry figure.video video { display: block; max-width: 100%; max-height: 85vh; border-radius: var(--radius-s); }
.masonry .pleine { column-span: all; }
.masonry .paire { column-span: all; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.masonry .paire figure { margin: 0; }
.masonry .pleine img { width: 100%; max-height: 85vh; object-fit: contain; }
.masonry.solo img { width: 100%; max-height: 85vh; object-fit: contain; }
.masonry figure img { border-radius: var(--radius-s); }

.placeholder {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 16px; border-radius: var(--radius-s);
  background: var(--surface); color: var(--grey); font-size: 15px;
}
.placeholder small { font-size: 13px; }
.masonry .placeholder:nth-child(3n+1) { aspect-ratio: 3 / 4; }
.masonry .placeholder:nth-child(3n+2) { aspect-ratio: 1; }
.masonry .placeholder:nth-child(3n) { aspect-ratio: 4 / 3; }

figure img { width: 100%; }
figcaption { font-size: 14px; line-height: 1.4; color: var(--grey); padding-top: 10px; }
.zoomable img { cursor: zoom-in; }

/* Pistes d'idéation */
.pistes-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(32px, 4vw, 48px); }
.pistes-nav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border-radius: 980px;
  background: var(--surface); font-size: 15px; font-weight: 500;
  transition: background var(--dur-court);
}
.pistes-nav a span { display: none; }
.pistes-nav a:hover { background: var(--surface-2); }

.piste { padding-top: clamp(56px, 7vw, 96px); }
.piste-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 80px); margin-top: clamp(28px, 4vw, 48px); }
.piste:first-of-type { padding-top: 0; }
.piste-num { font-size: 15px; color: var(--grey); }
.piste-titre { margin: 6px 0 8px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; color: var(--ink); }
.piste-sous { font-size: 19px; line-height: 1.35; color: var(--grey); max-width: 32ch; }
.theme-sombre .model model-viewer { background: radial-gradient(circle at 50% 35%, #2b2b2e, #070708 78%); }
.models-rendus .models { grid-template-columns: minmax(0, 1fr); margin: 0 0 12px; }
.models-rendus .model model-viewer { aspect-ratio: 16 / 9; }
.piste-head .models { grid-template-columns: 1fr; margin: 24px 0 0; max-width: 420px; }
.piste-texte { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; max-width: 62ch; }
.piste-points { margin-top: 20px; padding-left: 1.2em; display: grid; gap: 6px; }
.piste-points li { font-size: 17px; line-height: 1.45; color: var(--grey); }
.piste-points li::marker { color: var(--grey); }

/* Modèles 3D à faire tourner */
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); }
.model { position: relative; }
.model model-viewer {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  background: var(--surface); border-radius: var(--radius);
  cursor: grab; --poster-color: transparent;
}
.model model-viewer:active { cursor: grabbing; }
.model-hint {
  position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 980px;
  background: var(--bg); color: var(--grey); font-size: 12px;
  pointer-events: none; transition: opacity .3s;
}
.theme-sombre .model-hint { background: var(--surface-2); }
.model:hover .model-hint { opacity: 0; }
/* Bouton vue éclatée / vue assemblée, même pilule noire que « Fermer × » */
.model-eclate {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  padding: 10px 22px; border: 0; border-radius: 980px;
  background: #1c1c1e; color: #fff; font: 500 15px/1 var(--font-text, inherit); cursor: pointer;
  transition: background .2s, transform .2s;
}
.model-eclate:hover { background: #3a3a3c; }
/* Curseur vertical à gauche pour monter / descendre l'anneau de la lampe */
.model-coulisse {
  position: absolute; left: 16px; top: 22%; bottom: 22%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 8px; border-radius: 980px; background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .08);
  font-size: 12px; color: var(--grey); cursor: default;
}
.model-coulisse input {
  flex: 1; width: 22px; margin: 0; writing-mode: vertical-lr; direction: rtl;
  accent-color: #1c1c1e; cursor: ns-resize;
}
.model-eclate:active { transform: scale(.97); }
.model-eclate[aria-pressed="true"] { background: #fff; color: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

/* Rendus : mosaïque, images dans leur format, légende au survol ; la première en grand */
.renders { columns: 3 280px; column-gap: 12px; }
.renders figure { position: relative; break-inside: avoid; margin: 0 0 12px; overflow: hidden; border-radius: var(--radius-s); }
.renders figure img { display: block; width: 100%; height: auto; }
.renders figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 32px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff;
  font-size: 14px;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.renders figure:hover figcaption { opacity: 1; }
.renders .pleine { column-span: all; }
.renders figure.legende-visible { border-radius: 0; }
.renders figure.legende-visible img { border-radius: var(--radius-s); }
.renders figure.legende-visible figcaption { position: static; opacity: 1; background: none; color: var(--grey); padding: 12px 0 8px; font-size: 17px; line-height: 1.5; max-width: 70ch; }
.renders .paire { column-span: all; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.renders .paire figure { margin: 0; }
/* Trois images « paire » à la suite : une ligne de trois */
.renders .paire:has(> :nth-child(3):last-child),
.masonry .paire:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.renders .paire img { max-height: 85vh; object-fit: contain; background: var(--bg); }
.renders > figure:first-child { column-span: all; margin-bottom: 12px; border-radius: var(--radius); }
.renders > figure:first-child img { max-height: 90vh; width: 100%; object-fit: contain; margin: 0 auto; }
@media (hover: none) { .renders figure figcaption { opacity: 1; } }
.renders figure.video { display: grid; justify-items: center; border-radius: 0; }
.renders figure.video figcaption { position: static; opacity: 1; background: none; color: var(--grey); padding: 10px 0 0; }
.renders figure.video video { display: block; width: auto; height: auto; max-height: 90vh; max-width: 100%; border-radius: var(--radius-s); }

.docs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(28px, 4vw, 44px); }
.renders + .docs { margin-top: clamp(28px, 4vw, 44px); }

/* Navigation en bas de projet */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 var(--pad) clamp(64px, 8vw, 120px);
}
.pager a {
  display: block; padding: 24px 28px; border-radius: var(--radius); background: var(--surface);
  font: 600 clamp(21px, 2vw, 28px)/1.2 var(--font-display); letter-spacing: -0.02em;
  transition: background var(--dur-court);
}
.pager a:hover { background: var(--surface-2); }
.pager small { display: block; font: 400 15px var(--font); letter-spacing: -0.01em; color: var(--grey); margin-bottom: 6px; }
.pager .next { text-align: right; }

/* Visionneuse */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: 72px 1fr 72px; align-items: center;
  background: #000;
}
.lightbox[hidden] { display: none; }
.lb-count { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.lightbox figure { display: grid; justify-items: center; gap: 12px; padding: 24px 0; }
.lightbox img { max-height: 84vh; width: auto; max-width: 100%; object-fit: contain; }
.lightbox model-viewer { width: min(84vh, 90vw); height: 78vh; background: #000; --poster-color: #000; }
.lightbox model-viewer[hidden], .lightbox img[hidden] { display: none; }
.lightbox figcaption { color: rgba(255, 255, 255, 0.7); text-align: center; max-width: 70ch; }
.lightbox button {
  justify-self: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 0; color: #fff; cursor: pointer;
  font: 300 28px/1 var(--font); transition: background var(--dur-court);
}
.lightbox button:hover { background: rgba(255, 255, 255, .24); }
/* Même pilule « Fermer × » que le dossier du Laboratoire */
.lightbox .lb-close {
  position: absolute; top: 12px; right: 16px; z-index: 1;
  width: auto; height: auto; min-height: 44px; padding: 10px 22px; border-radius: 980px;
  background: #1c1c1e; color: #f5f5f7; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
  font: 500 15px/1 var(--font);
}
.lightbox .lb-close:hover { background: #2c2c2e; }

.lb-note { display: none; }
.lightbox.with-note { grid-template-rows: auto auto; align-content: start; overflow-y: auto; }
.lightbox.with-note .lb-prev, .lightbox.with-note .lb-next { grid-row: 1; align-self: center; position: sticky; top: 42vh; }
.lightbox.with-note figure { grid-column: 2; grid-row: 1; }
.lightbox.with-note img { max-height: 78vh; }
.lightbox.with-note .lb-note {
  display: block; grid-column: 2; grid-row: 2; justify-self: center;
  width: min(100%, 680px); margin: 8px 0 56px;
  color: rgba(255, 255, 255, 0.78); font-size: 17px; line-height: 1.6;
}
.lb-note h3 { color: #fff; font: 600 24px/1.2 var(--font-display); letter-spacing: -0.02em; margin-bottom: 16px; }
.lb-note p + p { margin-top: 12px; }

/* ---------- Pied de page ---------- */

.footer { padding: 0 var(--pad); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: 40px 0; border-top: 1px solid var(--line); }
.footer-cols h4 { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.footer-cols p, .footer-cols a { display: block; font-size: 13px; color: var(--grey); line-height: 2; }
.footer-cols a:hover { color: var(--ink); text-decoration: underline; }
.footer-brand { width: 180px; max-width: 100%; height: auto; margin-bottom: 14px; }
.footer-bottom { border-top: 1px solid var(--line); padding: 16px 0 32px; font-size: 12px; color: var(--grey); }

/* ---------- Petits écrans ---------- */

@media (max-width: 760px) {
  body { font-size: 17px; }
  .vrac-board { height: 1250px; }
  .vrac-item { padding: 4px; }
  .grid { columns: 1; }
  .showcase { aspect-ratio: 4 / 3; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr 1fr; }
  .tile:first-child { grid-row: auto; grid-column: 1 / 3; }
  .showcase-cta { left: 12px; bottom: 12px; }
  .explain, .mood-meta, .footer-cols, .piste-head { grid-template-columns: 1fr; }
  .facts { position: static; }
  .facts dl { grid-template-columns: auto 1fr; gap: 8px 16px; }
  .facts dt { grid-column: 1; margin-top: 0; }
  .facts dd { grid-column: 2; }
  .renders, .masonry { columns: 1; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
  .pistes-nav { margin-top: -16px; }
  .hero-meta { flex-direction: column; gap: 2px; }
  .hero-meta span + span::before { display: none; }
  .tabs { width: auto; }
  .tabs a { flex: 1 1 0; justify-content: center; padding: 6px 8px; font-size: 13px; }
  .lightbox { grid-template-columns: 52px 1fr 52px; }
  .lightbox.with-note .lb-note { grid-column: 1 / 4; width: auto; margin: 8px 20px 32px; }
  .lightbox.with-note img { max-height: 65vh; }
}

/* ================= Mouvement ================= */

a:focus-visible, button:focus-visible, model-viewer:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px;
}

/* Le seul moment de mise en scène : la signature s'écrit au chargement */
.hero-title img { clip-path: inset(0 100% 0 0); animation: signer 1.6s var(--ease-out) 0.15s forwards; }
@keyframes signer { to { clip-path: inset(0 0 0 0); } }

/* Apparition douce au scroll (ajoutée par JS : sans JS, tout reste visible) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* Transitions entre pages : fondu + l'image du projet qui vole vers sa page */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sortie var(--dur-court) var(--ease-in) both; }
::view-transition-new(root) { animation: entree var(--dur-moyen) var(--ease-out) both; }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: var(--ease-out); }
@keyframes sortie { to { opacity: 0; } }
@keyframes entree { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-title img { animation: none; clip-path: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .project-body { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none; }
  html { scroll-behavior: auto; }
}