/* ================================================================
   LED Card Holder Slim — style

   Parti pris : aplats saturés, blocs francs, typographie massive.
   Bordures nettes, ombres dures, zéro dégradé, zéro flou, zéro grain.

   La page est faite de BANDES pleine largeur, une couleur par section.
   Le rythme vient du passage d'une couleur à l'autre, pas d'une grille de
   cartes — c'est ce qui distingue cette page des gabarits « néo-brutalistes »
   où tout est une carte blanche à ombre portée.

   Les couleurs sont celles que les LEDs savent faire : ce sont trois entrées
   de FX_COLORS dans js/main.js. Elles viennent du produit, pas d'une mode.

   Chaque bande définit --edge (bordures) et --shadow (ombres dures) : sur la
   bande noire, une ombre noire serait invisible, elle passe donc au cyan.
   Les composants n'utilisent jamais une couleur d'ombre en dur.
   ================================================================ */

@font-face {
  font-family: "Archivo Black";
  src: url("../vendor/fonts/archivo-black-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../vendor/fonts/geist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../vendor/fonts/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../vendor/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --jaune: #ffe93d;
  --cyan: #25e4ff;
  --rose: #ff2da8;
  --noir: #0d0d0d;
  --blanc: #ffffff;

  --font-display: "Archivo Black", Impact, "Arial Black", sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bw: 3px;                 /* épaisseur de bordure, partout la même */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --nav-h: 3.6rem;

  /* valeurs par défaut, surchargées par bande */
  --edge: var(--noir);
  --shadow: var(--noir);
  --fg: var(--noir);

  font-size: 16px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* clip et non hidden : les blocs pivotés ci-dessous dépassent, et sur Chrome
     mobile un dépassement élargit tout le viewport */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ---------- bandes ---------- */
.band {
  position: relative;
  padding-inline: var(--gutter);
  padding-block: clamp(3rem, 9vh, 7rem);
  border-top: var(--bw) solid var(--noir);
  color: var(--fg);
}

.band--jaune {
  background: var(--jaune);
  --edge: var(--noir);
  --shadow: var(--noir);
  --fg: var(--noir);
}
.band--blanc {
  background: var(--blanc);
  --edge: var(--noir);
  --shadow: var(--noir);
  --fg: var(--noir);
}
.band--noir {
  background: var(--noir);
  --edge: var(--blanc);
  --shadow: var(--cyan);
  --fg: var(--blanc);
}

/* ---------- typographie ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: none;
}

.band__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-bottom: 1.2rem;
}

.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--noir);
  color: var(--jaune);
  padding: 0.25rem 0.6rem;
  margin-bottom: 1.1rem;
}
.band--jaune .label { background: var(--noir); color: var(--jaune); }
.band--noir .label { background: var(--cyan); color: var(--noir); }
.band--blanc .label { background: var(--rose); color: var(--noir); }

.band__text {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  max-width: 34rem;
}

/* mot mis en drapeau dans un titre : bloc noir, texte cyan */
.flag {
  background: var(--noir);
  color: var(--cyan);
  padding: 0 0.14em 0.06em;
  display: inline-block;
}

/* ---------- navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--gutter);
  background: var(--noir);
  border-bottom: var(--bw) solid var(--noir);
}
.nav__logo {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blanc);
  white-space: nowrap;
}
.nav__logo span { color: var(--cyan); }

.nav__links { display: flex; gap: clamp(0.8rem, 2.2vw, 1.8rem); }
.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanc);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { border-bottom-color: var(--cyan); color: var(--cyan); }

.nav__cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--noir);
  background: var(--cyan);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--noir);
  white-space: nowrap;
}
.nav__cta:hover { background: var(--jaune); }

main { padding-top: var(--nav-h); }

/* ---------- hero ---------- */
.hero {
  background: var(--jaune);
  --edge: var(--noir);
  --shadow: var(--noir);
  --fg: var(--noir);
  color: var(--noir);
  padding-inline: var(--gutter);
  padding-top: clamp(2.5rem, 7vh, 4.5rem);
  padding-bottom: clamp(3rem, 9vh, 6.5rem);
}

/* Le titre prend toute la largeur : à cette taille, l'enfermer dans une colonne
   le forcerait à rétrécir, et c'est justement sa masse qui porte la page. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 10vw, 9rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin-bottom: clamp(1.8rem, 4vh, 3rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}

.hero__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  max-width: 26rem;
  margin-bottom: 1.8rem;
}

.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.hero__meta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hero__meta span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--noir);
  padding: 0.3rem 0.6rem;
}

/* la photo est un bloc posé de travers, bordé et ombré */
.hero__shot {
  border: var(--bw) solid var(--noir);
  box-shadow: 10px 10px 0 var(--noir);
  transform: rotate(-1.4deg);
  background: var(--noir);
}
.hero__shot img { display: block; width: 100%; height: auto; }
.hero__shot figcaption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--noir);
  padding: 0.5rem 0.7rem;
  border-top: var(--bw) solid var(--noir);
}

/* ---------- boutons : aplat, bordure, ombre dure, ils s'enfoncent ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border: var(--bw) solid var(--edge);
  box-shadow: 6px 6px 0 var(--shadow);
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--shadow); }
.btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--shadow); }

.btn--primary { background: var(--noir); color: var(--blanc); }
.btn--primary:hover { background: var(--rose); color: var(--noir); }
.band--noir .btn--primary { background: var(--cyan); color: var(--noir); }
.band--noir .btn--primary:hover { background: var(--jaune); }

.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--noir); color: var(--jaune); }

.btn--wide { display: block; text-align: center; }

/* ================================================================
   L'ATELIER — vitrine collante + étapes
   ================================================================ */
.workshop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.showcase {
  position: sticky;
  top: calc(var(--nav-h) + clamp(1rem, 4vh, 2rem));
  /* au-dessus des étapes : en une colonne elles défilent dessous et doivent
     disparaître derrière la vitrine, pas la traverser */
  z-index: 2;
  background: #000;
  border: var(--bw) solid var(--blanc);
  height: min(72vh, 620px);
  overflow: hidden;
}
#scene { display: block; width: 100%; height: 100%; cursor: grab; }
#scene.is-dragging { cursor: grabbing; }

.showcase__hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* aide discrète : un aplat cyan pleine largeur volait la vedette au produit.
     0.6 et non 0.45 : en dessous, le contraste sur noir tombe sous 4.5:1 */
  color: rgba(255, 255, 255, 0.6);
  padding: 0.4rem;
  pointer-events: none;
}

.step { padding-block: clamp(1.8rem, 5vh, 3.5rem); }
.step:first-child { padding-top: 0; }
.step + .step { border-top: var(--bw) solid var(--blanc); }

/* Étape haute : le défilement y pilote l'insertion des cartes. Sa hauteur EST
   la durée de l'animation — à 150vh les deux cartes étaient insérées en cinq
   crans de molette, on ne voyait pas le mouvement. Son texte reste collant en
   vis-à-vis de la vitrine, sinon la moitié droite se vide. */
.step--scrub { min-height: 200vh; }
.step__sticky {
  position: sticky;
  top: calc(var(--nav-h) + clamp(1.5rem, 6vh, 3.5rem));
}

.step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}
.step__text { margin-bottom: 1.5rem; max-width: 32rem; }

/* ---------- effets WLED ---------- */
.fx-picker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.fx-picker label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--cyan);
  color: var(--noir);
  padding: 0.3rem 0.5rem;
}
.fx-picker select {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--noir);
  background: var(--blanc);
  border: var(--bw) solid var(--blanc);
  border-radius: 0;
  padding: 0.5rem 2.2rem 0.5rem 0.7rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230d0d0d' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  min-width: 13rem;
}
.fx-picker select:hover { background-color: var(--jaune); }
.fx-picker select option, .fx-picker select optgroup {
  background: var(--blanc);
  color: var(--noir);
}

.fx-controls {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.fx-colors { display: flex; gap: 0.35rem; }
.fx-color {
  width: 26px;
  height: 26px;
  border: 2px solid var(--blanc);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
}
.fx-color.is-active { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* effet sans couleur : les pastilles restent lisibles mais visiblement inertes */
.fx-color:disabled { opacity: 0.45; filter: grayscale(0.8); cursor: default; }

.fx-brightness {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fx-brightness input { accent-color: var(--cyan); width: 130px; }

.strip-preview {
  border: var(--bw) solid var(--blanc);
  padding: 0.7rem;
}
.strip-preview__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.strip-preview canvas { width: 100%; height: 34px; display: block; background: #000; }

/* ---------- configurateur ---------- */
.config-group { margin-bottom: 1.6rem; }
.config-group h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.config-note {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.75;
}
.config-note--center { display: block; margin-top: 0.9rem; }

/* segments accolés, l'actif est un aplat cyan */
.material-cards { display: flex; flex-wrap: wrap; }
.material-card {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: var(--bw) solid var(--blanc);
  border-left-width: 0;
  padding: 0.7rem 1.1rem;
  color: var(--blanc);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  transition: background 0.15s, color 0.15s;
}
.material-card:first-child { border-left-width: var(--bw); }
.material-card:hover { background: rgba(255, 255, 255, 0.12); }
.material-card.is-active {
  background: var(--cyan);
  color: var(--noir);
}
.material-card__price { font-size: 0.72rem; opacity: 0.8; }

.swatches { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.swatch {
  width: 30px;
  height: 30px;
  border: 2px solid var(--blanc);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.swatch.is-active { outline: 3px solid var(--cyan); outline-offset: 2px; }
.swatch--translucent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, transparent 55%);
  pointer-events: none;
}
.swatch-name {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.config-summary { margin-top: 1.8rem; }
.config-summary__rows { border-top: var(--bw) solid var(--blanc); }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.9rem;
}
.summary-row span:last-child { font-family: var(--font-mono); font-size: 0.82rem; }

.config-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 1.2rem;
}
.config-summary__total > span:first-child {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.price {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cyan);
}

/* ---------- galerie : planche de blocs posés ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: start;
}

.shot { margin: 0; }
.shot--lead { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

.shot__frame {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: var(--bw) solid var(--noir);
  box-shadow: 8px 8px 0 var(--noir);
  background: var(--noir);
  cursor: zoom-in;
  transition: transform 0.15s, box-shadow 0.15s;
}
.shot__frame img { display: block; width: 100%; height: auto; }
.shot__frame:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--noir); }

/* rotations alternées : la planche a l'air posée, pas alignée à la règle */
.shot--lead .shot__frame { transform: rotate(-0.7deg); }
.shot--lead .shot__frame:hover { transform: rotate(-0.7deg) translate(4px, 4px); }
.gallery .shot:nth-child(odd) .shot__frame { transform: rotate(1deg); }
.gallery .shot:nth-child(odd) .shot__frame:hover { transform: rotate(1deg) translate(4px, 4px); }
.gallery .shot:nth-child(even) .shot__frame { transform: rotate(-1.2deg); }
.gallery .shot:nth-child(even) .shot__frame:hover { transform: rotate(-1.2deg) translate(4px, 4px); }

/* vignettes : ratio commun pour que la ligne s'aligne */
.gallery .shot__frame { aspect-ratio: 3 / 4; overflow: hidden; }
.gallery .shot__frame img { height: 100%; object-fit: cover; }
.shot--chassis .shot__frame img { object-position: center 42%; }
.shot--fini .shot__frame img { object-position: center 40%; }
/* soudure : cadrée bas, le haut du cliché capte l'écran du bureau */
.shot--crop .shot__frame img { object-position: center 78%; }

.shot.is-empty .shot__frame { aspect-ratio: 4 / 3; cursor: default; background: var(--blanc); }
.shot.is-empty .shot__frame img { display: none; }
.shot.is-empty .shot__frame::after {
  content: "Photo à venir";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--noir);
}

.shot figcaption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  line-height: 1.45;
  margin-top: 1rem;
}

/* ---------- visionneuse ---------- */
.viewer {
  border: var(--bw) solid var(--blanc);
  padding: 0;
  /* margin auto explicite : le reset l'écrase et le dialogue se collerait en haut */
  margin: auto;
  background: var(--noir);
  max-width: 94vw;
  max-height: 94vh;
  overflow: visible;
  color: var(--blanc);
}
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: rgba(13, 13, 13, 0.94); }
.viewer img {
  display: block;
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
}
.viewer__caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.7rem 0.9rem;
  border-top: var(--bw) solid var(--blanc);
  background: var(--noir);
}
.viewer__close {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--noir);
  background: var(--cyan);
  border: var(--bw) solid var(--noir);
  cursor: pointer;
}
.viewer__close:hover { background: var(--rose); }

/* ---------- FAQ : blocs empilés ---------- */
.faq { max-width: 52rem; display: grid; gap: 0.8rem; }

.faq__item {
  border: var(--bw) solid var(--noir);
  background: var(--blanc);
}
.faq__item[open] { box-shadow: 6px 6px 0 var(--noir); }

.faq__item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 3.4rem 0.9rem 1rem;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.6rem;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--jaune);
  background: var(--noir);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { background: var(--jaune); }

.faq__answer {
  padding: 0 1rem 1.1rem;
  border-top: 1px solid rgba(13, 13, 13, 0.2);
  padding-top: 0.9rem;
  font-size: 0.95rem;
}
.faq__answer strong { font-weight: 500; }

.faq__foot {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

main a:not([class]) {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.band--noir a:not([class]) { color: var(--cyan); }

/* ---------- fiche technique : chiffres énormes ---------- */
.specs { max-width: 58rem; border-top: var(--bw) solid var(--blanc); }
.specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.specs__value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--cyan);
}
.specs__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
}

/* ---------- pied de page ---------- */
.footer {
  background: var(--noir);
  color: var(--blanc);
  border-top: var(--bw) solid var(--noir);
  padding: 2rem var(--gutter) 2.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer a { color: var(--cyan); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 14px);
  z-index: 100;
  background: var(--cyan);
  color: var(--noir);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.75rem 1.1rem;
  border: var(--bw) solid var(--noir);
  box-shadow: 6px 6px 0 var(--noir);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- focus clavier ---------- */
:where(a, button, summary, select, input):focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
}
.band--noir :where(a, button, summary, select, input):focus-visible {
  outline-color: var(--jaune);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__shot { transform: rotate(-1deg); }

  /* la vitrine passe en bandeau collant, les étapes défilent dessous ; leur
     texte ne peut plus être collant à son tour, il finirait masqué */
  .workshop { grid-template-columns: 1fr; }
  .showcase {
    top: var(--nav-h);
    height: 40vh;
    margin-bottom: 1.5rem;
  }
  /* La vitrine est déplacée dans l'étape d'insertion par placeShowcase()
     (js/main.js) : son collage s'arrête donc avec cette étape au lieu de durer
     toute la zone atelier. Elle reste dans le flux, en tête de l'étape. */
  .showcase { margin-bottom: 1.2rem; }

  /* Le texte de l'étape scrubbée reste collant, mais calé SOUS la vitrine :
     deux éléments collants ne se cachent que s'ils partagent la même hauteur
     d'accroche. Sans ça, l'écran n'affiche qu'un grand vide noir pendant les
     180vh d'insertion. */
  .step__sticky { top: calc(var(--nav-h) + 40vh + 1.2rem); }
  .step--scrub { min-height: 180vh; padding-top: 0; }

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

@media (max-width: 860px) {
  .nav__links { display: none; }
  /* logo et bouton en nowrap imposaient leur largeur au viewport mobile */
  .nav__logo { font-size: 0.66rem; letter-spacing: 0.08em; }
  .nav__cta { padding: 0.45rem 0.6rem; font-size: 0.66rem; }
}

@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .shot__frame { aspect-ratio: 4 / 3; }
  .material-cards { flex-direction: column; }
  .material-card { border-left-width: var(--bw); border-top-width: 0; }
  .material-card:first-child { border-top-width: var(--bw); }
  /* les rotations mangent de la largeur utile sur petit écran */
  .shot__frame, .gallery .shot:nth-child(odd) .shot__frame,
  .gallery .shot:nth-child(even) .shot__frame,
  .shot--lead .shot__frame { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}