/* ─────────────────────────────────────────────
   Hamza Bouizgui — Portfolio
   Typo : Archivo étroit (titres) + Instrument Serif italique (contraste)
   ───────────────────────────────────────────── */

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-2: #141414;
  --fg: #f2f2ee;
  --muted: #8b8b86;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #1fff80;
  --accent-ink: #04140b;

  --font-sans: "Archivo", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  --gutter: clamp(16px, 3vw, 40px);
  --radius: 10px;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
/* Un élément masqué l’est vraiment, même si une règle lui donne un display (évite les calques invisibles qui bloquent les clics) */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { padding-inline: var(--gutter); max-width: 1680px; margin-inline: auto; }

/* Petites capitales façon « barre d'infos » */
.kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker::before { content: "[ "; color: var(--em, var(--accent)); }
.kicker::after { content: " ]"; color: var(--em, var(--accent)); }

/* Titres : sans serif étroit, gras, capitales + un mot en serif italique */
.display {
  font-family: var(--font-sans);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.display em, .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--em, var(--accent));
}
.display em { font-size: 1.08em; line-height: 0.8; }
h1.display { font-size: clamp(56px, 11vw, 200px); }
h2.display { font-size: clamp(44px, 7.5vw, 132px); }

/* ── Boutons ─────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn:hover::after { transform: none; }
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent::after { background: var(--fg); }
.btn-ghost { border: 1px solid var(--line); }
.btn-ghost::after { background: var(--fg); }
.btn-ghost:hover { color: var(--bg); }

.link-arrow { display: inline-flex; gap: 8px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color 0.3s, color 0.3s; }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }

/* ── En-tête : logo fort + barre d'infos discrète ── */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  view-transition-name: site-header;
  transition: transform 0.5s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -30px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,0.85), rgba(10,10,10,0));
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.site-header.is-solid::before { opacity: 1; }

.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--accent); }
.brand-logo { width: 54px; }
/* Survol : le logo devient un prisme à 4 faces qui se tord en tranches (main.js : initBrandPrism) */
.brand { position: relative; }
.brand.is-twisting > :not(.brand-prism) { visibility: hidden; }
.brand-prism { position: absolute; inset: 0; pointer-events: none; perspective: 320px; }
.brand-prism-slice { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.brand-face { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.brand-name {
  font-stretch: 68%;
  font-weight: 800;
  font-size: 22px;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.nav { display: flex; align-items: center; gap: 6px; padding-top: 6px; }
.nav-links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav a, .lang-switch button {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 6px;
  white-space: nowrap;
  transition: color 0.25s;
}
.nav a::before, .lang-switch::before { content: "[ "; color: var(--muted); }
.nav a::after, .lang-switch::after { content: " ]"; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
.nav .nav-quote { color: var(--accent); }

.lang-switch { display: flex; align-items: center; font-size: 12px; padding: 4px 6px; }
.lang-switch button { padding: 0 3px; color: var(--muted); }
.lang-switch button[aria-pressed="true"] { color: var(--fg); }

.burger { display: none; height: 40px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Grand écran : logo collé à gauche, barre d'infos collée à droite, marges égales */
@media (min-width: 901px) {
  .header-inner { max-width: none; margin-inline: 0; padding-inline: clamp(24px, 3vw, 48px); }
  .nav { margin-right: -6px; } /* compense le retrait intérieur du sélecteur de langue */
}
@media (max-width: 900px) {
  .burger { display: block; z-index: 2; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    padding: 100px var(--gutter) 40px;
    background: var(--bg);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.7s var(--ease);
  }
  .menu-open .nav { clip-path: inset(0); }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a, .nav .nav-quote { font-size: 56px; font-stretch: 68%; font-weight: 800; letter-spacing: -0.01em; padding: 0; }
  .nav-links a::before, .nav-links a::after, .nav .nav-quote::before, .nav .nav-quote::after { content: none; }
  .menu-open { overflow: hidden; }
}

/* ── Accueil : projets en plein écran ────── */
.reel {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #000;
}
.reel-slides, .reel-slide { position: absolute; inset: 0; }
.reel-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.reel-slide.is-active { opacity: 1; visibility: visible; }
.reel-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 7s linear;
}
.reel-slide.is-active img { transform: scale(1); }
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 30%),
    linear-gradient(0deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.35) 50%, rgba(10,10,10,0.15) 75%);
}

.reel-overlay {
  position: absolute;
  inset: auto 0 96px;
  z-index: 2;
  pointer-events: none;
}
.reel-title { font-size: clamp(56px, 10.5vw, 196px); max-width: 11ch; }
.reel-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.reel-title .w > span { display: inline-block; transform: translateY(105%); animation: rise 1s var(--ease-out) forwards; }
@keyframes rise { to { transform: none; } }

/* Barre d'infos du carrousel */
.reel-bar {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr minmax(120px, 280px) auto;
  align-items: center;
  gap: 28px;
  padding-block: 22px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reel-count { font-variant-numeric: tabular-nums; color: var(--muted); }
.reel-count #reel-index { color: var(--accent); }
.reel-current { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reel-current em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--accent); margin-left: 6px; }
.reel-current:hover { color: var(--accent); }
.reel-progress { display: flex; gap: 4px; }
.reel-progress button { flex: 1; height: 14px; position: relative; }
.reel-progress button::before, .reel-progress button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 2px;
  background: var(--line);
}
.reel-progress button::after { background: var(--accent); transform: scaleX(0); transform-origin: left; }
.reel-progress button.is-done::after { transform: scaleX(1); }
.reel-progress button.is-active::after { animation: progress var(--reel-time, 5s) linear forwards; }
.reel.is-paused .reel-progress button.is-active::after { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }

.reel-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.reel-btn .play {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  transition: transform 0.5s var(--ease-out);
}
.reel-btn:hover .play { transform: scale(1.15); }

@media (max-width: 760px) {
  .reel-overlay { bottom: 150px; }
  .reel-bar { grid-template-columns: auto 1fr auto; row-gap: 14px; }
  .reel-progress { grid-column: 1 / -1; grid-row: 2; }
}

/* Accueil : barre d’infos et en-tête en mode Différence pour rester lisibles sur le showreel */
.reel::after { content: none; }
.reel-bar {
  mix-blend-mode: difference;
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.5);
}
.reel-bar .reel-count, .reel-bar .reel-count #reel-index, .reel-bar .reel-current em { color: #fff; }
.reel-progress button::before { background: rgba(255, 255, 255, 0.35); }
.reel-progress button::after { background: #fff; }
.reel-bar { grid-template-columns: 1fr auto; }
/* Bouton son : haut-parleur barré (muet) / avec ondes (son actif) */
.reel-sound { justify-self: end; display: grid; place-items: center; width: 40px; height: 40px; margin: -10px -8px -10px 0; border-radius: 50%; color: #fff; opacity: 0.85; transition: opacity 0.3s, background-color 0.3s; }
.reel-sound:hover, .reel-sound:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.reel-sound svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reel-sound .on, .reel-sound[aria-pressed="true"] .off { display: none; }
.reel-sound[aria-pressed="true"] .on { display: block; }
/* Indicateur de défilement, centré dans la barre : souris (ordinateur) ou double flèche (tactile), animé ; s'efface dès qu'on défile */
.reel-scroll {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.reel-scroll svg { display: block; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.reel-mouse { width: 22px; height: 34px; stroke-width: 1.6; }
.reel-mouse .wheel { stroke-width: 2.2; animation: reel-wheel 1.6s var(--ease) infinite; }
.reel-arrows { display: none !important; width: 26px; height: 26px; stroke-width: 2.2; }
.reel-arrows path { animation: reel-arrow 1.4s var(--ease) infinite; }
.reel-arrows path + path { animation-delay: 0.15s; }
@media (hover: none), (pointer: coarse) { .reel-mouse { display: none !important; } .reel-arrows { display: block !important; } }
@keyframes reel-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(7px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes reel-arrow { 0% { transform: translateY(-4px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
@keyframes scroll-nudge { 0%, 100% { transform: translateY(-2px); opacity: 0.5; } 50% { transform: translateY(3px); opacity: 1; } }
html.has-scrolled .reel-scroll { opacity: 0; }

/* Scène 3D : « Défiler vers le bas » en haut, joué une fois (2 s) puis retiré */
.orbit-scroll {
  position: absolute; left: 50%; top: clamp(96px, 13vh, 130px); translate: -50% 0; z-index: 2;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; pointer-events: none;
  opacity: 0; visibility: hidden; color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.orbit-scroll svg { width: 28px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.orbit-scroll.is-on { visibility: visible; animation: orbit-scroll-fade 2s var(--ease) forwards; }
.orbit-scroll.is-on path { animation: reel-arrow 1s var(--ease) 2 both; }
.orbit-scroll.is-on path + path { animation-delay: 0.12s; }
.orbit-scroll.is-on span { animation: orbit-scroll-text 2s var(--ease-out) both; }
.orbit-scroll.is-done { display: none; }
@keyframes orbit-scroll-fade { 0% { opacity: 0; } 12%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes orbit-scroll-text { 0% { transform: translateY(8px); letter-spacing: 0.3em; } 40%, 100% { transform: none; letter-spacing: 0.12em; } }
@media (prefers-reduced-motion: reduce) { .reel-scroll svg *, .orbit-scroll * { animation: none !important; } }
.reel-controls { display: flex; align-items: center; gap: 4px; }
.reel-controls button { padding: 6px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; min-width: 34px; }
.reel-controls button::before { content: "[ "; opacity: 0.6; }
.reel-controls button::after { content: " ]"; opacity: 0.6; }
.reel-controls button:hover { opacity: 0.7; }
.site-header[data-tone="reel"] { mix-blend-mode: difference; --fg: #fff; --muted: rgba(255, 255, 255, 0.75); --accent: #fff; }
.site-header[data-tone="reel"]::before { opacity: 0 !important; }

/* Vidéo Vimeo en fond de la diapositive affichée (recadrée pour couvrir l’écran) */
.reel-video {
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, calc(100svh * (var(--ar, 16 / 9))));
  height: max(100%, calc(100vw / (var(--ar, 16 / 9))));
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* ── Bandeau défilant ────────────────────── */
.marquee { border-bottom: 1px solid var(--line); overflow: hidden; padding-block: 22px; }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
  font-stretch: 68%;
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 48px);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.marquee-item:nth-child(even) { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; font-stretch: 100%; }
.marquee-item::after { content: "/"; margin-left: 36px; font-family: var(--font-sans); font-style: normal; font-weight: 300; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Projets : colonne « serpent » ─────── */
.serpent {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(360px, 46vw) 1fr;
  height: 100svh;
  min-height: 680px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* Deux filets qui encadrent le projet au centre */
.serpent::before, .serpent::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
  top: calc(50% - var(--item-h, 300px) / 2);
  pointer-events: none;
}
.serpent::after { top: calc(50% + var(--item-h, 300px) / 2); }

.serpent-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding-block: clamp(120px, 18vh, 170px) clamp(40px, 7vh, 72px);
  padding-inline: clamp(24px, 4vw, 72px);
  margin: 0;
  max-width: none;
  min-width: 0;
}
.serpent-left .display { font-size: clamp(28px, 2.8vw, 50px); }
.serpent-count { display: flex; align-items: flex-start; gap: 10px; font-stretch: 68%; font-weight: 800; line-height: 0.78; }
.serpent-count #sp-index { font-size: clamp(72px, 8.5vw, 150px); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.serpent-count small { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); padding-top: 0.6em; }
.serpent-current { display: none; }
.serpent-hint { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--muted); }

.serpent-track {
  position: relative;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.serpent-track.is-dragging { cursor: grabbing; }
.serpent-track { perspective: 1400px; }
.sp-item {
  position: absolute;
  left: 50%; top: 50%;
  display: block;
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.sp-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(0.4);
  transition: filter 0.5s var(--ease-out);
}
.sp-item.is-center img { filter: none; }

.serpent-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding-block: clamp(120px, 18vh, 170px) clamp(40px, 7vh, 72px);
  padding-inline: clamp(24px, 4vw, 72px);
  margin: 0;
  max-width: none;
  min-width: 0;
}
.serpent-list { list-style: none; margin: 0; padding: 0; }
.sp-link {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  color: var(--muted);
  transition: color 0.3s, padding 0.45s var(--ease);
}
.sp-link .n, .sp-link .y { font-size: 10px; font-variant-numeric: tabular-nums; }
.sp-link .t { font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(13px, 1.1vw, 18px); line-height: 1; min-width: 0; }
.sp-link .t em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; margin-left: 8px; font-size: 0.85em; }
.sp-link:hover { color: var(--fg); }
.sp-link.is-active { color: var(--fg); padding-left: 10px; }
.sp-link.is-active .t em, .sp-link.is-active .n { color: var(--accent); }

@media (max-width: 900px) {
  .serpent { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .serpent::before, .serpent::after { display: none; }
  .serpent-left { padding-block: 96px 24px; gap: 16px; }
  .serpent-count #sp-index { font-size: 64px; }
  .serpent-current { display: block; font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1; }
  .serpent-current em { display: block; margin-top: 4px; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; font-size: 20px; color: var(--accent); }
  .serpent-track { height: 72svh; }
  .serpent-right { padding-block: 16px 56px; }
  .serpent-list { display: none; }
}

/* ── Projets : scène 3D (assets/js/orbit.js) ──
   La section est haute ; la scène reste collée à l'écran pendant que le défilement
   fait passer les projets au premier plan. Sans 3D, la colonne serpent prend le relais. */
.orbit { display: none; }
.has-orbit .orbit { display: block; }
.has-orbit .serpent { display: none; }

.panel.orbit {
  height: calc(100svh + var(--orbit-steps, 11) * var(--orbit-step, 34vh));
  overflow: clip; /* « clip » et non « hidden » : la scène collée doit suivre l'écran */
  background: radial-gradient(120% 80% at 50% 45%, #1c1f1e 0%, #121413 55%, #0a0a0a 100%);
}
.orbit-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Titre du projet pointé : en bas au centre ; l'ancien sort vers le bas, le nouveau arrive d'en haut */
.orbit-title {
  position: absolute;
  left: 50%; bottom: clamp(32px, 7vh, 64px);
  transform: translateX(-50%);
  display: grid;
  width: min(92vw, 900px);
  overflow: hidden;
  padding-block: 0.12em;
  pointer-events: none; /* les clics traversent jusqu'à la scène */
  text-align: center;
  font-stretch: 68%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(28px, 4.2vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.orbit-title > span { grid-area: 1 / 1; transition: transform 0.6s var(--ease); }
.orbit-title > span.is-before { transform: translateY(-110%); }
.orbit-title > span.is-after { transform: translateY(110%); }
.orbit-title em { margin-left: 0.25em; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; letter-spacing: -0.01em; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .orbit-title > span { transition: none; } }

.orbit-loading {
  position: absolute;
  left: 50%; bottom: 40px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.6s;
}
.orbit-loading.is-done { opacity: 0; pointer-events: none; }

@media (max-width: 700px) {
  .orbit-title em { display: block; margin: 0.08em 0 0; font-size: 0.8em; }
}

/* Fiche projet : sur la scène 3D floutée — bandeau titre, vidéo, infos, galerie */
.orbit-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(6, 8, 7, 0.66);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
          backdrop-filter: blur(24px) saturate(1.15);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.orbit-modal.is-open { opacity: 1; }
/* La fiche défile seule ; le défilement ne passe jamais à la scène en dessous */
.om-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: clamp(56px, 10vh, 120px);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Apparition échelonnée des blocs */
.om-block { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + 120ms); }
.orbit-modal.is-open .om-block { opacity: 1; transform: none; }

/* 1. Bandeau titre défilant */
.om-marquee { overflow: hidden; white-space: nowrap; padding-top: clamp(72px, 11vh, 110px); }
.om-track { display: inline-flex; animation: marquee 32s linear infinite; }
.om-unit {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  padding-right: 0.3em;
  font-stretch: 68%;
  font-weight: 800;
  font-size: clamp(48px, 9vw, 168px);
  line-height: 1;
  padding-bottom: 0.24em; /* place pour les jambages (j, p, y…) que le bandeau masqué couperait */
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.om-unit em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; color: var(--accent); }
.om-sep { color: var(--accent); font-size: 0.45em; margin-left: 0.15em; }

/* 2. Lecteur vidéo */
.om-media { margin-top: clamp(24px, 4vh, 48px); }
.om-player { position: relative; width: 100%; aspect-ratio: var(--ar, 16 / 9); max-width: 100%; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.om-player.is-vertical { width: min(100%, calc(80vh * 9 / 16)); margin-inline: auto; }
.om-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.om-cover { width: 100%; border-radius: var(--radius); }

/* 3. Infos : texte à gauche, grille de métadonnées à droite */
.om-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(32px, 5vh, 56px);
  padding-block: clamp(24px, 3vh, 36px);
  border-block: 1px solid var(--line);
}
/* Sans résumé, la grille d’infos prend toute la largeur */
.om-meta:not(:has(.om-summary)) { grid-template-columns: 1fr; }
.om-summary { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.25; max-width: 32ch; }
.om-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 28px; margin: 0; }
.om-meta-grid dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.om-meta-grid dd { margin: 6px 0 0; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; }
.om-tag { padding: 4px 12px; border: 1px solid var(--line); border-radius: 100px; font-size: 13px; }

/* 4. Galerie : cases à formats mixtes (images du projet, ou cases « Image à venir ») */
.om-gallery { margin-top: clamp(40px, 6vh, 72px); }
.om-gallery-title { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.om-gallery-grid { columns: 3; column-gap: 14px; }
.om-cell {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: var(--r, auto);
  background: #151716;
  padding: 0;
}
.om-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.om-cell[data-k] { cursor: zoom-in; }
.om-cell[data-k]:hover img { transform: scale(1.04); }
.om-cell.is-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(31, 255, 128, 0.05), rgba(255, 255, 255, 0.02) 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 12px),
    #121413;
  color: var(--muted);
}
/* Tailles choisies dans le Studio : la galerie passe en grille (les trous sont comblés) */
.om-gallery-grid.is-grid { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 14px; }
.om-gallery-grid.is-grid .om-cell { margin: 0; height: 100%; }
.om-gallery-grid.is-grid .om-cell.is-haute { aspect-ratio: auto; }
.om-cell.is-large { grid-column: span 2; }
.om-cell.is-pleine { grid-column: 1 / -1; }
.om-cell.is-haute { grid-row: span 2; }
.om-cell-video { position: relative; aspect-ratio: var(--r, 16 / 9); }
.om-cell-video .vp { position: absolute; inset: 0; }
.om-cell.is-empty span { font-stretch: 68%; font-weight: 800; font-size: 28px; color: rgba(255, 255, 255, 0.22); }
.om-cell.is-empty small { font-family: var(--font-serif); font-style: italic; font-size: 15px; }

/* Agrandissement d'une image de la galerie */
.om-zoom { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: var(--gutter); background: rgba(5, 6, 6, 0.9); cursor: zoom-out; }
.om-zoom img { max-width: 100%; max-height: 90vh; border-radius: var(--radius); }

.om-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  z-index: 3; /* au-dessus du bandeau, de la galerie et de l'agrandissement */
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.6);
  font-size: 18px;
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease);
}
.om-close:hover { background: var(--accent); color: var(--accent-ink); transform: rotate(90deg); }

@media (max-width: 960px) {
  .om-meta { grid-template-columns: 1fr; }
  .om-gallery-grid { columns: 2; }
}
@media (max-width: 960px) {
  .om-gallery-grid.is-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .om-gallery-grid { columns: 1; }
  .om-gallery-grid.is-grid { grid-template-columns: 1fr; }
  .om-cell.is-large, .om-cell.is-haute { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .om-track { animation: none; }
}

/* ── Zoom « morphing » vers un projet ────── */
.morph-clone {
  position: fixed;
  z-index: 250;
  margin: 0;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* ── Écran de chargement ─────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  transition: transform 0.9s var(--ease);
}
.loader canvas { display: block; }
.loader-pct {
  position: absolute;
  left: var(--gutter);
  bottom: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.loader.is-done { transform: translateY(-100%); }
.no-loader .loader { display: none; }
.is-loading body { overflow: hidden; }
.is-loading .reel-title .w > span { animation-play-state: paused; }

/* ── Accueil en pages empilées ───────────────
   Chaque page reste collée en haut ; la suivante glisse par-dessus,
   la précédente recule et s'assombrit (piloté en JS via --s, --dim, --r). */
.panel {
  position: sticky;
  top: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--r, 0px) var(--r, 0px) 0 0;
  transform: scale(var(--s, 1));
  transform-origin: 50% 0;
  overflow: hidden;
}
/* Chaque page reste affichée en entier un moment avant que la suivante ne monte */
.panel + .panel { margin-top: 30vh; }
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #000;
  opacity: var(--dim, 0);
  pointer-events: none;
}

/* Tons des pages : les jetons sont redéfinis localement */
.panel[data-tone="accent"] {
  background: #1fff80;
  --fg: #04140b;
  --muted: rgba(4, 20, 11, 0.62);
  --line: rgba(4, 20, 11, 0.2);
  --em: #04140b;
  --accent: #04140b;
  --accent-ink: #1fff80;
}
.panel[data-tone="light"] {
  background: #f2f2ee;
  --fg: #0a0a0a;
  --muted: #64645f;
  --line: rgba(10, 10, 10, 0.14);
  --bg-2: #e4e4de;
  --em: #0a0a0a;
  --accent-ink: #04140b;
}

/* En-tête : s'adapte à la page qu'il survole */
.site-header { color: var(--fg); }
.site-header[data-tone="accent"] { --fg: #04140b; --muted: rgba(4, 20, 11, 0.6); --accent: #04140b; }
.site-header[data-tone="light"] { --fg: #0a0a0a; --muted: #64645f; --accent: #0a0a0a; }
.site-header[data-tone="accent"]::before, .site-header[data-tone="light"]::before { opacity: 0 !important; }
.site-header .brand, .site-header .nav a, .site-header .lang-switch button { transition: color 0.4s var(--ease); }

/* Page 2 : manifeste, mots révélés au défilement */
.panel-manifesto { display: flex; flex-direction: column; justify-content: flex-start; padding-bottom: 22vh; }
.manifesto-inner { padding-top: clamp(110px, 14vh, 160px); padding-bottom: 40px; display: grid; gap: clamp(24px, 4vh, 48px); }
.manifesto { font-size: clamp(44px, 7.4vw, 136px); line-height: 0.9; max-width: 15ch; }
.manifesto .mw { opacity: var(--o, 0.14); transition: opacity 0.25s linear; }
.manifesto-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Bandeau remonté juste sous le manifeste, loin du bord où arrive la page suivante */
.panel-manifesto .marquee { margin-top: clamp(24px, 5vh, 56px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.panel-manifesto .marquee-item { color: var(--fg); }

/* Page 3 : services */
.panel-services > .wrap { padding-block: clamp(110px, 14vh, 160px) 22vh; }
.panel-services .section-head .display { margin-top: 16px; }

/* Page 4 : contact */
.panel-cta { display: grid; place-items: center; text-align: center; }
.panel-cta > .wrap { padding-block: 120px 22vh; }

/* Le pied de page passe par-dessus la dernière page */
.site-footer { position: relative; z-index: 1; background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .panel { transform: none; border-radius: 0; }
  .panel::after { display: none; }
  .manifesto .mw { opacity: 1; }
}

/* ── Sections ────────────────────────────── */
.section { padding-block: clamp(80px, 11vw, 150px); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* ── Liste de services ───────────────────── */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); position: relative; isolation: isolate; }
.svc-row {
  display: grid;
  grid-template-columns: 60px 1fr 1.1fr auto;
  align-items: center;
  gap: 24px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding 0.5s var(--ease);
}
.svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.svc-list.interactive .svc-row:hover { color: var(--accent-ink); padding-inline: 20px; }
.svc-list.interactive .svc-row:hover::before { transform: none; }
.svc-list.interactive .svc-row:hover .svc-num,
.svc-list.interactive .svc-row:hover .svc-desc { color: var(--accent-ink); }
.svc-num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.svc-name { font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.2vw, 48px); line-height: 0.95; margin: 0; }
.svc-desc { color: var(--muted); margin: 0; }
.svc-price { font-weight: 700; white-space: nowrap; text-align: right; font-size: 20px; }
.svc-price small { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 16px; opacity: 0.75; }

@media (max-width: 800px) {
  .svc-row { grid-template-columns: 36px 1fr; gap: 6px 14px; }
  .svc-desc, .svc-price { grid-column: 2; text-align: left; }
}

/* ── Appel à l'action ────────────────────── */
.cta { text-align: center; }
.cta .display { max-width: 12ch; margin: 24px auto 40px; }

/* ── Pied de page ────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 28px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 32px; }
.footer-h { margin: 0 0 12px; font-family: var(--font-serif); font-style: italic; font-size: 24px; color: var(--muted); }
.footer-mail {
  font-stretch: 68%;
  font-weight: 800;
  font-size: clamp(32px, 5.5vw, 88px);
  text-transform: uppercase;
  line-height: 0.95;
  overflow-wrap: anywhere;
  transition: color 0.3s;
}
.footer-mail:hover { color: var(--accent); }
/* Réseaux empilés les uns sous les autres */
.socials { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; list-style: none; padding: 0; margin: 0; }
.socials a { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 6px; transition: color 0.25s; }
.socials a::before { content: "[ "; color: var(--muted); }
.socials a::after { content: " ]"; color: var(--muted); }
.socials a:hover { color: var(--accent); }
.footer-logo { color: var(--bg-2); margin-top: 48px; }
.footer-logo svg { width: 100%; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Pages intérieures ───────────────────── */
.page-hero { padding-top: clamp(140px, 16vw, 200px); padding-bottom: clamp(40px, 6vw, 72px); }
.page-hero .kicker { margin-bottom: 20px; }
.page-hero .lead { max-width: 56ch; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); margin: 28px 0 0; }

/* ── Pages À propos, Services, Devis : graphiques, en mouvement ──
   Le moment fort de chaque page : des lignes de texte géant qui glissent au défilement
   (main.js : renderKinetic / initKinetic). Autour, peu d'éléments : contenus courts,
   beaucoup de noir, le vert pour ce qui se clique. */
.kp-hero { padding-top: clamp(104px, 11vw, 140px); }

/* Typographie cinétique : chaque ligne déborde de l'écran des deux côtés et glisse */
.kt { overflow: hidden; padding-block: 0.04em; }
.kt-line {
  display: flex;
  gap: 0.32em;
  width: max-content;
  margin-left: -60vw;
  white-space: nowrap;
  font-stretch: 68%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(76px, 15.5vw, 250px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  will-change: transform;
}
.kt-line.is-outline, .kt-word.is-outline { color: transparent; -webkit-text-stroke: 2px var(--fg); }
.kt-line.is-accent { color: var(--accent); }
.kt-line.is-accent .kt-word.is-outline { -webkit-text-stroke-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .kt-line { margin-left: 0; } }

.kp-intro { margin: clamp(28px, 4vw, 56px) auto 0; max-width: none; font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.2; }
.kp-intro > * { max-width: 30ch; }
.kp-sec { padding-top: clamp(96px, 12vw, 180px); }
.kp-label { margin: 0 0 clamp(18px, 2vw, 28px); font-size: 15px; font-weight: 500; color: var(--muted); }

/* Services : les six noms en très grand, un sur deux en contour */
.kp-svc { list-style: none; margin: 0; padding: 0; overflow: hidden; border-top: 1px solid var(--line); }
.kp-svc li { padding-block: clamp(8px, 1.2vw, 16px); border-bottom: 1px solid var(--line); }
.kp-svc span {
  display: inline-block;
  font-stretch: 68%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 7.4vw, 118px);
  line-height: 0.92;
  white-space: nowrap;
  transition: color 0.3s, -webkit-text-stroke-color 0.3s;
}
.kp-svc li:nth-child(even) span { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.kp-svc li:hover span { color: var(--accent); -webkit-text-stroke-color: var(--accent); }

/* Devis : formulaire court, une colonne étroite */
.kp-sec.kp-form { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(80px, 10vw, 140px); }
.kp-form .form { max-width: 860px; }
.kp-form .fields { gap: 26px 24px; margin-bottom: 40px; }
.kp-form .form-foot { flex-wrap: wrap; justify-content: flex-start; gap: 18px 28px; align-items: center; }
.kp-note { margin: 0; color: var(--muted); font-size: 15px; }
.kp-note a { color: var(--accent); }

/* Appel à l'action final */
.kp-cta { display: grid; gap: clamp(22px, 3vw, 36px); justify-items: start; padding-block: clamp(96px, 12vw, 180px); }
.kp-cta-title { margin: 0; max-width: 13ch; font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(46px, 7.4vw, 120px); line-height: 0.9; }
.kp-cta-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; color: var(--accent); }

@media (max-width: 760px) {
  .kp-svc span { white-space: normal; }
  .kt-line.is-outline, .kt-word.is-outline { -webkit-text-stroke-width: 1.5px; }
}

/* ── À propos : page éditoriale ──
   Grotesque (Archivo en largeur normale) en graisse normale, approche serrée, comme une Neue Haas :
   très grands titres d'ouverture et de fin, titres de section moyens, un seul corps de texte large.
   Le contraste vient des tailles, pas des graisses. Un mot vert par titre, beaucoup d'air. */
.ab {
  --ab-text: clamp(19px, 2vw, 30px);
  --ab-gap: clamp(140px, 17vw, 260px); /* entre les sections */
}
.ab-title { margin: 0; font-family: var(--font-sans); font-stretch: 100%; font-weight: 400; text-transform: none; line-height: 0.92; letter-spacing: -0.035em; }
.ab-title em { font-style: normal; color: var(--accent); }
.ab-h1 { font-size: clamp(54px, 10.6vw, 176px); letter-spacing: -0.045em; line-height: 0.88; }
.ab-h2 { font-size: clamp(38px, 4.6vw, 76px); }
.ab p { margin: 0; font-family: var(--font-sans); font-stretch: 100%; font-size: var(--ab-text); font-weight: 400; line-height: 1.22; letter-spacing: -0.01em; }
.ab p + p { margin-top: 0.9em; }
.ab-sec { margin-top: var(--ab-gap); }

/* Ouverture : accroche géante, puis autoportrait et présentation côte à côte */
.ab-hero { padding-top: clamp(140px, 15vw, 220px); }
.ab-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 6vw, 112px); align-items: end; margin-top: clamp(72px, 9vw, 140px); }
.ab-portrait { display: block; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; object-fit: cover; }
.ab-intro, .ab-me { max-width: 24em; }
.ab-me { color: var(--muted); }

/* Du message à l'image : titre à gauche, texte à droite */
.ab-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.ab-msg { max-width: 24em; }
.ab-msg p { color: var(--muted); }
.ab-msg p:first-child { color: var(--fg); }

/* Collaborations : bandeau de logos en boucle continue, pleine largeur, bords fondus */
.ab-marquee {
  overflow: hidden;
  margin-top: clamp(56px, 7vw, 104px);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ab-track { display: flex; width: max-content; animation: ab-marquee 64s linear infinite; }
@keyframes ab-marquee { to { transform: translate3d(-50%, 0, 0); } }
.ab-logos { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.ab-logos li { display: flex; align-items: center; justify-content: center; height: clamp(120px, 13vw, 190px); padding-inline: clamp(40px, 5vw, 80px); }
.ab-logos img { display: block; width: auto; height: clamp(44px, 5vw, 72px); opacity: 0.85; }
.ab-wordmark { font-stretch: 100%; font-weight: 800; font-size: clamp(34px, 3.8vw, 56px); line-height: 1; letter-spacing: 0.02em; opacity: 0.85; }
/* Les logos très hauts (blason de Collégien) paraissent plus gros : on les ramène à la même présence */
.ab-logos img[src*="collegien"] { height: clamp(54px, 6.2vw, 88px); }
/* Mouvement réduit : pas de défilement, les logos se rangent sur plusieurs lignes */
@media (prefers-reduced-motion: reduce) {
  .ab-marquee { -webkit-mask-image: none; mask-image: none; }
  .ab-track { width: auto; animation: none; }
  .ab-logos { flex: 1; flex-wrap: wrap; justify-content: center; }
  .ab-logos[aria-hidden="true"] { display: none; }
}

/* Appel à l'action : grand titre, puis texte à gauche et contacts à droite */
.ab-cta { padding-bottom: clamp(120px, 14vw, 220px); }
.ab-cta-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: end; margin-top: clamp(56px, 7vw, 104px); }
.ab-cta-p { max-width: 20em; color: var(--muted); }
.ab-cta-actions { display: grid; justify-items: start; gap: 28px; }
.ab-mail { color: var(--fg); font-size: clamp(24px, 2.8vw, 42px); line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere; transition: color 0.3s; }
.ab-mail:hover { color: var(--accent); }

@media (max-width: 760px) {
  .ab-hero-row, .ab-cols, .ab-cta-row { grid-template-columns: 1fr; }
  .ab-portrait { max-width: 260px; }
  .ab p { line-height: 1.32; }
}

/* ── Méthode de travail : affiche typographique (page Services) ──
   Une phrase en texte géant sur fond crème, à la même échelle partout, mêlant sans serif,
   serif italique et typo pixelisée ; une icône par étape glissée entre les mots.
   3 lignes sur grand écran ; sur mobile, les mots passent à la ligne d'eux-mêmes. */
.collage-band {
  background: #ecebe5;
  --fg: #151515;
  --muted: #5f5f5a;
  --line: rgba(21, 21, 21, 0.14);
  --em: #151515;
  color: var(--fg);
  padding-block: clamp(80px, 11vw, 150px);
  overflow: hidden;
  background-image: radial-gradient(rgba(21, 21, 21, 0.09) 1px, transparent 1px);
  background-size: 22px 22px; /* trame de points, comme un plan de travail */
}
.cc-poster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.22em;
  row-gap: 0.12em;
  max-width: 1280px;
  margin-inline: auto;
  font-stretch: 92%;
  font-weight: 700;
  font-size: clamp(36px, 6.6vw, 112px);
  line-height: 1;
  letter-spacing: -0.05em;
}
.cc-br { flex-basis: 100%; height: 0; }
.cc-word { white-space: nowrap; }
/* Les trois typos sont ajustées pour paraître de la même taille */
.cc-word.is-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; font-size: 1.12em; letter-spacing: -0.03em; line-height: 0.9; }
.cc-word.is-pixel { font-family: "Pixelify Sans", var(--font-sans); font-weight: 700; font-stretch: 100%; font-size: 1.04em; letter-spacing: -0.02em; }

/* Icônes d'étape, à la hauteur des lettres */
.cc-icon { flex: none; height: 0.78em; width: auto; filter: drop-shadow(0 0.04em 0.06em rgba(0, 0, 0, 0.16)); animation: cc-float 5s ease-in-out infinite; }
.cc-folder { rotate: -6deg; }
.cc-folder .cc-sheet { animation: cc-sheet 3.2s ease-in-out infinite; }
.cc-box { height: 0.88em; rotate: 4deg; animation-delay: -2s; }
.cc-keys { height: 1.02em; filter: none; animation: none; }
.cc-keys path { animation: cc-hop 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.cc-keys path:nth-child(2) { animation-delay: 0.2s; }
.cc-keys path:nth-child(3) { animation-delay: 0.4s; }
@keyframes cc-float { 50% { translate: 0 -0.04em; } }
@keyframes cc-sheet { 50% { transform: translateY(-4px); } }
@keyframes cc-hop { 0%, 40%, 100% { transform: none; } 20% { transform: translateX(12%) scale(1.12); } }

/* Vignette « styleframe » : cadre blanc arrondi autour d'une image de projet */
.cc-frame {
  display: inline-flex;
  padding: 0.05em;
  height: auto;
  background: #fff;
  border-radius: 0.09em;
  box-shadow: 0 0.06em 0.16em rgba(0, 0, 0, 0.16);
  rotate: 4deg;
  animation-delay: -1s;
}
.cc-frame img { height: 0.62em; width: auto; aspect-ratio: 1.28; object-fit: cover; border-radius: 0.05em; }

/* Mobile : les retours à la ligne fixes sont levés, le texte se répartit sur 4 à 5 lignes */
@media (max-width: 700px) {
  .cc-poster { font-size: clamp(32px, 11vw, 56px); row-gap: 0.18em; }
  .cc-br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-icon, .cc-keys path, .cc-folder .cc-sheet { animation: none; }
}

/* ── FAQ ───────────────────────────────── */
.faq { border-top: 1px solid var(--line); max-width: 960px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
  cursor: pointer;
  font-stretch: 68%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-serif); color: var(--accent); font-size: 34px; line-height: 0.6; transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--muted); max-width: 70ch; }

/* ── Formulaire de devis ─────────────────── */

.form fieldset { border: 0; padding: 0; margin: 0 0 52px; min-width: 0; }
.form legend {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0;
  margin-bottom: 22px;
  font-stretch: 68%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1;
}
.form legend .n { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; color: var(--accent); font-size: 32px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .fields { grid-template-columns: 1fr; } }

.field label, .field .label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; color: var(--muted); }
.req { color: var(--accent); }
.field input, .field textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  transition: border-color 0.3s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: #5f5f5a; }
.field input[type="date"] { color-scheme: dark; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  transition: 0.25s;
  user-select: none;
}
.chip:hover span { border-color: var(--fg); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.form-foot small { color: var(--muted); }
.form-error { color: #ff8a7a; margin-top: 16px; }
.form-error a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; }

.form-success { padding: 48px; border: 1px solid var(--accent); border-radius: var(--radius); }
.form-success svg { width: 72px; color: var(--accent); margin-bottom: 24px; }
.form-success h2 { font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: 44px; line-height: 1; margin: 0 0 10px; }
.form-success p { color: var(--muted); margin: 0; }

/* ── Page projet ─────────────────────────── */
.pm-hero { padding-top: 110px; }
/* Projets suivants dans le fil : séparés par un filet, sans la marge de l’en-tête */
.pm-article.is-next { border-top: 1px solid var(--line); }
.pm-article.is-next .pm-hero { padding-top: clamp(40px, 7vh, 80px); }
.pm-sentinel { height: 1px; }
.pm-marquee { margin: 0; overflow: hidden; white-space: nowrap; font-weight: 400; }
.pm-track { display: inline-flex; animation: marquee 38s linear infinite; }
.pm-unit {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  padding-right: 0.25em;
  font-stretch: 68%;
  font-weight: 800;
  font-size: clamp(60px, 11vw, 200px);
  letter-spacing: -0.02em;
  line-height: 1;
  padding-bottom: 0.24em; /* place pour les jambages (j, p, y…) que le bandeau masqué couperait */
  text-transform: uppercase;
}
.pm-unit em, .pm-next-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  color: var(--accent);
}
.pm-sep svg { width: 0.55em; color: var(--accent); }
.pm-info {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 24px;
  margin: 24px auto 0;
  padding-block: 18px;
  border-block: 1px solid var(--line);
}
.pm-info dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pm-info dd { margin: 4px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 22px; }
.pm-links { align-self: center; }
.pm-media { margin-block: clamp(32px, 5vw, 64px); }
.pm-gallery { margin-bottom: clamp(32px, 5vw, 64px); }
.pm-media { display: grid; gap: clamp(16px, 2vw, 28px); }
.pm-video { position: relative; }
.pm-media .pm-video iframe { aspect-ratio: var(--ar, 16 / 9); }
/* Vidéo verticale : centrée, limitée à la hauteur de l’écran */
.pm-video.is-vertical { width: min(100%, calc(84vh * 9 / 16)); justify-self: center; }
.pm-video .pm-poster { width: 100%; height: 100%; aspect-ratio: auto; }
/* L’affiche reste le temps du zoom d’arrivée, puis laisse la place au lecteur */
.pm-poster { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: poster-out 0.8s var(--ease) 1.4s forwards; }
@keyframes poster-out { to { opacity: 0; visibility: hidden; } }
.pm-media img, .pm-media iframe { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 0; }
.pm-next {
  display: block;
  padding: clamp(60px, 10vw, 140px) var(--gutter);
  border-top: 1px solid var(--line);
  text-align: center;
  transition: background 0.5s var(--ease);
}
.pm-next .kicker { margin-bottom: 18px; }
.pm-next-title { display: block; font-stretch: 68%; font-weight: 800; font-size: clamp(48px, 8vw, 140px); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
.pm-next:hover { background: var(--bg-2); }
@media (max-width: 700px) { .pm-info { grid-template-columns: 1fr 1fr; } }

/* ── Lightbox (showreel) ─────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(5, 5, 5, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
/* La vidéo du showreel occupe 75 % de la largeur (moins si l'écran est peu haut, pour garder le titre visible) */
.lb-inner { width: min(75vw, calc((100vh - 220px) * 16 / 9)); width: min(75vw, calc((100svh - 220px) * 16 / 9)); transform: translateY(30px); transition: transform 0.6s var(--ease-out); }
@media (max-width: 700px) { .lb-inner { width: 100%; } }
.lightbox.is-open .lb-inner { transform: none; }
.lb-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.lb-media iframe, .lb-media img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.lb-info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 20px; }

/* ── Lecteur vidéo maison (main.js : videoPlayer) ──
   Vidéo aux coins arrondis, barre flottante en verre dépoli : lecture, progression verte,
   temps, son, plein écran. La barre s'efface pendant la lecture quand la souris ne bouge plus. */
.lb-media, .om-player { border-radius: 20px; }
.vp { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #000; isolation: isolate; }
.pm-video .vp { position: relative; inset: auto; aspect-ratio: var(--ar, 16 / 9); border-radius: 20px; }
.vp > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; aspect-ratio: auto; border-radius: 0; }
.vp-hit { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.vp-bar {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding-inline: 10px 14px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.38);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.vp.is-idle .vp-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vp.is-idle { cursor: none; }
.vp-btn { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; transition: background 0.25s; }
.vp-btn:hover { background: rgba(255, 255, 255, 0.14); }
.vp-btn svg { width: 18px; height: 18px; }
.vp-track { position: relative; flex: 1; height: 18px; cursor: pointer; touch-action: none; }
.vp-track::before, .vp-fill { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.vp-track::before { right: 0; background: rgba(255, 255, 255, 0.28); }
.vp-fill { width: 0; background: #1fff80; box-shadow: 0 0 10px rgba(31, 255, 128, 0.45); }
.vp-track:hover::before, .vp-track:hover .vp-fill { height: 5px; margin-top: -2.5px; }
.vp-time { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.vp.is-full { border-radius: 0; }
.vp.is-full .vp-bar { left: 32px; right: 32px; bottom: 28px; }
.vp.is-plain .vp-bar, .vp.is-plain .vp-hit { display: none; } /* bibliothèque Vimeo injoignable : vidéo seule */
@media (max-width: 600px) {
  .vp-bar { left: 10px; right: 10px; bottom: 10px; gap: 8px; height: 42px; padding-inline: 6px 10px; }
  .vp-time { font-size: 11px; }
}
.lb-info h3 { margin: 0; font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 48px); line-height: 1; }
.lb-info p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--muted); }
.lb-close {
  position: absolute;
  top: 20px; right: var(--gutter);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.lb-close:hover { color: var(--accent); }

/* ── Curseur personnalisé ────────────────── */
/* Trois teintes seulement, choisies en JS (main.js : initCursor) selon la clarté du fond survolé :
   sombre (L* < 35 %) → blanc, clair (L* > 65 %) → noir, entre les deux ou sur une vidéo → vert. */
.cursor {
  --c: #1fff80;   /* couleur du curseur */
  --ink: #0a0a0a; /* texte « Voir » posé dessus */
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  pointer-events: none;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--c);
  display: grid;
  place-items: center;
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), margin 0.4s var(--ease-out), opacity 0.3s, background-color 0.25s, border-color 0.25s;
}
.cursor[data-tone="white"] { --c: #fff; --ink: #0a0a0a; }
.cursor[data-tone="black"] { --c: #0a0a0a; --ink: #fff; }
.cursor span { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink); opacity: 0; transition: opacity 0.2s; }
.cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: transparent; border: 1.5px solid var(--c); }
.cursor.is-view { width: 86px; height: 86px; margin: -43px 0 0 -43px; }
.cursor.is-view span { opacity: 1; }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { [data-cursor="view"] { cursor: none; } }

/* ── Transitions entre pages (View Transitions, sans délai ajouté) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.4s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.65s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6vh) scale(0.98); filter: blur(4px); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); transform: translateY(8vh); } to { clip-path: inset(0); transform: none; } }


/* ── Apparition des textes ───────────────── */
.tr .tw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* marge pour ne pas rogner les accents, l’italique et les jambages */
  padding: 0.1em 0.08em 0.08em 0;
  margin: -0.1em -0.08em -0.08em 0;
}
.tr .tw > span {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: transform 0.9s var(--ease-out) var(--d, 0ms), opacity 0.5s linear var(--d, 0ms);
}
.tr.is-in .tw > span { transform: none; opacity: 1; }
.tf {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out) 0.15s, filter 0.9s var(--ease-out) 0.15s, transform 0.9s var(--ease-out) 0.15s;
}
.tf.is-in { opacity: 1; filter: none; transform: none; }

/* ── Apparition au défilement ────────────── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .tr .tw > span, .tf { opacity: 1; transform: none; filter: none; }
  .panel { filter: none !important; }
  @view-transition { navigation: none; }
}

/* ── Éléments libres ajoutés dans le Studio (assets/js/blocks.js) ──
   Posés en haut à gauche de leur section ; place et taille réglées dans styles.js (#hb-b-…). */
.hb-block { position: absolute; left: 0; top: 0; z-index: 5; margin: 0; }
.hb-block-img { display: block; width: 320px; height: auto; object-fit: cover; border-radius: 10px; }
.hb-block-text { width: 320px; font-size: 18px; line-height: 1.45; white-space: normal; }
.hb-block-video { width: 480px; aspect-ratio: var(--ar, 16 / 9); border-radius: 10px; overflow: hidden; background: #000; }
.hb-block-video .vp { width: 100%; height: 100%; }
.hb-block-btn { white-space: nowrap; }
.hb-block.is-empty { display: grid; place-items: center; height: 200px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted, #888); font-size: 14px; background: rgba(255,255,255,.03); }
.hb-block-video.is-empty { height: auto; }
/* Cadre auto layout : range ses éléments (sens, espacement, marges réglés dans le Studio) */
.hb-block-frame { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; min-width: 24px; min-height: 24px; }
.hb-block.hb-in { position: relative; left: auto; top: auto; z-index: auto; }
@media (max-width: 767px) {
  .hb-block-img, .hb-block-text { width: 260px; }
  .hb-block-video { width: 300px; }
}