/*  MURAL · styles
    Deep navy, cream type, one neon. Anton for every heading, Condiment for the
    cursive accents, the system monospace for paragraphs. Liquid glass on the
    bar, the buttons and the cards; a grain over everything. */

@font-face {
  font-family: "Anton";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/anton-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Condiment";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/condiment-latin.woff2") format("woff2");
}

:root {
  --navy: #010828;
  --cream: #eff4ff;
  --neon: #6fff00;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --cursive: "Condiment", "Brush Script MT", cursive;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --max: 1831px;
  --gutter: clamp(16px, 4vw, 80px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--navy); color: var(--cream);
  font-family: var(--mono); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
video { display: block; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ── the grain, over everything ── */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: url("assets/texture.png?v=3") repeat; background-size: 512px 512px;
  mix-blend-mode: lighten; opacity: 0.6;
}

/* ── liquid glass ── */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative; overflow: hidden;
}
.liquid-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ── type ── */
.h { font-family: var(--display); font-weight: 400; text-transform: uppercase; margin: 0; letter-spacing: 0.01em; }
.cursive {
  /* toujours au premier plan, en néon plein : le mode de fusion du cahier des
     charges faisait virer le vert au violet dès qu'il croisait du blanc */
  font-family: var(--cursive); text-transform: none; color: var(--neon); position: relative; z-index: 2;
  text-shadow: 0 0 3px rgba(1, 8, 40, 0.65), 0 3px 16px rgba(1, 8, 40, 0.85), 0 0 34px rgba(1, 8, 40, 0.6);
}
.mono-up { font-family: var(--mono); text-transform: uppercase; }
.paren { opacity: 0.55; margin: 0 0.12em; }

/* ── videos ──
   Chaque vidéo se dissout dans l'encre par un masque en dégradé, pour que le
   passage d'une section à l'autre soit une couleur commune et non une ligne. */
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .bg-video {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.5) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.5) 90%, transparent 100%);
}
.about .bg-video {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 3.5%, #000 9%, #000 76%, rgba(0, 0, 0, 0.5) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 3.5%, #000 9%, #000 76%, rgba(0, 0, 0, 0.5) 90%, transparent 100%);
}
.call video {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 14%, #000 84%, rgba(0, 0, 0, 0.5) 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 14%, #000 84%, rgba(0, 0, 0, 0.5) 93%, transparent 100%);
}
.video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 8, 40, 0.3), rgba(1, 8, 40, 0) 26%, rgba(1, 8, 40, 0) 74%, rgba(1, 8, 40, 0.25)); pointer-events: none; }

/* ══════════ 1 · hero ══════════ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  border-radius: 0 0 32px 32px; background: var(--navy);
}
.hero .wrap { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

.bar { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; }
.logo { font-family: var(--display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo img { height: 26px; width: auto; display: block; }
.nav { display: none; position: absolute; left: 50%; top: 28px; transform: translateX(-50%); border-radius: 28px; padding: 24px 52px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; }
.nav a { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.2s; }
.nav a:hover, .nav a.active { color: var(--neon); }

.socials { display: none; flex-direction: column; gap: 12px; }
.icon-btn {
  width: 56px; height: 56px; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.icon-btn svg { width: 20px; height: 20px; }
.socials-mobile { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }

.hero-body {
  /* le bloc de titre est remonté au-dessus du sujet du décor : le contenu reste
     centré, mais dans un espace amputé en bas, ce qui le décale vers le haut de
     la moitié de la réserve (plafonnée pour ne pas coller à la barre) */
  flex: 1; display: flex; align-items: center;
  padding: 72px 0 calc(96px + min(34vh, 300px));
}
.hero-title {
  position: relative; max-width: 780px; --title-fs: 40px; font-size: var(--title-fs); line-height: 1.05;
  text-shadow: 0 2px 10px rgba(1, 8, 40, 0.5), 0 6px 40px rgba(1, 8, 40, 0.65);
}
.hero-accent {
  /* Remontée sur la dernière ligne du titre. Elle garde le vert néon sur tous
     les fonds : le sujet clair de la vidéo se déplace avec le recadrage
     `cover`, donc aucune position ne le dégage à toutes les tailles ; c'est le
     halo d'encre qui règle la lisibilité, une fois pour toutes. */
  position: absolute; right: -4%; transform: rotate(-1deg);
  /* son haut se pose au tiers inférieur de la dernière ligne du titre */
  top: calc(100% - var(--title-fs) / 3); bottom: auto;
  font-size: clamp(24px, 4vw, 48px); line-height: 1; white-space: nowrap;
}

/* ══════════ 2 · about ══════════ */
.about { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--navy); }
.about .wrap { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 64px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; }
.about-top { display: flex; flex-direction: column; gap: 32px; }
.about-title { position: relative; font-size: 32px; line-height: 1; }
.about-accent { position: absolute; right: -6%; bottom: -0.5em; transform: rotate(-2deg); font-size: clamp(36px, 5vw, 68px); line-height: 1; }
.about-lead { max-width: 266px; font-size: 14px; line-height: 1.55; }
.about-bottom { display: flex; justify-content: space-between; gap: 32px; margin-top: 48px; }
.about-col { max-width: 266px; font-size: 14px; line-height: 1.55; color: var(--navy); }
.about-col p { margin: 0 0 20px; }
.about-col.right { display: none; }

/* ══════════ 3 · the walls ══════════ */
.walls { background: var(--navy); padding: 96px 0 72px; }
.walls-head { display: flex; flex-direction: column; gap: 32px; margin-bottom: 40px; }
.walls-title { font-size: 32px; line-height: 1; }
.walls-title .line2 { display: block; margin-left: 48px; }
.walls-title .cursive { font-size: 1.1em; margin-right: 0.1em; }
.see-all { display: inline-flex; flex-direction: column; align-self: flex-start; }
.see-all .row { display: flex; align-items: flex-end; gap: 12px; font-family: var(--display); text-transform: uppercase; line-height: 0.9; }
.see-all .big { font-size: 32px; }
.see-all .stack { display: flex; flex-direction: column; font-size: 20px; line-height: 0.95; }
.see-all .bar-neon { height: 6px; background: var(--neon); margin-top: 10px; width: 100%; transition: transform 0.25s; transform-origin: left; }
.see-all:hover .bar-neon { transform: scaleX(1.06); }

.grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.card { border-radius: 32px; padding: 18px; transition: background 0.25s; display: block; }
.card:hover { background: rgba(255, 255, 255, 0.1); }
.card-media { position: relative; padding-bottom: 100%; border-radius: 24px; overflow: hidden; background: #061238; }
.card-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-bar {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  border-radius: 20px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-bar .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: rgba(239, 244, 255, 0.7); letter-spacing: 0.06em; }
.card-bar .v { font-family: var(--display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.card-go {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #b724ff, #7c3aed); box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5);
  transition: transform 0.2s;
}
.card:hover .card-go { transform: scale(1.1); }
.card-go svg { width: 20px; height: 20px; }

/* ══════════ 4 · the call ══════════ */
.call { position: relative; background: var(--navy); }
.call video { width: 100%; height: auto; display: block; }
.call-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--gutter); pointer-events: none; }
.call-block { position: relative; text-align: right; pointer-events: auto; }
.call-accent { position: absolute; left: -0.2em; top: -1.1em; font-size: clamp(17px, 4vw, 68px); line-height: 1; transform: rotate(-3deg); }
.call-title { font-size: 16px; line-height: 1.05; }
.call-title .first { display: block; margin-bottom: 16px; }
/*  Les trois boutons. En dessous de 900 px, la machine de la vidéo ne fait plus
    que quelques dizaines de pixels : ils sortent de l'image et forment une barre
    centrée sous elle. Au-dessus, ils se posent dans le panneau frontal de la
    machine, en pourcentages de la vidéo (mesurés image par image sur la boucle,
    intersection des cinq relevés : face x 10,7-27,1 %, y 57,5-80,5 %, sa bande haute
    étant en pénombre sous la barre, ce que le premier relevé avait raté : d'où
    la boîte trop basse, remontée de 1 %). */
.call-socials {
  position: static; z-index: 3; margin: 20px auto 4px; width: max-content;
  display: flex; flex-direction: row; border-radius: 1rem;
}
.call-socials a {
  width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1); transition: background 0.2s;
}
.call-socials a:last-child { border-right: 0; }
.call-socials a:hover { background: rgba(255, 255, 255, 0.1); }
.call-socials svg { width: 18px; height: 18px; }

/* ══════════ footer ══════════ */
footer { padding: 40px 0 48px; font-size: 12px; color: rgba(239, 244, 255, 0.55); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 32px; }
.foot .logo img { height: 30px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.foot-links a:hover { color: var(--neon); }
.foot-ca { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-transform: uppercase; letter-spacing: 0.04em; }
.foot-ca span:first-child { color: var(--cream); margin-right: 14px; }
.legal { margin: 14px 0 0; max-width: 100ch; line-height: 1.55; }

/* ══════════ docs ══════════ */
.doc { padding: 140px 0 80px; display: grid; grid-template-columns: 1fr; gap: 40px; }
.doc > * { min-width: 0; }
.doc-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }
.doc-bar .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 28px; }
.toc { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.toc-h { font-family: var(--display); font-size: 13px; letter-spacing: 0.08em; margin-bottom: 10px; color: var(--cream); }
.toc a { display: block; padding: 5px 0; color: rgba(239, 244, 255, 0.55); }
.toc a:hover, .toc a.active { color: var(--neon); }
article { max-width: 760px; }
article h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(40px, 6vw, 72px); line-height: 1; margin: 0 0 16px; }
article h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 3vw, 32px); margin: 56px 0 12px; }
article h2::after { content: ""; display: block; width: 48px; height: 6px; background: var(--neon); margin-top: 10px; }
article h3 { font-family: var(--display); text-transform: uppercase; font-size: 16px; letter-spacing: 0.04em; margin: 26px 0 8px; }
article p, article li { font-family: var(--mono); font-size: 14px; line-height: 1.7; color: rgba(239, 244, 255, 0.82); }
article ul { padding-left: 20px; }
article li { margin-bottom: 6px; }
.lead { font-size: 15px; }
.note { border-left: 3px solid var(--neon); padding: 6px 0 6px 16px; margin: 18px 0; }
.note p { margin: 0; color: var(--cream); }
.law { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0; }
.law-item { border-radius: 20px; padding: 16px 18px; }
.law-id { font-family: var(--display); color: var(--neon); font-size: 14px; letter-spacing: 0.08em; margin-bottom: 6px; }
.law-item p { margin: 0; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; margin: 14px 0 6px; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); vertical-align: top; }
.tbl th { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream); }
.tbl td:last-child { color: var(--neon); white-space: nowrap; }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 12px 0; }
.faq summary { cursor: pointer; font-family: var(--display); text-transform: uppercase; font-size: 15px; letter-spacing: 0.04em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--neon); margin-right: 10px; }
.faq details[open] summary::before { content: "−"; }
.faq p { margin: 10px 0 0; }
section[id] { scroll-margin-top: 110px; }

/* ── reveal ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ══════════ breakpoints ══════════ */
@media (min-width: 640px) {
  .hero-title { --title-fs: 60px; line-height: 1; }
  .about-title { font-size: 44px; }
  .walls-title { font-size: 44px; }
  .see-all .big { font-size: 44px; }
  .see-all .stack { font-size: 26px; }
  .see-all .bar-neon { height: 8px; }
  .call-title { font-size: 28px; }
  .call-title .first { margin-bottom: 24px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .about-lead, .about-col { font-size: 15px; }
}
@media (min-width: 768px) {
  .hero-title { --title-fs: 75px; }
  .about .wrap { padding-top: 80px; padding-bottom: 80px; }
  .about-top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .about-title { font-size: 52px; }
  .about-col { color: var(--cream); opacity: 0.1; }
  .walls-title { font-size: 52px; }
  .walls-title .line2 { margin-left: 96px; }
  .walls-head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .see-all .big { font-size: 52px; }
  .see-all .stack { font-size: 30px; }
  .call-title { font-size: 44px; }
  .call-title .first { margin-bottom: 36px; }
  .doc { grid-template-columns: 220px 1fr; gap: 56px; }
  .toc { position: sticky; top: 130px; align-self: start; }
  .about-lead, .about-col { font-size: 16px; }
}
@media (min-width: 900px) {
  /* posés dans le panneau de la machine */
  .call-socials {
    position: absolute; margin: 0;
    left: 11.7%; top: 59%; width: 14.4%; height: 18.9%;
    flex-direction: column; border-radius: 1.1rem;
  }
  .call-socials a { width: 100%; height: auto; flex: 1; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .call-socials a:last-child { border-bottom: 0; }
  .call-socials svg { width: 20px; height: 20px; }
}
@media (min-width: 1024px) {
  .hero-title { --title-fs: 90px; margin-left: 128px; }
  .nav { display: block; }
  .logo img { height: 30px; }
  .socials { display: flex; position: absolute; right: 0; top: 28px; }
  .socials-mobile { display: none; }
  .about .wrap { padding-top: 96px; padding-bottom: 96px; }
  .about-title { font-size: 60px; }
  .about-col.right { display: block; }
  .walls-title { font-size: 60px; }
  .walls-title .line2 { margin-left: 128px; }
  .see-all .big { font-size: 60px; }
  .see-all .stack { font-size: 36px; }
  .see-all .bar-neon { height: 10px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .call-text { padding-right: 20%; padding-left: 15%; }
  .call-title { font-size: 60px; }
  .call-title .first { margin-bottom: 48px; }
  .law { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}