/* Archi-Tek — site public v3. Tokens from _Design/design-system/tokens.json (charte locked 2026-07-04). */

@font-face { font-family: "Outfit"; font-weight: 300; font-display: swap; src: url(fonts/outfit-latin-300-normal.woff2?v=ef88e74f63) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url(fonts/outfit-latin-400-normal.woff2?v=71f028fd23) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url(fonts/outfit-latin-500-normal.woff2?v=fc9bff941d) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url(fonts/outfit-latin-600-normal.woff2?v=8cfe15c2c6) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-weight: 300; font-display: swap; src: url(fonts/dm-mono-latin-300-normal.woff2?v=501783994f) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url(fonts/dm-mono-latin-400-normal.woff2?v=e1896b13b2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url(fonts/dm-mono-latin-500-normal.woff2?v=9964608a84) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #111111;
  --ink-2: #181A1C;          /* raised surface on ink */
  --ink-3: #202326;
  --line: rgba(244, 247, 249, .14);   /* hairline on dark */
  --line-2: rgba(244, 247, 249, .28);
  --paper: #F4F7F9;
  --white: #FFFFFF;
  --mute: #9AA7B2;           /* slate lightened for dark (tokens.json dark.muted-foreground) */
  --cyan: #12B8D6;           /* graphic accent only */
  --cyan-bright: #7FE3F2;    /* accent text on dark */
  --f-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gut: clamp(16px, 3.4vw, 48px);
  --maxw: 1440px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font: 400 17px/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

.mono { font-family: var(--f-mono); font-weight: 400; letter-spacing: .02em; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.kicker {
  display: inline-flex; gap: .9em; align-items: center;
  font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.kicker b { color: var(--paper); font-weight: 500; }
.display {
  font: 600 clamp(38px, 5.6vw, 92px)/1.02 var(--f-sans); letter-spacing: -.015em;
  margin: 0; text-wrap: balance;
}
.display-xl {
  font: 600 clamp(44px, 8vw, 148px)/.98 var(--f-sans); letter-spacing: -.02em;
  margin: 0; text-wrap: balance;
}
.lead { font: 400 clamp(18px, 1.5vw, 22px)/1.5 var(--f-sans); color: var(--mute); max-width: 36em; margin: 0; text-wrap: pretty; }
.hl { color: var(--cyan-bright); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .6em;
  min-height: 48px; padding: 0 22px; border-radius: 4px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font: 600 16px/1 var(--f-sans); letter-spacing: -.005em; cursor: pointer; overflow: hidden;
  transition: background-color .2s var(--ease);
}
.btn::after { /* charte: 60° cyan underline-slide on hover */
  content: ""; position: absolute; left: -10%; bottom: 0; height: 3px; width: 120%;
  background: var(--cyan); transform: translateX(-101%) skewX(-30deg); transition: transform .26s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(0) skewX(-30deg); }
.btn:hover { background: var(--white); }
.btn .arr { transition: transform .22s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn-note { font: 400 13px/1.4 var(--f-mono); color: var(--mute); letter-spacing: .01em; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; pointer-events: none;
  padding-top: env(safe-area-inset-top);
}
.nav .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav a, .nav button { pointer-events: auto; }
.nav .logo img { height: 30px; width: auto; }
.nav nav { display: flex; align-items: center; gap: 28px; }
.nav nav a:not(.btn) { font: 500 14px/1 var(--f-sans); color: var(--mute); text-decoration: none; transition: color .2s; padding: 15px 0; }
.nav nav a:not(.btn):hover { color: var(--paper); }
.nav::before { /* legibility veil once scrolled */
  content: ""; position: absolute; inset: 0 0 -44px 0; background: linear-gradient(to bottom, rgba(17,17,17,.96) 0, rgba(17,17,17,.9) 55%, rgba(17,17,17,0));
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.nav.scrolled::before, html.film-phase .nav::before { opacity: 1; }
@media (max-width: 820px) { .nav nav a:not(.btn) { display: none; } .nav .wrap { height: 60px; } .nav .logo img { height: 26px; } }

/* ---------- Sheet furniture (drawing-sheet ticks + cartouche) ---------- */
.sheet { position: relative; }
.ticks { position: absolute; pointer-events: none; opacity: .5; }
.ticks.top { left: var(--gut); right: var(--gut); top: 0; height: 8px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc((100% - 1px) / 12)); }
.cartouche {
  display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line);
  font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
}
.cartouche span, .cartouche a { padding: 10px 14px; border-right: 1px solid var(--line); text-decoration: none; }
.cartouche > :last-child { border-right: 0; }

/* ---------- Sections (post-signature) ---------- */
section { position: relative; }
.chap { padding: clamp(96px, 16vh, 180px) 0; }
.chap-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 7vh, 88px); }

/* 02 — Le temps : the tender comes last */
.temps { min-height: 100svh; display: flex; align-items: center; }
.temps .wrap { display: grid; gap: clamp(48px, 9vh, 110px); }
.cote-t { position: relative; padding-top: 70px; }
.cote-t .rail { position: relative; height: 1px; background: var(--line-2); transform-origin: left; }
.cote-t .zone { position: absolute; left: 0; top: -1px; height: 3px; width: 66.67%; background: var(--cyan); transform-origin: left; }
.cote-t ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.cote-t li { position: relative; padding: 22px 12px 0 0; }
.cote-t li::before { content: ""; position: absolute; left: 0; top: -14px; width: 1px; height: 28px; background: var(--paper); }
.cote-t li:last-child { position: absolute; right: 0; top: 0; text-align: right; padding-right: 0; }
.cote-t li:last-child::before { left: auto; right: 0; }
.cote-t li b { display: block; font: 300 clamp(28px, 4.4vw, 68px)/1 var(--f-sans); letter-spacing: -.02em; color: var(--paper); }
.cote-t li span { display: block; margin-top: 10px; font: 400 13px/1.35 var(--f-mono); color: var(--mute); letter-spacing: .02em; }
.cote-t .here, .cote-t .late {
  position: absolute; top: 0; font: 500 clamp(15px, 1.3vw, 18px)/1.25 var(--f-sans);
}
.cote-t .here { left: 0; color: var(--cyan-bright); }
.cote-t .late { right: 0; color: var(--mute); text-align: right; }
.cote-t .here::before, .cote-t .late::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px; transform: rotate(45deg); background: currentColor; }
@media (max-width: 700px) { /* the dimension turns vertical: time runs down the page */
  .cote-t { padding: 0 0 0 28px; height: 440px; }
  .cote-t .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: top; }
  .cote-t .zone { left: -1px; top: 0; width: 3px; height: 66.67%; transform-origin: top; }
  .cote-t ol { display: block; height: 100%; }
  .cote-t li, .cote-t li:last-child { position: absolute; left: 0; right: 0; padding: 0; text-align: left; transform: translateY(-50%); }
  .cote-t li:nth-child(1) { top: 0; transform: none; } .cote-t li:nth-child(2) { top: 33.33%; } .cote-t li:nth-child(3) { top: 66.67%; } .cote-t li:nth-child(4) { top: auto; bottom: 0; transform: none; }
  .cote-t li::before, .cote-t li:last-child::before { left: -36px; right: auto; top: 50%; width: 16px; height: 1px; }
  .cote-t li:nth-child(1)::before { top: 0; } .cote-t li:nth-child(4)::before { top: auto; bottom: 0; }
  .cote-t li b { display: inline; font-size: 34px; }
  .cote-t li span { display: inline; margin: 0 0 0 12px; font-size: 12px; }
  .cote-t .here { top: 16.66%; left: 28px; transform: translateY(-50%); }
  .cote-t .late { display: none; }
}

/* 03 — La fiche */
.fiche-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.fiche {
  position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(20px, 2.6vw, 36px); box-shadow: 0 40px 120px rgba(17,17,17,.6);
}
.fiche .where { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.fiche h3 { font: 600 clamp(26px, 2.7vw, 40px)/1.08 var(--f-sans); letter-spacing: -.012em; margin: 14px 0 20px; }
.fiche .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.fiche .tag { font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--paper); }
.fiche .tag.stage-t { border-color: var(--paper); }
.fiche dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: 1px solid var(--line); }
.fiche dt, .fiche dd { padding: 13px 0; border-bottom: 1px solid var(--line); margin: 0; }
.fiche dt { font: 400 12px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding-right: 28px; }
.fiche dd { font: 500 16px/1.5 var(--f-sans); }
.fiche .contact { margin-top: 22px; padding: 18px 18px 18px 20px; border: 1px solid var(--line); border-radius: 4px; position: relative; }
.fiche .contact::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--cyan); border-radius: 4px 0 0 4px; transform-origin: top; transform: scaleY(var(--rule, 1)); }
.fiche .contact .lbl { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-bright); display: flex; gap: 8px; align-items: center; }
.fiche .contact b { display: block; font: 600 18px/1.3 var(--f-sans); margin: 10px 0 4px; }
.fiche .contact span { display: block; color: var(--mute); font-size: 15px; }
.fiche .contact .src { font: 400 12px/1.4 var(--f-mono); margin-top: 10px; color: var(--mute); }
.fiche .pin { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; border: 1px solid var(--line-2); border-radius: 50%; font: 500 11px/1 var(--f-mono); font-style: normal; color: var(--paper); vertical-align: 2px; }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: l; }
.legende li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.legende i { font: 500 12px/1 var(--f-mono); font-style: normal; width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; }
.legende b { display: block; font: 600 19px/1.25 var(--f-sans); }
.legende span { display: block; color: var(--mute); font-size: 15px; margin-top: 4px; }
.legende li.on i { border-color: var(--cyan); color: var(--cyan-bright); }
@media (max-width: 900px) { .fiche-stage { grid-template-columns: 1fr; } }

/* 04 — La machine : four verbs */
.machine .verbs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.machine .verbs li { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 30ch); align-items: baseline; gap: 20px; padding: clamp(14px, 2.2vh, 26px) 0; border-bottom: 1px solid var(--line); }
.machine .verbs .n { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--mute); }
.machine .verbs h3 { margin: 0; font: 600 clamp(52px, 10.5vw, 176px)/.9 var(--f-sans); letter-spacing: -.03em; color: var(--paper); }
.machine .verbs p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.45; }
.machine .verbs li.key h3 { color: var(--cyan-bright); }
@media (max-width: 820px) { .machine .verbs li { grid-template-columns: 1fr; gap: 8px; } .machine .verbs .n { order: -1; } }

/* 05 — Les cotes */
.cotes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cote-n { padding: 28px 24px 0 0; position: relative; }
.cote-n + .cote-n { padding-left: 24px; border-left: 1px solid var(--line); }
.cote-n .v { font: 300 clamp(52px, 6.6vw, 112px)/1 var(--f-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cote-n .v small { font-size: .38em; letter-spacing: 0; font-weight: 400; color: var(--mute); }
.cote-n .l { margin-top: 14px; font: 500 16px/1.35 var(--f-sans); max-width: 18ch; }
.cote-n .s { margin-top: 8px; font: 400 12px/1.45 var(--f-mono); color: var(--mute); }
.cote-n.key .v { color: var(--cyan-bright); }
.cotes .stamp { margin-top: 36px; }
@media (max-width: 1000px) { .cotes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cote-n:nth-child(3) { border-left: 0; padding-left: 0; } .cote-n:nth-child(n+3) { margin-top: 40px; } }
@media (max-width: 520px) { .cotes-grid { grid-template-columns: 1fr; } .cote-n + .cote-n { border-left: 0; padding-left: 0; margin-top: 36px; } }

/* 06 — L'offre */
.offre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.offre-grid > div { padding: clamp(24px, 3.4vw, 48px); display: grid; align-content: start; gap: 18px; }
.offre-grid > div + div { border-left: 1px solid var(--line); }
.offre-grid h3 { margin: 0; font: 600 clamp(26px, 2.6vw, 38px)/1.1 var(--f-sans); letter-spacing: -.012em; }
.offre-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.offre-grid li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--mute); display: flex; justify-content: space-between; gap: 18px; }
.offre-grid li b { color: var(--paper); font-weight: 500; }
.offre-grid .price { font: 400 14px/1.4 var(--f-mono); color: var(--paper); padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 4px; justify-self: start; }
.offre-grid > div { background: rgba(17, 17, 17, .92); }
.offre-grid .demo { background: var(--ink-2); }
@media (max-width: 820px) { .offre-grid { grid-template-columns: 1fr; } .offre-grid > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* 07 — Appel final */
.final { min-height: 100svh; display: grid; align-content: center; padding: 120px 0 60px; overflow: hidden; }
.final .copy { display: grid; gap: 30px; position: relative; z-index: 2; }
.final .cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.final .btn-note { background: rgba(17, 17, 17, .8); padding: 6px 10px; border-radius: 3px; }
/* the living map glows under the last screen: an ink veil behind the copy, the map stays as is */
.final .copy::before { content: ""; position: absolute; z-index: -1; inset: -56px calc(-1 * var(--gut)); pointer-events: none; background: linear-gradient(90deg, rgba(17, 17, 17, .86) 0%, rgba(17, 17, 17, .74) 60%, rgba(17, 17, 17, .4) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
@media (max-aspect-ratio: 1/1) { .final .copy::before { background: rgba(17, 17, 17, .8); } }

/* Footer cartouche */
.foot { border-top: 1px solid var(--line); padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); background: var(--ink); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px; pointer-events: none; background: linear-gradient(180deg, rgba(17, 17, 17, 0), var(--ink)); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.foot img { height: 22px; width: auto; }
.foot .cartouche a:hover { color: var(--paper); }
.motion-toggle { background: none; border: 1px solid var(--line); color: var(--mute); font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; border-radius: 3px; cursor: pointer; min-height: 36px; }
.motion-toggle:hover { color: var(--paper); border-color: var(--line-2); }

/* Reduced-motion notice (only when the device asks for less motion) */
.rm-note { display: none; }
html[data-motion="reduced"] .rm-note { display: inline-flex; }

/* =====================================================================
   The story — one WebGL scene behind a sticky stage (scene/scene.src.js)
   ===================================================================== */
:root { --slate: var(--mute); --slate-d: #5A6B7B; --hair: rgba(154, 167, 178, .2); --hair-2: rgba(154, 167, 178, .36); }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 1; touch-action: pan-y; pointer-events: none; }
.poster { position: fixed; inset: 0; z-index: 0; background: var(--ink) url(poster.webp?v=2f0613eed5) center / cover no-repeat; opacity: 0; pointer-events: none; transition: opacity .4s; }
.no-gl .poster { opacity: 1; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 60% 50%, transparent 55%, rgba(17, 17, 17, .75) 100%); }
main, .foot { position: relative; z-index: 2; }

.story { position: relative; height: 480vh; height: 480svh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(17,17,17,.82) 0%, rgba(17,17,17,.55) 30%, rgba(17,17,17,0) 50%); }
.beat { position: absolute; left: var(--gut); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: min(40vw, 640px); z-index: 3; }
.beat .kicker { margin-bottom: 22px; }
.beat .kicker::before, .chap-head .kicker::before { content: ""; width: 28px; height: 1px; background: var(--slate-d); }
.beat .display { color: var(--white); line-height: .96; }
.beat h1.display { font-size: clamp(46px, 6vw, 100px); }
.beat h1 .accent { display: block; color: var(--cyan-bright); }
.beat h2.display { font-size: clamp(46px, 5.6vw, 92px); }
.beat .lead { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.38; margin-top: 22px; max-width: 26em; }
.beat .lead.strong { color: var(--paper); margin-top: 10px; }
.beat .small { font-size: 15px; line-height: 1.5; color: var(--mute); margin-top: 18px; max-width: 30em; }
.numeral { margin: 0; font-weight: 300; font-size: clamp(96px, 11.5vw, 188px); letter-spacing: -.015em; line-height: .86; color: var(--cyan-bright); font-variant-numeric: tabular-nums; }
.numeral .pre { display: block; margin-bottom: 14px; font: 500 clamp(20px, 1.8vw, 28px)/1.2 var(--f-sans); letter-spacing: 0; color: var(--paper); }
.numeral small { font-size: .32em; letter-spacing: 0; font-weight: 400; }
.beat p { margin: 0; }
.soyez { font-size: clamp(46px, 5vw, 84px); margin-top: 36px !important; }
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 40px; }
.note { font: 400 12.5px/1.4 var(--f-mono); color: var(--mute); letter-spacing: .04em; }
.b1, .b2, .b3 { opacity: 0; visibility: hidden; }
.beat .hero-lead { font-size: clamp(17px, 1.3vw, 20px); color: var(--paper); opacity: .86; max-width: 30em; margin-top: 26px; }

.hint { position: absolute; left: var(--gut); bottom: 64px; font: 400 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .2em; color: var(--mute); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3; }
.hint i { display: block; width: 1px; height: 38px; background: linear-gradient(var(--mute), transparent); transform-origin: top; animation: hint 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hud { position: absolute; left: var(--gut); bottom: 26px; z-index: 3; font: 400 11.5px/1 var(--f-mono); color: var(--mute); display: flex; gap: 26px; align-items: flex-end; }
.scale { display: flex; align-items: center; gap: 10px; }
.scale .bar { display: block; height: 7px; border-left: 1px solid var(--mute); border-right: 1px solid var(--mute); position: relative; width: 80px; }
.scale .bar i { position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--mute); }
.hud-r { position: absolute; right: var(--gut); bottom: 26px; z-index: 3; font: 400 11.5px/1.3 var(--f-mono); color: var(--slate-d); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.hud-r #sheet { color: var(--mute); }
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.lab { position: absolute; left: 0; top: 0; font: 400 11.5px/1.2 var(--f-mono); letter-spacing: .03em; color: var(--mute); white-space: nowrap; will-change: transform, opacity; opacity: 0; }
.lab.axis { width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; }
.lab.room { color: var(--slate-d); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; }
.lab.origin { color: var(--cyan-bright); font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; display: flex; align-items: center; gap: 10px; padding-left: 28px; margin-top: -8px; }
.lab.origin i { position: absolute; left: 8px; top: 50%; width: 16px; height: 1px; background: var(--cyan-bright); }
.callout { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 16px; border-left: 1px solid var(--cyan); background: rgba(17, 17, 17, .88); font-size: 11.5px; color: var(--mute); }
.callout .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--slate-d); }
.callout b { font: 500 16px/1.3 var(--f-sans); letter-spacing: 0; color: var(--white); }
.callout b.c { color: var(--cyan-bright); }
.callout .sep { height: 8px; }
.stadeline { display: flex; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
.stadeline span { color: var(--slate-d); transition: color .24s; }
.stadeline span.on { color: var(--white); }
.tip { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; font: 400 12px/1.45 var(--f-mono); color: var(--paper); background: rgba(17, 17, 17, .86); border: 1px solid var(--hair-2); padding: 9px 12px; border-radius: 2px; opacity: 0; transition: opacity .16s; white-space: nowrap; }
.tip b { font: 500 15px/1.3 var(--f-sans); display: block; color: var(--white); letter-spacing: 0; }
.tip em { font-style: normal; color: var(--cyan-bright); }
.fiche-sec .tip-anchor { display: none; }

/* chapters float over the living map: give reading surfaces a quiet ink backing */
.chap-head .display { text-shadow: 0 2px 40px rgba(17, 17, 17, .8); }
.legende, .machine .verbs p, .cote-t { text-shadow: 0 1px 18px rgba(17, 17, 17, .9); }

@media (max-aspect-ratio: 1/1) {
  .beat { justify-content: flex-start; padding-top: calc(104px + env(safe-area-inset-top)); max-width: none; right: var(--gut); }
  .beat h1.display { font-size: clamp(44px, 8.4vw, 92px); }
  .beat h2.display { font-size: clamp(44px, 8vw, 88px); }
  .beat .lead { font-size: clamp(18px, 2.6vw, 24px); }
  .numeral { font-size: clamp(92px, 17vw, 180px); }
  .hud-r { display: none; }
  .hint { left: 50%; transform: translateX(-50%); bottom: 28px; background: rgba(17,17,17,.78); padding: 12px 16px 10px; border-radius: 3px; }
  .vignette { background: radial-gradient(130% 80% at 50% 62%, transparent 50%, rgba(17, 17, 17, .7) 100%); }
  .stage::before { background: linear-gradient(180deg, rgba(17,17,17,.85) 0%, rgba(17,17,17,.5) 30%, rgba(17,17,17,0) 45%); }
  /* the lead lines fall on the bright paper of the sketch / photo: keep them on ink, like the hint */
  .b0 .hero-lead, .b1 .lead { background: rgba(17, 17, 17, .78); padding: 8px 12px; margin-left: -12px; border-radius: 3px; }
}
@media (max-width: 640px) { .note { display: block; width: 100%; } .hud .coords { display: none; } }
.poster-mode .nav, .poster-mode .beat, .poster-mode .hud, .poster-mode .hud-r, .poster-mode .hint, .poster-mode .labels, .poster-mode .vignette, .poster-mode main > section:not(.story), .poster-mode .foot { display: none !important; }

/* =====================================================================
   Reduced motion (device setting, unless overridden): a composed still page
   ===================================================================== */
.story-static .story { height: auto; }
.story-static .stage { position: relative; height: auto; overflow: visible; display: grid; }
.story-static #gl { display: none; }
.story-static .stage::before, .story-static .hint, .story-static .hud, .story-static .hud-r, .story-static .labels, .story-static .tip { display: none; }
.story-static .beat { position: relative; left: auto; right: auto; top: auto; bottom: auto; max-width: none; padding: 0 var(--gut); opacity: 1 !important; visibility: visible !important; }
.story-static .b0 { min-height: 100svh; justify-content: center; padding-top: 80px; background: linear-gradient(90deg, var(--ink) 40%, rgba(17,17,17,0) 64%), url(still-building.webp?v=46db2386b3) right 42% / 62% auto no-repeat; }
.story-static .b1 { display: none; }
.story-static .b2, .story-static .b3 { min-height: 90svh; justify-content: center; background: linear-gradient(90deg, var(--ink) 25%, rgba(17,17,17,.1) 65%), url(still-france.webp?v=2f0613eed5) right center / auto 100% no-repeat; }
.story-static .b3 { background: none; min-height: 70svh; }
@media (max-aspect-ratio: 1/1) {
  .story-static .b0 { background: linear-gradient(180deg, var(--ink) 30%, rgba(17,17,17,.15) 60%), url(still-building.webp?v=46db2386b3) center 30% / cover no-repeat; justify-content: flex-start; padding-top: 120px; }
  .story-static .b2 { background: linear-gradient(180deg, var(--ink) 40%, rgba(17,17,17,.1) 80%), url(still-france.webp?v=2f0613eed5) center bottom / 100% auto no-repeat; justify-content: flex-start; }
}
.story-static .poster { display: none; }

/* The film: the validated plan → building clip (v2), scrubbed by the story, then shrunk into the model */
.film { position: fixed; inset: 0; z-index: 0; overflow: hidden; transform-origin: 0 0; will-change: transform, opacity; pointer-events: none; background: var(--ink); }
.film video, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.film canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.film.seq canvas { opacity: 1; }
.film.seq video { visibility: hidden; }
/* The opening (opening.js?v=f901257bb1): the architect's plan on the table, full frame, already moving; lands on the film's
   frame 0. Its ink band is the film's mask drawn as ink (same look), so the hand-over is invisible. */
.opening { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; will-change: opacity; }
.opening img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none; transform-origin: 0 0; will-change: transform; }
.opening-band { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0, var(--ink) 30vw, rgba(17,17,17,0) 48.2vw); }
@media (max-aspect-ratio: 1/1) { .opening-band { background: linear-gradient(180deg, var(--ink) 0, rgba(17,17,17,.75) 16%, rgba(17,17,17,0) 46%); } }
@media (max-width: 640px) and (max-aspect-ratio: 1/1) {
  .opening img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%); mask-image: linear-gradient(180deg, transparent 0, #000 9%); }   /* the plan settles below the title: a soft top edge, never a hard one */
  .opening-band { background: linear-gradient(180deg, var(--ink) 0, var(--ink) 40svh, rgba(17,17,17,0) 49.6svh); } }
/* first visit: the plan alone, then (1.9 s → 2.6 s, whole at the landing) the band, the promise and the menu fade in; a scroll cuts it short */
@keyframes at-open-in { from { opacity: 0; } to { opacity: 1; } }
html.is-opening .opening-band, html.is-opening .nav .wrap, html.is-opening .nav::before, html.is-opening .stage::before, html.is-opening .b0 > *, html.is-opening .hint { animation: at-open-in .7s cubic-bezier(.33, 0, .2, 1) 1.9s both; }
html[data-motion="reduced"] .opening, .poster-mode .opening { display: none; }
#gl { opacity: 0; }
@media (min-aspect-ratio: 1/1) {
  .film { left: 30vw; background: transparent; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
}
@media (max-aspect-ratio: 1/1) {
  .film { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.25) 16%, #000 46%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.25) 16%, #000 46%); }
}
.poster-mode .film, .story-static .film { display: none; }
.no-gl #gl { opacity: 0 !important; }

/* 05 — stade bars drawn as dimension lines */
.bars { list-style: none; margin: 0 0 clamp(48px, 8vh, 96px); padding: 0; border-top: 1px solid var(--line); }
.bars li { display: grid; grid-template-columns: minmax(150px, 300px) 1fr 90px; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.bars .lbl { font: 500 clamp(18px, 1.6vw, 24px)/1.2 var(--f-sans); color: var(--white); }
.bars .track { position: relative; height: 9px; }
.bars .track::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line); }
.bars .track i { position: absolute; left: 0; top: 0; height: 9px; width: calc(var(--v) / 49 * 100%); border-left: 1px solid var(--paper); border-right: 1px solid var(--paper); transform-origin: left; }
.bars .track i::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--paper); }
.bars li.key .track i { border-color: var(--cyan); }
.bars li.key .track i::after { background: var(--cyan); height: 2px; top: 3.5px; }
.bars li.key .lbl, .bars li.key .val { color: var(--cyan-bright); }
.bars .val { font-size: 18px; color: var(--paper); text-align: right; font-variant-numeric: tabular-nums; }
.bars li.past .lbl, .bars li.past .val { color: var(--slate-d); }
.bars li.past .lbl { font-weight: 400; font-size: clamp(15px, 1.2vw, 18px); }
.bars li.past .track i { border-color: var(--slate-d); }
.bars li.past .track i::after { background: repeating-linear-gradient(90deg, var(--slate-d) 0 6px, transparent 6px 10px); }
.bars li.past { padding: 14px 0; }
.cotes-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cotes-grid.two .cote-n:nth-child(2) { border-left: 1px solid var(--line); padding-left: 24px; margin-top: 0; }
@media (max-width: 640px) {
  .bars li { grid-template-columns: 1fr 70px; gap: 10px; }
  .bars .track { grid-column: 1 / -1; grid-row: 2; }
  .cotes-grid.two { grid-template-columns: 1fr; } .cotes-grid.two .cote-n:nth-child(2) { border-left: 0; padding-left: 0; margin-top: 36px; }
}
@media (max-width: 640px) and (max-aspect-ratio: 1/1) {
  /* phones: the paper of the sketch is bright — keep the promise on ink */
  /* phones: the promise on ink at the top, the film framed on the building below it */
  .film { top: 40svh; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
  .film video, .film img { object-position: 50% 30%; }
  .stage::before { background: linear-gradient(180deg, rgba(17,17,17,.95) 0%, rgba(17,17,17,.8) 36%, rgba(17,17,17,0) 46%); }
  .b0 .note, .b3 .note { display: none; }
  .beat .hero-lead { font-size: 15.5px; margin-top: 18px; }
  .beat h1.display { font-size: 40px; }
}

html.film-phase .hud, html.film-phase .hud-r { opacity: 0 !important; }
.gl-off #gl { opacity: 0 !important; } .gl-off .poster { opacity: 1; }

.legende { background: rgba(17, 17, 17, .78); padding: 8px 22px 22px; border-radius: 6px; }

/* 06 — the call to action: a paper sheet on the ink (charte: paper surface, ink text, cyan graphic band + rule, flat) */
.offre .display-xl { font-size: clamp(48px, 7.4vw, 132px); }
.offre-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 0; border-radius: 0; overflow: visible; gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.offre-grid > div { border-radius: 6px; }
.offre-grid > div + div { border-left: 0; }
.offre-grid .demo { position: relative; background: var(--paper); color: var(--ink); padding: clamp(28px, 3.8vw, 56px); padding-left: clamp(34px, 4.2vw, 62px); gap: 22px; overflow: hidden; }
.offre-grid .demo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cyan); transform-origin: top; transform: scaleY(var(--rule, 1)); }
.offre-grid .demo .band { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--cyan); transform-origin: left; transform: scaleX(var(--band, 1)); }
.offre-grid .demo .kicker { color: #0A6B80; }
.offre-grid .demo .kicker::before { background: #0A6B80; }
.demo-n { display: flex; align-items: flex-end; gap: 20px; margin: 4px 0 6px; }
.demo-n span { font: 600 clamp(22px, 2.2vw, 34px)/1.12 var(--f-sans); letter-spacing: -.01em; color: var(--ink); padding-bottom: 6px; }
.offre-grid .demo li { border-top-color: #D8DFE5; color: #5A6B7B; }
.offre-grid .demo li b { color: var(--ink); font-weight: 600; }
.demo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.demo-note { font: 400 13px/1.4 var(--f-mono); color: #5A6B7B; letter-spacing: .01em; }
.btn.ink { background: var(--ink); color: var(--white); }
.btn.ink:hover { background: #2A2A2A; }
.btn.lg { min-height: 60px; padding: 0 34px; font-size: 20px; }
@media (max-width: 820px) { .offre-grid { grid-template-columns: 1fr; } }

/* Buttons, more visible — charte: paper fill on ink (ink fill on paper), 4 pt radius; the 60° cyan stroke
   of the hover state is kept visible at rest on the call-to-action buttons, and grows on hover. */
.btn { min-height: 52px; padding: 0 26px; font-size: 17px; }
.btn::after { height: 4px; transform: translateX(-101%) skewX(-30deg); }
.btn.cta::after, .beat .btn::after, .final .btn::after, .nav .btn::after, .offre .btn::after { transform: translateX(0) skewX(-30deg); height: 4px; }
.btn.cta:hover::after, .beat .btn:hover::after, .final .btn:hover::after, .nav .btn:hover::after, .offre .btn:hover::after { height: 7px; }
.nav .btn.sm { min-height: 42px; padding: 0 20px; font-size: 15.5px; }
.btn.lg { min-height: 62px; padding: 0 36px; font-size: 20px; }
.final .btn { min-height: 62px; padding: 0 36px; font-size: 20px; }
.beat .btn { min-height: 56px; padding: 0 30px; font-size: 18px; }

/* Exception validated by AG (2026-09-24): the « Essayer » calls to action are cyan-filled, ink text
   (ink on #12B8D6 = 7.96:1, AA). Hover: cyan-bright fill + the charte's 60° stroke in ink. */
.btn, .btn.ink { background: var(--cyan); color: var(--ink); }
.btn:hover, .btn.ink:hover { background: var(--cyan-bright); color: var(--ink); }
.btn::after { background: var(--ink); height: 3px; transform: translateX(-101%) skewX(-30deg); }
.btn.cta::after, .beat .btn::after, .final .btn::after, .nav .btn::after, .offre .btn::after { transform: translateX(-101%) skewX(-30deg); height: 3px; }
.btn:hover::after, .btn:focus-visible::after, .beat .btn:hover::after, .final .btn:hover::after, .nav .btn:hover::after, .offre .btn:hover::after { transform: translateX(0) skewX(-30deg); height: 3px; }
.btn:focus-visible { outline-color: var(--paper); }

/* 06 — the demo card, quieter: raised ink, hairline, one 2 px cyan rule drawn along its top; the colour is the button */
.offre-grid .demo { background: linear-gradient(180deg, #1B1E21 0%, #16181A 100%); color: var(--paper); border: 1px solid rgba(244, 247, 249, .16); }
.offre-grid .demo::before { display: none; }
.offre-grid .demo .band { height: 2px; background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan) 38%, rgba(18, 184, 214, 0) 100%); }
.offre-grid .demo .kicker { color: var(--cyan-bright); }
.offre-grid .demo .kicker::before { background: var(--slate-d); }
.demo-n span { color: var(--paper); font-weight: 500; }
.offre-grid .demo li { border-top-color: var(--line); color: var(--mute); }
.offre-grid .demo li b { color: var(--paper); font-weight: 500; }
.demo-note { color: var(--mute); }
/* one cyan moment per composition: the rule and the button carry it; the numeral stays paper */
.offre-grid .demo .kicker { color: var(--mute); }

/* 06 — the prices (15/10, FX « a) » on CP12) : the demo, then two plans with their price — the only place on the site that
   writes a price. Three columns on a wide screen ; the demo across the top on a tablet ; one column on a phone. */
.offre-grid.trois { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1279px) { .offre-grid.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } .offre-grid.trois .demo { grid-column: 1 / -1; } }
@media (max-width: 699px) { .offre-grid.trois { grid-template-columns: 1fr; } }
.offre-grid .plan { display: flex; flex-direction: column; gap: 16px; background: rgba(17, 17, 17, .88); border: 1px solid rgba(244, 247, 249, .1); }
.plan-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offre-grid .plan h3 { font-size: clamp(24px, 2.1vw, 32px); }
.plan-sous { margin: -6px 0 0; color: var(--mute); }
.plan-prix { display: flex; align-items: flex-end; margin: 6px 0 0; }
.plan-prix b { font: 600 clamp(56px, 4.6vw, 76px)/.86 var(--f-sans); letter-spacing: -.035em; color: var(--paper); }
.plan-prix .eur { font: 500 clamp(24px, 2vw, 32px)/1 var(--f-sans); color: var(--paper); margin-left: 4px; }
.plan-prix .per { font: 400 13px/1.35 var(--f-mono); color: var(--mute); letter-spacing: .01em; margin-left: 14px; }
.plan-an { margin: 0; font: 400 14px/1.45 var(--f-mono); color: var(--mute); letter-spacing: .01em; }
.plan-an b { color: var(--paper); font-weight: 500; }
.offre-grid .coches li { display: block; position: relative; padding: 11px 0 11px 28px; color: var(--paper); font-size: 16px; line-height: 1.45; }
.offre-grid .coches li::before { content: ""; position: absolute; left: 3px; top: 17px; width: 11px; height: 5px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); }
.offre-grid .coches.plus li:not(.tete) { color: var(--mute); }
.offre-grid .coches.plus li:not(.tete)::before { content: "+"; border: 0; transform: none; width: auto; height: auto; left: 2px; top: 9px; font: 600 18px/1 var(--f-sans); color: var(--cyan); }
.offre-grid .coches.plus li b { display: block; color: var(--paper); font-weight: 500; }
.plan-cta { margin-top: auto; padding-top: 8px; display: grid; gap: 12px; justify-items: start; }
.plan-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.plan-boutons .btn { padding: 0 22px; }
/* the Assistant's place for a button : « Bientôt ! », the button's size, not clickable (AG, 15/10) */
.btn.bientot-btn, .btn.bientot-btn:hover { background: transparent; color: var(--paper); border: 1px dashed var(--mute); cursor: default; font-size: 18px; letter-spacing: .01em; }
.offre .btn.bientot-btn::after { display: none; }
/* the same note's height under « Bientôt ! », unseen : the two cards' buttons stand on one line */
.plan-cta .reserve { visibility: hidden; }
@media (max-width: 699px) { .plan-cta .reserve { display: none; } }
.btn.ligne { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ligne:hover, .btn.ligne:focus-visible { background: var(--paper); color: var(--ink); }
.offre-pied { margin-top: clamp(16px, 2vw, 28px); padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3.4vw, 48px); background: rgba(17, 17, 17, .88); border: 1px solid rgba(244, 247, 249, .1); border-radius: 6px; }
.offre-remise { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; color: var(--paper); font-size: 17px; }
.offre-remise b { font: 600 clamp(24px, 2.2vw, 30px)/1 var(--f-sans); color: var(--cyan-bright); letter-spacing: -.01em; }
.offre-mentions { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mute); }
.offre-mentions a { color: var(--paper); }

/* The film (15/10, AG) — « Vidéo » in the menu, on a phone too ; the film opens over the page in a modal dialog. */
.nav nav a.nav-video { display: inline-flex; align-items: center; gap: 8px; }
.nav-video svg { width: 9px; height: 11px; fill: var(--cyan); }
@media (max-width: 820px) { .nav nav a.nav-video { display: inline-flex; color: var(--paper); padding: 14px 0; } .nav nav { gap: 20px; } }
html.video-ouverte, html.video-ouverte body { overflow: hidden; }
.video-lecteur { padding: 0; margin: 0; border: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: rgba(10, 10, 10, .96); color: var(--paper); overflow: hidden; }
.video-lecteur[open] { display: flex; align-items: center; justify-content: center; }
.video-lecteur::backdrop { background: rgba(10, 10, 10, .96); }
.video-lecteur video { display: block; width: min(calc(100vw - 2 * var(--gut)), calc((100vh - 150px) * 16 / 9)); width: min(calc(100vw - 2 * var(--gut)), calc((100dvh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; background: #000; border-radius: 4px; }
.video-fermer { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(var(--gut), env(safe-area-inset-right)); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(17, 17, 17, .85); color: var(--paper); cursor: pointer; transition: background-color .2s var(--ease); }
.video-fermer:hover { background: var(--ink-3); }
.video-fermer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }