/* Vasla Studio — thème d « Affiche » (21/10/2026).
   Chaque script est une jaquette de jeu tirée d'une capture ; l'accueil est un écran de chargement (vidéo plein cadre,
   astuce qui change). Bitume pour le jeu, papier d'affiche pour le catalogue, calque bleu pour les plans des MLO.
   Interdits (REFONTE_PISTES_2026-10-21.md) : mot surligné, mots qui montent, taches floues, étiquettes en capitales
   espacées, cartes jumelles arrondies à halo, pilules en verre, listes à coches, inclinaison, aimant, verre dépoli.
   Mouvement : trois choses seulement (astuce en fondu, jaquette qui s'anime au survol, plan qui se trace) ; en
   animations réduites tout reste visible et vivant (fondus, vidéos), seuls les déplacements et le tracé partent. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --bitume: #14161b; --bitume2: #1b1e25; --bitume3: #2a2e37;
  --papier: #ece3cf; --papier2: #e2d6bb; --calque: #f3eee2;
  --encre: #17181c; --encre2: #4b473f;
  --clair: #f1ebdd; --gris: #aaa597;
  --sodium: #ff7a1a; --sodium-fonce: #b34a00; --rouge: #d9262c; --plan: #1f4e9c;
  --titre: "Anton", "Impact", "Arial Narrow", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --doux: cubic-bezier(.2, .7, .2, 1);
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bitume); }
body { margin: 0; background: var(--bitume); color: var(--clair); font: 400 17px/1.6 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .45em; font-weight: 400; line-height: .98; }
h1, h2 { font-family: var(--titre); text-transform: uppercase; letter-spacing: .005em; }
h1 { font-size: clamp(3rem, 7.4vw, 6.6rem); }
h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h3 { font: 700 1.3rem/1.15 var(--cond); text-transform: uppercase; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--sodium); outline-offset: 3px; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--sodium); color: var(--bitume); padding: 10px 14px; z-index: 100; font: 700 1rem var(--cond); }
.skip:focus { left: 8px; }
.eyebrow, .progress { display: none; }
.muted { color: var(--encre2); }
code { font: 600 .95em/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---------------------------------------------------------------- boutons : rectangles d'affiche, pas de pilules */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border: 2px solid var(--sodium); border-radius: 2px;
  background: var(--sodium); color: var(--bitume); cursor: pointer; text-decoration: none;
  font: 700 1.12rem/1 var(--cond); text-transform: uppercase; letter-spacing: .02em;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: #ff9447; border-color: #ff9447; }
.btn.ghost { background: transparent; color: var(--clair); border-color: var(--clair); }
.btn.ghost:hover { background: var(--clair); color: var(--bitume); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn .lbl { display: inline-flex; align-items: center; gap: 10px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.busy { cursor: progress; pointer-events: none; opacity: .85; }
.btn.busy svg:not(.fl) { animation: tourne .8s linear infinite; }
@keyframes tourne { to { rotate: 360deg; } }
@keyframes fondu { from { opacity: 0; } }

/* ---------------------------------------------------------------- bandeau langue */
.langbar { display: none; background: var(--sodium); color: var(--bitume); font: 600 1rem var(--cond); }
.langbar.on { display: block; }
.langbar .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; }
.langbar a { text-decoration: underline; }
.langbar button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.3rem; line-height: 1; min-width: 40px; min-height: 40px; }

/* ---------------------------------------------------------------- en-tête */
.top { position: sticky; top: 0; z-index: 40; background: var(--bitume); border-bottom: 1px solid var(--bitume3); view-transition-name: entete; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 66px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 28px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { color: var(--gris); font: 600 1.08rem/1 var(--cond); text-transform: uppercase; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--clair); }
.lang { display: inline-flex; gap: 4px; font: 600 1.02rem/1 var(--cond); color: var(--gris); }
.lang a, .lang span { padding: 6px 4px; }
.lang span { color: var(--clair); text-decoration: underline; text-decoration-color: var(--sodium); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lang a + span::before, .lang span + a::before { content: "/"; margin-right: 8px; color: var(--bitume3); }
.nav .btn, .nav .btn:hover { color: var(--bitume); min-height: 42px; padding: 0 16px; font-size: 1rem; }
.burger { display: none; margin-left: auto; background: none; border: 2px solid var(--bitume3); color: var(--clair); width: 46px; height: 42px; border-radius: 2px; cursor: pointer; }
.burger svg { width: 22px; height: 22px; margin: auto; }
.cartbtn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 2px solid var(--bitume3); border-radius: 2px; background: transparent; color: var(--clair); cursor: pointer; }
.cartbtn:hover { border-color: var(--clair); }
.cartbtn svg { width: 20px; height: 20px; }
.cartbtn[hidden], .btn.addcart[hidden], .cartbtn.mobile { display: none; }
.cartbtn .n { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--sodium); color: var(--bitume); font: 700 .78rem/20px var(--cond); text-align: center; }

/* ---------------------------------------------------------------- accueil : écran de chargement */
.ecran { position: relative; isolation: isolate; min-height: clamp(560px, calc(100svh - 66px), 880px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: #000 }
.ecran video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* voile de lecture : sombre en bas et à gauche, là où est le texte ; l'image reste nette ailleurs */
.ecran::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 11, 14, .78) 0%, rgba(10, 11, 14, .35) 46%, rgba(10, 11, 14, 0) 70%), linear-gradient(0deg, rgba(10, 11, 14, .92) 0%, rgba(10, 11, 14, 0) 42%); }
.ecran-txt { align-self: end; padding: 64px 0 36px; }
.ecran h1 { color: var(--clair); max-width: 13ch; font-size: clamp(2.8rem, 6.2vw, 5.6rem); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.ecran .sub { max-width: 46ch; font-size: 1.16rem; line-height: 1.55; color: #ddd6c6; margin-bottom: 28px; }
.astuce { background: rgba(10, 11, 14, .9); border-top: 1px solid rgba(255, 255, 255, .08); }
.astuce .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.astuce p { margin: 0; flex: 1; min-width: 0; font: 500 1.12rem/1.35 var(--cond); color: var(--clair); }
.astuce b { color: var(--sodium); font-weight: 700; margin-right: 6px; }
.astuce a.tip { color: var(--clair); text-decoration: none; transition: opacity .38s; }
.astuce a.tip:hover { text-decoration: underline; text-decoration-color: var(--sodium); }
.astuce a.tip.out { opacity: 0; }
.vtoggle { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .28); border-radius: 2px; background: transparent; color: var(--clair); cursor: pointer; }
.vtoggle:hover, .vtoggle:focus-visible { border-color: var(--clair); }
.vtoggle svg { width: 16px; height: 16px; }
.vtoggle .i-play, .vtoggle.paused .i-pause { display: none; }
.vtoggle.paused .i-play { display: block; }

/* ---------------------------------------------------------------- sections */
.sect { padding: 96px 0; position: relative; }
.papier { background: var(--papier); color: var(--encre); color-scheme: light; }
.papier2 { background: var(--papier2); color: var(--encre); color-scheme: light; }
.papier h2, .papier2 h2 { color: var(--encre); }
.papier a, .papier2 a { color: var(--encre); }

/* ---------------------------------------------------------------- le fil vertical : 12 s par script, une vidéo joue à la fois */
.fil { background: var(--bitume); padding: 56px 0 64px; }
.fil-tete { display: flex; align-items: end; gap: 12px 28px; flex-wrap: wrap; margin-bottom: 22px; }
.fil-tete h2 { margin: 0; color: var(--clair); font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.fil-tete p { margin: 0 0 6px; font: 600 1.15rem/1.2 var(--cond); text-transform: uppercase; color: var(--sodium); }
.fil-nav { margin-left: auto; display: flex; gap: 8px; }
.fil-nav button { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--clair); border: 2px solid var(--bitume3); border-radius: 2px; cursor: pointer; }
.fil-nav button:hover { border-color: var(--clair); }
.fil-nav svg { width: 20px; height: 20px; }
.clips { list-style: none; margin: 0; padding: 0 max(16px, calc((100% - 1240px) / 2)); display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 72vw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, calc((100% - 1240px) / 2)); scrollbar-width: none; overscroll-behavior-x: contain; }
.clips::-webkit-scrollbar { display: none; }
.clip { position: relative; aspect-ratio: 9 / 16; background: #000; scroll-snap-align: start; overflow: hidden; outline: 2px solid transparent; transition: outline-color .2s; }
.clip.joue { outline-color: var(--t, var(--sodium)); }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.son { position: absolute; top: 10px; right: 10px; z-index: 2; min-height: 36px; padding: 0 12px; background: rgba(10, 11, 14, .78); color: var(--clair); border: 2px solid rgba(255, 255, 255, .25); border-radius: 2px; font: 700 .95rem/1 var(--cond); text-transform: uppercase; cursor: pointer; }
.son[aria-pressed="true"] { background: var(--sodium); color: var(--bitume); border-color: var(--sodium); }
.clip-bas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 10px; padding: 48px 12px 12px; background: linear-gradient(0deg, rgba(10, 11, 14, .92), rgba(10, 11, 14, 0)); }
.clip-bas b { font: 400 1.7rem/.95 var(--titre); text-transform: uppercase; color: var(--t, var(--clair)); }
.clip-bas .pr { font: 400 1.3rem/1 var(--titre); color: var(--clair); }
.clip-bas .btn { grid-column: 1 / -1; min-height: 42px; font-size: 1rem; }

/* ---------------------------------------------------------------- le mur d'affiches */
.tete-mur { display: grid; grid-template-columns: auto 1fr; gap: 12px 48px; align-items: end; margin-bottom: 44px; border-bottom: 3px solid var(--encre); padding-bottom: 18px; }
.tete-mur h2 { margin: 0; font-size: clamp(3.4rem, 9vw, 7.5rem); line-height: .82; }
.tete-mur p { margin: 0; max-width: 44ch; justify-self: end; font: 500 1.15rem/1.4 var(--cond); color: var(--encre2); }
.mur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 26px; align-items: start; }
.affiche { position: relative; container-type: inline-size; }
.affiche.grande { grid-column: span 6; }
.affiche.petite { grid-column: span 3; }
.mur .affiche.grande:nth-child(2) { margin-top: 72px; }
.mur .affiche.petite:nth-child(odd) { margin-top: 36px; }
.jaq { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bitume); box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 18px 32px -18px rgba(20, 14, 4, .55); }
.jaq .media { position: absolute; inset: 0; }
.jaq .media img, .jaq .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jaq .media video.apercu { opacity: 0; transition: opacity .45s; }
.jaq .media.vid video.apercu { opacity: 1; }
/* le titre en logotype, posé sur le bas assombri de l'image (assombri dans l'image elle-même, pas en CSS) */
.affiche .titre { position: absolute; left: 7cqi; right: 7cqi; bottom: 6cqi; z-index: 2; margin: 0; font: 400 clamp(1.7rem, 15cqi, 5.4rem)/.9 var(--titre); text-transform: uppercase; letter-spacing: .005em; color: var(--t, var(--clair)); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.affiche .titre a { color: inherit; text-decoration: none; }
.affiche .titre a::after { content: ""; position: absolute; inset: -1000px; z-index: 3; }

.affiche:focus-within { outline: 3px solid var(--sodium); outline-offset: 4px; }
.affiche .titre a:focus-visible { outline: none; }
.tampon { position: absolute; top: 6cqi; right: 6cqi; z-index: 2; padding: .2em .45em .12em; border: 3px solid var(--rouge); color: #ff4b46; background: rgba(10, 11, 14, .55); font: 400 clamp(1rem, 6.5cqi, 1.9rem)/1 var(--titre); text-transform: uppercase; rotate: -7deg; }
.bande { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 10px 2px 0; border-top: 0; font: 600 1.02rem/1.2 var(--cond); text-transform: uppercase; color: var(--encre2); }
.bande b { font: 400 1.5rem/1 var(--titre); color: var(--encre); }
.affiche .ligne { margin: 6px 2px 0; font-size: .98rem; line-height: 1.45; color: var(--encre); }
.affiche.petite .ligne { font-size: .92rem; }

/* ---------------------------------------------------------------- essai en jeu */
.essai { background: var(--bitume2); }
.essai-g { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.essai h2 { color: var(--clair); max-width: 12ch; }
.essai p { max-width: 54ch; color: #d6cfbf; }
.plaque { margin: 0; padding: 28px; border: 2px solid var(--bitume3); background: var(--bitume); display: grid; gap: 10px; }
.plaque span { font: 500 1.05rem/1.3 var(--cond); color: var(--gris); }
.plaque code { font-size: clamp(1.05rem, 2.2vw, 1.45rem); color: var(--sodium); user-select: all; word-break: break-all; }

/* ---------------------------------------------------------------- questions */
.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.faq-grid h2 { max-width: 10ch; }
.mail { font: 700 1.08rem var(--cond); text-decoration: underline; text-decoration-color: var(--sodium-fonce); text-underline-offset: 4px; }
.faq { border-top: 3px solid var(--encre); }
.faq details { border-bottom: 1px solid rgba(23, 24, 28, .25); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; font: 700 1.22rem/1.3 var(--cond); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--titre); color: var(--sodium-fonce); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; max-width: 62ch; color: var(--encre2); }
.faq details::details-content { opacity: 0; transition: opacity .3s, content-visibility .3s allow-discrete; }
.faq details[open]::details-content { opacity: 1; }

/* ---------------------------------------------------------------- fiche : la boîte */
.fhero { padding: 40px 0 56px; background: var(--bitume); }
.fgrid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; align-items: center; }
.jaquette { position: relative; container-type: inline-size; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9); }
.jaquette img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--gris); font: 600 1.02rem/1 var(--cond); text-transform: uppercase; text-decoration: none; min-height: 40px; }
.back svg { width: 18px; height: 18px; }
.back:hover { color: var(--clair); }
.ftxt h1 { color: var(--t, var(--clair)); margin-bottom: .12em; max-width: 12ch; width: fit-content; }
.ftxt .genre { font: 600 1.2rem/1.2 var(--cond); text-transform: uppercase; color: var(--gris); margin-bottom: 18px; }
.ftxt .tagline { font-size: 1.22rem; line-height: 1.5; color: var(--clair); max-width: 40ch; }
.buy { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin-top: 26px; }
.buy .amount { font: 400 2.6rem/1 var(--titre); color: var(--clair); }
.buy .amount small { display: block; margin-top: 4px; font: 500 .95rem/1.2 var(--cond); color: var(--gris); text-transform: uppercase; }
.btn.addcart.in { border-color: var(--sodium); color: var(--sodium); }
.facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 4px; font-size: .95rem; color: var(--gris); }
.facts li::before { content: "— "; color: var(--bitume3); }
.facts .launch { color: var(--sodium); }
.fvideo { background: var(--bitume); padding: 0 0 72px; }
.frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.frame > img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame.yt .boucle { opacity: 0; transition: opacity .6s; }
.frame.yt.vid .boucle { opacity: 1; }
.frame.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.watch { position: absolute; left: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 14px; padding: 0 22px 0 0; min-height: 56px; background: var(--bitume); color: var(--clair); font: 700 1.12rem/1 var(--cond); text-transform: uppercase; text-decoration: none; }
.watch .play { width: 56px; height: 56px; display: grid; place-items: center; background: var(--sodium); color: var(--bitume); }
.watch .play svg { width: 18px; height: 18px; margin-left: 2px; }
.watch:hover span:last-child { text-decoration: underline; text-decoration-color: var(--sodium); }
.dos h2 { margin-bottom: 36px; border-bottom: 3px solid var(--encre); padding-bottom: 14px; }
.dos-g { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.recit p { font-size: 1.12rem; line-height: 1.65; color: var(--encre); }
.recit p:first-child { font: 500 clamp(1.35rem, 2.3vw, 1.7rem)/1.35 var(--cond); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }
.col h3 { color: var(--encre); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(23, 24, 28, .3); }
.col ul { list-style: none; margin: 0; padding: 0; }
.col li { margin-bottom: 8px; padding-left: 16px; text-indent: -16px; font-size: .98rem; line-height: 1.5; color: var(--encre2); }
.col li::before { content: "— "; color: var(--sodium-fonce); }

/* plan dessiné (MLO) : calque, trait bleu de plan, trame de 1 m */
.calque { background: var(--calque); color: var(--encre); color-scheme: light; }
.calque h2 { color: var(--plan); }
.plan-g { display: grid; grid-template-columns: .55fr 1.45fr; gap: 48px; align-items: start; }
.plan-g p { font-size: 1.08rem; color: var(--encre2); max-width: 36ch; }
.plan { margin: 0; }
.plan svg { width: 100%; height: auto; display: block; }
.plan .tr { fill: none; stroke: rgba(31, 78, 156, .10); stroke-width: .8; }
.plan .tr5 { fill: none; stroke: rgba(31, 78, 156, .22); stroke-width: 1; }
.plan .mur { fill: rgba(31, 78, 156, .04); stroke: var(--plan); stroke-width: 3.2; stroke-linejoin: miter; }
.plan .trou { stroke: var(--calque); stroke-width: 5; }
.plan .vit { stroke: var(--plan); stroke-width: 1.1; }
.plan .trait { stroke: var(--plan); stroke-width: 1; }
.plan .meuble { fill: none; stroke: var(--plan); stroke-width: 1.3; }
.plan .cote, .plan .rappel { stroke: var(--plan); stroke-width: .9; }
.plan .nom { font: 600 7px var(--cond); letter-spacing: .02em; fill: var(--plan); }
.plan .cotet { font: 600 7.5px var(--cond); fill: var(--plan); }
.plan .cart { font: 600 6px var(--cond); fill: rgba(31, 78, 156, .75); }

/* captures en jeu */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gallery button { padding: 0; border: 0; overflow: hidden; background: #000; cursor: zoom-in; aspect-ratio: 16 / 10; }
.gallery.big button:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery button:hover img { opacity: .88; }

/* fiche technique : un tableau serré, comme au dos d'une boîte */
.tech { width: 100%; border-collapse: collapse; border-top: 3px solid var(--encre); font-size: 1rem; }
.tech th, .tech td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid rgba(23, 24, 28, .25); }
.tech th { width: 22%; padding-right: 24px; font: 700 1.1rem/1.3 var(--cond); text-transform: uppercase; color: var(--encre); }
.tech td { color: var(--encre2); line-height: 1.55; }
.tech td small { color: var(--encre2); }

/* l'étagère : les autres jaquettes, petites */
.etagere { background: var(--bitume); }
.etagere h2 { color: var(--clair); }
.rayon { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.rayon .bande { color: var(--gris); }
.rayon .bande b { color: var(--clair); font-size: 1.25rem; }
.rayon .affiche .titre { font-size: clamp(1.3rem, 15cqi, 2.6rem); }

/* barre d'achat collante */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bitume); border-top: 2px solid var(--sodium); translate: 0 110%; transition: translate .4s var(--doux); }
.buybar.on { translate: 0 0; }
.buybar .wrap { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.buybar .nm { font: 400 1.4rem/1 var(--titre); text-transform: uppercase; color: var(--clair); }
.buybar .pr { margin-left: auto; font: 400 1.4rem/1 var(--titre); color: var(--clair); }
.buybar .btn { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.lightbox { width: min(1400px, 96vw); max-height: 94vh; padding: 0; border: 0; background: #000; color: #fff; }
.lightbox::backdrop { background: rgba(5, 6, 8, .92); }
.lightbox[open] { animation: fondu .25s ease-out; }
.lightbox img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; }
.lightbox .bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--bitume); }
.lightbox .bar button { background: none; border: 2px solid var(--bitume3); color: var(--clair); min-width: 44px; min-height: 42px; cursor: pointer; border-radius: 2px; font: 700 1rem var(--cond); text-transform: uppercase; padding: 0 14px; }

/* ---------------------------------------------------------------- texte long (mentions légales, 404) */
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.prose h2 { font-size: 1.9rem; margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--sodium); }
main > .sect:only-child, main > .sect:first-child:has(.prose) { background: var(--papier); color: var(--encre); color-scheme: light; }
main > .sect:has(.prose) h1, main > .sect:has(.prose) h2 { color: var(--encre); }
main > .sect:has(.prose) a { color: var(--encre); text-decoration-color: var(--sodium-fonce); }
main > .sect:has(.prose) .btn { color: var(--bitume); }
main > .sect:has(.prose) .btn.ghost { color: var(--encre); border-color: var(--encre); }

/* ---------------------------------------------------------------- pied */
.foot { padding: 56px 0 40px; background: var(--bitume); border-top: 1px solid var(--bitume3); font-size: .98rem; }
.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.foot img { height: 26px; width: auto; margin-bottom: 18px; }
.foot h4 { font: 700 1.15rem/1 var(--cond); text-transform: uppercase; color: var(--clair); margin: 0 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a, .foot button.linklike { color: var(--gris); text-decoration: none; }
.foot a:hover, .foot button.linklike:hover { color: var(--clair); text-decoration: underline; }
.foot .legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--bitume3); color: #8b877c; font-size: .86rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
button.linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
body:has(.buybar) .foot { padding-bottom: 110px; }

/* ---------------------------------------------------------------- bandeau cookies, nouveauté */
.consent { position: fixed; z-index: 60; left: 50%; bottom: 16px; translate: -50% 0; width: min(700px, 100% - 32px); display: none; gap: 18px; align-items: center; padding: 16px 18px; background: var(--papier); color: var(--encre); border: 2px solid var(--encre); color-scheme: light; }
.consent.on { display: flex; animation: fondu .35s ease-out; }
.consent p { margin: 0; font-size: .95rem; }
.consent a { color: var(--encre); }
.consent .btns { flex: none; gap: 10px; }
.consent .btn { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.consent .btn.ghost { color: var(--encre); border-color: var(--encre); }
.consent .btn.ghost:hover { background: var(--encre); color: var(--papier); }
.toasts { position: fixed; left: 16px; bottom: 16px; z-index: 55; width: min(380px, calc(100% - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px; background: var(--bitume2); border: 2px solid var(--bitume3); border-left: 0; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); color: var(--clair); transition: opacity .35s; }
@starting-style { .toast { opacity: 0; } }
.toast.out { opacity: 0; transition-duration: .3s; }
.toast .corps { display: contents; color: inherit; text-decoration: none; }
.toast.sans-img { grid-template-columns: 1fr auto; }
.toast img { width: 52px; height: 52px; object-fit: cover; }
.toast small { display: block; font: 700 .95rem/1 var(--cond); text-transform: uppercase; color: var(--sodium); margin-bottom: 4px; }
.toast b { display: block; font: 400 1.25rem/1.05 var(--titre); text-transform: uppercase; }
.toast span { display: block; font-size: .88rem; line-height: 1.38; color: var(--gris); }
.toast button { align-self: start; background: none; border: 0; color: var(--gris); cursor: pointer; font-size: 1.2rem; line-height: 1; min-width: 40px; min-height: 40px; margin: -8px -8px 0 0; }

/* ---------------------------------------------------------------- panier */
.cart { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 100%); max-height: none; height: 100%; padding: 0; border: 0; border-left: 2px solid var(--bitume3); background: var(--bitume2); color: var(--clair); display: none; flex-direction: column; }
.cart[open] { display: flex; overflow: hidden; animation: panier-in .35s var(--doux); }
.cart::backdrop { background: rgba(3, 4, 6, .6); }
@keyframes panier-in { from { translate: 40px 0; opacity: 0; } }
.cart-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--bitume3); }
.cart-h h2 { font-size: 2rem; margin: 0; }
.cart-h .x { background: none; border: 0; color: var(--gris); font-size: 1.7rem; line-height: 1; min-width: 44px; min-height: 44px; cursor: pointer; }
.cart-h .x:hover { color: var(--clair); }
.cart-l { list-style: none; margin: 0; padding: 8px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.cart-l li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bitume3); }
.cart-l .it { display: flex; align-items: center; gap: 12px; color: var(--clair); min-width: 0; text-decoration: none; }
.cart-l .it:hover b { text-decoration: underline; }
.cart-l img { width: 64px; height: 40px; object-fit: cover; flex: none; }
.cart-l b { font: 700 1.05rem/1.2 var(--cond); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-l .pr { font: 600 1rem var(--cond); }
.cart-l .rm { background: none; border: 2px solid transparent; color: var(--gris); font-size: 1.2rem; line-height: 1; min-width: 38px; min-height: 38px; cursor: pointer; }
.cart-l .rm:hover { color: var(--clair); border-color: var(--bitume3); }
.cart-vide { margin: 0; padding: 28px 22px; color: var(--gris); flex: 1; }
.cart-f { padding: 18px 22px 8px; border-top: 1px solid var(--bitume3); display: grid; gap: 12px; }
.cart-f[hidden] { display: none; }
.cart-tot { display: flex; justify-content: space-between; align-items: baseline; }
.cart-tot span { font: 600 1.1rem var(--cond); text-transform: uppercase; color: var(--gris); }
.cart-tot b { font: 400 2rem/1 var(--titre); }
.cart-f .btn { width: 100%; }
.cart-micro { margin: 0; font-size: .8rem; color: var(--gris); text-align: center; }
.cart-tebex { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px 22px; font-size: .92rem; color: var(--gris); }
.cart-tebex svg { width: 16px; height: 16px; }
.cart-tebex:hover { color: var(--clair); }

/* ---------------------------------------------------------------- apparitions : une fois, sans JavaScript tout reste visible */
.js .reveal { opacity: 0; transition: opacity .7s var(--doux), translate .7s var(--doux); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { translate: 0 22px; }
  .js .reveal.in { translate: none; }
  /* le plan se trace quand il arrive à l'écran */
  .js .plan svg .t { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .plan.in svg .t { animation: trace 1.6s var(--doux) forwards; }
  .js .plan.in svg .meuble { animation-delay: .5s; }
  .js .plan.in svg .vit { animation-delay: .9s; }
  .js .plan svg text { opacity: 0; transition: opacity .6s 1.3s; }
  .js .plan.in svg text { opacity: 1; }
  @keyframes trace { to { stroke-dashoffset: 0; } }
  .jaq .media img { transition: scale 1.2s var(--doux); }
  .affiche:hover .jaq .media img { scale: 1.03; }
}

/* transition jaquette du mur -> jaquette de la fiche (noms posés par construire.py hors animations réduites) */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--doux); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* ---------------------------------------------------------------- écrans moyens et étroits */
@media (max-width: 1020px) {
  .mur { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; }
  .affiche.grande { grid-column: span 6; }
  .mur .affiche.grande:nth-child(2) { margin-top: 0; }
  .affiche.grande .jaq { aspect-ratio: 4 / 3; }
  .affiche.petite { grid-column: span 3; }
  .essai-g, .faq-grid, .dos-g, .plan-g { grid-template-columns: 1fr; gap: 32px; }
  .fgrid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 36px; }
  .rayon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery.big button:first-child { grid-row: span 1; aspect-ratio: 16 / 10; grid-column: span 3; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .cartbtn.mobile:not([hidden]) { display: inline-grid; margin-left: auto; margin-right: 10px; }
  .cartbtn.mobile:not([hidden]) + .burger { margin-left: 0; }
  .nav .cartbtn { display: none; }
  .burger { display: grid; }
  .nav { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bitume); border-bottom: 2px solid var(--bitume3); padding: 8px 16px 18px; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--bitume3); font-size: 1.2rem; }
  .nav .lang { align-self: flex-start; margin-top: 14px; }
  .nav .btn { margin-top: 14px; }
  .ecran { min-height: calc(100svh - 66px); }
  .ecran::before { background: linear-gradient(0deg, rgba(10, 11, 14, .94) 0%, rgba(10, 11, 14, .55) 55%, rgba(10, 11, 14, .1) 100%); }
  .ecran-txt { padding: 40px 0 24px; }
  .ecran .sub { font-size: 1.05rem; }
  .ecran .btns .btn { flex: 1 1 auto; }
  .astuce .wrap { min-height: 72px; padding: 10px 0; }
  .astuce p { font-size: 1.02rem; }
  .sect { padding: 64px 0; }
  .tete-mur { grid-template-columns: 1fr; }
  .tete-mur p { justify-self: start; }
  .mur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .affiche.grande { grid-column: span 2; }
  .affiche.grande .jaq { aspect-ratio: 3 / 4; }
  .affiche.petite { grid-column: span 1; }
  .mur .affiche.petite:nth-child(odd) { margin-top: 0; }
  .mur .affiche.petite:nth-child(even) { margin-top: 28px; }
  .affiche.petite .ligne { display: none; }
  .bande { font-size: .9rem; flex-wrap: wrap; }
  .affiche.petite .bande b { font-size: 1.2rem; }
  .fhero { padding: 20px 0 40px; }
  .fgrid { grid-template-columns: 1fr; gap: 28px; }
  .jaquette { width: min(72%, 340px); }
  .cols { grid-template-columns: 1fr; }
  .tech th { width: 34%; padding-right: 12px; font-size: 1rem; }
  .rayon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery.big button:first-child { grid-column: span 2; }
  .gallery.c3 { grid-template-columns: 1fr 1fr; }
  .foot .cols { grid-template-columns: 1fr; }
  .foot li { margin: 0; }
  .foot li a, .foot button.linklike, .foot p a, .mail, .consent a { display: inline-flex; align-items: center; min-height: 40px; }
  .langbar .wrap > span { display: none; }
  .consent { flex-direction: column; align-items: stretch; }
  .consent .btns .btn { flex: 1; }
  .toasts { left: 50%; translate: -50% 0; bottom: 12px; }
  .buybar .nm { display: none; }
  .buybar .pr { margin-left: 0; }
  .buybar .btn { margin-left: auto; }
  .plaque { padding: 20px; }
}

/* ---------------------------------------------------------------- animations réduites : réduit, pas supprimé
   Restent : vidéo d'accueil, astuce en fondu, jaquettes animées au survol (fondu), apparitions en fondu, plan affiché
   d'un fondu. Partent : glissements, zoom des jaquettes, tracé du plan, translation du panier et de la barre. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cart[open] { animation-name: fondu; }
  .buybar { transition: opacity .3s; translate: 0 0; opacity: 0; pointer-events: none; }
  .buybar.on { opacity: 1; pointer-events: auto; }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}

/* Vasla Studio — thème e « Plan de ville » (21/10/2026), chargé APRÈS affiche.css (composants communs : panier,
   cookies, FAQ, galerie, plan d'architecte, fiche technique).
   L'accueil est un plan : notre tracé de Los Santos (image), des repères sodium, un médaillon vidéo, l'index des
   missions sur papier de plan. Pas de grand titre seul, pas de cartes, pas de dégradé décoratif.
   Mouvement : la boucle du médaillon (coupe franche au changement de lieu), la Ronde (une coupe toutes les 4 s, sur
   demande), l'astuce en fondu. Animations réduites : tout reste (ce sont des coupes et des vidéos), seul le pouls
   du repère actif s'arrête. */
:root {
  --bitume: #16181b; --bitume2: #1d2024; --bitume3: #2c3036;
  --papier: #e9e4d8; --papier2: #ddd6c5; --calque: #f2eee5;
  --encre: #15171a; --encre2: #4a4740;
  --clair: #eee9de; --gris: #a6a297;
  --sodium: #f29a2e; --sodium-fonce: #a85d00; --plan: #2d5bff; --releve: #3fb27f;
  --titre: "Saira Extra Condensed", "Arial Narrow", sans-serif;
  --cond: "Saira Extra Condensed", "Arial Narrow", sans-serif;
  --texte: "IBM Plex Sans Condensed", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
body { font-size: 17px; }
h1, h2 { font-weight: 800; letter-spacing: .01em; line-height: .92; }
h3 { font-weight: 700; letter-spacing: .02em; }
.btn { font-weight: 700; letter-spacing: .04em; border-radius: 0; }
.nav a, .back, .lang { font-weight: 700; letter-spacing: .04em; }
.astuce p { font-weight: 600; letter-spacing: .01em; }
code, .plaque code { font-family: var(--mono); }

/* ---------------------------------------------------------------- l'accueil : le plan et l'index */
.ville { background: var(--bitume); border-bottom: 1px solid var(--bitume3); }
.ville-g { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); min-height: calc(100svh - 66px); }
.plan-ville { position: relative; overflow: hidden; background: #16181b; align-self: start; }
.plan-carte { position: relative; }
.plan-ville .fond { width: 100%; height: auto; display: block; user-select: none; }
/* repère = le point exact (lieu du tournage) + un trait + une épingle à vignette, décalée pour ne pas se chevaucher.
   --k = 1 px du plan de référence (865 px de large), en unités du conteneur : tout suit la taille réelle du plan. */
.plan-carte { container-type: inline-size; --k: calc(100cqw / 865); }
.repere { position: absolute; z-index: 2; width: 0; height: 0; text-decoration: none; }
.repere .point { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; background: var(--sodium); border: 2px solid var(--bitume); }
.repere .trait { position: absolute; left: 0; top: -1px; height: 2px; background: var(--sodium); transform-origin: 0 50%; opacity: .8; }
.repere .epingle { position: absolute; left: calc(var(--dx) * var(--k)); top: calc(var(--dy) * var(--k)); translate: -50% -50%;
  width: max(64px, calc(132 * var(--k))); aspect-ratio: 16 / 10; background: var(--bitume); border: 2px solid var(--sodium);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9); transition: scale .15s, border-color .15s; }
.repere .epingle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.repere .epingle b { position: absolute; left: -2px; top: -2px; min-width: 26px; padding: 3px 5px 2px; background: var(--sodium); color: var(--bitume); font: 800 1rem/1 var(--titre); text-align: center; }
.repere.actif, .repere:hover, .repere:focus-visible { z-index: 5; outline: none; }
.repere.actif .epingle, .repere:hover .epingle, .repere:focus-visible .epingle { border-color: var(--clair); scale: 1.12; }
.repere.actif .point { background: var(--clair); }
.repere:focus-visible .epingle { outline: 3px solid var(--clair); outline-offset: 2px; }
.repere .point::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--sodium); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .repere.actif .point::after { animation: pouls-repere 1.6s ease-out infinite; }
  @keyframes pouls-repere { from { opacity: .9; scale: .8; } to { opacity: 0; scale: 2.6; } }
}
@media (prefers-reduced-motion: reduce) { .repere .epingle { transition: none; } }
/* le médaillon : posé sur l'océan, en bas à gauche du plan */
.medaillon { position: absolute; z-index: 4; left: 3%; top: 3%; width: min(36%, 440px); background: var(--bitume); border: 2px solid var(--sodium); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .9); }
.medaillon video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.med-txt { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; padding: 10px 14px 12px; }
.med-txt .coord { grid-column: 1 / -1; font: 500 .78rem/1.3 var(--mono); color: var(--gris); text-transform: uppercase; }
.med-txt .coord b { color: var(--sodium); font-weight: 500; margin-right: 6px; }
.med-txt .nom { font: 800 clamp(1.6rem, 2.6vw, 2.3rem)/1 var(--titre); text-transform: uppercase; color: var(--clair); text-decoration: none; }
.med-txt .nom:hover { color: var(--sodium); }
.med-txt .pr { font: 800 1.5rem/1 var(--titre); color: var(--sodium); }

.index { background: var(--papier); color: var(--encre); color-scheme: light; padding: 34px 32px 28px; display: flex; flex-direction: column; }
.index h1 { font-size: clamp(2.4rem, 3.6vw, 3.6rem); color: var(--encre); margin: 0 0 .25em; text-transform: uppercase; }
.index .sub { font-size: 1.02rem; line-height: 1.45; color: var(--encre2); max-width: 40ch; margin-bottom: 22px; }
.index-tete { display: grid; grid-template-columns: 34px 1fr auto 74px; gap: 12px; padding: 0 0 6px; border-bottom: 3px solid var(--encre); font: 500 .72rem/1 var(--mono); text-transform: uppercase; color: var(--encre2); }
.index-tete span:nth-child(4) { text-align: right; }
.missions { list-style: none; margin: 0; padding: 0; }
.missions li a { display: grid; grid-template-columns: 34px 1fr auto 74px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(21, 23, 26, .22); color: var(--encre); text-decoration: none; }
.missions .n { font: 800 1.35rem/1 var(--titre); color: var(--sodium-fonce); }
.missions .nm { font: 800 1.45rem/1 var(--titre); text-transform: uppercase; }
.missions .nm small { display: block; margin-top: 3px; font: 400 .9rem/1.2 var(--texte); text-transform: none; color: var(--encre2); }
.missions .ty { font: 500 .74rem/1 var(--mono); text-transform: uppercase; color: var(--encre2); }
.missions .pr { font: 800 1.3rem/1 var(--titre); text-align: right; }
.missions li a:hover, .missions li a.actif, .missions li a:focus-visible { background: var(--encre); color: var(--papier); outline: none; }
.missions li a:hover .nm small, .missions li a.actif .nm small, .missions li a:hover .ty, .missions li a.actif .ty { color: var(--gris); }
.missions li a:hover .n, .missions li a.actif .n { color: var(--sodium); }
.missions li a { padding-inline: 6px; margin-inline: -6px; }
.ronde { margin-top: 18px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; background: transparent; color: var(--encre); border: 2px solid var(--encre); font: 700 1.05rem/1 var(--titre); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.ronde svg { width: 16px; height: 16px; }
.ronde:hover, .ronde[aria-pressed="true"] { background: var(--encre); color: var(--sodium); }

/* le fond sonore visuel : la vidéo à coupes franches, sous le plan */
.terrain { min-height: 0; aspect-ratio: 21 / 8; max-height: 72vh; }
.terrain::before { background: linear-gradient(0deg, rgba(10, 11, 14, .85) 0%, rgba(10, 11, 14, 0) 38%); }

/* ---------------------------------------------------------------- la fiche de lieu */
.lieu { background: var(--bitume); padding-bottom: 46px; }
.lieu-video { aspect-ratio: 21 / 9; max-height: 74vh; width: 100%; }
.lieu-video > img { object-fit: cover; }
.lieu-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 220px; gap: 36px; align-items: end; margin-top: 28px; }
.lieu-txt h1 { font-size: clamp(3rem, 7vw, 6.4rem); color: var(--clair); text-transform: uppercase; margin: 0 0 .1em; text-shadow: 0 2px 22px rgba(0, 0, 0, .6); }
.coord { margin: 0 0 8px; font: 500 .82rem/1.4 var(--mono); text-transform: uppercase; color: var(--gris); }
.coord b { color: var(--sodium); font-weight: 500; margin-right: 6px; }
.coord span { margin-left: 10px; color: #8a877e; }
.lieu .tagline { font-size: 1.18rem; line-height: 1.45; color: var(--clair); max-width: 44ch; margin: 0; }
.lieu .back { margin-bottom: 14px; }
.lieu-achat .buy { margin-top: 0; }
.mini-plan { position: relative; width: 220px; height: 220px; overflow: hidden; border: 2px solid var(--bitume3); background: #16181b; }
.mini-plan img { position: absolute; max-width: none; width: 1000px; height: auto; }
.mini-plan i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; translate: -50% -50%; border: 2px solid var(--sodium); background: rgba(242, 154, 46, .25); }
.ensure { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ensure code { white-space: pre; padding: 6px 10px; background: var(--encre); color: var(--sodium); font-size: .92rem; }
.copier { min-height: 36px; padding: 0 12px; border: 2px solid var(--encre); background: transparent; color: var(--encre); font: 700 .95rem/1 var(--titre); text-transform: uppercase; cursor: pointer; }
.copier:hover { background: var(--encre); color: var(--papier); }
.missions.sombre li a { color: var(--clair); border-bottom-color: var(--bitume3); }
.missions.sombre .nm small, .missions.sombre .ty { color: var(--gris); }
.missions.sombre .n { color: var(--sodium); }
.missions.sombre li a:hover { background: var(--clair); color: var(--encre); }
.missions.sombre li a:hover .nm small, .missions.sombre li a:hover .ty { color: var(--encre2); }
.missions.sombre li a:hover .n { color: var(--sodium-fonce); }
.etagere .missions { max-width: 860px; }
.missions .vg-m { display: none; }   /* vignette des cartes du téléphone (écrans étroits seulement ; lazy = jamais chargée ailleurs) */

/* ---------------------------------------------------------------- écrans moyens et étroits */
@media (max-width: 980px) {
  .ville-g { grid-template-columns: 1fr; min-height: 0; }
  .medaillon { position: static; width: 100%; border-width: 0 0 2px; }
  .lieu-g { grid-template-columns: 1fr; gap: 22px; margin-top: 0; padding-top: 22px; }
  .mini-plan { width: 100%; height: 180px; }
  .terrain { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .index { padding: 26px 16px 22px; }
  .index-tete, .missions li a { grid-template-columns: 30px 1fr 64px; }
  .index-tete span:nth-child(3), .missions .ty { display: none; }
  .missions .nm { font-size: 1.3rem; }
  .lieu-video { aspect-ratio: 16 / 10; }
  .lieu-txt h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .coord span { display: block; margin: 2px 0 0; }
}

/* ---- index compact (22/10) : colonne étroite, le type passe sous le nom, la carte prend la place ---- */
@media (min-width: 761px) {
  .ville-g { grid-template-columns: minmax(0, 1fr) clamp(370px, 29vw, 470px); }
  .index { padding: 30px 28px 24px; }
  .index h1 { font-size: clamp(2.1rem, 2.8vw, 3rem); line-height: .95; }
  .index .sub { font-size: 1rem; margin-bottom: 18px; }
  .index-tete { grid-template-columns: 32px 1fr auto; gap: 12px; }
  .index-tete span:nth-child(3) { display: none; }
  .index .missions li a { grid-template-columns: 32px 1fr auto; grid-template-areas: "n nm pr" "n ty pr"; gap: 4px 12px; padding: 11px 6px; }
  .index .missions .n { grid-area: n; font-size: 1.3rem; align-self: start; padding-top: 2px; }
  .index .missions .nm { grid-area: nm; font-size: 1.38rem; }
  .index .missions .nm small { display: block; margin: 3px 0 0; font-size: .88rem; }
  .index .missions .ty { grid-area: ty; font-size: .7rem; }
  .index .missions .pr { grid-area: pr; font-size: 1.3rem; }
  .index .ronde { min-height: 40px; margin-top: 14px; }
}
@media (min-width: 981px) {
  .plan-ville { max-height: calc(100svh - 66px); }
  .medaillon { width: min(32%, 380px); }
}

/* ---- carte 3D (src/carte3d.js) : par-dessus le plan 2D, qui reste dessous et reste la carte si la 3D manque ---- */
.ville3d { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; display: block; opacity: 0; cursor: grab; touch-action: pan-y; }
.ville3d:active { cursor: grabbing; }
.plan-carte.en-3d .ville3d { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .ville3d { transition: opacity .6s ease; } }

/* ---- téléphone : pas de plan. Une vitrine simple et lisible : titre, puis une carte par script (photo, nom, lieu, prix) ---- */
@media (max-width: 760px) {
  .plan-ville, .index-tete, .ronde { display: none; }
  .index { padding: 28px 16px 8px; }
  .index h1 { font-size: clamp(2.3rem, 11vw, 3rem); line-height: .95; }
  .index .sub { margin-bottom: 18px; }
  .index .missions { display: grid; gap: 18px; }
  .index .missions li a { grid-template-columns: auto 1fr auto; grid-template-areas: "img img img" "n nm pr"; gap: 10px 10px; align-items: start;
    padding: 0 0 16px; margin: 0; border-bottom: 2px solid var(--encre); }
  .index .missions .vg-m { grid-area: img; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bitume); border: 2px solid var(--encre); }
  .index .missions .n { grid-area: n; font-size: 1.5rem; }
  .index .missions .nm { grid-area: nm; font-size: 1.55rem; }
  .index .missions .nm small { font-size: .95rem; margin-top: 4px; }
  .index .missions .pr { grid-area: pr; font-size: 1.45rem; }
  .index .missions li a:hover, .index .missions li a.actif { background: transparent; color: var(--encre); }
  .index .missions li a:hover .n, .index .missions li a.actif .n { color: var(--sodium-fonce); }
  .index .missions li a:hover .nm small, .index .missions li a.actif .nm small { color: var(--encre2); }
  .index .missions li a:active .vg-m { border-color: var(--sodium); }
}

/* ---- partenaires : repère et ligne à part (lien vers leur boutique), pastille blanche au lieu du numéro ---- */
.repere.partenaire .point { background: var(--clair); }
.repere.partenaire .trait { background: var(--clair); }
.repere.partenaire .epingle { border-color: var(--clair); }
.repere.partenaire .epingle b { background: var(--clair); font: 700 .78rem/1 var(--mono); text-transform: uppercase; padding: 4px 6px; }
.index-pa { margin: 18px 0 0; padding-bottom: 6px; border-bottom: 3px solid var(--encre); font: 500 .72rem/1 var(--mono); text-transform: uppercase; color: var(--encre2); }
.missions.pa .n { color: var(--encre2); }

/* ---- catalogue classique /scripts/ (22/10) : la carte reste l'accueil, ici une grille lisible ---- */
.catalogue-e { background: var(--papier); color: var(--encre); color-scheme: light; padding: 46px 0 70px; min-height: calc(100svh - 66px); }
.catalogue-e h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); text-transform: uppercase; color: var(--encre); margin: 0 0 .2em; }
.catalogue-e .sub { color: var(--encre2); max-width: 60ch; margin: 0 0 30px; }
.catalogue-e .sub a { color: var(--sodium-fonce); font-weight: 600; }
.fiches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 26px; }
.fiche-c { display: flex; flex-direction: column; background: #f3efe5; border: 2px solid var(--encre); }
.fiche-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bitume); border-bottom: 3px solid var(--sodium); }
.fiche-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .4s ease; }
.fiche-c:hover .fiche-img img { scale: 1.04; }
@media (prefers-reduced-motion: reduce) { .fiche-img img { transition: none; } .fiche-c:hover .fiche-img img { scale: 1; } }
.fiche-img b { position: absolute; left: 0; top: 0; padding: 5px 9px 4px; background: var(--sodium); color: var(--bitume); font: 800 1.15rem/1 var(--titre); text-transform: uppercase; }
.fiche-c.pa .fiche-img { border-bottom-color: var(--clair); }
.fiche-c.pa .fiche-img b { background: var(--clair); font: 700 .78rem/1 var(--mono); padding: 6px 8px; }
.fiche-t { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.fiche-ty { margin: 0; font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; color: var(--encre2); }
.fiche-t h2 { margin: 0; font: 800 1.7rem/1 var(--titre); text-transform: uppercase; }
.fiche-t h2 a { color: var(--encre); text-decoration: none; }
.fiche-l { margin: 0; color: var(--encre2); line-height: 1.45; flex: 1; }
.fiche-b { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.fiche-pr { font: 800 1.6rem/1 var(--titre); margin-right: auto; }
.fiche-v { display: inline-flex; align-items: center; gap: 6px; color: var(--encre); font: 700 .95rem/1 var(--titre); text-transform: uppercase; text-decoration: none; }
.fiche-v svg { width: 16px; height: 16px; }
.index-tout { margin-top: 16px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--encre); font: 700 1rem/1 var(--titre); text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--sodium); padding-bottom: 3px; }
.index-tout svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .catalogue-e { padding: 28px 0 46px; } .fiches { grid-template-columns: 1fr; gap: 18px; } }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.filtres button { min-height: 38px; padding: 0 14px; border: 2px solid var(--encre); background: transparent; color: var(--encre); font: 700 .95rem/1 var(--titre); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.filtres button:hover { background: rgba(21, 23, 26, .08); }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.fiche-c[hidden] { display: none; }
.fiche-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.fiche-img.joue video { opacity: 1; }
.fiche-img b { z-index: 2; }

/* pastilles par script (générées) */
.dot-triumvirat-hq { --c: #b3121a; }
.dot-t34-tank { --c: #8a9a5b; }
.dot-playable-pianos { --c: #f5a524; }
.dot-neural-dive { --c: #5af0e1; }
.dot-cyborg-ped { --c: #ff4d6d; }
.dot-vertical-ad-beams { --c: #c05cff; }
@media (prefers-reduced-motion: no-preference) {
  .vt-triumvirat-hq { view-transition-name: img-triumvirat-hq; }
  .vtn-triumvirat-hq { view-transition-name: nom-triumvirat-hq; }
  .vt-t34-tank { view-transition-name: img-t34-tank; }
  .vtn-t34-tank { view-transition-name: nom-t34-tank; }
  .vt-playable-pianos { view-transition-name: img-playable-pianos; }
  .vtn-playable-pianos { view-transition-name: nom-playable-pianos; }
  .vt-neural-dive { view-transition-name: img-neural-dive; }
  .vtn-neural-dive { view-transition-name: nom-neural-dive; }
  .vt-cyborg-ped { view-transition-name: img-cyborg-ped; }
  .vtn-cyborg-ped { view-transition-name: nom-cyborg-ped; }
  .vt-vertical-ad-beams { view-transition-name: img-vertical-ad-beams; }
  .vtn-vertical-ad-beams { view-transition-name: nom-vertical-ad-beams; }
}