/* Beogo : un site en pages plein écran.
   Deux familles, celles d'un atlas céleste du XIXᵉ siècle : Bodoni Moda (titres, contraste de gravure, déliés
   d'eau-forte) et Spectral (texte, menus et formulaires, une lecture de livre pensée pour l'écran).
   Les textes se posent directement sur les scènes, sans cadres : ce sont les scènes qui font le décor.
   Une seule transition partout : la page s'ouvre sur elle-même, à partir d'une ligne de lumière. */

@font-face { font-family: 'Bodoni Moda'; src: url('../fonts/bodoni-moda.woff') format('woff'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../fonts/bodoni-moda-italic.woff') format('woff'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-lightitalic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-medium.woff') format('woff'); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'GFS Baskerville'; src: url('../fonts/GFSBaskerville.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'GFS Porson'; src: url('../fonts/GFSPorson.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/cabinet-grotesk-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --night: #05060B;
  --ivory: #EEEAE2;
  --ash: rgba(238, 234, 226, .7);
  --faint: rgba(238, 234, 226, .46);
  --hair: rgba(238, 234, 226, .18);
  --warm: #E2CBA0;
  --paper: #ECE8DF;
  --graphite: #16171B;
  --graphite-2: #5A5B61;

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
  --sans: 'Spectral', Georgia, 'Times New Roman', serif;
  --logo: 'Cabinet Grotesk', var(--sans);

  /* échelle : 13 · 14,5 · 16 · 19 · 28 · 44 · 64 · 96 · 136 */
  --t-xs: 13px;
  --t-s: 14.5px;
  --t-m: 16px;
  --t-l: clamp(17px, 1.35vw, 19.5px);

  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --bar-h: 56px;
  --sub-h: 0px;
  --tab-h: 0px;
  --top: calc(var(--st) + var(--bar-h) + var(--sub-h));
  --bot: calc(var(--sb) + var(--tab-h));
  --ease: cubic-bezier(.16, .8, .24, 1);

  --fg: var(--ivory);
  --fg-2: var(--ash);
  --fg-3: var(--faint);
  --line: var(--hair);
  --ground: 5, 6, 11;
  color-scheme: dark;
}
html.has-sub { --sub-h: 40px; }
/* sur téléphone aussi, le menu reste en haut, à côté de beogo : plus de barre d'onglets en bas */
@media (max-width: 899px) { :root { --tab-h: 0px; } }
@media (min-width: 900px) { :root { --gl: max(56px, env(safe-area-inset-left, 0px)); --gr: max(56px, env(safe-area-inset-right, 0px)); --bar-h: 68px; } html.has-sub { --sub-h: 44px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--night); color: var(--fg);
  font: 400 var(--t-m)/1.6 var(--sans); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--ivory); color: var(--night); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* le titre : un serif de presse, maigre et étroit */
.display { font-family: var(--serif); font-weight: 300; letter-spacing: -.012em; line-height: .94; }

/* ---------- scènes ---------- */
.scene { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; opacity: 0; visibility: hidden; }
.scene--tunnel { background: #020309; }
.scene--storm { background: #0a1620; }
.scene--phoenix { background: #05060B; }

/* ---------- la couture : la page s'ouvre sur elle-même ---------- */
.seam { position: fixed; inset: 0; z-index: 56; pointer-events: none; }
.seam i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; opacity: 0; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(238, 234, 226, 0), rgba(238, 234, 226, .95) 30%, #fff 50%, rgba(238, 234, 226, .95) 70%, rgba(238, 234, 226, 0));
  box-shadow: 0 0 18px 1px rgba(238, 234, 226, .35); }

/* ---------- barre du haut ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 40px;
  height: calc(var(--st) + var(--bar-h)); padding: var(--st) var(--gr) 0 var(--gl);
  color: var(--fg);
}
.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--top) + 40px); pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--ground), .82) 0%, rgba(var(--ground), .55) 55%, rgba(var(--ground), 0) 100%); transition: background .6s; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font: 800 22px/1 var(--logo); letter-spacing: -.02em; text-decoration: none; color: inherit; }
.wordmark__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); display: inline-block; flex: none; }
.bar__nav { display: flex; gap: 30px; margin-left: auto; }
.bar__nav a { padding: 8px 0; text-decoration: none; color: var(--fg-2); font-size: var(--t-s); font-weight: 400; letter-spacing: .005em; position: relative; transition: color .3s; }
.bar__nav a:hover, .bar__nav a[aria-current="page"] { color: var(--fg); }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.bar__cta { text-decoration: none; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-s); font-weight: 450; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.bar__cta:hover { background: var(--fg); color: rgb(var(--ground)); border-color: var(--fg); }
.bar__cta-s { display: none; }
.bar__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; pointer-events: none; }
.bar__progress i { display: block; height: 100%; width: 100%; background: var(--fg-3); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
html.is-intro .bar__nav, html.is-intro .bar__cta, html.is-intro .bar__progress, html.is-intro .sub, html.is-intro .tabbar { opacity: 0; pointer-events: none; }
html.is-intro .bar::before { opacity: 0; }
.bar__nav, .bar__cta, .tabbar { transition: opacity .6s; }

/* sous-menu : les étapes de la page, en texte */
.sub { position: fixed; left: 0; right: 0; top: calc(var(--st) + var(--bar-h)); z-index: 59; height: var(--sub-h); display: flex; align-items: center; gap: 16px; padding-right: var(--gr); opacity: 0; pointer-events: none; transition: opacity .4s; }
html.has-sub .sub { opacity: 1; pointer-events: auto; }
.sub__row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 26px; height: 100%; padding: 0 0 0 var(--gl); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.sub__row::-webkit-scrollbar { display: none; }
.sub__chip { flex: none; position: relative; height: 100%; padding: 0; border: 0; background: none; color: var(--fg-3); cursor: pointer; white-space: nowrap; font: 400 var(--t-xs)/1 var(--sans); letter-spacing: .01em; transition: color .3s; }
.sub__chip:hover { color: var(--fg-2); }
.sub__chip[aria-current="true"] { color: var(--fg); }
.sub__chip[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; }
.sub__count { flex: none; font: 400 var(--t-xs)/1 var(--sans); color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* barre d'onglets du téléphone */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 62; display: none;
  height: calc(var(--sb) + var(--tab-h)); padding: 0 4px var(--sb);
  grid-template-columns: repeat(5, 1fr);
  background: rgba(var(--ground), .86); -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
  border-top: 1px solid var(--line);
}
@media (max-width: 899px) {
  .tabbar { display: none; }
  .bar { gap: 14px; }
  .bar__nav { display: flex; flex: 1; min-width: 0; margin-left: 4px; gap: 18px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 22px), transparent); padding: 0 18px 0 6px; }
  .bar__nav::-webkit-scrollbar { display: none; }
  .bar__nav a { flex: none; font-size: 13.5px; padding: 8px 0; }
  .bar__cta { display: none; }
  .wordmark { font-size: 20px; flex: none; }
}
.tabbar a { display: grid; place-items: center; align-content: center; gap: 4px; text-decoration: none; color: var(--fg-3); font: 400 10.5px/1 var(--sans); letter-spacing: .01em; position: relative; transition: color .3s; }
.tabbar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--fg); }

/* thèmes : seule la teinte de fond des barres change */
html[data-view="services"] { --ground: 2, 3, 9; }
html[data-view="modeles"] { --ground: 6, 14, 20; }
html[data-view="projets"] { --ground: 5, 6, 11; }
html[data-view="contact"] { --ground: 4, 3, 9; }
html { --wv: 143, 240, 201; --wv-hi: #DFFFF2; --wv-ground: 2, 12, 9; }
html[data-view="methode"] { --ground: var(--wv-ground); }
html.ct-croquis[data-view="contact"] { --ground: 236, 232, 223; --fg: var(--graphite); --fg-2: rgba(22, 23, 27, .72); --fg-3: rgba(22, 23, 27, .5); --line: rgba(22, 23, 27, .16); color-scheme: light; }
html.ct-croquis[data-view="contact"] .wordmark__dot { background: var(--graphite); }
html.ct-croquis[data-view="contact"] .bar__cta:hover { color: var(--paper); }

/* ---------- pièces communes ---------- */
.page { position: fixed; inset: 0; z-index: 10; overflow: hidden; }
.page--ciel { z-index: 12; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--fg); background: var(--fg); color: rgb(var(--ground)); font: 450 var(--t-s)/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.btn:hover { background: transparent; color: var(--fg); }
.btn--l { min-height: 54px; padding: 0 28px; font-size: var(--t-m); }
.textlink { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--fg); font: 400 var(--t-s)/1.3 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--line); transition: text-decoration-color .3s; }
.textlink:hover { text-decoration-color: currentColor; }
.pager { position: absolute; right: var(--gr); bottom: calc(var(--bot) + 40px); display: flex; gap: 10px; z-index: 3; }
.pgbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--fg); transition: background-color .3s, color .3s, border-color .3s, opacity .3s; }
.pgbtn:hover { background: var(--fg); color: rgb(var(--ground)); border-color: var(--fg); }
.pgbtn[disabled] { opacity: .3; pointer-events: none; }
@media (max-width: 899px) { .pager { display: none; } }

/* voile de démarrage */
.veil { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--night); color: var(--ivory); transition: opacity .9s ease, visibility .9s; }
.veil.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.veil .wordmark { font-size: 34px; animation: veilPulse 1.8s ease-in-out infinite alternate; }
@keyframes veilPulse { from { opacity: .4; } to { opacity: 1; } }

/* « page suivante » */
.nextsec {
  position: fixed; left: 50%; bottom: calc(var(--bot) + 16px); transform: translateX(-50%); z-index: 58;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 400 var(--t-xs)/1 var(--sans); color: var(--fg); border: 1px solid var(--line); background: rgba(var(--ground), .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .3s, color .3s;
}
.nextsec b { font-weight: 500; }
.nextsec:hover { background: var(--fg); color: rgb(var(--ground)); }
.nextsec svg { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
html.is-intro .nextsec { display: none; }

/* ============================================================ */
/* LE CIEL                                                       */
/* ============================================================ */
.page--ciel { display: grid; place-items: center; text-align: center; padding: calc(var(--st) + 80px) var(--gr) 150px var(--gl); }
.corner { position: absolute; margin: 0; color: rgba(255, 255, 255, .78); font: 400 var(--t-xs)/1 var(--sans); letter-spacing: .02em; z-index: 2; text-shadow: 0 1px 12px rgba(7, 10, 21, .5); }
.corner--tl { left: var(--gl); top: calc(var(--st) + var(--bar-h) + 12px); }
.corner--tr { right: var(--gr); top: calc(var(--st) + var(--bar-h) + 12px); }
@media (max-width: 899px) { .corner { display: none; } }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: min(40vh, 360px); pointer-events: none; will-change: transform; }
.skyline svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.ciel { position: relative; display: grid; justify-items: center; gap: 24px; will-change: transform, opacity; margin-top: -8vh; }
.ciel__kicker { margin: 0; font: 400 var(--t-s)/1 var(--sans); letter-spacing: .02em; color: #fff; text-shadow: 0 1px 14px rgba(20, 14, 40, .6); }
.ciel__title { margin: 0; font: 300 clamp(53.2px, 9.88vw, 159.6px)/.86 var(--serif); letter-spacing: -.015em; display: grid; justify-items: center; color: #fff; text-shadow: 0 2px 60px rgba(30, 18, 56, .35); }
.phrase { display: grid; justify-items: center; cursor: pointer; }
.phrase__line { display: block; overflow: hidden; padding: .06em .08em .1em; margin: -.06em -.08em -.1em; }
.phrase__line > span { position: relative; display: inline-block; will-change: transform; }
.phrase__line:nth-child(2) > span { font-style: italic; }
.phrase__strike { position: absolute; left: -4%; top: 52%; width: 108%; height: .1em; transform: translateY(-30%); overflow: visible; pointer-events: none; }
.phrase__strike path { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: clamp(2px, .35vw, 4px); vector-effect: non-scaling-stroke; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; }
.phrase__fix { display: block; text-decoration: none; font: italic 400 .52em/1 var(--serif); margin-top: .32em; padding: 0 .08em .06em; background: linear-gradient(92deg, #9CCBFF 0%, #4F8DFF 30%, #2F62FF 66%, #2440F0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px rgba(10, 20, 80, .35)) drop-shadow(0 4px 26px rgba(60, 120, 255, .6)); clip-path: inset(-25% 100% -35% 0); }
.ciel__lede { margin: 4px 0 0; max-width: 34ch; font-size: var(--t-l); line-height: 1.5; color: #fff; text-shadow: 0 1px 18px rgba(30, 18, 56, .75); }
.enter { position: absolute; left: 50%; bottom: calc(var(--sb) + 34px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; background: rgba(20, 14, 40, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; cursor: pointer; color: #fff; padding: 6px 22px 6px 6px; transition: background-color .3s, border-color .3s; z-index: 3; }
.enter:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.enter__ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1B1535; flex: none; position: relative; }
.enter__ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { from { transform: scale(.82); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.enter__label { font: 400 var(--t-s)/1 var(--sans); }
.welcome { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center; gap: 14px; pointer-events: none; opacity: 0; visibility: hidden; text-align: center; color: var(--ivory); }
.welcome__small { margin: 0; font: italic 300 clamp(19.8px, 2.34vw, 30.6px)/1 var(--serif); color: var(--warm); }
.welcome__big { margin: 0; display: flex; align-items: center; gap: .1em; font: 800 clamp(80px, 16vw, 250px)/.8 var(--logo); letter-spacing: -.05em; }
.welcome__big .wordmark__dot { width: .14em; height: .14em; }
html.no-sky .page--ciel { background: radial-gradient(120% 80% at 40% 82%, #ffb877 0%, #e0708f 28%, #6a3f86 52%, #1a1c4a 78%, #070A15 100%); }

/* ============================================================ */
/* SERVICES : le tunnel, le texte posé sur l'espace              */
/* ============================================================ */
.page--services { pointer-events: none; }
.page--services > * { pointer-events: auto; }
.page--services::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 65% at 0% 100%, rgba(2, 3, 9, .78), rgba(2, 3, 9, 0) 70%), linear-gradient(0deg, rgba(2, 3, 9, .55), rgba(2, 3, 9, 0) 38%); }
/* Le texte des services se lit sur un tunnel de particules et des médaillons dorés : un halo sombre, sans bord,
   suit le bloc ; les couleurs sont des ivoires chauds plutôt que des gris translucides, et la typographie oppose
   le Bodoni droit du nom, le Bodoni italique de la promesse et le Spectral plein du texte. */
/* pendant la lecture du volet « En savoir plus », l'espace s'assombrit derrière le texte */
.page--services::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .5s var(--ease);
  background: linear-gradient(90deg, rgba(2, 3, 9, .66) 0, rgba(2, 3, 9, .35) 42%, rgba(2, 3, 9, 0) 70%); }
.page--services.is-reading::after { opacity: 1; }
@media (max-width: 899px) { .page--services::after { background: linear-gradient(0deg, rgba(2, 3, 9, .8) 0, rgba(2, 3, 9, .55) 55%, rgba(2, 3, 9, .12)); } }
.sv { --sv-ink: #F6F0E4; --sv-body: #E6DFD1; --sv-soft: #CFC6B5; --sv-gold: #F2C98A; --sv-halo: 3, 4, 10;
  position: absolute; z-index: 2; left: var(--gl); bottom: calc(var(--bot) + 44px); width: min(600px, 44vw); display: grid; justify-items: start; isolation: isolate; }
.sv::before { content: ""; position: absolute; z-index: -1; inset: -16% -38% -12% -30%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--sv-halo), .84), rgba(var(--sv-halo), .64) 50%, rgba(var(--sv-halo), .2) 80%, rgba(var(--sv-halo), 0)); }
/* une seule ombre courte : les ombres larges, recalculées sur un fond animé, faisaient ramer le tunnel sur iPhone */
.sv { text-shadow: 0 1px 3px rgba(var(--sv-halo), .95); }
.sv__count { margin: 0 0 16px; font: italic 400 14px/1 var(--sans); color: var(--sv-soft); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.sv__name { margin: 0; font: 400 clamp(44px, 5vw, 84px)/.9 var(--serif); letter-spacing: -.015em; color: #fff; }
.sv__name .w { display: inline-block; white-space: nowrap; }
.sv__name .ch { display: inline-block; }
.sv__title { margin: 18px 0 0; max-width: 30ch; font: italic 400 clamp(21px, 1.7vw, 27px)/1.22 var(--serif); letter-spacing: -.005em; color: var(--sv-ink); text-wrap: balance; }
.sv__text { margin: 14px 0 0; max-width: 44ch; font: 400 16px/1.62 var(--sans); color: var(--sv-body); }
.sv.is-more > .sv__text { display: none; }
.sv__more { margin-top: 16px; }
.sv__more summary { cursor: pointer; list-style: none; display: inline-flex; gap: 10px; align-items: center; padding: 6px 0; font: 500 15px/1.2 var(--sans); color: var(--sv-gold); border-bottom: 1px solid rgba(242, 201, 138, .45); }
.sv__more summary:hover, .sv__more summary:focus-visible { color: #FFE2B4; border-bottom-color: #FFE2B4; outline: none; }
.sv__more summary::-webkit-details-marker { display: none; }
.sv__more summary::after { content: ""; width: 9px; height: 9px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; transition: transform .3s var(--ease); }
.sv__more details[open] summary::after { transform: rotate(45deg); }
.sv__close, .sv__more details[open] .sv__open { display: none; }
.sv__more details[open] .sv__close { display: inline; }
.sv__more details[open] summary { margin-bottom: 4px; }
.sv__panel { max-height: 32vh; overflow-y: auto; scrollbar-width: none; padding-right: 8px; }
.sv__panel::-webkit-scrollbar { display: none; }
.sv__more ul { list-style: none; margin: 0; padding: 0; display: grid; }
.sv__points { gap: 9px; margin: 12px 0 0 !important; max-width: 48ch; }
.sv__points li { position: relative; padding-left: 22px; font: 400 16px/1.5 var(--sans); color: var(--sv-ink); }
.sv__points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--sv-gold); }
.sv__exh { margin: 18px 0 8px; font: italic 400 17px/1.2 var(--serif); color: var(--sv-gold); }
.sv__examples { gap: 7px; max-width: 48ch; }
.sv__examples li { position: relative; padding-left: 22px; font: 400 14.5px/1.5 var(--sans); color: var(--sv-body); }
.sv__examples li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: var(--sv-soft); }
.sv__panel .sv__text { margin: 4px 0 0; }
.sv__links { display: grid; gap: 14px; margin-top: 22px; justify-items: start; }
.sv__feature { display: inline-grid; gap: 2px; padding: 2px 0 2px 16px; border-left: 2px solid var(--sv-gold); text-decoration: none; }
.sv__feature b { font: italic 400 22px/1.1 var(--serif); color: var(--sv-gold); }
.sv__feature span { font: 400 14px/1.35 var(--sans); color: var(--sv-body); }
.sv__feature:hover b, .sv__feature:focus-visible b { color: #FFE2B4; }
.sv__price { margin: 0; font: 400 clamp(20px, 1.8vw, 27px)/1 var(--serif); color: var(--sv-gold); }
.sv__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.sv__acts .btn { min-height: 42px; padding: 0 18px; font-size: 13.5px; }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn--ghost:hover { background: var(--fg); color: rgb(var(--ground)); border-color: var(--fg); }
.sv__ex { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.sv__ex a { font-size: 14px; color: var(--sv-body); text-decoration-color: rgba(230, 223, 209, .45); }
.chat { display: grid; gap: 7px; margin-top: 12px; max-width: 380px; }
.chat__msg { margin: 0; max-width: 86%; padding: 8px 12px; font-size: 13px; line-height: 1.4; border-radius: 14px; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.chat__msg--in { justify-self: end; background: rgba(238, 234, 226, .9); color: #0b0c10; border-bottom-right-radius: 4px; }
.chat__msg--out { justify-self: start; background: rgba(238, 234, 226, .1); border: 1px solid var(--hair); border-bottom-left-radius: 4px; }
.chat__msg.is-waiting { opacity: 0; transform: translateY(8px); }
.tunnel-note { position: absolute; right: var(--gr); top: calc(var(--top) + 16px); margin: 0; color: var(--fg-2); font-size: var(--t-xs); max-width: 30ch; text-align: right; }
@media (max-width: 899px) {
  .page--services::before { background: linear-gradient(0deg, rgba(2, 3, 9, .92) 0, rgba(2, 3, 9, .55) 32%, rgba(2, 3, 9, 0) 52%); }
  .sv { left: var(--gl); right: var(--gr); width: auto; bottom: calc(var(--bot) + 20px); }
  .sv::before { inset: -14% -20% -8% -20%; }
  .sv__count { margin-bottom: 10px; font-size: 13px; }
  .sv__name { font-size: clamp(38px, 11vw, 56px); }
  .sv__title { margin-top: 12px; font-size: 20px; }
  .sv__text { display: none; }
  .sv__panel .sv__text { display: block; font-size: 15px; }
  .sv__more { margin-top: 12px; }
  .sv__panel { max-height: 36vh; }
  .sv__points li { font-size: 15px; }
  .sv__examples li { font-size: 14px; }
  .sv__links { margin-top: 14px; gap: 10px; }
  .sv__ex { display: none; }
  .sv__acts .btn { min-height: 38px; padding: 0 14px; font-size: 12.5px; }
  html.has-nextsec .sv { bottom: calc(var(--bot) + 66px); }
}

/* ============================================================ */
/* MODÈLES : la tempête, puis les planches                       */
/* ============================================================ */
.page--modeles { color: var(--ivory); }
.page--modeles::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(4, 10, 15, .82) 0%, rgba(4, 10, 15, .35) 42%, rgba(4, 10, 15, 0) 65%); transition: background .8s; }
.page--modeles.is-plate::before { background: rgba(4, 10, 15, .8); }
.scene--space { background: #02030a; }
/* la bascule de thème, discrète en haut à droite */
/* le tableau de bord, posé sur la scène */
.storm__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.storm__video.is-ready { opacity: 1; }
.cat-open { position: absolute; left: var(--gl); right: var(--gr); bottom: calc(var(--bot) + 44px); max-width: 980px; display: grid; justify-items: start; }
.cat-open__kicker { margin: 0 0 20px; font: italic 300 clamp(15.3px, 1.35vw, 18.9px)/1.2 var(--serif); color: var(--ash); }
.cat-open__kicker span { color: var(--warm); margin-right: 4px; font-style: normal; }
.cat-open__title { margin: 0; max-width: 13ch; font: 300 clamp(44.08px, 6.54vw, 106.4px)/.86 var(--serif); letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.cat-open__intro { margin: 24px 0 0; max-width: 44ch; font-size: var(--t-l); line-height: 1.5; color: var(--fg-2); }
.cat-open__go { margin-top: 30px; display: inline-flex; align-items: center; gap: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; color: #fff; font: italic 300 clamp(19.8px, 1.8vw, 25.2px)/1 var(--serif); }
.cat-open__acts { display: flex; flex-wrap: wrap; gap: 4px 36px; align-items: center; }
.cat-open__go--alt { color: var(--warm); text-decoration: none; }
/* le bouton du nuancier, à l'accueil du catalogue */
.cat-open__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.style-pill { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none; color: #1A0B12; font: italic 400 19px/1 var(--serif); background: linear-gradient(100deg, #FFE066 0%, #FFB238 34%, #FF6A3D 68%, #FF4F8B 100%); box-shadow: 0 8px 34px rgba(255, 110, 60, .4); transition: transform .3s, box-shadow .3s; }
.style-pill:hover { transform: translateY(-2px); box-shadow: 0 12px 44px rgba(255, 110, 60, .6); }
/* l'onglet du nuancier, toujours visible en bas des planches (l'accueil a son bouton) */
.page--modeles:not(.is-plate) .style-tab { display: none; }
/* « Choisir le style » : une carte-spécimen. Le carré de gauche montre le même « Aa » changer de police et de
   palette en continu, comme le nuancier qu'il ouvre ; à droite, le titre et l'invitation, sobres */
.style-tab { position: absolute; left: var(--gl); bottom: calc(var(--bot) + 10px); z-index: 4; display: grid; grid-template-columns: 76px auto; align-items: center; gap: 16px; padding: 8px 22px 8px 8px; border-radius: 16px; text-decoration: none; color: var(--ivory); background: rgba(6, 12, 18, .78); border: 1px solid rgba(238, 234, 226, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s; }
.style-tab__spec { position: relative; width: 76px; height: 76px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; animation: spec-bg 9.6s steps(1) infinite; }
.style-tab__spec b { font-size: 38px; line-height: 1; animation: spec-font 9.6s steps(1) infinite; }
.style-tab__spec i { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 4px; border-radius: 2px; animation: spec-bar 9.6s steps(1) infinite; }
@keyframes spec-bg { 0% { background: #EDE6DA; color: #1E1A16; } 16.66% { background: #0E1A2B; color: #F4D35E; } 33.33% { background: #F7F3E8; color: #E63946; } 50% { background: #1B4332; color: #FEFAE0; } 66.66% { background: #FF5D8F; color: #1A0B12; } 83.33% { background: #111111; color: #FFFFFF; } }
@keyframes spec-font { 0% { font-family: var(--serif); font-style: italic; font-weight: 400; } 16.66% { font-family: Georgia, serif; font-style: normal; font-weight: 700; } 33.33% { font-family: 'Cabinet Grotesk', sans-serif; font-style: normal; font-weight: 800; } 50% { font-family: var(--sans); font-style: italic; font-weight: 300; } 66.66% { font-family: 'Courier New', monospace; font-style: normal; font-weight: 700; } 83.33% { font-family: var(--serif); font-style: normal; font-weight: 700; } }
@keyframes spec-bar { 0% { background: #8E4B32; } 16.66% { background: #F4D35E; } 33.33% { background: #2B59C3; } 50% { background: #95D5B2; } 66.66% { background: #1A0B12; } 83.33% { background: #FFB703; } }
.style-tab__t { display: grid; gap: 3px; }
.style-tab__t small { font: italic 400 12.5px/1.2 var(--sans); color: var(--ash); }
.style-tab__t b { font: 400 20px/1.05 var(--serif); letter-spacing: -.01em; }
.style-tab__t em { margin-top: 4px; font: 500 13px/1 var(--sans); font-style: normal; color: #FFC37A; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.style-tab:hover { transform: translateY(-3px); border-color: rgba(255, 195, 122, .5); }
@media (prefers-reduced-motion: reduce) { .style-tab__spec, .style-tab__spec b, .style-tab__spec i { animation: none; background: #EDE6DA; color: #1E1A16; } }
.style-tab:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
html[data-view="modeles"] .page--modeles .plate { padding-bottom: 76px; }
.cat-open__go i { width: 56px; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); }
.cat-open__go:hover i { transform: scaleX(1.6); }

.plate { position: absolute; inset: calc(var(--top) + 26px) 0 var(--bot) 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 28px; }
.plate__head { padding: 0 var(--gr) 0 var(--gl); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40ch); align-items: end; gap: 8px 48px; }
.plate__no { grid-column: 1 / -1; margin: 0; font: italic 300 16.2px/1 var(--serif); color: var(--fg-3); }
.plate__title { margin: 0; font: 300 clamp(30.4px, 3.8vw, 60.8px)/.9 var(--serif); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.plate__intro { margin: 0; font-size: var(--t-s); line-height: 1.6; color: var(--fg-2); }
.plate__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 28px; align-content: start; min-height: 0; overflow-y: auto; padding: 0 var(--gr) 40px var(--gl); scrollbar-width: none; }
.plate__cards::-webkit-scrollbar { display: none; }
.vcard { display: grid; gap: 14px; align-content: start; }
/* le tableau de tous les modèles */
.plate__cards.is-all { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 18px; }
.mtile { display: grid; gap: 4px; align-content: start; text-decoration: none; color: inherit; }
.mtile__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; background: #0b0d10; margin-bottom: 6px; }
.mtile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mtile:hover .mtile__media video { transform: scale(1.05); }
.mtile:focus-visible { outline: 2px solid var(--warm); outline-offset: 6px; }
.mtile__k { font-size: 11.5px; color: var(--warm); }
.mtile__n { font: 300 18.24px/1.05 var(--serif); color: #fff; }
.mtile__c { font-size: 12px; color: var(--fg-3); line-height: 1.35; }
.vcard__media { position: relative; display: block; aspect-ratio: 16 / 10; background: #0b0d10; overflow: hidden; border-radius: 3px; }
.vcard__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.vcard__media:hover video { transform: scale(1.03); }
.vcard__kind { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(5, 6, 11, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 400 12px/1 var(--sans); color: var(--ivory); }
.vcard__body { display: grid; gap: 6px; }
.vcard__name { margin: 0; font: 300 clamp(21.28px, 1.75vw, 27.36px)/1 var(--serif); color: #fff; }
.vcard__cat { margin: 0; order: -1; font-size: var(--t-xs); line-height: 1.35; color: var(--fg-3); }
.vcard__desc { margin: 2px 0 0; font-size: var(--t-xs); line-height: 1.55; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.sw { display: flex; gap: 5px; }
.sw i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.vcard__open { font-size: var(--t-xs); }

@media (max-width: 899px) {
  .page--modeles::before { background: linear-gradient(0deg, rgba(4, 10, 15, .9) 0%, rgba(4, 10, 15, .5) 40%, rgba(4, 10, 15, 0) 62%); }
  .cat-open { bottom: calc(var(--bot) + 24px); }
  .cat-open__title { font-size: clamp(46px, 13.4vw, 64px); }
  .cat-open__intro { font-size: var(--t-s); margin-top: 16px; }
  .cat-open__go { margin-top: 16px; font-size: 21px; }
  .cat-open__acts { gap: 10px 24px; }
  html.has-nextsec .cat-open { bottom: calc(var(--bot) + 70px); }
  .plate { inset: calc(var(--top) + 18px) 0 var(--bot) 0; gap: 18px; }
  .plate__head { grid-template-columns: minmax(0, 1fr); }
  .plate__title { font-size: clamp(34px, 10vw, 46px); }
  .plate__intro { display: none; }
  .plate__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82vw, 340px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--gl); gap: 18px; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
  .vcard { scroll-snap-align: start; }
  .plate__cards.is-all { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; gap: 20px 12px; }
  .mtile__n { font-size: 20px; }
  html.has-nextsec .plate { padding-bottom: 60px; }
  .style-tab { left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2 * var(--gl)); }
  .style-tab:hover { transform: translateX(-50%); }
  .style-tab { grid-template-columns: 54px auto; gap: 12px; padding: 6px 16px 6px 6px; }
  .style-tab__spec { width: 54px; height: 54px; }
  .style-tab__spec b { font-size: 26px; }
  .style-tab__t b { font-size: 16px; }
  .style-tab__t small { display: none; }
  html[data-view="modeles"] .page--modeles .plate { padding-bottom: 70px; }
  html[data-view="modeles"].has-nextsec .nextsec { bottom: calc(var(--bot) + 80px); }
  html[data-view="modeles"].has-nextsec .page--modeles .plate { padding-bottom: 128px; }
}

/* ============================================================ */
/* RÉALISATIONS : l'arbre généalogique, sans couleur             */
/* ============================================================ */
.page--projets { background: radial-gradient(80% 60% at 50% 0%, #11131a 0%, #07080c 60%, #05060B 100%); }
/* l'arbre gravé : une seule encre, ivoire sur la nuit */

.fiche-bg { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.fiche-bg img { width: 100%; height: 100%; object-fit: cover; }
.fiche-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 11, .96) 0%, rgba(5, 6, 11, .72) 40%, rgba(5, 6, 11, .45) 100%), linear-gradient(90deg, rgba(5, 6, 11, .7), rgba(5, 6, 11, 0) 70%); }
.fiche { position: absolute; left: var(--gl); bottom: calc(var(--bot) + 44px); width: min(620px, calc(100% - var(--gl) - var(--gr))); display: grid; justify-items: start; }
.fiche__meta { margin: 0 0 16px; font-size: var(--t-xs); color: var(--fg-2); }
.fiche__name { margin: 0; font: 300 clamp(48.64px, 6.38vw, 103.36px)/.86 var(--serif); letter-spacing: -.012em; color: #fff; }
.fiche__text { margin: 22px 0 0; max-width: 42ch; font-size: var(--t-l); line-height: 1.5; color: var(--fg-2); }
.fiche__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.fiche__url { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-3); }
@media (max-width: 899px) {
  .fiche { bottom: calc(var(--bot) + 22px); }
  .fiche__name { font-size: clamp(50px, 15vw, 72px); }
  .fiche__text { font-size: var(--t-s); margin-top: 14px; }
  .fiche__actions { margin-top: 20px; }
  .fiche__url { display: none; }
  html.has-nextsec .fiche { bottom: calc(var(--bot) + 68px); }
}

/* ============================================================ */
/* MÉTHODE, thème « Houle » : la mer de particules menthe          */
/* ============================================================ */
.scene--wave { background: radial-gradient(ellipse 90% 60% at 55% 34%, rgba(var(--wv), .17) 0%, rgba(var(--wv), .06) 42%, rgba(var(--wv), 0) 78%), rgb(var(--wv-ground)); transition: background .8s; }
.page--methode { color: var(--ivory); }
/* le chiffre de l'étape, immense, au trait : il fait partie du paysage */
.mw { position: absolute; left: var(--gl); bottom: calc(var(--bot) + 120px); width: min(600px, 46vw); }
.mw__s { position: relative; display: grid; gap: 14px; }
.mw__s[hidden] { display: none; }
.mw__num { position: absolute; left: -.06em; bottom: 100%; margin-bottom: .06em; font: 300 clamp(136.8px, 19.76vh, 228px)/.8 var(--serif); color: transparent; -webkit-text-stroke: 1.5px rgba(var(--wv), .7); background: linear-gradient(180deg, rgba(var(--wv), .16), rgba(var(--wv), 0) 80%); -webkit-background-clip: text; background-clip: text; text-shadow: none; pointer-events: none; }
.mw__s h3 { margin: 0; font: 300 clamp(33.44px, 3.65vw, 62.32px)/.92 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.mw__s > p { margin: 0; max-width: 42ch; font-size: var(--t-l); line-height: 1.55; color: rgba(238, 234, 226, .82); }
.mw__s > p.mw__give { font-size: var(--t-s); color: rgba(207, 233, 220, .8); border-top: 1px solid rgba(var(--wv), .22); padding-top: 14px; max-width: 48ch; }
.mw__give b { color: var(--wv-hi); font-weight: 500; }
/* le parcours : quatre stations sur une ligne, la vraie chronologie du projet */
.mw__route { position: absolute; left: var(--gl); right: var(--gr); bottom: calc(var(--bot) + 36px); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mw__route::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgba(var(--wv), .22); }
.mw__route button { position: relative; display: grid; gap: 4px; justify-items: start; padding: 22px 12px 0 0; border: 0; background: none; text-align: left; color: rgba(238, 234, 226, .5); cursor: pointer; transition: color .4s; }
.mw__route button::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(var(--wv), .5); background: rgb(var(--wv-ground)); transition: background .4s, box-shadow .4s; }
.mw__route button b { font: 300 19.8px/1 var(--serif); color: inherit; }
.mw__route button span { font-size: var(--t-xs); }
.mw__route button.is-done::before { background: rgba(var(--wv), .5); }
.mw__route button.is-on { color: var(--wv-hi); }
.mw__route button.is-on::before { background: var(--wv-hi); box-shadow: 0 0 0 6px rgba(var(--wv), .18), 0 0 18px rgb(var(--wv)); }
.mw__mark { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; display: flex; align-items: center; gap: 10px; font: italic 300 19.8px/1 var(--serif); color: var(--wv-hi); text-shadow: 0 0 18px rgba(var(--wv), .6); pointer-events: none; white-space: nowrap; transition: opacity .6s; }
.mw__mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--wv-hi); box-shadow: 0 0 0 5px rgba(var(--wv), .18), 0 0 16px rgb(var(--wv)); }
.mw__hint { position: absolute; right: var(--gr); top: calc(var(--top) + 96px); margin: 0; font: italic 300 17px/1.2 var(--serif); color: rgba(var(--wv), .75); }
.nums { margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.nums > div { display: grid; gap: 8px; align-content: start; border-top: 1px solid rgba(var(--wv), .25); padding-top: 14px; }
.nums dt { order: 2; color: rgba(238, 234, 226, .7); font-size: var(--t-xs); line-height: 1.45; max-width: 22ch; }
.nums dd { margin: 0; font: 300 clamp(45.6px, 4.86vw, 82.08px)/.85 var(--serif); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 4px; color: var(--wv-hi); text-shadow: 0 0 30px rgba(var(--wv), .35); }
.nums small { font-size: .45em; color: rgb(var(--wv)); }
/* la bascule Houle / Croquis */
@media (max-width: 899px) {
  .mw { left: var(--gl); right: var(--gr); width: auto; bottom: calc(var(--bot) + 92px); }
  .mw__num { font-size: 120px; }
  .mw__s { gap: 10px; }
  .mw__s h3 { font-size: clamp(34px, 10vw, 48px); }
  .mw__s > p { font-size: var(--t-s); }
  .mw__s > p.mw__give { font-size: 12.5px; padding-top: 10px; }
  .mw__route { bottom: calc(var(--bot) + 18px); }
  .mw__route button { padding: 18px 6px 0 0; }
  .mw__route button b { font-size: 16px; }
  .mw__route button span { display: none; }
  .mw__mark { font-size: 17px; }
  .mw__hint { display: none; }
  .nums dd { font-size: 60px; }
  html.has-nextsec .mw { bottom: calc(var(--bot) + 140px); }
  html.has-nextsec .mw__route { bottom: calc(var(--bot) + 66px); }
}

/* MÉTHODE, thème « Croquis » (l'ancien) : la page claire */
/* ============================================================ */
@media (max-width: 899px) {

}

/* ============================================================ */
/* CONTACT : la cage et le phénix                                */
/* ============================================================ */
.page--contact { display: grid; }
/* sur grand écran : le texte et le brief à gauche, la cage puis le phénix à droite */
.liberte { display: grid; align-content: center; gap: clamp(14px, 2.4vh, 28px); width: min(660px, 50vw); padding: calc(var(--top) + 24px) 0 calc(var(--bot) + 40px) var(--gl); pointer-events: none; }
.liberte > * { pointer-events: auto; }
.liberte__title { margin: 0; max-width: 16ch; font: 300 clamp(28.88px, 2.81vw, 48.64px)/.92 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.liberte__end { display: grid; gap: 22px; opacity: 0; }
.liberte__lede { margin: 0; max-width: 42ch; font-size: var(--t-s); line-height: 1.55; color: var(--ct-ash); }
/* le brief se remplit comme une phrase : c'est exactement le message qui part */
.page--contact { --ct-ivory: #EEEAE2; --ct-brass: #D9B46C; --ct-ash: #8C877E; --ct-ember: #FF6B3A; }
.brief { display: grid; gap: 8px; font: 400 clamp(15.5px, 1.18vw, 19px)/1.45 var(--serif); color: var(--ct-ivory); }
.brief__s { margin: 0; padding: 0; border: 0; min-width: 0; text-wrap: pretty; }
.brief__w { font: inherit; font-style: italic; color: var(--ct-brass); background: none; border: 0; border-bottom: 1px dashed rgba(217, 180, 108, .55); padding: 0 2px 1px; margin: 0; width: 11ch; max-width: 100%; border-radius: 0; transition: border-color .25s; }
.brief__w::placeholder { color: var(--ct-ash); opacity: 1; }
.brief__w:focus { outline: none; border-bottom: 1px solid var(--ct-brass); }
.brief__w:focus-visible { background: rgba(217, 180, 108, .08); }
.brief__need legend { float: left; padding: 0; margin-right: .28em; }
.brief__need label { position: relative; cursor: pointer; }
.brief__need input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.brief__need span { color: var(--ct-ash); font-style: italic; text-decoration: underline dotted rgba(140, 135, 126, .7) 1px; text-underline-offset: .22em; transition: color .25s, text-decoration-color .25s; }
.brief__need label:hover span { color: var(--ct-ivory); }
.brief__need input:checked + span { color: var(--ct-brass); text-decoration: underline solid var(--ct-brass) 1.5px; text-underline-offset: .22em; }
.brief__need input:focus-visible + span { outline: 1px solid var(--ct-brass); outline-offset: 3px; }
.brief__need i { font-style: normal; color: var(--ct-ash); }
.brief__sel { position: relative; display: inline-block; }
.brief__sel select { appearance: none; -webkit-appearance: none; font: inherit; font-style: italic; color: var(--ct-brass); background: none; border: 0; border-bottom: 1px dashed rgba(217, 180, 108, .55); padding: 0 1.05em 1px 2px; border-radius: 0; cursor: pointer; }
.brief__sel::after { content: ""; position: absolute; right: .2em; top: 50%; width: .32em; height: .32em; border-right: 1px solid var(--ct-brass); border-bottom: 1px solid var(--ct-brass); transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.brief__sel select:focus-visible { outline: 1px solid var(--ct-brass); outline-offset: 3px; }
.brief__sel option { background: #07060A; color: var(--ct-ivory); font-style: normal; }
.liberte__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 10px; font: 400 var(--t-m)/1 var(--sans); }
.brief__send { display: inline-flex; align-items: center; gap: 14px; border: 0; border-radius: 999px; padding: 17px 24px 17px 28px; background: var(--ct-ember); color: #1A0904; font: 600 var(--t-m)/1 var(--sans); cursor: pointer; box-shadow: 0 10px 40px -12px rgba(255, 107, 58, .8); transition: transform .25s, box-shadow .25s; }
.brief__send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.brief__send:hover { transform: translateY(-1px); box-shadow: 0 14px 44px -10px rgba(255, 107, 58, .95); }
.brief__send:hover svg { transform: translateX(3px); }
.brief__send:focus-visible { outline: 2px solid var(--ct-ivory); outline-offset: 3px; }
.brief__send--mail { background: transparent !important; color: #1C1D22 !important; border: 1.5px solid #1C1D22 !important; box-shadow: none !important; }
.brief__send--mail:hover { background: #1C1D22 !important; color: #ECE8DF !important; }
.liberte__info { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(238, 234, 226, .12); display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: var(--t-xs); color: var(--ct-ash); }
.liberte__info a { text-decoration: none; }
.liberte__info a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 5px; }
.replay { position: absolute; right: var(--gr); top: calc(var(--top) + 14px); z-index: 3; font-size: var(--t-xs); color: var(--fg-2); }
.credits { position: absolute; right: var(--gr); text-align: right; bottom: calc(var(--bot) + 8px); z-index: 3; max-width: min(640px, 70vw); color: var(--fg-3); font-size: 12px; }
.credits summary { cursor: pointer; padding: 8px 0; list-style: none; }
.credits p { margin: 6px 0 0; background: rgba(5, 6, 11, .92); padding: 12px 14px; border-radius: 4px; line-height: 1.5; }
@media (max-width: 899px) {
  .credits { display: none; }
  /* sur téléphone : le titre en haut, la cage au milieu, puis le brief monte du bas une fois le phénix formé */
  .liberte { width: auto; align-content: space-between; padding: calc(var(--top) + 18px) var(--gr) 0 var(--gl); height: 100%; box-sizing: border-box; }
  .liberte__title { max-width: 14ch; font-size: clamp(38px, 10.6vw, 52px); text-align: center; justify-self: center; text-shadow: 0 2px 24px rgba(4, 3, 9, .9); }
  .liberte__end { margin: 0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl)); padding: 22px var(--gr) calc(var(--bot) + 22px) var(--gl); gap: 16px; max-height: 64svh; overflow-y: auto; background: linear-gradient(180deg, rgba(5, 6, 11, 0) 0, rgba(5, 6, 11, .88) 64px, rgba(5, 6, 11, .96) 100%); }
  .liberte__lede { font-size: 13.5px; }
  .brief { gap: 10px; font-size: clamp(20px, 5.6vw, 24px); }
  .brief__send { flex: 1 1 100%; justify-content: center; }
  .liberte__info { gap: 4px 16px; }
}

/* ---------- le navire fantôme, au loin sur l'horizon (Modèles) ---------- */
.ship { position: absolute; left: 0; top: var(--hy, 52%); width: clamp(86px, 8.5vw, 150px); transform: translate(var(--sx, 78vw), -88%); z-index: 1; pointer-events: none; animation: sail 140s linear infinite; }
.ship__bob { position: relative; transform-origin: 50% 90%; animation: shipbob 7s ease-in-out infinite; }
.ship__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ship__svg:first-child { opacity: .6; filter: blur(.5px) drop-shadow(0 0 10px rgba(200, 222, 230, .35)); animation: ghost 6s ease-in-out infinite; }
.ship__sails path { fill: rgba(214, 226, 230, .55); stroke: rgba(230, 240, 242, .5); stroke-width: .6; }
.ship__masts { stroke: rgba(170, 190, 196, .7); }
.ship__rig { stroke: rgba(190, 208, 214, .38); }
.ship__hull { fill: rgba(12, 22, 28, .85); stroke: rgba(190, 210, 215, .35); stroke-width: .8; }
.ship__line { fill: none; stroke: rgba(200, 220, 225, .3); stroke-width: .8; }
.ship__ghost { display: none; }
.ship::after { content: ""; position: absolute; left: 6%; right: 6%; top: 92%; height: 60%; background: linear-gradient(180deg, rgba(200, 222, 230, .14), rgba(200, 222, 230, 0)); filter: blur(3px); transform: scaleY(-1) skewX(-8deg); }
@keyframes sail { from { transform: translate(84vw, -88%); } to { transform: translate(-12vw, -88%); } }
@keyframes shipbob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-2px) rotate(1.4deg); } }
@keyframes ghost { 0%, 100% { opacity: .62; } 45% { opacity: .38; } 60% { opacity: .55; } }
html[data-view]:not([data-view="modeles"]) .ship, html[data-view]:not([data-view="modeles"]) .ship__bob, html[data-view]:not([data-view="modeles"]) .ship__svg { animation-play-state: paused; }
.page--modeles.no-storm { background: radial-gradient(60% 40% at 66% 30%, rgba(255, 190, 110, .35), transparent 70%), linear-gradient(180deg, #0b1a22 0%, #0a1822 48%, #071016 100%); }
.page--modeles.has-video .ship { display: none; }
@media (max-width: 899px) { .ship { width: clamp(62px, 17vw, 90px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* la palette de la mer : six pastilles sous la bascule de thème */
.mw-sea { position: absolute; z-index: 5; right: var(--gr); top: calc(var(--top) + 40px); display: flex; gap: 8px; padding: 6px; border-radius: 999px; border: 1px solid rgba(var(--wv), .3); background: rgba(var(--wv-ground), .55); }
.mw-sea button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); transition: transform .25s, box-shadow .25s; }
.mw-sea button:hover { transform: scale(1.12); }
.mw-sea button[aria-pressed="true"] { box-shadow: 0 0 0 2px rgb(var(--wv-ground)), 0 0 0 3.5px var(--c), 0 0 14px var(--c); }
.mw-sea button:focus-visible { outline: 2px solid var(--wv-hi); outline-offset: 3px; }
.page--methode .mw__hint { top: calc(var(--top) + 92px); }
@media (max-width: 899px) { .mw-sea { top: calc(var(--top) + 34px); gap: 7px; } .mw-sea button { width: 20px; height: 20px; } }


/* ---------- Réalisations, deuxième planche : la Terre ---------- */
.gl { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 70% 50%, #04070F 0%, #020309 70%); }
.gl__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.gl__canvas:active { cursor: grabbing; }
.gl__txt { position: absolute; left: var(--gl); bottom: calc(var(--bot) + 64px); width: min(430px, 34vw); display: grid; gap: 16px; pointer-events: none; }
.gl__title { margin: 0; font: 300 clamp(27.36px, 2.74vw, 45.6px)/.95 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.gl__lede { margin: 0; max-width: 40ch; font-size: var(--t-s); line-height: 1.55; color: var(--fg-2); }
.gl__pins { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 899px) {
  .gl__txt { left: var(--gl); right: var(--gr); width: auto; bottom: calc(var(--bot) + 70px); }
  .gl__title { font-size: clamp(30px, 8.4vw, 40px); }
}

/* ---------- Contact, thème Croquis : le papier, le graphite, le phénix au crayon ---------- */
.ct-sketch { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.ct-sw { position: absolute; z-index: 5; right: var(--gr); top: calc(var(--top) + 46px); display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(238, 234, 226, .24); background: rgba(4, 3, 9, .5); }
.ct-sw button { border: 0; background: none; color: rgba(238, 234, 226, .75); font: 400 var(--t-xs)/1 var(--sans); padding: 8px 13px; border-radius: 999px; cursor: pointer; }
.ct-sw button[aria-pressed="true"] { background: var(--ivory); color: #07060A; }
.ct-sw button:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
.page--contact.is-croquis { background-color: #ECE8DF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--graphite); }
.page--contact.is-croquis .ct-sketch { display: block; }
.page--contact.is-croquis .ct-sw { border-color: rgba(22, 23, 27, .2); background: rgba(236, 232, 223, .85); }
.page--contact.is-croquis .ct-sw button { color: rgba(22, 23, 27, .7); }
.page--contact.is-croquis .ct-sw button[aria-pressed="true"] { background: var(--graphite); color: #ECE8DF; }
.page--contact.is-croquis { --ct-ivory: #1C1D22; --ct-brass: #1C1D22; --ct-ash: #7A766E; --ct-ember: #1C1D22; }
.page--contact.is-croquis .liberte__title { color: #1C1D22; text-shadow: none; }
.page--contact.is-croquis .brief__w, .page--contact.is-croquis .brief__sel select { border-bottom-color: rgba(28, 29, 34, .45); }
.page--contact.is-croquis .brief__need input:checked + span { text-decoration-color: #1C1D22; text-decoration-thickness: 2px; }
.page--contact.is-croquis .brief__send { color: #ECE8DF; box-shadow: 4px 4px 0 rgba(28, 29, 34, .18); border-radius: 3px; }
.page--contact.is-croquis .brief__sel option { background: #ECE8DF; color: #1C1D22; }
.page--contact.is-croquis .liberte__info { border-top-color: rgba(28, 29, 34, .14); }
.page--contact.is-croquis .liberte__info a { color: #4A4A50; }
.page--contact.is-croquis .replay, .page--contact.is-croquis .credits { color: rgba(28, 29, 34, .6); }
@media (max-width: 899px) {
  .ct-sw { top: calc(var(--top) + 6px); right: var(--gr); }
  .page--contact .replay { top: calc(var(--top) + 52px); }
  .page--contact .liberte { padding-top: calc(var(--top) + 64px); }
  .page--contact.is-croquis .liberte__end { background: linear-gradient(180deg, rgba(236, 232, 223, 0) 0, rgba(236, 232, 223, .9) 64px, rgba(236, 232, 223, .97) 100%); }
}

@media (max-width: 899px) {
}

/* Contact : le phénix occupe la scène, le texte se pose plus bas et plus petit */
.page--contact .liberte { align-content: end; gap: 12px; width: min(560px, 44vw); padding-bottom: calc(var(--bot) + 28px); }
.page--contact .liberte__title { font-size: clamp(30px, 2.8vw, 46px); }
.page--contact .liberte__lede { font-size: 13.5px; }
.page--contact .liberte__end { gap: 14px; }
.page--contact .brief__send { padding: 14px 20px 14px 22px; font-size: 15px; }
.page--contact .liberte__acts { gap: 10px; }
@media (max-width: 899px) {
  .page--contact .liberte { display: block; height: 100%; overflow-y: auto; padding: calc(var(--top) + 26px) var(--gr) calc(var(--bot) + 30px) var(--gl); width: auto; }
  .page--contact .liberte__title { font-size: clamp(28px, 8vw, 36px); text-align: left; justify-self: start; }
  .page--contact .liberte__end, .page--contact.is-croquis .liberte__end { margin: 50svh 0 0; padding: 18px 0 0; max-height: none; overflow: visible; background: #ECE8DF; box-shadow: 0 -30px 30px #ECE8DF; }
  .page--contact .brief { font-size: 17px; }
  .page--contact .brief__send { flex: 1 1 100%; justify-content: center; }
  .page--contact .replay { top: calc(var(--top) + 6px); }
}

.gl__zoom { position: absolute; z-index: 3; right: var(--gr); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.gl__zoom button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(238, 234, 226, .3); background: rgba(4, 6, 14, .6); color: var(--ivory); font: 400 22px/1 var(--serif); cursor: pointer; }
.gl__zoom button:hover { border-color: #FFC37A; }
@media (max-width: 899px) { .gl__zoom { top: auto; bottom: calc(var(--bot) + 190px); transform: none; } }

/* les villes, et les météorites des réalisations : une pastille ronde (la capture du site, cerclée de braise),
   le nom en Bodoni, le métier et la ville en Spectral ; un fil de lumière la relie à sa pierre */
.gl-pin { position: absolute; left: 0; top: 0; margin: 0; padding-left: 10px; pointer-events: none; white-space: nowrap; }
.gl-pin b { font: italic 400 14px/1 var(--serif); color: #FFE2B6; text-shadow: 0 1px 10px #000; }
.gl-rock { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; border: 0; background: none; color: var(--ivory); cursor: pointer; text-align: left; transform-origin: 0 0; }
.gl-rock::before { content: ""; position: absolute; left: -2px; top: 50%; width: 18px; height: 1px; background: linear-gradient(90deg, rgba(255, 150, 70, 0), rgba(255, 170, 90, .9)); transform: translate(-100%, -50%); }
.gl-rock { translate: 22px -50%; }
.gl-rock__img { flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, #FF6A1F, #FFC46B, #FF6A1F 60%, rgba(255, 106, 31, .2)); box-shadow: 0 0 16px rgba(255, 120, 40, .45); }
.gl-rock__img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 2px solid #05060B; }
.gl-rock__t { display: grid; gap: 3px; padding: 4px 10px 5px 0; }
.gl-rock__t b { font: italic 400 18px/1 var(--serif); letter-spacing: -.005em; text-shadow: 0 1px 12px #000; }
.gl-rock__t small { font: 400 11.5px/1.2 var(--sans); color: var(--ash); text-shadow: 0 1px 8px #000; white-space: nowrap; }
.gl-rock__t small i { font-style: italic; color: #FFC37A; margin-left: 6px; }
.gl-rock:hover .gl-rock__img, .gl-rock:focus-visible .gl-rock__img { box-shadow: 0 0 0 3px rgba(255, 195, 122, .35), 0 0 24px rgba(255, 120, 40, .7); }
.gl-rock:focus-visible { outline: none; }
@media (max-width: 899px) {
  .gl-rock__img { width: 30px; height: 30px; }
  .gl-rock__t b { font-size: 14px; }
  .gl-rock__t small { display: none; }
  .gl-pin b { font-size: 12px; }
}

/* la Lune : son intitulé, à sa gauche (quand le film sera prêt) */
.gl-moon { position: absolute; left: 0; top: 0; translate: -100% -50%; padding: 6px 0; border: 0; background: none; color: var(--ivory); cursor: pointer; text-align: right; }
.gl-moon__t { display: grid; gap: 6px; justify-items: end; }
.gl-moon__t b { font: italic 400 21px/1.05 var(--serif); max-width: 13ch; text-shadow: 0 1px 14px #000; }
.gl-moon__t small { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1 var(--sans); color: var(--ash); text-shadow: 0 1px 8px #000; }
.gl-moon__t small i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(238, 234, 226, .45); }
.gl-moon__t small svg { width: 10px; height: 10px; fill: currentColor; margin-left: 1px; }
.gl-moon:hover small i, .gl-moon:focus-visible small i { background: var(--ivory); color: #05060B; border-color: var(--ivory); }
.gl-moon:focus-visible { outline: 1px solid #FFC37A; outline-offset: 4px; }
@media (max-width: 899px) { .gl-moon__t b { font-size: 16px; max-width: 11ch; } .gl-moon__t small { font-size: 11px; } }

/* Contact : le titre, le phénix qui s'enflamme, et deux boutons ; plus aucun texte */
.page--contact .liberte { align-content: space-between; height: 100%; box-sizing: border-box; padding-top: calc(var(--top) + 30px); }
.page--contact .liberte__end { align-self: end; }
@media (max-width: 899px) {
  .page--contact .liberte { display: grid; overflow: hidden; }
  .page--contact .liberte__end, .page--contact.is-croquis .liberte__end { margin: 0; padding: 0; background: none; box-shadow: none; }
}