/* Salle noire, univers ambre. Version en service : noir cinématique, champ de
   glyphes génératif, grotesque massive, accent ambre « Pixel amber ». Deux familles,
   auto-hébergées. L'ancienne peau champagne reste servie sous /v5. */

@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --noir: #0A0A0C;
  --surface: #131318;
  --ligne: #232329;
  --blanc: #F4F1EA;
  --gris: #98938A;
  /* Accent : univers « Pixel amber » (GASO-KOHAKU), générateur feralui.dev.
     Rampe complète #F59410 · #FFB23C · #FFCB70 · #FFE2A6 · #F8F1E0. L'accent prend le
     ton médian #FFCB70 (chiffres, liens, soulignements, halo), le survol monte à
     #FFE2A6. Le vif #FFB23C est écarté : il hurlait dans les études de cas. */
  --ambre: #FFCB70;
  --ambre-clair: #FFE2A6;

  --display: 'Clash Display', system-ui, sans-serif;
  --sans: 'Switzer', system-ui, sans-serif;

  /* Courbes de la maison : sortie expo pour les entrées, symétrique pour les volets. */
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --volet: cubic-bezier(0.83, 0, 0.17, 1);
}

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

html { scroll-behavior: smooth; }

/* Lenis pilote le défilement quand il est actif (classes posées par la lib). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ambre); color: var(--noir); }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }

/* ---------- Grain ---------- */

.grain-def { position: absolute; }
#grain {
  position: fixed; inset: -1%; z-index: 55;
  pointer-events: none;
  filter: url(#grain-f);
  mix-blend-mode: overlay;
  opacity: 0.06;
}

/* ---------- Arrivée ---------- */

/* Visible par défaut, jamais conditionné à une transition : sans JS la page est
   entière, l'arrivée ne fait que rejouer l'entrée. Les états cachés vivent sous .js. */
#entree { display: none; }
.js #entree {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem;
  background: var(--noir);
}
.entree-nom {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 5.5vw, 3.4rem);
  letter-spacing: 0.14em;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entree-ligne {
  display: block; height: 1px; width: 0;
  background: var(--ambre);
  max-width: min(60vw, 26rem);
}
#entree.entree-part { pointer-events: none; }
body.figee { overflow: hidden; }

/* ---------- Haut de page ---------- */

.haut {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  mix-blend-mode: difference;
  transition: transform 0.45s var(--sortie), opacity 0.45s var(--sortie);
}
/* En descendant, le haut s'efface (le blend difference imprimait le menu sur le
   contenu) ; remonter le rend aussitôt. */
.haut.range { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.marque {
  font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: 0.02em;
  text-decoration: none;
}
.haut-nav { display: flex; gap: 1.8rem; }
.haut-nav a {
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.25s var(--sortie);
}
.haut-nav a:hover { opacity: 1; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  padding: clamp(5rem, 12vh, 8rem) clamp(1.2rem, 4vw, 3rem);
}
#champ { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-scene { position: relative; max-width: 72rem; margin-inline: auto; width: 100%; }

.hero-titre {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 8.4vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.ligne { display: block; overflow: hidden; }
.ligne-int { display: inline-block; }
.js .ligne-int { transform: translateY(112%); }
.ligne-accent .ligne-int { color: var(--ambre); }

.hero-sous {
  margin-top: 2rem;
  max-width: 34rem;
  color: var(--gris);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}
.js .hero-sous { opacity: 0; }

.hero-coins { position: absolute; inset: 0; pointer-events: none; }
.js .hero-coins { opacity: 0; }
.coin {
  position: absolute;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gris);
  line-height: 1.7;
}
.coin-a { top: 5.2rem; left: clamp(1.2rem, 4vw, 3rem); }
.coin-b { top: 5.2rem; right: clamp(1.2rem, 4vw, 3rem); text-align: right; }
.coin-c { bottom: 2.2rem; left: clamp(1.2rem, 4vw, 3rem); }
.coin-d { bottom: 2.2rem; right: clamp(1.2rem, 4vw, 3rem); text-align: right; }

.hero-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ambre);
  text-decoration: none;
}
.js .hero-cue { opacity: 0; }
.cue-fleche { display: inline-block; animation: cue 2.2s var(--sortie) infinite; }
@keyframes cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.35rem); }
}

/* La révélation du hero est pilotée par GSAP (SplitText) dans app.js. Si le socle
   manque, app.js retire .js et tout redevient visible sans animation. */

/* ---------- Études ---------- */

/* Une seule ligne en haut : la bordure de section, sur laquelle le champ du hero
   vient buter. La première carte suit aussitôt (son propre padding aère) — plus de
   bandeau noir mort coincé entre deux filets. */
.etudes { border-top: 1px solid var(--ligne); }

.etude { border-bottom: 1px solid var(--ligne); }

.etude-carte {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  width: 100%;
  padding: clamp(1.8rem, 5vh, 3.2rem) clamp(1.2rem, 4vw, 3rem);
  background: none; border: 0; color: inherit;
  font: inherit; text-align: left;
  cursor: pointer;
}
.etude-n {
  font-family: var(--display); font-weight: 500;
  font-size: 0.95rem;
  color: var(--ambre);
  font-variant-numeric: tabular-nums;
}
.etude-nom {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  transition: transform 0.45s var(--sortie), color 0.45s var(--sortie);
}
.etude-fait {
  display: block;
  margin-top: 0.55rem;
  color: var(--gris);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
}
.etude-vignette {
  position: relative;
  width: clamp(7rem, 16vw, 13rem);
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 2px;
}
.etude-vignette img,
.etude-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.35) brightness(0.82) saturate(0.7) contrast(1.02);
  transform: scale(1.001);
  transition: transform 0.6s var(--sortie), filter 0.6s var(--sortie), opacity 0.5s var(--sortie);
}
/* La vidéo miniature vit au-dessus du poster ; révélée seulement quand elle joue. */
.etude-video { position: absolute; inset: 0; opacity: 0; }
.etude-video.joue { opacity: 1; }
/* Le voile assoit la matière claire des captures dans la salle noire ;
   il se lève au survol pour laisser la vidéo respirer. */
.etude-vignette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(155deg, rgba(10, 10, 12, 0.25), rgba(10, 10, 12, 0.6)),
    radial-gradient(130% 130% at 72% 18%, rgba(255, 203, 112, 0.1), transparent 62%);
  transition: opacity 0.6s var(--sortie);
}
.etude-carte:hover .etude-vignette::after { opacity: 0.22; }
.etude-fleche {
  font-family: var(--display); font-weight: 500;
  font-size: 1.5rem;
  color: var(--gris);
  transform: translateX(-0.4rem);
  transition: transform 0.45s var(--sortie), color 0.45s var(--sortie);
}
.etude-carte:hover .etude-nom { transform: translateX(0.5rem); color: var(--ambre-clair); }
.etude-carte:hover .etude-vignette img,
.etude-carte:hover .etude-video { transform: scale(1.05); filter: grayscale(0) brightness(1) saturate(0.92) contrast(1); }
.etude-carte:hover .etude-fleche { transform: translateX(0); color: var(--ambre); }

/* ---------- Vue d'étude (plein écran) ---------- */

.etude-vue {
  position: fixed; inset: 0; z-index: 50;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* jamais de barre visible, mobile compris */
}
.etude-vue::-webkit-scrollbar { display: none; }
.etude-vue[hidden] { display: none; }

.vue-cadre {
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(1.4rem, 4vh, 2.6rem) clamp(1.2rem, 4vw, 3rem) clamp(3rem, 8vh, 5rem);
  min-height: 100%;
}
.vue-haut {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: clamp(1.6rem, 5vh, 3rem);
}
.vue-n {
  font-family: var(--display); font-weight: 500;
  color: var(--ambre);
  font-variant-numeric: tabular-nums;
}
.vue-fermer {
  background: none; border: 1px solid var(--ligne); color: var(--blanc);
  font: inherit; font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55rem 1.2rem; border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.3s var(--sortie), color 0.3s var(--sortie);
}
.vue-fermer:hover { border-color: var(--ambre); color: var(--ambre-clair); }

.vue-titre {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 1.02; letter-spacing: -0.015em;
}
.vue-capacite {
  margin-top: 1rem;
  color: var(--gris);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 40rem;
}
.vue-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.4rem, 6vh, 4rem);
  align-items: start;
}
.vue-recit h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ambre);
  margin-top: 2rem;
}
.vue-recit h3:first-child { margin-top: 0; }
.vue-recit p { margin-top: 0.7rem; color: var(--blanc); max-width: 38rem; }
.vue-resultat {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.3;
  color: var(--ambre-clair);
}
/* Le cadre média du volet : le poster dimensionne, la présentation le recouvre. */
.vue-media {
  position: relative;
  border-radius: 3px;
  border: 1px solid var(--ligne);
  overflow: hidden;
  background: var(--noir);
}
.vue-media img { width: 100%; height: auto; display: block; }
.vue-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s var(--sortie);
}
.vue-video.joue { opacity: 1; }
/* La miniature adoptée par le cadre média pendant le voyage d'ouverture : plein
   cadre, sans le traitement gris de la vignette, sous la présentation qui la
   recouvrira une fois chargée (app.js la rend ensuite à sa vignette). */
.etude-video.en-voyage {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 1; transform: none; filter: none;
}
/* Dans le volet, la matière est le sujet : réchauffe à peine, n'assombrit pas. */
.vue-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 130% at 70% 15%, rgba(255, 203, 112, 0.06), transparent 60%);
}
/* Contrôles de la présentation (son, agrandir), révélés quand elle joue (les
   attributs hidden sont pilotés par app.js). */
.vue-son, .vue-agrandir {
  position: absolute; bottom: 0.7rem; z-index: 3;
  background: rgba(10, 10, 12, 0.62); color: var(--blanc);
  border: 1px solid var(--ligne); border-radius: 999px;
  font: inherit; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.4rem 0.85rem; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.3s var(--sortie), border-color 0.3s var(--sortie), color 0.3s var(--sortie);
}
.vue-son { right: 0.7rem; }
.vue-agrandir { left: 0.7rem; opacity: 0; pointer-events: none; }
.vue-son[hidden], .vue-agrandir[hidden] { display: none; }
.vue-son:hover, .vue-agrandir:hover { border-color: var(--ambre); color: var(--ambre-clair); }
.vue-son[aria-pressed="true"] { border-color: var(--ambre); color: var(--ambre); }
/* Activer le son reste visible (invite) ; couper le son ne revient qu'au survol
   de la vidéo. Agrandir n'apparaît qu'au survol. En grand, tout reste visible. */
@media (hover: hover) {
  .vue-son[aria-pressed="true"] { opacity: 0; pointer-events: none; }
  .vue-media:hover .vue-son[aria-pressed="true"], .autre-media:hover .vue-son[aria-pressed="true"],
  .vue-media:hover .vue-agrandir, .autre-media:hover .vue-agrandir { opacity: 1; pointer-events: auto; }
}
.vue-media.agrandi .vue-son, .vue-media.agrandi .vue-agrandir,
.autre-media.agrandi .vue-son, .autre-media.agrandi .vue-agrandir,
.etude-vue.media-large .vue-son, .etude-vue.media-large .vue-agrandir { opacity: 1; pointer-events: auto; }

/* Écran large : le volet ne défile pas, seul le récit défile dans sa colonne —
   le titre et la vidéo restent en place. Des voiles haut/bas (pilotés par
   app.js via .recit-haut/.recit-bas) délimitent la matière cachée. */
@media (min-width: 861px) {
  .etude-vue { overflow: hidden; }
  .vue-cadre { height: 100%; display: flex; flex-direction: column; }
  .vue-colonnes { flex: 1; min-height: 0; grid-template-rows: 100%; align-items: stretch; }
  .vue-recit {
    grid-area: 1 / 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .vue-recit::-webkit-scrollbar { display: none; }
  .vue-figure { grid-area: 1 / 2; align-self: start; }
  .vue-colonnes::before, .vue-colonnes::after {
    content: ""; grid-area: 1 / 1; z-index: 2;
    width: 100%; height: 3.2rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s var(--sortie);
  }
  .vue-colonnes::before { align-self: start; background: linear-gradient(to bottom, var(--surface), transparent); }
  .vue-colonnes::after { align-self: end; background: linear-gradient(to top, var(--surface), transparent); }
  .etude-vue.recit-haut .vue-colonnes::before { opacity: 1; }
  .etude-vue.recit-bas .vue-colonnes::after { opacity: 1; }
  /* Régime agrandi : le volet entier redevient défilant, une seule colonne. */
  .etude-vue.media-large { overflow-y: auto; }
  .etude-vue.media-large .vue-cadre { display: block; height: auto; min-height: 100%; }
  .etude-vue.media-large .vue-colonnes { grid-template-rows: none; }
  .etude-vue.media-large .vue-recit { grid-area: auto; overflow: visible; }
  .etude-vue.media-large .vue-figure { grid-area: auto; }
  .etude-vue.media-large .vue-colonnes::before, .etude-vue.media-large .vue-colonnes::after { display: none; }
}

/* Agrandi dans le volet d'étude (écran large) : la figure prend toute la largeur
   du cadre, le récit glisse dessous. La colonne reste sous la résolution native
   des vidéos (1280 px), donc jamais de flou d'upscale. Flip anime la bascule. */
.etude-vue.media-large .vue-colonnes { grid-template-columns: 1fr; }
.etude-vue.media-large .vue-figure { position: static; order: -1; }

/* Cadre agrandi flottant (panneaux, hors volet) : centré, 16:9, plafonné à la
   résolution native (80rem = 1280 px). Le Flip maison l'anime depuis sa place
   d'origine ; le fond sombre ferme au clic. */
.vue-media.agrandi, .autre-media.agrandi {
  position: fixed; z-index: 85;
  inset: 0; margin: auto;
  width: min(94vw, 80rem, calc(92vh * 16 / 9));
  height: min(92vh, calc(min(94vw, 80rem) * 9 / 16));
  max-width: 94vw; max-height: 92vh;
  border-radius: 4px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.media-fond {
  position: fixed; inset: 0; z-index: 84;
  background: rgba(10, 10, 12, 0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
}
.vue-figure figcaption { margin-top: 1.1rem; }
/* Présentation dans le panneau « Également construit » (Toul'Barz). */
.autre-media {
  position: relative;
  margin: 0 0 1.1rem;
  max-width: 34rem;
  border-radius: 3px; border: 1px solid var(--ligne);
  overflow: hidden; background: var(--noir);
}
.autre-media img { width: 100%; height: auto; display: block; }
.autre-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s var(--sortie);
}
.autre-video.joue { opacity: 1; }
.vue-lien {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-weight: 500;
  color: var(--ambre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--sortie), color 0.3s var(--sortie);
}
.vue-lien:hover { color: var(--ambre-clair); border-color: var(--ambre-clair); }

/* La cascade d'ouverture du volet est pilotée par GSAP dans app.js. */

.vue-role {
  color: var(--gris);
  font-family: var(--sans); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.vue-suite { margin-top: 2.2rem; }

/* ---------- Également construit ---------- */

.aussi {
  max-width: 72rem; margin-inline: auto;
  padding: clamp(4rem, 10vh, 7rem) clamp(1.2rem, 4vw, 3rem);
}
.aussi-titre {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: -0.01em;
}
.aussi-liste { list-style: none; margin-top: 2.2rem; }
.aussi-liste li { border-bottom: 1px solid var(--ligne); }
.aussi-liste li:first-child { border-top: 1px solid var(--ligne); }
.aussi-nom {
  font-family: var(--display); font-weight: 500; font-size: 1.1rem;
  transition: color 0.45s var(--sortie);
}
.aussi-fait { color: var(--gris); font-size: 0.98rem; }

/* Chaque ligne se déplie : la même sobriété, une porte de sortie en plus. */
.autre-ligne {
  display: grid;
  grid-template-columns: minmax(11rem, 3fr) 9fr auto;
  gap: 1.4rem;
  align-items: baseline;
  width: 100%;
  padding: 1.1rem 0;
  background: none; border: 0; color: inherit;
  font: inherit; text-align: left;
  cursor: pointer;
}
.autre-signe {
  font-family: var(--display); font-weight: 500;
  font-size: 1.15rem; line-height: 1;
  color: var(--gris);
  transition: transform 0.45s var(--sortie), color 0.45s var(--sortie);
}
.autre-ligne:hover .aussi-nom { color: var(--ambre-clair); }
.autre-ligne:hover .autre-signe { color: var(--ambre); }
.autre-ligne[aria-expanded="true"] .autre-signe { transform: rotate(45deg); color: var(--ambre); }
.autre-detail { overflow: hidden; }
.autre-detail p { color: var(--gris); max-width: 46rem; padding-bottom: 1.2rem; }
.autre-actions {
  display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: baseline;
  margin-top: -0.2rem;
}
.autre-statut {
  color: var(--gris);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* La dernière ligne : un simple plus qui devient une invitation. */
.autre-idee .autre-ligne {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 1.35rem 0;
}
.idee-plus {
  font-family: var(--display); font-weight: 500;
  font-size: 1.7rem; line-height: 1;
  color: var(--ambre);
  transition: transform 0.6s var(--sortie);
}
.autre-idee .autre-ligne:hover .idee-plus { transform: rotate(90deg); }
.idee-invite-txt {
  font-family: var(--display); font-weight: 500; font-size: 1.1rem;
  color: var(--gris);
  transition: color 0.45s var(--sortie);
}
.autre-idee .autre-ligne:hover .idee-invite-txt { color: var(--ambre-clair); }
html:not(.js) .autre-idee { display: none; }

/* ---------- La boîte à idée ---------- */

/* Tout passe en arrière-plan : il ne reste que l'air (la réponse s'y dépose)
   et la barre de saisie, assumée. */
.idee-scene {
  position: fixed; inset: 0; z-index: 52;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 1.7rem;
  padding: clamp(1.4rem, 4vw, 3rem);
  padding-bottom: clamp(3.5rem, 14vh, 8rem);
  background: rgba(10, 10, 12, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.idee-scene[hidden] { display: none; }
.idee-fermer {
  position: absolute; top: clamp(1.2rem, 3vh, 2rem); right: clamp(1.2rem, 4vw, 3rem);
  background: none; border: 1px solid var(--ligne); color: var(--blanc);
  font: inherit; font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55rem 1.2rem; border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.3s var(--sortie), color 0.3s var(--sortie);
}
.idee-fermer:hover { border-color: var(--ambre); color: var(--ambre-clair); }
.idee-air {
  flex: 1; width: min(46rem, 100%);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  line-height: 1.4;
  color: var(--ambre-clair);
  text-wrap: balance;
}
.idee-forme {
  width: min(46rem, 100%);
  display: flex; align-items: flex-end; gap: 1rem;
  border-bottom: 1px solid var(--ambre);
  padding-bottom: 0.65rem;
  transition: border-color 0.5s var(--sortie), opacity 0.5s var(--sortie);
}
.idee-envoi[hidden] { display: none; }
.idee-champ {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 3.4vw, 2.1rem);
  line-height: 1.3;
  color: var(--blanc);
  caret-color: var(--ambre);
  /* Zone de texte qui grandit avec la saisie (hauteur pilotée en JS), sans
     poignée ni barre : au-delà du plafond, le défilement reste invisible. */
  resize: none;
  overflow-y: auto;
  max-height: 36vh;
  scrollbar-width: none;
}
.idee-champ::-webkit-scrollbar { display: none; }
.idee-champ::placeholder { color: var(--gris); opacity: 0.75; }
.idee-envoi {
  flex: none;
  background: none; border: 1px solid var(--ligne); color: var(--ambre);
  font-family: var(--display); font-weight: 500;
  font-size: 1.25rem; line-height: 1;
  width: 2.9rem; height: 2.9rem; border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.3s var(--sortie), transform 0.3s var(--sortie);
}
.idee-envoi:hover { border-color: var(--ambre); transform: translateX(3px); }
.idee-note {
  color: var(--gris);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
}
.idee-scene.pense .idee-forme { border-color: var(--ligne); opacity: 0.45; pointer-events: none; }
.idee-scene.finie .idee-forme { opacity: 0.3; pointer-events: none; }

/* ---------- Contact ---------- */

.contact {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ligne);
  padding: clamp(5rem, 14vh, 9rem) clamp(1.2rem, 4vw, 3rem);
  text-align: center;
}
.contact-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-fond canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact > :not(.contact-fond) { position: relative; z-index: 1; }

/* La vitrine : la matière vivante et l'adresse dans le même cadre, à taille où la
   vidéo est nette. Le halo curseur et le balayage doré vivent sous ces classes. */
.contact-vitrine {
  position: relative;
  width: min(46rem, 92vw);
  aspect-ratio: 16 / 9;
  margin: clamp(1.8rem, 4vh, 2.6rem) auto 0;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  overflow: hidden;
  /* Toute la carte ouvre la boîte à idée (21 juillet 2026) : elle porte donc le
     curseur du geste. Seule l'adresse fait exception — elle copie, et sa règle
     `cursor: none` plus bas est plus spécifique, la pilule « Copier » y reste. */
  cursor: pointer;
  transition: border-color 0.6s var(--sortie);
}
.contact-vitrine:hover { border-color: color-mix(in srgb, var(--ambre) 45%, var(--ligne)); }
.contact-vitrine video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--sortie), filter 1.4s var(--sortie);
}
.contact-vitrine:hover video { transform: scale(1.05); filter: brightness(1.22) saturate(1.08); }

/* Le médaillon de pixels : basse définition agrandie sans lissage, chaque
   pixel calculé devient un carré net. Même respiration au survol que la vidéo. */
.vitrine-pixels {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: transform 1.4s var(--sortie), filter 1.4s var(--sortie);
}
.contact-vitrine:hover .vitrine-pixels { transform: scale(1.04); filter: brightness(1.1); }


/* Voile : assoit le texte sur la matière, et porte le halo qui suit le curseur. */
.vitrine-voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.18) 0%, rgba(10, 10, 12, 0.34) 55%, rgba(10, 10, 12, 0.58) 100%);
}
/* Le quilt de pixels est déjà sombre : le voile s'allège pour ne pas l'écraser.
   La règle s'annule d'elle-même si le canvas est retiré (retour à la vidéo). */
.contact-vitrine:has(.vitrine-pixels) .vitrine-voile {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.04) 0%, rgba(10, 10, 12, 0.3) 52%, rgba(10, 10, 12, 0.5) 100%);
}
.vitrine-voile::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 60%), rgba(255, 203, 112, 0.22), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.7s var(--sortie);
}
.contact-vitrine:hover .vitrine-voile::after { opacity: 1; }

/* Le rythme de la carte : deux écarts seulement, portés par des marges
   explicites (pas un gap uniforme). L'adresse est l'information, le mot est le
   geste, la note est leur annotation — l'air au-dessus du geste est donc plus
   large que celui qui retient la note. */
.vitrine-contenu {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  padding: clamp(1.2rem, 4vw, 2.6rem);
}

/* L'adresse : bouton de copie, balayage doré au survol. */
.vitrine-mail {
  position: relative;
  background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 3.4vw, 2rem);
  letter-spacing: 0.01em;
  color: var(--blanc);
  padding: 0.2rem 0.1rem;
}
.vitrine-mail-txt {
  background: linear-gradient(100deg, var(--blanc) 0%, var(--blanc) 38%, var(--ambre-clair) 50%, var(--blanc) 62%, var(--blanc) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.1s var(--sortie), opacity 0.35s var(--sortie);
}
.contact-vitrine:hover .vitrine-mail-txt { background-position: 0 0; }
.vitrine-mail::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -0.1rem;
  height: 1px;
  background: var(--ambre);
  transition: right 0.7s var(--volet);
}
.contact-vitrine:hover .vitrine-mail::after { right: 0; }

/* Confirmation de copie : l'étiquette prend la place de l'adresse un instant. */
.vitrine-copie {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 500;
  font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ambre-clair);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.35s var(--sortie), transform 0.35s var(--sortie);
  pointer-events: none;
}
.vitrine-mail.copie .vitrine-mail-txt { opacity: 0; }
.vitrine-mail.copie .vitrine-copie { opacity: 1; transform: translateY(0); }

/* Le geste principal : écrire, sans quitter la page. Toujours présent — copier
   une adresse pour aller écrire ailleurs était une friction inutile. Le contour
   arrive comme un trait qui s'ouvre, le mot se décode (chorégraphie dans app.js). */
/* Le geste principal est un mot, pas un composant : Clash Display en casse
   normale, souligné du trait ambre qui se tire à l'arrivée. L'ancienne pilule
   (bords 999px + backdrop-blur + majuscules espacées) cumulait les tics des
   interfaces générées — retirée le 21 juillet 2026, décision d'Anton. */
.vitrine-ecrire {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  /* Le bas du padding EST l'écart mot-soulignement : assez serré pour que le
     trait souligne le mot au lieu de flotter sous lui. */
  padding: 0.1rem 0.2rem 0.55rem;
  margin-top: clamp(0.9rem, 2.4vw, 1.5rem);
  border: 0;
  background: none;
  color: var(--blanc);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.4s var(--sortie);
}
/* Le trait vit dans son propre calque : il se tire (scaleX) sans toucher au
   mot. Le survol passe par height, jamais par transform — GSAP laisse un
   transform en ligne après l'arrivée, le CSS ne peut pas le gagner. */
.ecrire-trait {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ambre);
  pointer-events: none;
  transition: background 0.4s var(--sortie), height 0.4s var(--sortie);
}
.ecrire-txt { position: relative; }
.vitrine-ecrire:hover, .vitrine-ecrire:focus-visible { color: var(--ambre-clair); }
.vitrine-ecrire:hover .ecrire-trait, .vitrine-ecrire:focus-visible .ecrire-trait {
  background: var(--ambre-clair);
  height: 3px;
}
/* Le bouton n'est JAMAIS caché par le CSS : c'est le geste principal de la page.
   C'est app.js qui l'escamote juste avant de le révéler, donc toute panne en
   amont le laisse simplement visible. */

/* Le lien-bouton : même dessin que .vue-lien quand l'action reste dans la page. */
button.vue-lien {
  background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer;
  text-align: left;
}

/* Le curseur « Copier » n'apparaît qu'au contact de l'adresse : là, et là
   seulement, le vrai curseur s'efface au profit de la pilule. Le bouton et le
   reste du cadre gardent le curseur du système (pointer sur le bouton, flèche
   ailleurs). Copier n'arrive donc jamais par surprise. */
@media (hover: hover) and (pointer: fine) {
  .js .contact-vitrine .vitrine-mail { cursor: none; }
}
/* Une fois copiée, la pilule s'efface et le curseur système revient (spécificité
   plus forte que la règle cursor:none ci-dessus). */
.js .contact-vitrine .vitrine-mail.copie-fait { cursor: pointer; }
/* La pilule n'existe QUE là où le JS l'anime : pointeur fin et survol réels.
   Masquée par défaut (mobile, tactile, mouvement réduit) — pas de calque GPU
   ni de will-change gaspillés sur téléphone. Le sélecteur est aussi spécifique
   que `.contact > :not(.contact-fond)` plus haut, qui repose tous les enfants
   en `position: relative` : sinon la pilule retombe dans le flux, loin du
   pointeur, et comme le vrai curseur est masqué il ne reste aucun curseur. */
.contact > .vitrine-curseur { display: none; }
@media (hover: hover) and (pointer: fine) {
  .contact > .vitrine-curseur {
    /* Fixée au viewport, au-dessus de tout (voiles 50-60, grain 55) : la pilule
       ne passe jamais derrière, ni sous le cadre de la vitrine (overflow). */
    position: fixed; left: 0; top: 0; z-index: 90;
    pointer-events: none;
    display: inline-flex; align-items: center;
    padding: 0.5rem 1rem;
    /* Ambre, mais inversée : fond ambre, texte foncé — l'inverse de l'UI (partout
       ailleurs c'est texte ambre sur noir). L'inversion suffit à la distinguer. */
    border: 1px solid rgba(10, 10, 12, 0.2);
    border-radius: 999px;
    background: rgba(255, 203, 112, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--noir);
    opacity: 0;
    will-change: transform;
  }
}

/* Les deux portes d'envoi : elles n'apparaissent qu'une fois le message écrit.
   « Envoyer à Anton » porte l'ambre, la porte IA reste en retrait. */
.idee-portes {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  align-items: center; justify-content: center;
}
.idee-portes[hidden] { display: none; }
.idee-porte {
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: none;
  color: var(--blanc);
  font: inherit; font-size: 0.85rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.3s var(--sortie), color 0.3s var(--sortie);
}
.idee-porte[data-porte="direct"] { border-color: var(--ambre); color: var(--ambre-clair); }
.idee-porte:hover, .idee-porte:focus-visible {
  border-color: var(--ambre);
  color: var(--ambre-clair);
}

.vitrine-note {
  color: var(--blanc);
  font-size: clamp(0.82rem, 1.4vw, 0.95rem);
  opacity: 0.82;
  max-width: 34rem;
  margin-top: clamp(0.7rem, 1.8vw, 1.1rem);
  text-wrap: balance;
}
.vitrine-lieu {
  color: var(--gris);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* Lecteurs d'écran uniquement. */
.visu-cachee {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.contact-titre {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  letter-spacing: -0.015em;
}

/* ---------- Pied : la signature géante ---------- */

/* Pleine largeur (pas de max-width) : le nom court d'un bord à l'autre. overflow
   hidden clôt le débord latéral du nom et sert de masque à la révélation montante.
   Aucun padding bas : la signature est collée au bas de la page. */
/* Noir uni, sans champ de glyphes (décision du 20 juillet 2026) : la matière
   vit dans le hero et le contact, le pied est la page qui se referme. L'air
   au-dessus de la méta et sous la ligne est le même que l'écart méta-nom :
   un seul rythme vertical, desktop comme mobile. */
.pied {
  border-top: 1px solid var(--ligne);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.2rem, 4vw, 3rem) 0;
  display: flex; flex-direction: column; gap: clamp(2rem, 6vw, 4rem);
  overflow: hidden;
}

/* Rang de méta : liens fins, uppercase, dans le registre des coins du hero. */
.pied-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.8rem 2rem;
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris);
}
.pied-lien { color: var(--gris); text-decoration: none; transition: color 0.3s var(--sortie); }
.pied-lien:hover { color: var(--ambre-clair); }
.pied-lieu { color: var(--gris); }

/* Le nom géant, bord à bord assumé : le masque déborde jusqu'aux vrais bords de
   l'écran (annule le padding latéral du pied) et le nom est volontairement un peu
   plus large que le viewport — les lettres extrêmes embrassent les côtés, l'overflow
   hidden coupe le tout petit excédent. line-height serré pour coller au bas. */
.pied-nom-masque {
  line-height: 0.72;
  overflow: hidden;
  margin-inline: calc(-1 * clamp(1.2rem, 4vw, 3rem));
}
.pied-nom {
  font-family: var(--display); font-weight: 700;
  font-size: 15.4vw;
  line-height: 0.72;
  letter-spacing: -0.035em;
  color: var(--blanc);
  white-space: nowrap;
  text-align: center;
}

/* ---------- Pages simples (404, merci, mentions légales) ---------- */

.skip {
  position: absolute; left: -100vw; top: 0; z-index: 100;
  background: var(--ambre); color: var(--noir);
  padding: 0.6rem 1.2rem;
}
.skip:focus { left: 0; }

.page-simple {
  max-width: 44rem;
  margin-inline: auto;
  min-height: 70vh;
  padding: clamp(7rem, 18vh, 11rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 10vh, 7rem);
}
.page-simple h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.015em;
}
.page-simple p { margin-top: 1.4rem; color: var(--gris); }
.page-simple p strong { color: var(--blanc); }
.page-simple a {
  color: var(--ambre);
  text-decoration: none;
  border-bottom: 1px solid var(--ambre);
  transition: color 0.3s var(--sortie), border-color 0.3s var(--sortie);
}
.page-simple a:hover { color: var(--ambre-clair); border-color: var(--ambre-clair); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .etude-carte { grid-template-columns: auto 1fr auto; }
  .etude-vignette { display: none; }
  .vue-colonnes { grid-template-columns: 1fr; }
  .vue-figure { position: static; order: -1; }
  .coin-a, .coin-b { top: 4.6rem; }
  .coin-c, .coin-d { display: none; }
  .hero-cue { display: none; }
  .autre-ligne { grid-template-columns: 1fr auto; gap: 0.3rem 1rem; }
  .autre-ligne .aussi-fait { grid-column: 1 / -1; }
  .autre-ligne .autre-signe { grid-row: 1; grid-column: 2; align-self: center; }
  .autre-idee .autre-ligne { grid-template-columns: auto 1fr; }
  .idee-scene { justify-content: flex-end; padding-bottom: 3rem; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js #entree { display: none; }
  .js .ligne-int { transform: none; }
  .js .hero-sous, .js .hero-coins, .js .hero-cue { opacity: 1; }
  .cue-fleche { animation: none; }
  .etude-vue .vue-anime { opacity: 1; transform: none; transition: none; }
  /* Aucune vidéo produit en mouvement réduit : les posters restent, entiers. */
  .etude-video, .vue-video, .autre-video { display: none; }
  .vue-son, .vue-agrandir { display: none; }
  .contact > .vitrine-curseur { display: none; }
  .js .contact-vitrine, .js .contact-vitrine a, .js .contact-vitrine button { cursor: pointer; }
  * { transition-duration: 0.01ms !important; }
}