/* SOCLE DES VARIANTES DE B3 : copie de b3/base.css + b3/style.css (B3 reste intact). */
/* PROPOSITION B « OMBRE » : noir profond, ouvertures de lumière, typographie minuscule. */
:root {
  --noir: #080808;
  --blanc: #ece8e0;
  --gris: #8a8780;
  --filet: rgba(236,232,224,.2);
  --m: clamp(16px, 4vw, 56px);
  --serif: 'Cormorant', Georgia, serif;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --ease: cubic-bezier(.7,0,.2,1);
}
body { background: var(--noir); color: var(--blanc); font: 300 13px/1.55 var(--sans); }
.petit { font: 400 10px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.gris { color: var(--gris); }
.it { font-family: var(--serif); font-style: italic; font-weight: 300; }

/* ---------- En-tête ---------- */
.b-tete { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--m); mix-blend-mode: difference; color: #fff; pointer-events: none; }
.b-tete > * { pointer-events: auto; }
.b-tete img { height: 11px; width: auto; }
.b-nav { display: flex; gap: 8px; align-items: center; }
.b-nav a { opacity: .45; transition: opacity .4s; }
.b-nav a.actif, .b-nav a:hover { opacity: 1; }
body[data-vue="accueil"] .b-nav { opacity: 0; pointer-events: none; }

/* Curseur (ordinateur seulement) */
.b-curseur { position: fixed; z-index: 300; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s; }
.b-curseur span { font: 400 9px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s; }
.b-curseur.grand { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: #fff; }
.b-curseur.grand span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .b-curseur { display: none; } }

/* ---------- Splash : un trait de lumière qui s'ouvre ---------- */
.b-splash { position: fixed; inset: 0; z-index: 100; pointer-events: auto; }
.b-splash .vol { position: absolute; top: 0; bottom: 0; width: 50.2%; background: var(--noir); transition: transform 1.5s var(--ease); }
.b-splash .vol.g { left: 0; } .b-splash .vol.d { right: 0; }
.b-splash .rai { position: absolute; left: 50%; top: 50%; width: 1px; height: 0; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 18px 2px rgba(255,255,255,.45); animation: b-rai 1.4s var(--ease) .3s forwards; }
.b-splash .logo { position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; opacity: 0; animation: b-app 1s 1.3s forwards; }
.b-splash .logo img { height: 12px; width: auto; margin: 0 auto 10px; }
.b-splash.ouvre .vol.g { transform: translateX(-100%); } .b-splash.ouvre .vol.d { transform: translateX(100%); }
.b-splash.ouvre .rai, .b-splash.ouvre .logo { opacity: 0 !important; transition: opacity .3s; }
@keyframes b-rai { to { height: 64vh; } }
@keyframes b-app { to { opacity: 1; } }

/* ---------- Aiguillage : deux côtés séparés par un trait mobile ---------- */
.b-seuil { position: relative; height: 100vh; height: 100svh; overflow: hidden; --s: 50%; touch-action: pan-y; cursor: none; }
@media (hover: none), (pointer: coarse) { .b-seuil { cursor: auto; } }
.b-cote { position: absolute; inset: 0; display: block; }
.b-cote.g { clip-path: inset(0 calc(100% - var(--s)) 0 0); }
.b-cote.d { clip-path: inset(0 0 0 var(--s)); }
.b-cote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 2s ease, transform 7s linear; filter: brightness(.72) saturate(.85); }
.b-cote img.on { opacity: 1; transform: scale(1); }
.b-cote::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 60%, rgba(0,0,0,.55)); }
.b-trait { position: absolute; top: 0; bottom: 0; left: var(--s); width: 1px; background: #fff; z-index: 3; box-shadow: 0 0 14px rgba(255,255,255,.6); }
.b-trait::before { content: ""; position: absolute; left: -18px; top: 50%; width: 37px; height: 37px; margin-top: -18px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(8,8,8,.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.b-trait::after { content: "‹ ›"; position: absolute; left: -18px; top: 50%; width: 37px; margin-top: -8px; text-align: center; font: 300 13px/16px var(--sans); color: #fff; letter-spacing: .3em; padding-left: .3em; }
.b-etiq { position: absolute; z-index: 4; bottom: 9vh; transform: translateX(-50%); text-align: center; pointer-events: none; white-space: nowrap; transition: opacity .4s; }
.b-etiq.g { left: calc(var(--s) / 2); }
.b-etiq.d { left: calc(var(--s) + (100% - var(--s)) / 2); }
.b-etiq strong { display: block; font: 300 italic clamp(30px, 4.6vw, 64px)/1 var(--serif); margin-bottom: 10px; }
.b-seuil .invite { position: absolute; z-index: 4; top: 50%; left: 0; right: 0; text-align: center; margin-top: 34px; pointer-events: none; }
.b-seuil .invite span { background: rgba(8,8,8,.45); padding: 5px 9px; }

/* ---------- Accueil : atelier et contact ---------- */
.b-bloc { padding: clamp(90px, 16vh, 180px) var(--m); max-width: 1100px; margin: 0 auto; }
.b-atelier { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.b-atelier .ph { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.b-atelier .ph img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: grayscale(1) brightness(.85); }
.b-atelier h2, .b-contact h2 { font: 300 italic clamp(30px, 4vw, 52px)/1.05 var(--serif); margin: 16px 0 24px; }
.b-atelier p { color: #c9c5bd; max-width: 48ch; margin-bottom: 14px; font-size: 14px; }
.b-duo { display: flex; gap: 40px; margin-top: 28px; }
.b-duo b { display: block; font-weight: 400; }
.b-encours { margin-top: 26px; columns: 2; column-gap: 30px; }
.b-encours li { list-style: none; break-inside: avoid; padding: 7px 0; border-top: 1px solid var(--filet); font-size: 12px; color: #c9c5bd; }
.b-contact { text-align: center; }
.b-contact a.mail { font: 300 clamp(24px, 5vw, 58px)/1.2 var(--serif); font-style: italic; border-bottom: 1px solid var(--filet); }
.b-contact .lignes { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; margin-top: 36px; }
.b-pied { display: flex; justify-content: space-between; padding: 26px var(--m) 54px; border-top: 1px solid var(--filet); }
[data-rv].b-fond { opacity: 0; transition: opacity 1.6s ease; }
[data-rv].b-fond.vu { opacity: 1; }
.b-lettres span { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .8s, transform .9s var(--ease); }
.vu .b-lettres span, .b-lettres.vu span { opacity: 1; transform: none; }

/* ---------- Liste : chaque projet est une ouverture qui s'agrandit ---------- */
.b-intro { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--m); }
.b-intro h1 { font: 300 italic clamp(56px, 11vw, 150px)/.95 var(--serif); }
.b-intro p { margin-top: 22px; }
.b-intro .fleche { margin-top: 40px; width: 1px; height: 60px; background: linear-gradient(var(--blanc), transparent); animation: b-desc 2.2s ease-in-out infinite; }
@keyframes b-desc { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.b-scene { position: relative; height: 230vh; }
.b-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; }
.b-ouv { position: absolute; inset: 0; clip-path: inset(32% 30% 32% 30%); will-change: clip-path; }
.b-ouv img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); will-change: transform; }
.b-stage .rang { position: absolute; top: 76px; left: var(--m); }
.b-stage .leg { position: absolute; left: var(--m); right: var(--m); bottom: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.b-stage .leg strong { font: 300 italic clamp(28px, 3.6vw, 52px)/1.05 var(--serif); display: block; max-width: 16ch; text-shadow: 0 1px 30px rgba(0,0,0,.4); }
.b-stage .leg .d { text-align: right; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.b-stage .petit-titre { position: absolute; left: 0; right: 0; top: 70%; text-align: center; }
.b-fin { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--m); }
.b-fin a.autre { display: block; }
.b-fin .vign { position: relative; width: min(340px, 70vw); aspect-ratio: 4/5; margin: 26px auto; overflow: hidden; clip-path: inset(18% 18% 18% 18%); transition: clip-path 1s var(--ease); }
.b-fin a.autre:hover .vign, .b-fin .vign.vu { clip-path: inset(0 0 0 0); }
.b-fin .vign img { width: 100%; height: 100%; object-fit: cover; }
.b-fin strong { font: 300 italic clamp(34px, 5vw, 70px)/1 var(--serif); }

/* ---------- Page projet ---------- */
.b-p-info { max-width: 760px; margin: 0 auto; padding: clamp(80px, 14vh, 150px) var(--m) clamp(60px, 10vh, 110px); }
.b-p-info h1 { font: 300 italic clamp(38px, 5.4vw, 74px)/1 var(--serif); margin: 14px 0 28px; }
.b-p-info .desc { font-size: 15px; color: #d3cfc7; max-width: 52ch; }
.b-donnees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; margin-top: 36px; }
.b-donnees div { padding: 10px 0; border-top: 1px solid var(--filet); }
.b-donnees dt { margin-bottom: 3px; }
.b-donnees dd { font-size: 12.5px; }
.b-galerie { position: relative; }
.b-galerie .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.b-piste { display: flex; gap: clamp(14px, 3vw, 40px); padding: 0 var(--m); will-change: transform; }
.b-piste figure { position: relative; flex: none; height: 68vh; height: 68svh; cursor: zoom-in; overflow: hidden; }
.b-piste img { height: 100%; width: auto; max-width: none; transform: scale(1.12); transition: transform 1.4s var(--ease); }
.b-piste figure:hover img { transform: scale(1.04); }
.b-galerie .compteur { position: absolute; left: var(--m); bottom: 28px; }
.b-galerie .barre { position: absolute; left: var(--m); right: var(--m); bottom: 22px; height: 1px; background: var(--filet); }
.b-galerie .barre i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blanc); width: 0; }
.b-complet { max-width: 760px; margin: 0 auto; padding: 50px var(--m); }
.complet summary { display: inline-block; padding: 9px 14px; border: 1px solid var(--filet); border-radius: 30px; font: 400 10px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.complet-corps { padding-top: 24px; color: #c9c5bd; font-size: 14px; }
.complet-corps p { margin-bottom: 12px; }
.complet-corps h4 { font: 400 10px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin: 22px 0 8px; }
.complet-corps li { list-style: none; padding: 6px 0; border-top: 1px solid var(--filet); font-size: 12.5px; }
.complet-corps li span { color: var(--gris); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .b-ouv { clip-path: inset(30% 14% 30% 14%); }
  .b-scene { height: 200vh; }
  .b-atelier { grid-template-columns: 1fr; }
  .b-encours { columns: 1; }
  .b-donnees { grid-template-columns: 1fr; }
  .b-stage .leg { flex-direction: column; align-items: flex-start; }
  .b-stage .leg .d { text-align: left; }
  .b-etiq { bottom: 12vh; }
  .b-etiq strong { font-size: 30px; }
  .b-tete img { height: 9px; }
  .b-piste figure { height: 46vh; height: 46svh; }
}
/* VARIANTE B3 « MONOLITHE × OMBRE » : base de B (base.css) + la typographie et les blocs de la version 1 */
:root { --noir: #0a0a0a; --blanc: #f2f2f0; --gris: #8a8a87; --filet: rgba(242,242,240,.16); --largeur: 1320px; }
body { background: var(--noir); }

/* Typographie massive de la version 1 */
.m-massif { font: 800 clamp(44px, 9vw, 150px)/.88 var(--sans); text-transform: uppercase; letter-spacing: -.035em; }
.m-etiquette { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.m-etiquette::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.m-lignes > span { display: block; overflow: hidden; padding-bottom: .04em; }
.m-lignes i { display: block; font-style: normal; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.m-rv.vu .m-lignes i { transform: none; }
.m-section { padding: clamp(80px, 14vh, 160px) var(--m); max-width: var(--largeur); margin: 0 auto; }

/* En-tête : comme la V1, en différence pour rester lisible */
.m-tete { mix-blend-mode: normal; background: none !important; }
.m-nav { gap: 22px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.m-nav a.actif { border-bottom: 1px solid currentColor; }
@media (max-width: 760px) { .m-nav .acc { display: none; } .m-nav { gap: 14px; font-size: 11px; letter-spacing: .14em; } }

/* ---------- Splash : monogramme de la V1, puis le trait de lumière de B ---------- */
.m-splash { position: fixed; inset: 0; z-index: 100; cursor: pointer; }
.m-splash .vol { position: absolute; top: 0; bottom: 0; width: 50.2%; background: var(--noir); transition: transform 1.3s var(--ease); }
.m-splash .vol.g { left: 0; } .m-splash .vol.d { right: 0; }
.m-splash .rai { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; background: #fff; box-shadow: 0 0 18px 2px rgba(255,255,255,.7); transform: scaleY(0); transition: transform .6s var(--ease), opacity .8s .9s; z-index: 2; }
.m-splash.lumiere .rai { transform: scaleY(1); }
.m-splash.ouvre .vol.g { transform: translateX(-100%); }
.m-splash.ouvre .vol.d { transform: translateX(100%); }
.m-splash.ouvre .rai { opacity: 0; }
.m-splash .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3; transition: opacity .45s; }
.m-splash.lumiere .centre, .m-splash.lumiere .passer { opacity: 0; }
.m-splash .mono { width: min(300px, 62vw); overflow: visible; }
.m-splash .trait { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 700; stroke-dashoffset: 700; animation: m-dessin 1.2s var(--ease) forwards; }
.m-splash .t2 { animation-delay: .35s; } .m-splash .t3 { animation-delay: .6s; } .m-splash .t4 { animation-delay: .8s; }
@keyframes m-dessin { to { stroke-dashoffset: 0; } }
.m-splash .logo { width: min(340px, 70vw); margin-top: 34px; opacity: 0; animation: b-app .9s 1.6s forwards; }
.m-splash .passer { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); z-index: 3; transition: opacity .4s; }

/* ---------- Accueil 1 : le diaporama vu à travers les lettres ---------- */
.m-hero { position: relative; height: 290vh; }
.m-hero .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.m-diapos { position: absolute; inset: 0; }
.m-diapos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 7s linear; }
.m-diapos img.on { opacity: 1; transform: scale(1); }
.m-diapos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 25%, transparent 60%, rgba(0,0,0,.6)); }
.m-masque { position: absolute; inset: 0; background: var(--noir); color: #fff; mix-blend-mode: multiply; display: flex; align-items: center; justify-content: center; will-change: transform; z-index: 2; }
.m-masque .m-massif { font-size: min(11.6vw, 20vh); line-height: .86; text-align: center; letter-spacing: -.04em; }
.m-masque .m-massif > span { display: block; }
.m-legende { position: absolute; left: var(--m); right: var(--m); bottom: 34px; display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 6px 26px; z-index: 3; opacity: 0; }
.m-legende a { grid-column: 1; }
.m-legende b { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(16px, 1.8vw, 24px); line-height: 1.1; display: block; }
.m-legende .lieu { grid-column: 1; grid-row: 2; color: #cfcfcc; font-size: 13px; }
.m-legende .cpt { grid-column: 2; grid-row: 1 / 3; font-size: 12px; letter-spacing: .2em; color: #cfcfcc; }
.m-legende .cmd { grid-column: 3; grid-row: 1 / 3; display: flex; gap: 8px; }
.m-legende button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); font-size: 16px; transition: background .3s, color .3s; }
.m-legende button:hover { background: #fff; color: #000; }
.m-indice { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; z-index: 3; color: #aaa; letter-spacing: .24em; text-transform: uppercase; }
.m-indice i { display: block; width: 1px; height: 46px; margin: 12px auto 0; background: linear-gradient(#fff, transparent); animation: b-desc 2.2s ease-in-out infinite; }

/* ---------- Accueil 2 : l'aiguillage en capitales massives ---------- */
.m-titre-seuil { padding: clamp(80px, 14vh, 150px) var(--m) clamp(30px, 6vh, 60px); max-width: var(--largeur); margin: 0 auto; }
.m-seuil .b-cote img { filter: grayscale(1) brightness(.62); transition: opacity 2s ease, transform 7s linear, filter 1.2s; }
.m-seuil:hover .b-cote:hover img, .m-seuil .b-cote:focus-visible img { filter: brightness(.72); }
@media (hover: none) { .m-seuil .b-cote img { filter: brightness(.66) saturate(.85); } }
.m-mot { position: absolute; top: 12vh; bottom: 10vh; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.b-cote.g .m-mot { left: var(--m); }
.b-cote.d .m-mot { left: calc(var(--s) + var(--m)); }
.m-mot strong { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 min(10.5vh, 120px)/.86 var(--sans); text-transform: uppercase; letter-spacing: -.035em; white-space: nowrap; }
.m-mot .n { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #ddd; }
.m-seuil .invite { margin-top: 0; top: auto; bottom: 4vh; }

/* ---------- Accueil 3 : intro et chiffres ---------- */
.m-intro { font: 300 clamp(24px, 3.2vw, 46px)/1.25 var(--sans); max-width: 26em; letter-spacing: -.01em; }
.m-intro em { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.m-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(50px, 9vh, 100px); border-top: 1px solid var(--filet); }
.m-chiffres > div { padding: 26px 20px 0 0; }
.m-chiffres b { display: block; font: 800 clamp(48px, 7vw, 110px)/.9 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.m-chiffres span { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

/* ---------- Accueil 4 : grille filtrable, vignettes-fenêtres ---------- */
.m-projets-tete { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 30px; margin-bottom: clamp(40px, 7vh, 80px); }
.m-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.m-filtres button { border: 1px solid var(--filet); padding: 10px 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.m-filtres button[aria-pressed="true"] { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.m-grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 28px); row-gap: clamp(36px, 6vh, 70px); }
.m-carte { grid-column: span 4; display: block; }
.m-carte:nth-child(6n+1), .m-carte:nth-child(6n+5) { grid-column: span 8; }
.m-carte .ouv { position: relative; overflow: hidden; aspect-ratio: 4 / 3; clip-path: inset(34% 30%); will-change: clip-path; }
.m-carte:nth-child(6n+1) .ouv, .m-carte:nth-child(6n+5) .ouv { aspect-ratio: 16 / 9.5; }
.m-carte .ouv img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .7s; }
.m-carte:hover .ouv img { filter: none; }
.m-carte .inf { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; }
.m-carte .t { font-weight: 700; text-transform: uppercase; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.15; }
.m-carte .l { color: var(--gris); font-size: 14px; margin-top: 4px; }
.m-carte .s { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); white-space: nowrap; padding-top: 3px; }
.m-carte.cachee { display: none; }

/* ---------- Accueil 5 : bandeau ---------- */
.m-bandeau { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: 38px 0; overflow: hidden; }
.m-section-etq { padding: 0 var(--m); max-width: var(--largeur); margin: 0 auto; }
.m-bandeau .piste { display: flex; width: max-content; animation: m-defiler 60s linear infinite; }
.m-bandeau:hover .piste { animation-play-state: paused; }
.m-bandeau .piste span { font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(30px, 4.6vw, 70px); white-space: nowrap; padding-right: .9em; }
.m-bandeau .piste span::after { content: "—"; font-weight: 200; padding-left: .9em; color: var(--gris); }
@keyframes m-defiler { to { transform: translateX(-50%); } }

/* ---------- Atelier et contact ---------- */
.m-atelier { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.m-atelier .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 5; clip-path: inset(30% 26%); }
.m-atelier .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.m-atelier .m-massif { font-size: clamp(40px, 6vw, 96px); margin-bottom: 34px; }
.m-atelier p { color: #c9c9c6; max-width: 54ch; margin-bottom: 14px; }
.m-atelier p.chapeau { color: var(--blanc); font-size: clamp(17px, 1.5vw, 21px); }
.m-duo { display: flex; gap: 50px; margin-top: 34px; border-top: 1px solid var(--filet); padding-top: 20px; }
.m-duo b { display: block; font-weight: 700; text-transform: uppercase; }
.m-duo span { color: var(--gris); font-size: 13px; }
.m-contact .mail { display: inline-block; font: 300 clamp(22px, 4vw, 54px)/1.2 var(--sans); margin: 36px 0 50px; border-bottom: 1px solid var(--filet); word-break: break-all; }
.m-contact .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; border-top: 1px solid var(--filet); padding-top: 26px; }
.m-contact .cols b { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); font-weight: 500; margin-bottom: 8px; }
.m-pied { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }

/* ---------- Liste ---------- */
.m-intro-liste { align-items: flex-start; text-align: left; justify-content: flex-end; padding-bottom: 14vh; }
.m-intro-liste .m-massif { font-size: clamp(56px, 15vw, 240px); }
.m-intro-liste .fleche { margin-top: 50px; }
.m-num { position: absolute; top: 70px; right: var(--m); font: 800 clamp(70px, 14vw, 200px)/.8 var(--sans); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.5); pointer-events: none; }
.m-leg { display: block !important; }
.m-leg .lieu { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #ddd; margin-bottom: 10px; }
.m-leg strong { font: 800 clamp(34px, 6.4vw, 104px)/.88 var(--sans) !important; text-transform: uppercase; letter-spacing: -.035em; max-width: 13em !important; text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.m-leg .d { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #ddd; text-align: left !important; }
.m-fin strong.m-massif { font: 800 clamp(44px, 9vw, 140px)/.88 var(--sans); text-transform: uppercase; letter-spacing: -.035em; }
.m-fin .m-etiquette { justify-content: center; }
.m-fin .m-suiv { font-size: clamp(30px, 6vw, 90px) !important; display: block; max-width: 14em; margin: 0 auto; }

/* ---------- Projet ---------- */
.m-titre-projet { font-size: clamp(38px, 7vw, 116px); max-width: 14em; }
.m-p-cols { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(30px, 6vw, 100px); margin-top: clamp(40px, 7vh, 80px); }
.m-p-info .desc { font-size: clamp(16px, 1.3vw, 19px); color: #d6d6d3; max-width: 56ch; }
.m-donnees { border-top: 1px solid var(--filet); }
.m-donnees > div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.m-donnees dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); padding-top: 3px; }
.m-donnees dd { font-size: 14px; }
.m-cpt { letter-spacing: .2em; font-size: 12px; color: var(--gris); }
.m-complet { max-width: var(--largeur); }

@media (max-width: 900px) {
  .m-chiffres { grid-template-columns: repeat(2, 1fr); }
  .m-chiffres > div { padding-bottom: 26px; }
  .m-carte, .m-carte:nth-child(6n+1), .m-carte:nth-child(6n+5) { grid-column: span 6; }
  .m-carte:nth-child(6n+1) .ouv, .m-carte:nth-child(6n+5) .ouv { aspect-ratio: 4 / 3; }
  .m-atelier, .m-p-cols { grid-template-columns: 1fr; }
  .m-contact .cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .m-grille { grid-template-columns: 1fr; }
  .m-carte, .m-carte:nth-child(6n+1), .m-carte:nth-child(6n+5) { grid-column: auto; }
  .m-legende { grid-template-columns: 1fr auto; bottom: 22px; }
  .m-legende .cpt { display: none; }
  .m-legende .cmd { grid-column: 2; }
  .m-mot strong { font-size: min(11vh, 92px); }
  .m-masque .m-massif { font-size: 13.2vw; }
  .m-num { top: 64px; }
  .m-leg strong { font-size: 10vw !important; }
  .m-donnees > div { grid-template-columns: 7.5em 1fr; }
}
.m-seuil { cursor: pointer; }

/* ==========================================================================
   AJOUTS COMMUNS AUX VARIANTES DE B3
   ========================================================================== */
.k-splash { position: fixed; inset: 0; z-index: 100; cursor: pointer; overflow: hidden; }
.k-passer { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; font: 500 10px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gris); z-index: 9; transition: opacity .4s; }
.k-splash.fin .k-passer { opacity: 0; }
.k-encours { margin-top: 40px; }
.k-encours h3 { font: 500 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.k-encours ul { columns: 2; column-gap: 30px; }
.k-encours li { list-style: none; break-inside: avoid; padding: 7px 0; border-top: 1px solid var(--filet); font-size: 12.5px; color: #bdbdb9; }
@media (max-width: 760px) { .k-encours ul { columns: 1; } }
.k-tete img { height: 11px; }
@media (max-width: 760px) { .k-tete img { height: 8px; } }
.m-atelier .ph { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.m-atelier .ph img { width: 100%; height: 100%; object-fit: cover; }
.k-atelier .ph { clip-path: none; } .k-atelier .ph img { filter: none; }


/* ==========================================================================
   Demandes de Pio (appel du 29 octobre)
   ========================================================================== */
/* En-tête : plus de mélange de couleurs. Logo et menu en blanc, ou en noir sur fond clair. */
.b-tete.k-tete { mix-blend-mode: normal !important; color: #fff; transition: color .35s; }
.k-tete .k-marque { position: relative; display: inline-block; line-height: 0; }
.k-tete .k-marque img { transition: opacity .35s; }
.k-tete .k-marque img.n { position: absolute; left: 0; top: 0; opacity: 0; }
.k-tete .k-marque img.b { filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); }
.k-tete.clair { color: #0b0b0a; }
.k-tete.clair .k-marque img.b { opacity: 0; }
.k-tete.clair .k-marque img.n { opacity: 1; }
.k-tete:not(.clair) .m-nav { text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* Intro : le logo seul, ouverture de B3·4 « Plan-séquence » */
.k-fente-splash { background: transparent; }
.k-fente-splash .fond { position: absolute; inset: 0; background: #0b0b0a; display: flex; align-items: center; justify-content: center; transition: opacity .7s ease .5s; }
.k-fente-splash .logo { width: min(520px, 78vw); height: auto; }
.k-fente-splash .volet { position: absolute; left: 0; right: 0; height: 50%; background: #000; z-index: 2; transition: transform 1.2s cubic-bezier(.7,0,.2,1); }
.k-fente-splash .volet.haut { top: 0; animation: k-fh 1.1s cubic-bezier(.7,0,.2,1) 1s forwards; }
.k-fente-splash .volet.bas { bottom: 0; animation: k-fb 1.1s cubic-bezier(.7,0,.2,1) 1s forwards; }
@keyframes k-fh { to { transform: translateY(calc(-1 * min(15vh, 13vw))); } }
@keyframes k-fb { to { transform: translateY(min(15vh, 13vw)); } }
.k-fente-splash .ligne { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: #fff; box-shadow: 0 0 16px 2px rgba(255,255,255,.7); z-index: 3; transform: scaleX(0); animation: k-ligne .8s cubic-bezier(.6,0,.2,1) .25s forwards, k-ligne-off .5s ease 1.05s forwards; }
@keyframes k-ligne { to { transform: scaleX(1); } }
@keyframes k-ligne-off { to { opacity: 0; } }
.k-fente-splash.fin .volet.haut { animation: none; transform: translateY(-100%); }
.k-fente-splash.fin .volet.bas { animation: none; transform: translateY(100%); }
.k-fente-splash.fin .fond { opacity: 0; transition-delay: 0s; transition-duration: .45s; }

/* Diaporama du Monolithe : plein écran, léger dézoom, titre du projet en blanc */
.k-mono { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; color: #fff; }
.k-mono-diapos { position: absolute; inset: 0; }
.k-mono-diapos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 7s linear; }
.k-mono-diapos img.on { opacity: 1; transform: scale(1); }
.k-mono-diapos img.avant { opacity: 0; transform: scale(1); }
.k-mono-voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 62%, rgba(0,0,0,.6) 100%); }
.k-mono-titre { position: absolute; left: var(--m); right: var(--m); bottom: calc(clamp(34px, 7vh, 64px) + env(safe-area-inset-bottom)); z-index: 3; display: block; color: #fff; text-decoration: none; }
.k-mono-titre b { display: block; overflow: hidden; font: 600 clamp(13px, 1.25vw, 16px)/1.3 var(--sans); text-transform: uppercase; letter-spacing: .14em; }
.k-mono-titre b i { display: block; font-style: normal; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2,.7,.1,1); }
.k-mono-titre .lieu { display: block; margin-top: 6px; font: 400 13px/1.3 var(--sans); color: rgba(255,255,255,.75); opacity: 0; transition: opacity .9s ease .35s; }
.k-mono-titre.on b i { transform: none; }
.k-mono-titre.on .lieu { opacity: 1; }
.k-mono-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.18); z-index: 3; }
.k-mono-barre i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .k-mono-diapos img { transition: opacity .4s; transform: none !important; } }

/* Aiguillage vertical : sans nombre de projets */
.k-seuil .m-mot { justify-content: flex-start; }

/* Entrée des variantes S : logo plein écran sur verre (cannelé ou flou), qui s'évapore au défilement */
.k-verre-hero { position: relative; height: 200vh; height: 200svh; }
.k-verre-stage { position: sticky; top: 0; }
.k-verre { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; will-change: opacity; }
/* Le flou est porté par les photos (filter: blur réglé dans kit.js), plus par backdrop-filter :
   certains téléphones Android n'affichaient qu'un aplat sous le logo. */
.k-verre.flou { background: rgba(10,10,10,.14); }
.k-verre.cannele {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0, rgba(255,255,255,.02) 5px, rgba(0,0,0,.16) 13px, rgba(0,0,0,.05) 16px, rgba(255,255,255,.13) 18px),
    rgba(12,12,12,.16); }
.k-verre-logo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; will-change: opacity, filter, transform; }
.k-verre-logo .g { animation: k-logo-in 1.6s ease both; }
.k-verre-logo .g { width: min(640px, 82vw); height: auto; filter: drop-shadow(0 2px 18px rgba(0,0,0,.25)); }
@keyframes k-logo-in { from { opacity: 0; } to { opacity: 1; } }
.k-verre-stage .k-mono-titre { z-index: 4; }
/* Positions écrites en toutes lettres (sans inset) pour les navigateurs Android plus anciens */
.k-verre-stage .k-mono-diapos, .k-verre-stage .k-mono-diapos img, .k-verre-stage .k-mono-voile { top: 0; right: 0; bottom: 0; left: 0; }
.k-verre-photos { will-change: filter, transform; }
.k-verre-indice { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 4; text-align: center; color: rgba(255,255,255,.85); font: 400 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; pointer-events: none; transition: opacity .5s; }
.k-verre-indice span { display: block; animation: k-logo-in 1s ease 1.2s both; }
.k-verre-indice i { display: block; width: 1px; height: 22px; margin: 8px auto 0; background: linear-gradient(#fff, transparent); animation: b-desc 2.2s ease-in-out infinite; }

/* Page « L'agence » des variantes S */
body[data-vue="agence"] #app, body.v-s:not(.v-s4)[data-vue="contact"] #app { padding-top: clamp(70px, 12vh, 120px); }
.k-agence-chiffres .k-note { margin-top: 28px; font-size: 12px; letter-spacing: .08em; color: var(--gris); }
/* Titres longs (« Restructuration ») : jamais plus larges que l'écran */
.b-fin a.autre { min-width: 0; max-width: 100%; }
.m-massif, .k-fin-titre { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 600px) { .k-fin-titre { font-size: clamp(26px, 8vw, 40px); } }
/* Acronyme en titre, descriptif en petit dessous (nom complet, ville) */
.k-sigle { display: block; }
.k-sigle-a { display: block; }
.k-desc { display: block; margin-top: 6px; font: 400 13px/1.35 var(--sans); letter-spacing: .01em; text-transform: none; text-shadow: none; opacity: .78; max-width: 46ch; overflow-wrap: break-word; }
.v5-titre .k-desc { margin-top: .9em; font-size: clamp(13px, 1.1vw, 16px); font-weight: 400; letter-spacing: .01em; line-height: 1.35; }
.v5-carte .inf .v5-desc { font-size: 12px; line-height: 1.35; text-transform: none; }
.k-desc-projet { margin: -6px 0 26px; font: 400 clamp(14px, 1.2vw, 17px)/1.4 var(--sans); color: var(--gris); max-width: 56ch; }
.k-fin-desc { margin-top: 10px; font-size: 13px; }
.v3-index a span { white-space: normal; text-transform: none; letter-spacing: .01em; font-size: 13px; line-height: 1.35; text-align: right; max-width: 46ch; }
@media (max-width: 760px) { .v3-index a span { text-align: left; font-size: 12px; } }
.v3-plaque-desc { margin: -1.5vh 0 3vh; max-width: 46ch; color: var(--gris); opacity: 1; font-size: 14px; }
.v3-plaque.d .v3-plaque-desc { margin-left: auto; text-align: right; }
.v3-desc-cover { position: absolute; left: 0; right: 0; bottom: 58px; margin: 0 auto; max-width: 46ch; padding: 0 var(--m); text-align: center; color: var(--gris); opacity: 1; z-index: 2; }
@media (max-width: 760px) { .k-desc { font-size: 12px; } .v5-carte .inf .v5-desc { font-size: 11px; } }

/* ===== S1 à S4 (body.v-s) : logo d'en-tête un peu plus grand ; en haut, L'atelier et Contact (Particulier / Public passent par l'aiguillage de l'accueil) ===== */
.v-s .k-tete img { height: 14px; }
@media (max-width: 760px) { .v-s .k-tete img { height: 10.5px; } }
@media (max-width: 370px) { .v-s .k-tete img { height: 9.5px; } }
.v-s .k-tete { gap: 16px; }
.v-s .k-tete .k-marque { flex: none; }
.v-s .m-nav { flex: none; white-space: nowrap; }
.v-s .m-nav a { opacity: .8; }
.v-s .m-nav a.actif, .v-s .m-nav a:hover { opacity: 1; }
@media (max-width: 760px) { .v-s .m-nav { gap: 14px; font-size: 10.5px; letter-spacing: .12em; } }
@media (max-width: 370px) { .v-s .m-nav { gap: 11px; font-size: 10px; letter-spacing: .08em; } }
/* Accueil : le menu apparaît quand le logo plein écran de l'intro s'est évaporé (intro de S4, pour S1 à S4) */
body.v-s.k-logo-parti[data-vue="accueil"] .b-nav, body.v-s.s4-passe[data-vue="accueil"] .b-nav { opacity: 1; pointer-events: auto; }

/* Descriptif : une collaboration éventuelle passe à la ligne (PSF) */
.k-desc, .k-desc-projet, .v5-desc { white-space: pre-line; }