/* ==========================================================
   Guessele Steve — Du trait à la lumière (v3)
   Plâtre blanc, encre wengé, lumière LED comme seul accent.
   Mode nuit : mêmes matières, éclairées autrement.
   ========================================================== */

:root {
  --plaster: #FAFAF8;
  --paper:   #F0EEE9;
  --card:    #FFFFFF;
  --ink:     #211A15;
  --walnut:  #6B4A33;
  --stone:   #6F6962;
  --line:    #DDD9D2;
  --led:     #FFB547;
  --night:   #17120E;
  --plaster-rgb: 250,250,248;
  --ink-rgb: 33,26,21;

  --f-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --f-hand: "Architects Daughter", "Bricolage Grotesque", cursive;
  --f-mono: "Courier Prime", "Courier New", monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, .8, .24, 1);
  color-scheme: light;
}
:root[data-theme="night"] {
  --plaster: #15120F;
  --paper:   #1E1A16;
  --card:    #221D19;
  --ink:     #EFE9E1;
  --walnut:  #DDB083;
  --stone:   #A89F95;
  --line:    #3A332C;
  --night:   #0B0907;
  --plaster-rgb: 21,18,15;
  --ink-rgb: 239,233,225;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--plaster); color: var(--ink);
  font-family: var(--f-sans); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.55;
  font-variation-settings: "opsz" 14, "wdth" 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
figure { margin: 0; }
::selection { background: var(--ink); color: var(--plaster); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--plaster); padding: 8px 14px; z-index: 300; }
.skip:focus { left: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.hand { font-family: var(--f-hand); color: var(--walnut); line-height: 1.3; }

.h2 {
  font-size: clamp(46px, 7.6vw, 132px); line-height: .9; letter-spacing: -.04em; margin: 0;
  font-weight: 600; font-variation-settings: "opsz" 96, "wdth" var(--wd, 80); text-wrap: balance;
}
.h3 {
  font-size: clamp(28px, 2.8vw, 44px); line-height: 1; letter-spacing: -.025em; margin: 0;
  font-weight: 600; font-variation-settings: "opsz" 72, "wdth" 85;
}
.meta { margin: 10px 0 0; color: var(--stone); }
.kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 14px; letter-spacing: .02em; color: var(--stone); }
.kicker::after { content: ""; width: clamp(48px, 7vw, 110px); height: 9px; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; border-right: 1px solid currentColor; transform-origin: 0 50%; transform: scaleX(var(--kl, 1)); opacity: .55; }
.kicker span { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 8px; border-radius: 100px; border: 1px solid currentColor; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.split-line { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

/* logos */
.logo { display: block; width: 100%; height: 100%; overflow: visible; }
[data-logo] { display: inline-block; }
.is-drawing path, .is-drawing circle, .is-drawing rect, .is-drawing polygon, .is-drawing ellipse {
  stroke: var(--c, currentColor); stroke-width: 1.4px; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  animation: logo-draw 1s var(--ease) forwards, logo-fill .7s .75s ease forwards;
}
@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-fill { to { fill-opacity: 1; stroke-width: 0; } }

/* boutons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 100px; text-decoration: none; font-size: 16px; border: 1px solid var(--ink); transition: background .3s, color .3s, box-shadow .3s, border-color .3s; }
.btn--led { background: var(--led); color: #211A15; border-color: var(--led); box-shadow: 0 0 30px rgba(255,181,71,.45); }
.btn--led:hover { box-shadow: 0 0 50px rgba(255,181,71,.8); }
.btn--ghost { border-color: rgba(255,255,255,.5); color: #F3EEE6; }
.btn--ghost:hover { background: #F3EEE6; color: #15110E; }
.btn--line { border-color: currentColor; color: inherit; }
.btn--line:hover { background: var(--ink); color: var(--plaster); }
.magnetic > span { display: inline-flex; align-items: center; gap: 8px; }

/* grain photo, très léger */
.grain {
  position: fixed; inset: -50%; z-index: 250; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-2%)} 80%{transform:translate(3%,4%)} 100%{transform:translate(0,0)} }

/* ---------- Ouverture ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--plaster);
  display: grid; grid-template-rows: auto 1fr auto auto; padding: var(--gutter); pointer-events: none;
}
.loader__top { display: flex; justify-content: space-between; font-family: var(--f-hand); color: var(--walnut); font-size: 15px; padding-top: 4px; border-top: 1px solid var(--ink); }
.loader__count { align-self: end; font-size: clamp(90px, 22vw, 360px); line-height: .8; font-weight: 600; letter-spacing: -.05em; font-variation-settings: "opsz" 96, "wdth" 75; font-variant-numeric: tabular-nums; }
.loader__name { margin: 18px 0 14px; font-size: 15px; }
.loader__name i { font-style: normal; color: var(--stone); }
.loader__bar { height: 1px; background: var(--line); position: relative; }
.loader__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
body:not(.is-loading) .loader { display: none; }
.no-js .loader { display: none; }

/* ---------- Curseur ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 240; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--ink); pointer-events: none; display: none;
  transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .3s, opacity .3s;
}
.cursor__label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: #211A15; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.is-big { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--led); box-shadow: 0 0 40px rgba(255,181,71,.55); }
.cursor.is-big .cursor__label { opacity: 1; }
.cursor.is-hidden { opacity: 0; }
@media (pointer: fine) { .cursor { display: block; } }

/* ---------- Cote de défilement ---------- */
.cote { position: fixed; right: 10px; top: 50%; height: 34vh; transform: translateY(-50%); z-index: 90; width: 30px; pointer-events: none; mix-blend-mode: difference; color: #fff; transition: opacity .5s; }
.cote__line { position: absolute; left: 6px; top: 0; width: 1px; height: 100%; background: currentColor; transform-origin: top; transform: scaleY(var(--s, 0)); }
.cote__tick { position: absolute; left: 1px; width: 11px; height: 1px; background: currentColor; }
.cote__tick--top { top: 0; }
.cote__tick--bot { top: calc(var(--s, 0) * 100%); }
.cote__val { position: absolute; left: 14px; top: calc(var(--s, 0) * 100% + 8px); writing-mode: vertical-rl; font-family: var(--f-hand); font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) { .cote { display: none; } }

/* ---------- Navigation ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 14px var(--gutter) 0; pointer-events: none; transition: transform .7s var(--ease); }
.nav.is-hidden { transform: translateY(calc(-100% - 10px)); }
.nav__bar {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 10px; border-radius: 18px;
  background: rgba(var(--plaster-rgb), .0); border: 1px solid transparent;
  transition: background .4s, border-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.is-scrolled .nav__bar, .menu-open .nav__bar {
  background: rgba(var(--plaster-rgb), .78); border-color: rgba(var(--ink-rgb), .09);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 12px 40px -18px rgba(0,0,0,.25);
}
.nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.mono {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--ink); color: var(--plaster);
  display: inline-flex; align-items: center; justify-content: center; gap: 0; font-weight: 700; font-size: 15px; letter-spacing: -.04em;
  font-variation-settings: "opsz" 48, "wdth" 75; overflow: hidden; transition: border-radius .5s var(--ease), transform .6s var(--ease);
}
.mono b { display: inline-block; font-weight: 700; transition: transform .6s var(--ease); }
.mono b:last-of-type { margin-left: -.02em; }
.mono i { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--led); box-shadow: 0 0 10px 2px rgba(255,181,71,.75); transition: transform .6s var(--ease); }
.mono::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 8px; height: 1.5px; background: currentColor; transform-origin: left; transform: scaleX(.4); transition: transform .6s var(--ease); }
.nav__brand:hover .mono { border-radius: 50%; transform: rotate(-8deg); }
.nav__brand:hover .mono b:first-of-type { transform: translateY(-2px); }
.nav__brand:hover .mono b:last-of-type { transform: translateY(2px); }
.nav__brand:hover .mono::after { transform: scaleX(1); }
.nav__brand:hover .mono i { transform: scale(1.4); }
.nav__id { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nav__id b { font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.nav__id small { font-size: 12px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav__links { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 100px; }
.nav__links a { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 13px; border-radius: 100px; text-decoration: none; font-size: 14.5px; transition: color .3s; }
.nav__links a i { font-style: normal; font-size: 10.5px; color: var(--stone); font-variant-numeric: tabular-nums; transition: color .3s; }
.nav__links a.is-current i { color: var(--led); }
.nav__pill { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 100px; background: rgba(var(--ink-rgb), .07); opacity: 0; transition: opacity .3s; pointer-events: none; }
.nav__links.has-pill .nav__pill { opacity: 1; }
.roll { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.25; height: 1.25em; }
.roll > span { display: inline-block; text-shadow: 0 1.25em 0 currentColor; transition: transform .55s var(--ease); }
.nav__links a:hover .roll > span, .nav__links a:focus-visible .roll > span { transform: translateY(-1.25em); }

.nav__side { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__links + .nav__side { margin-left: 0; }
.nav__status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 100px; font-size: 13px; background: rgba(var(--ink-rgb), .05); white-space: nowrap; }
.nav__clock { font-size: 13px; color: var(--stone); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 6px; }
.nav__clock time { color: var(--ink); }
.nav__theme { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(var(--ink-rgb), .14); transition: border-color .3s, background .3s; }
.nav__theme:hover { border-color: var(--ink); }
.nav__theme svg { width: 20px; height: 20px; overflow: visible; }
.theme__core { fill: var(--ink); transition: r .6s var(--ease); }
.theme__cut { transition: cx .6s var(--ease), cy .6s var(--ease); }
.theme__rays { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; fill: none; transform-origin: 12px 12px; transition: transform .6s var(--ease), opacity .4s; }
:root[data-theme="night"] .theme__core { r: 8px; }
:root[data-theme="night"] .theme__cut { cx: 17px; cy: 7px; }
:root[data-theme="night"] .theme__rays { transform: rotate(45deg) scale(.4); opacity: 0; }
.nav__cv { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 11px; border-radius: 100px; border: 1px solid rgba(var(--ink-rgb), .14); text-decoration: none; font-size: 14px; transition: border-color .3s, background .3s, color .3s; }
.nav__cv svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.nav__cv:hover { border-color: var(--ink); }
.nav__cv:hover svg { transform: translateY(2px); }
.nav__cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 100px; background: var(--ink); color: var(--plaster); text-decoration: none; font-size: 14.5px; transition: background .3s, color .3s, box-shadow .3s; }
.nav__cta:hover { background: var(--led); color: #211A15; box-shadow: 0 0 28px rgba(255,181,71,.6); }
.nav__progress { position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1.5px; background: var(--led); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 8px rgba(255,181,71,.8); border-radius: 2px; opacity: 0; transition: opacity .4s; }
.nav.is-scrolled .nav__progress { opacity: 1; }
.nav__burger { display: none; width: 40px; height: 40px; position: relative; border-radius: 50%; background: var(--ink); }
.nav__burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--plaster); transition: transform .4s var(--ease); }
.nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 23px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 95; background: var(--plaster); display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--gutter) 30px; }
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font-size: clamp(40px, 11vw, 70px); line-height: 1.08; font-weight: 600; letter-spacing: -.035em; font-variation-settings: "opsz" 96, "wdth" 78; border-bottom: 1px solid var(--line); padding: 6px 0; }
.menu__links a i { font-style: normal; font-size: 13px; color: var(--stone); letter-spacing: 0; font-variation-settings: normal; font-weight: 400; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--stone); }
.menu__foot a { color: var(--ink); }
/* La barre ne se tasse jamais : on retire les éléments secondaires, dans l'ordre, avant de manquer de place
   (horloge, puis texte du statut, puis sous-titre, puis menu burger). Seuils mesurés, police auto-hébergée. */
.nav__links a, .roll { white-space: nowrap; }
.nav__status, .nav__theme, .nav__cv, .nav__cta, .nav__burger { flex: none; }
.nav__id b { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1680px) { .nav__clock { display: none; } }
@media (max-width: 1600px) { .nav__links a { padding: 8px 10px; } }
@media (max-width: 1530px) { .nav__status span { display: none; } .nav__status { padding: 7px; } }
@media (max-width: 1360px) { .nav__id small { display: none; } }
@media (max-width: 1250px) { .nav__links a { padding: 8px 7px; gap: 4px; } .nav__cta { padding: 0 14px; } }
@media (max-width: 1180px) { .nav__status { display: none; } }
@media (max-width: 1150px) { .nav__links a { font-size: 13.5px; } }
@media (max-width: 1120px) { .nav__links, .nav__cta, .nav__status { display: none; } .nav__burger { display: block; } }
/* Menu plein écran : la taille suit aussi la hauteur, et il défile s'il le faut */
.menu { padding-top: clamp(84px, 16svh, 110px); padding-bottom: clamp(16px, 4svh, 30px); overflow-y: auto; overscroll-behavior: contain; }
.menu__links a { font-size: clamp(30px, min(11vw, 7.2svh), 70px); }
@media (max-height: 560px) and (orientation: landscape) {
  .menu__links { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 4vw, 48px); }
  .menu__links a { font-size: clamp(22px, 9svh, 44px); padding: 4px 0; }
}
@media (max-width: 560px) { .nav__cv { display: none; } .nav__id b { font-size: 14.5px; } .nav { padding-top: 10px; } }

/* ---------- 1. Construction 3D ---------- */
.build { position: relative; height: 600vh; }
.build__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.build__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.build__fallback { position: absolute; inset: 12vh var(--gutter) 14vh; width: calc(100% - 2 * var(--gutter)); height: auto; object-fit: cover; border-radius: 4px; display: none; }
.no-webgl .build__fallback { display: block; }
.no-webgl .build__labels, .no-webgl .rail { display: none; }
/* sans WebGL : pas de séquence 3D, le texte puis la photo de la cuisine, à toutes les tailles d'écran */
.no-webgl .build { height: auto; }
.no-webgl .build__stage { position: relative; height: auto; overflow: visible; padding-top: 96px; display: flex; flex-direction: column; }
.no-webgl .build__head { position: relative; top: 0; left: 0; right: 0; padding: 0 var(--gutter); order: -1; }
.no-webgl .build__intro { max-width: 60ch; }
.no-webgl .build__canvas, .no-webgl .build__captions, .no-webgl .build__hint { display: none; }
.no-webgl .build__fallback { position: relative; inset: auto; width: auto; height: min(68vh, 62vw); margin: clamp(24px, 4vw, 48px) var(--gutter) 0; }

.build__head { position: absolute; left: var(--gutter); right: var(--gutter); top: 96px; pointer-events: none; }
.build__name {
  margin: 0; font-size: 14.6vw; line-height: .82; letter-spacing: -.045em; white-space: nowrap;
  font-weight: 600; font-variation-settings: "opsz" 96, "wdth" 80;
}
.build__name .line { display: block; overflow: hidden; padding: .02em 0 .08em; }
/* Écran large mais peu haut (portable avec zoom Windows, fenêtre réduite) : le titre se cale sur la hauteur
   pour rester au-dessus du plan 3D, qui occupe toujours la même part de la hauteur */
@media (orientation: landscape) { .build__name { max-width: min(100%, calc(274svh - 712px)); } }
.build__name .chars { display: inline-block; }
.build__intro { display: flex; flex-direction: column; align-items: start; gap: 18px; margin-top: clamp(14px, 2vw, 28px); max-width: 40%; }
.build__lede { margin: 0; max-width: 36ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.45; }
.build__hint { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--f-hand); color: var(--walnut); font-size: 17px; }
.build__hint i { width: 44px; height: 1px; background: var(--walnut); position: relative; overflow: hidden; }
.build__hint i::after { content: ""; position: absolute; inset: 0; background: var(--led); transform: translateX(-100%); animation: hint 2.2s var(--ease) infinite; }
@keyframes hint { 60%, 100% { transform: translateX(100%); } }

.build__labels { position: absolute; inset: 0; pointer-events: none; }
.dim { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--f-hand); font-size: 16px; color: #211A15; background: rgba(250,250,248,.9); padding: 1px 8px; border-radius: 3px; white-space: nowrap; opacity: 0; }
.note { position: absolute; left: 0; top: 0; font-family: var(--f-hand); font-size: 16px; color: #FFF4E4; white-space: nowrap; opacity: 0; padding: 3px 12px 3px 56px; }
.note::before { content: ""; position: absolute; left: 46px; right: 0; top: 0; bottom: 0; border-radius: 5px; background: rgba(23,18,14,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: -1; }
.note--left { padding: 3px 56px 3px 12px; }
.note--left::before { left: 0; right: 46px; }
.note i { position: absolute; left: 0; top: 50%; width: 42px; height: 1px; background: currentColor; transform-origin: left; }
.note i::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--led); box-shadow: 0 0 10px 2px rgba(255,181,71,.8); }
.note { isolation: isolate; }
.note--left i { left: auto; right: 0; transform-origin: right; }
.note--left i::before { left: auto; right: -3px; }

.build__captions { position: absolute; right: var(--gutter); bottom: 100px; width: min(400px, 80vw); opacity: 0; }
.cap { padding: 18px 20px 20px; border-radius: 10px; background: rgba(var(--plaster-rgb), .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--ink-rgb), .07); }
.cap { position: absolute; right: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; }
.cap.is-active { opacity: 1; visibility: visible; }
.cap__n { display: block; font-size: 12px; color: var(--stone); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.cap h2 { margin: 0 0 8px; font-size: clamp(30px, 3vw, 48px); line-height: 1; letter-spacing: -.03em; font-weight: 600; font-variation-settings: "opsz" 72, "wdth" 82; }
.cap p { margin: 0; color: var(--stone); }

.rail { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; margin: 0; padding: 0 0 14px; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; font-size: 14px; }
.rail li { display: flex; align-items: center; gap: 10px; color: var(--stone); transition: color .4s; }
.rail li span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: 12px; transition: background .4s, border-color .4s, box-shadow .4s, color .4s; }
.rail li.is-active, .rail li.is-done { color: var(--ink); }
.rail li.is-active span { background: var(--led); border-color: var(--led); box-shadow: 0 0 16px 2px rgba(255,181,71,.6); color: #211A15; }
.rail__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.rail__bar b { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.build.is-night .rail li { color: rgba(var(--ink-rgb), .55); }
.build.is-night .rail li.is-active, .build.is-night .rail li.is-done { color: var(--ink); }
/* Écran peu haut : la frise descend un peu pour ne pas toucher la cote « 6,00 m » du plan */
@media (orientation: landscape) and (max-height: 720px) { .rail { bottom: 10px; } }

@media (max-width: 760px) {
  .build { height: 520vh; }
  .build__head { top: 82px; }
  .build__intro { gap: 12px; max-width: none; }
  .build__captions { left: var(--gutter); right: var(--gutter); width: auto; bottom: 96px; }
  .rail { font-size: 0; gap: 6px; }
  .rail li { justify-content: center; }
  .dim, .note { font-size: 13px; }
  .note { display: none; }
}
/* Téléphone à l'horizontale (écran bas) : titre calé sur la hauteur, texte resserré à gauche, frise en pastilles */
@media (max-height: 560px) and (orientation: landscape) {
  .build__head { top: 70px; }
  .build__name { max-width: min(100%, 112svh); }
  .build__intro { margin-top: 10px; gap: 8px; max-width: min(40%, 360px); }
  .build__lede { font-size: 14px; line-height: 1.4; }
  .build__hint { font-size: 14px; gap: 10px; }
  .build__hint i { width: 30px; }
  .build__captions { left: auto; right: var(--gutter); bottom: 14px; width: min(330px, 42vw); }
  .cap { padding: 10px 14px 12px; }
  .cap__n { font-size: 11px; margin-bottom: 3px; }
  .cap h2 { font-size: 22px; margin-bottom: 4px; }
  .cap p { font-size: 13px; line-height: 1.35; }
  .rail { right: auto; width: min(calc((100% - 2 * var(--gutter)) * .4), 360px); bottom: 10px; padding-bottom: 8px; font-size: 0; gap: 6px; }
  .rail li { justify-content: center; }
  .dim { font-size: 13px; }
  .note { display: none; }
}
@media (max-height: 360px) and (orientation: landscape) {
  .build__name { max-width: min(100%, 90svh); }
  .build__hint { display: none; }
  .build__lede { font-size: 13px; }
}
/* Petit téléphone en portrait : l'intro se resserre pour laisser le plan respirer */
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
  .build__head { top: 76px; }
  .build__intro { margin-top: 10px; gap: 8px; }
  .build__lede { font-size: 14.5px; line-height: 1.4; }
  .build__hint { font-size: 14.5px; }
}

/* ---------- 2. Manifeste ---------- */
.manifesto { padding: clamp(110px, 15vw, 220px) var(--gutter) clamp(90px, 12vw, 170px); }
.manifesto__text { margin: 0 auto; max-width: 23em; font-size: clamp(28px, 3.9vw, 64px); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; font-variation-settings: "opsz" 60, "wdth" 92; text-wrap: balance; }
.manifesto__text .w { color: rgba(var(--ink-rgb), .15); transition: color .25s; }
.manifesto__text .w.is-lit { color: var(--ink); }

/* ---------- En-têtes ---------- */
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36ch); gap: 24px 60px; align-items: end; margin-bottom: clamp(40px, 6vw, 90px); }
.head__aside { margin: 0; color: var(--stone); }
@media (max-width: 760px) { .head { grid-template-columns: 1fr; } }

/* ---------- 3. Pipeline façon n8n ---------- */
.flow { padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(60px, 8vw, 110px); }
.n8n { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(var(--ink-rgb), .1); background: var(--card); box-shadow: 0 40px 80px -50px rgba(0,0,0,.35); }
.n8n__bar { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-bottom: 1px solid rgba(var(--ink-rgb), .08); font-size: 14px; }
.n8n__brand { width: 34px; height: 20px; }
.n8n__name { font-weight: 600; }
.n8n__name em { font-style: normal; color: var(--stone); margin: 0 4px; font-weight: 400; }
.n8n__active { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--stone); }
.n8n__active i { width: 28px; height: 16px; border-radius: 10px; background: #43B581; position: relative; }
.n8n__active i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.n8n__timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--stone); font-size: 13px; }
.n8n__timer b { color: var(--ink); font-weight: 600; font-size: 15px; }
.n8n__run { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px; border-radius: 8px; background: #EA4B71; color: #fff; font-size: 14px; font-weight: 600; transition: filter .3s, transform .3s; }
.n8n__run svg { width: 16px; height: 16px; fill: currentColor; }
.n8n__run:hover { filter: brightness(1.08); transform: translateY(-1px); }
.n8n__run[disabled] { opacity: .55; cursor: progress; }
.n8n__canvas {
  position: relative; height: clamp(440px, 40vw, 600px);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(var(--ink-rgb), .16) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.n8n__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.n8n__edges .e { fill: none; stroke: rgba(var(--ink-rgb), .3); stroke-width: 2; }
.n8n__edges .e-live { fill: none; stroke: #EA4B71; stroke-width: 2.4; stroke-dasharray: 7 7; opacity: 0; }
.n8n__edges .e-done { fill: none; stroke: #43B581; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.n8n__edges .lbl { font: 600 11px var(--f-sans); fill: #43B581; opacity: 0; }
.n8n__edges .port { fill: var(--card); stroke: rgba(var(--ink-rgb), .45); stroke-width: 1.5; }
.node {
  position: absolute; width: 104px; height: 104px; border-radius: 16px; background: var(--card);
  border: 1.5px solid rgba(var(--ink-rgb), .22); display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.4); transition: border-color .3s, box-shadow .3s; transform: translate(-50%, -50%);
}
.node--trigger { border-radius: 40px 16px 16px 40px; }
.node b { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.node small { position: absolute; top: calc(100% + 30px); left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--stone); white-space: nowrap; }
.node__icon { width: 48px; height: 48px; display: grid; place-items: center; }
.node__icon--code svg { width: 40px; height: 40px; fill: none; stroke: #FF6D5A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.node__bolt { position: absolute; left: -14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--card); border: 1.5px solid rgba(var(--ink-rgb), .22); }
.node__bolt::after { content: ""; position: absolute; inset: 5px; background: #EA4B71; clip-path: polygon(55% 0, 15% 58%, 45% 58%, 35% 100%, 85% 38%, 55% 38%); }
.node__ok { position: absolute; right: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; background: #43B581; transform: scale(0); box-shadow: 0 0 0 3px var(--paper); }
.node__ok::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.node.is-run { border-color: #EA4B71; box-shadow: 0 0 0 5px rgba(234,75,113,.15), 0 10px 24px -14px rgba(0,0,0,.4); }
.node.is-done { border-color: #43B581; }
.node.is-done .node__ok { transform: scale(1); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.node__ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); fill: none; stroke: #8E75B2; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); opacity: 0; overflow: visible; }
.node-card { position: absolute; width: clamp(190px, 17vw, 250px); transform: translate(-50%, -50%); }
.node-card figcaption { margin-top: 10px; font-size: 13px; color: var(--stone); text-align: center; }
.n8n__canvas.is-vertical .node-card figcaption { display: none; }
.win { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; background: #2B2B2E; color: #EEE; border-radius: 10px 10px 0 0; }
.win__dots { display: inline-flex; gap: 4px; } .win__dots i { width: 8px; height: 8px; border-radius: 50%; background: #5A5A60; }
.win__title { width: 16px; height: 16px; margin-left: 4px; }
.n8n__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #ddd; }
.n8n__in .n8n__img { border-radius: 0 0 10px 10px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); }
.n8n__img img { width: 100%; height: 100%; object-fit: cover; }
.n8n__noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; image-rendering: pixelated; }
.n8n__render { opacity: 0; filter: blur(14px) saturate(.3); transform: scale(1.08); }
.chat { background: #E7EEF5; border-radius: 14px; padding: 10px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); }
:root[data-theme="night"] .chat { background: #1C2733; }
.chat__head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; padding: 2px 4px 8px; color: #1C2733; }
:root[data-theme="night"] .chat__head { color: #DDE7F0; }
.chat__head i { width: 18px; height: 18px; }
.chat__bubble { background: #fff; border-radius: 12px 12px 12px 4px; padding: 5px; }
:root[data-theme="night"] .chat__bubble { background: #2B5278; }
.chat__bubble .n8n__img { border-radius: 9px; }
.chat__meta { display: block; text-align: right; font-size: 11.5px; color: #6C7883; padding: 4px 4px 1px; }
:root[data-theme="night"] .chat__meta { color: #B7C9DA; }
.chat__meta i { font-style: normal; color: #4FAE4E; }
.n8n__prompt {
  position: absolute; width: min(290px, 70%); padding: 12px 14px; border-radius: 12px; background: var(--card);
  border: 1px solid rgba(var(--ink-rgb), .12); box-shadow: 0 24px 50px -28px rgba(0,0,0,.45);
  font-family: var(--f-mono); font-size: 13px; line-height: 1.45; opacity: 0; transform: translate(-50%, 0) translateY(10px); pointer-events: none;
}
.n8n__prompt-h { display: block; font-family: var(--f-sans); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); margin-bottom: 6px; }
.n8n__prompt-t { margin: 0; min-height: 4.4em; }
.n8n__prompt-t::after { content: "▍"; color: #EA4B71; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.packet { position: absolute; left: 0; top: 0; width: 46px; height: 34px; margin: -17px 0 0 -23px; border-radius: 6px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 4px rgba(234,75,113,.25); opacity: 0; pointer-events: none; z-index: 5; }
.packet img { width: 100%; height: 100%; object-fit: cover; }
.flow__steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: st; }
.flow__steps li { counter-increment: st; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.flow__steps li::before { content: "0" counter(st); font-size: 12px; color: var(--stone); font-variant-numeric: tabular-nums; }
.flow__steps b { font-weight: 600; }
.flow__steps span { color: var(--stone); font-size: 15px; }
.n8n__canvas.is-vertical .node { width: 86px; height: 86px; }
.n8n__canvas.is-vertical .node b { top: 24%; left: calc(100% + 18px); transform: none; }
.n8n__canvas.is-vertical .node small { top: 50%; left: calc(100% + 18px); transform: none; }
.n8n__canvas.is-vertical .n8n__prompt { width: min(420px, 86%); }
@media (max-width: 1080px) {
  .n8n__canvas { height: 1200px; }
  .node-card { width: min(250px, 66vw); }
}
@media (max-width: 900px) {
  .flow__steps { grid-template-columns: 1fr 1fr; }
  .n8n__name em, .n8n__active { display: none; }
}
@media (max-width: 520px) { .flow__steps { grid-template-columns: 1fr; } .n8n__run span { display: none; } .n8n__run { padding: 0 12px; } }

/* ---------- 4. Avant / après ---------- */
.ba-sec { padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(60px, 8vw, 120px); }
.ba-case { margin-bottom: clamp(90px, 12vw, 170px); }
.ba-case__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); gap: 28px clamp(24px, 3vw, 48px); margin-top: 26px; align-items: start; }
.ba-case__body > p { margin: 0; max-width: 46ch; }
.ba { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--paper); user-select: none; -webkit-user-select: none; touch-action: pan-y; --p: 50%; }
.ba--43 { aspect-ratio: 1034 / 896; max-width: 1080px; margin-left: auto; }
.ba-case--solo { margin-bottom: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ba-case--solo .ba--43 { max-width: none; margin: 0; }
.ba-case--solo .ba-case__body { grid-template-columns: 1fr; margin-top: 0; gap: 22px; }
.ba-case--solo .strip { grid-column: auto; }
@media (max-width: 900px) { .ba-case--solo { grid-template-columns: 1fr; } }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 0; pointer-events: none; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: #FAFAF8; box-shadow: 0 0 14px rgba(255,181,71,.9); }
.ba__handle i { position: absolute; top: 50%; left: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #FAFAF8; box-shadow: 0 6px 24px rgba(33,26,21,.2); }
.ba__handle i::before, .ba__handle i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-left: 1.5px solid #211A15; border-bottom: 1.5px solid #211A15; }
.ba__handle i::before { left: 16px; transform: rotate(45deg); }
.ba__handle i::after { right: 16px; transform: rotate(-135deg); }
.ba__tag { position: absolute; top: 14px; padding: 2px 10px; border-radius: 4px; background: rgba(250,250,248,.92); color: #211A15; font-size: 16px; pointer-events: none; }
.ba__tag--l { left: 14px; } .ba__tag--r { right: 14px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.ba:has(.ba__range:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.thumb { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--paper); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.thumb:hover img { transform: scale(1.07); }
@media (max-width: 1000px) { .ba-case__body { grid-template-columns: 1fr 1fr; } .strip { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ba-case__body { grid-template-columns: 1fr; } }

/* ---------- 5. Réalisations : le mur de rendus ---------- */
.mur {
  position: relative; isolation: isolate; padding: clamp(96px, 11vw, 160px) 0 clamp(70px, 8vw, 120px);
  clip-path: inset(0 var(--mi, 0px) round var(--mr, 0px));
  --ink: #F3EEE6; --ink-rgb: 243,238,230; --stone: #A39A90; --walnut: #DDB083; --line: rgba(243,238,230,.14); --card: #1C1714; --paper: #1C1714; --plaster-rgb: 16,13,11;
  color: var(--ink);
}
.mur ::selection { background: var(--led); color: #211A15; }
.mur :focus-visible { outline-color: var(--led); }
.mur__bg { position: absolute; inset: 0; z-index: -1; background: #100D0B; }
.mur__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 0%, rgba(255,181,71,.07), transparent 70%); pointer-events: none; }
.mur__head { padding: 0 var(--gutter); }
.mur__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 0 var(--gutter); margin: 0 0 22px; }
.mur__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.mur__f { display: inline-flex; align-items: flex-start; gap: 5px; padding: 9px 16px; border-radius: 100px; border: 1px solid rgba(243,238,230,.18); font-size: 14.5px; color: rgba(243,238,230,.78); transition: background .35s, color .35s, border-color .35s; }
.mur__f sup { font-size: 10.5px; line-height: 1; top: 0; margin-top: 1px; font-variant-numeric: tabular-nums; color: var(--stone); transition: color .35s; }
.mur__f:hover { border-color: rgba(243,238,230,.55); color: #F3EEE6; }
.mur__f[aria-pressed="true"] { background: #F3EEE6; border-color: #F3EEE6; color: #15110E; }
.mur__f[aria-pressed="true"] sup { color: #8A6A4E; }
.mur__count { margin: 0; font: 13px var(--f-mono); letter-spacing: .05em; color: var(--stone); }
.mur__count b { font-weight: 400; color: var(--led); }

.mur__stage {
  position: relative; height: clamp(540px, 88vh, 980px); overflow: hidden; overflow: clip; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent);
}
.mur__stage.is-drag { cursor: grabbing; }
.mur__wall { position: absolute; inset: 0; transform-origin: 50% 50%; }
.mur__t { position: absolute; left: 0; top: 0; display: block; padding: 0; text-align: left; will-change: transform; border-radius: 4px; }
.mur__t.is-off { visibility: hidden; }
.mur__wall.is-pre .mur__t { opacity: 0; }
.mur__t:focus-visible { outline: 2px solid var(--led); outline-offset: 4px; }
.mur__stage.has-hot .mur__t:focus-visible .mur__card { filter: none; }
.mur__card {
  position: relative; display: block; width: 100%; overflow: hidden; border-radius: 3px; background: #1C1714;
  transition: transform .8s var(--ease), filter .7s var(--ease), box-shadow .7s var(--ease);
}
.mur__card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; will-change: transform; }
.mur__card img.is-in { opacity: 1; }
.mur__stage.has-hot .mur__t:not(.is-hot) .mur__card { filter: brightness(.72) saturate(.85); }
.mur__t.is-hot .mur__card { transform: scale(1.04); box-shadow: 0 34px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,181,71,.6), 0 0 34px -6px rgba(255,181,71,.35); }
.mur__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 3px; padding: 46px 14px 12px; background: linear-gradient(transparent, rgba(12,9,7,.86)); color: #F3EEE6; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .7s var(--ease); pointer-events: none; }
.mur__cap b { font-weight: 600; font-size: 16.5px; line-height: 1.15; letter-spacing: -.01em; }
.mur__cap small { font: 11px var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: rgba(243,238,230,.72); }
.mur__t.is-hot .mur__cap, .mur__t:focus-visible .mur__cap { opacity: 1; transform: none; }
.mur__badge { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 100px; background: rgba(12,9,7,.8); color: #F3EEE6; font: 10.5px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
.mur__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px 1px rgba(255,181,71,.8); }
.mur__light {
  position: absolute; left: 0; top: 0; z-index: 2; width: 400px; height: 400px; margin: -200px 0 0 -200px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,190,110,.11), rgba(255,190,110,0) 9%, rgba(10,8,6,0) 12%, rgba(10,8,6,.56) 40%, rgba(10,8,6,.56));
  will-change: transform, opacity;
}
.mur__hud { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 26px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; pointer-events: none; }
.mur__hint { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 100px; background: rgba(16,13,11,.86); border: 1px solid rgba(243,238,230,.14); font-size: 14px; color: #F3EEE6; transition: opacity .6s, transform .8s var(--ease); }
.mur__hint svg { width: 20px; height: 20px; fill: none; stroke: var(--led); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: mur-hand 2.6s var(--ease) infinite; }
@keyframes mur-hand { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, 3px); } }
.mur__hint.is-gone { opacity: 0; transform: translateY(10px); }
.mur__map { margin: 0; pointer-events: auto; padding: 8px; border-radius: 8px; background: rgba(16,13,11,.88); border: 1px solid rgba(243,238,230,.14); cursor: pointer; }
.mur__map canvas { display: block; width: 132px; height: 84px; }
.mur__map figcaption { margin-top: 6px; font: 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }

/* le ruban : téléphone, tablette, animations réduites */
.mur__rail, .mur__prog { display: none; }
.mur.is-rail .mur__stage { display: none; }
.mur.is-rail .mur__rail { display: flex; gap: 14px; margin: 0; padding: 6px var(--gutter) 18px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.mur.is-rail .mur__rail::-webkit-scrollbar { display: none; }
.mur__rc { flex: 0 0 auto; width: min(84vw, 460px); scroll-snap-align: start; }
.mur__rc button { display: block; width: 100%; text-align: left; }
.mur__rimg { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #1C1714; }
.mur__rimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mur__rc button:hover .mur__rimg img { transform: scale(1.05); }
.mur__rn { position: absolute; right: 10px; bottom: 8px; font: 12px var(--f-mono); color: rgba(243,238,230,.85); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.mur__rtx { display: flex; flex-direction: column; gap: 3px; padding: 14px 2px 0; }
.mur__rtx small { font: 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--led); }
.mur__rtx b { font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.mur__rtx > span { font-size: 14px; color: var(--stone); }
.mur.is-rail .mur__prog { display: block; position: relative; height: 1px; margin: 4px var(--gutter) 0; background: rgba(243,238,230,.16); }
.mur__prog i { position: absolute; inset: 0; background: var(--led); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 8px rgba(255,181,71,.7); }
@media (min-width: 901px) { .mur__rc { width: clamp(300px, 30vw, 460px); } }
@media (max-width: 560px) { .mur__f { padding: 8px 13px; font-size: 14px; } .mur__count { width: 100%; } }

/* ---------- Visionneuse de projet ---------- */
.vue {
  position: fixed; inset: 0; z-index: 150; display: grid; grid-template-columns: minmax(0, 1fr) min(440px, 34vw);
  --ink: #F3EEE6; --ink-rgb: 243,238,230; --stone: #A39A90; color: var(--ink);
}
.vue[hidden] { display: none; }
.vue :focus-visible { outline-color: var(--led); }
.vue__bg { position: absolute; inset: 0; overflow: hidden; background: #0C0A08; }
.vue__amb { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(70px) saturate(1.35) brightness(.42); }
.vue__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 40% 50%, transparent 30%, rgba(8,6,5,.75)); }
.vue__stage { position: relative; min-width: 0; min-height: 0; touch-action: pan-y; }
.vue__frame { position: absolute; overflow: hidden; border-radius: 3px; background: #1C1714; transform-origin: 50% 50%; box-shadow: 0 60px 120px -40px rgba(0,0,0,.85); }
.vue__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; }
.vue__img + .vue__img { opacity: 0; }
.vue__edge { position: absolute; z-index: 3; top: 0; bottom: 0; left: 100%; width: 2px; margin-left: -1px; background: #FFE3B3; box-shadow: 0 0 16px 4px rgba(255,181,71,.75), 0 0 60px 10px rgba(255,181,71,.3); opacity: 0; pointer-events: none; }
.vue__tag { position: absolute; z-index: 4; left: 12px; top: 12px; padding: 2px 10px; border-radius: 4px; background: rgba(250,250,248,.92); color: #211A15; font-size: 16px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.vue__tag.is-on { opacity: 1; }
.vue__zone { position: absolute; z-index: 2; top: 64px; bottom: 64px; width: 50%; display: flex; align-items: center; color: #F3EEE6; }
.vue__zone[hidden] { display: none; }
.vue__zone--prev { left: 0; justify-content: flex-start; padding-left: clamp(10px, 1.6vw, 24px); }
.vue__zone--next { right: 0; justify-content: flex-end; padding-right: clamp(10px, 1.6vw, 24px); }
.vue__zone svg { width: 48px; height: 48px; padding: 13px; border-radius: 50%; background: rgba(16,13,11,.55); border: 1px solid rgba(243,238,230,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .0; transition: opacity .35s, transform .6s var(--ease); }
.vue__zone:hover svg, .vue__zone:focus-visible svg { opacity: 1; }
.vue__zone--prev:hover svg { transform: translateX(-4px); } .vue__zone--next:hover svg { transform: translateX(4px); }
.vue__zone:focus-visible { outline-offset: -6px; }
@media (pointer: coarse) { .vue__zone svg { opacity: .8; } }
.vue__hud { position: absolute; z-index: 3; left: clamp(14px, 2vw, 28px); bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vue__n { padding: 8px 13px; border-radius: 100px; background: rgba(16,13,11,.6); border: 1px solid rgba(243,238,230,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 12.5px var(--f-mono); letter-spacing: .05em; color: rgba(243,238,230,.85); }
.vue__n b { font-weight: 400; color: var(--led); }
.vue__maq { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border-radius: 100px; background: #F3EEE6; color: #15110E; font-size: 14px; transition: background .3s, box-shadow .3s; }
.vue__maq[hidden] { display: none; }
.vue__maq i { width: 8px; height: 8px; border-radius: 50%; background: var(--led); box-shadow: 0 0 10px 2px rgba(255,181,71,.8); }
.vue__maq:hover, .vue__maq[aria-pressed="true"] { background: var(--led); box-shadow: 0 0 30px rgba(255,181,71,.55); }
.vue__maq[aria-pressed="true"] i { background: #211A15; box-shadow: none; }
.vue__panel {
  position: relative; z-index: 3; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 18px; padding: 86px clamp(22px, 2.4vw, 36px) 28px;
  background: rgba(12,10,8,.5); border-left: 1px solid rgba(243,238,230,.1); backdrop-filter: blur(26px) saturate(1.2); -webkit-backdrop-filter: blur(26px) saturate(1.2);
}
.vue__room { margin: 0; display: flex; align-items: center; gap: 10px; font: 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--led); }
.vue__room i { width: 30px; height: 1px; background: currentColor; opacity: .6; }
.vue__room span { color: var(--stone); }
.vue__title { margin: 0; font-size: clamp(34px, 3.3vw, 58px); line-height: .94; letter-spacing: -.035em; font-weight: 600; font-variation-settings: "opsz" 96, "wdth" 80; text-wrap: balance; }
.vue__meta { margin: -6px 0 0; color: var(--stone); font-size: 15px; }
.vue__text { margin: 0; color: rgba(243,238,230,.88); line-height: 1.6; max-width: 46ch; }
.vue__h { margin: 0 0 10px; font: 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.vue__pal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.vue__pal i { display: block; height: 40px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.vue__pal span { display: block; margin-top: 5px; font: 10px var(--f-mono); letter-spacing: .02em; color: var(--stone); }
.vue__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vue__thumbs button { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: #1C1714; opacity: .5; transition: opacity .35s; }
.vue__thumbs button:hover, .vue__thumbs button.is-on { opacity: 1; }
.vue__thumbs button.is-on::after { content: ""; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--led); }
.vue__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.vue__thumbs b { position: absolute; left: 6px; bottom: 5px; font: 10.5px var(--f-mono); font-weight: 400; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.vue__thumbs em { position: absolute; right: 5px; top: 5px; padding: 2px 5px; border-radius: 3px; background: var(--led); color: #211A15; font: 9px var(--f-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.vue__nextp { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 14px; padding: 14px; border-radius: 6px; border: 1px solid rgba(243,238,230,.14); text-align: left; transition: background .35s, border-color .35s; }
.vue__nextp:hover { background: rgba(243,238,230,.06); border-color: rgba(243,238,230,.4); }
.vue__nextp small { display: block; font: 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.vue__nextp b { display: block; margin-top: 5px; font-size: 19px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.vue__nextp img { width: 96px; height: 68px; object-fit: cover; border-radius: 3px; transition: transform .8s var(--ease); }
.vue__nextp:hover img { transform: scale(1.06); }
.vue__close { position: absolute; z-index: 6; top: 22px; right: var(--gutter); display: inline-flex; align-items: center; gap: 10px; padding: 8px 9px 8px 16px; border-radius: 100px; border: 1px solid rgba(243,238,230,.3); background: rgba(12,10,8,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; color: #F3EEE6; transition: background .3s, color .3s; }
.vue__close kbd { padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(243,238,230,.25); font: 10.5px var(--f-mono); color: var(--stone); transition: color .3s, border-color .3s; }
.vue__close:hover { background: #F3EEE6; color: #15110E; }
.vue__close:hover kbd { color: #6F6962; border-color: rgba(21,17,14,.25); }
@media (max-width: 900px) {
  .vue { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60svh auto; overflow-y: auto; overscroll-behavior: contain; }
  .vue__bg { position: fixed; }
  .vue__panel { overflow: visible; padding: 22px var(--gutter) 44px; border-left: 0; border-top: 1px solid rgba(243,238,230,.1); background: rgba(12,10,8,.72); }
  .vue__close { position: fixed; top: 14px; }
  .vue__close kbd { display: none; }
  .vue__zone { top: 56px; bottom: 56px; }
  .vue__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vue__nextp { margin-top: 8px; }
}
.static .vue__amb { filter: blur(50px) brightness(.4); }

/* ---------- 3. Les outils : la mosaïque vivante ---------- */
.oz { padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(30px, 4vw, 60px); }
[data-g="design"] { --gc: #8E6B4C; } [data-g="auto"] { --gc: #FFB547; } [data-g="code"] { --gc: #3178C6; }
:root[data-theme="night"] [data-g="design"] { --gc: #DDB083; } :root[data-theme="night"] [data-g="code"] { --gc: #6FA3E8; }
.oz__legend { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(clamp(40px, 6vw, 90px) * -.5) 0 22px; }
.oz__legend button { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border-radius: 100px; border: 1px solid rgba(var(--ink-rgb), .14); font-size: 14.5px; transition: background .35s, border-color .35s, color .35s; }
.oz__legend button i { width: 9px; height: 9px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 22%, transparent); }
.oz__legend sup { font-size: 10.5px; top: 0; color: var(--stone); }
.oz__legend button:hover { border-color: rgba(var(--ink-rgb), .5); }
.oz__legend button[aria-pressed="true"] { background: var(--ink); color: var(--plaster); border-color: var(--ink); }
.oz__legend button[aria-pressed="true"] sup { color: inherit; opacity: .7; }

.oz__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(212px, 17vw, 252px); grid-auto-flow: dense; gap: clamp(10px, 1vw, 16px); }
.oz--su { grid-column: span 5; grid-row: span 2; }
.oz--vr { grid-column: span 4; grid-row: span 2; }
.oz--ge, .oz--tg { grid-column: span 3; }
.oz--n8 { grid-column: span 6; }
.oz--ps, .oz--fg { grid-column: span 3; }
.oz--rn { grid-column: span 4; grid-row: span 2; }
.oz--sb, .oz--ts, .oz--gt, .oz--bs { grid-column: span 4; }

.oz__c {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px;
  border-radius: 18px; background: var(--card); border: 1px solid rgba(var(--ink-rgb), .08);
  box-shadow: 0 24px 50px -38px rgba(33,26,21,.4); transition: opacity .5s var(--ease), filter .5s var(--ease), box-shadow .5s var(--ease);
}
.oz__c::before {
  content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(255,181,71,.95), rgba(255,181,71,0) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.oz__c::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), rgba(255,181,71,.08), transparent 62%); opacity: 0; transition: opacity .4s; }
.oz__c:hover::before, .oz__c:hover::after { opacity: 1; }
.oz__c:hover { box-shadow: 0 34px 60px -36px rgba(33,26,21,.5); }
.oz__grid.is-focus .oz__c:not(.is-on) { opacity: .26; filter: saturate(.3); }
.oz__h { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; min-width: 0; }
.oz__h > div { min-width: 0; }
.oz__logo { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--paper); display: grid; place-items: center; }
.oz__logo--word { width: auto; padding: 0 8px; font: 800 12px/1 var(--f-sans); letter-spacing: -.03em; color: #E3242B; font-variation-settings: "opsz" 48, "wdth" 75; }
:root[data-theme="night"] .oz__logo, :root[data-theme="night"] .oz-bs span, :root[data-theme="night"] .oz-rn__chips span { background: #F4F1EB; }
.oz__h h3 { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.oz__h p { margin: 1px 0 0; font-size: 13px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz__tag { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; font: 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.oz__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gc); }
.oz__link { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 100px; border: 1px solid rgba(var(--ink-rgb), .16); font-size: 13px; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.oz__link i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.oz__link:hover { background: var(--ink); color: var(--plaster); border-color: var(--ink); }
.oz__demo { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 11px; background: var(--paper); }
.oz__foot { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--stone); }

/* SketchUp */
.oz-su { background: linear-gradient(#FBFAF8, #ECE9E3); cursor: grab; touch-action: pan-y; }
:root[data-theme="night"] .oz-su { background: linear-gradient(#E9E6E0, #D9D5CD); }
.oz-su.is-drag { cursor: grabbing; }
.oz-su canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.oz-su__hint { position: absolute; left: 14px; bottom: 10px; font-size: 15px; color: #6B4A33; pointer-events: none; transition: opacity .6s; }
.oz-su__hint.is-gone { opacity: 0; }

/* V-Ray */
.oz-vr { background: #0E0C0B; cursor: pointer; }
.oz-vr canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.oz-vr__chip { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 100px; background: rgba(14,12,11,.82); color: #F3EEE6; font: 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.oz-vr__chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E3242B; box-shadow: 0 0 8px rgba(227,36,43,.9); animation: pulse-red 1s steps(2) infinite; }
.oz-vr__chip.is-done::before { background: #4CD07D; box-shadow: 0 0 8px rgba(76,208,125,.8); animation: none; }
@keyframes pulse-red { 50% { opacity: .25; } }
.oz-vr__fb { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 22px 12px 9px; background: linear-gradient(transparent, rgba(10,8,7,.8)); font: 12px var(--f-mono); color: #FFB547; letter-spacing: .04em; pointer-events: none; }
.oz-vr__fb .oz-vr__p { color: rgba(243,238,230,.75); }

/* Gemini */
.oz-ge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oz-ge__r { clip-path: inset(0 0 0 0); }
.oz-ge__line { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px; background: linear-gradient(#4E7CF2, #9B72CB 50%, #D96570); box-shadow: 0 0 14px 3px rgba(155,114,203,.7), 0 0 40px 8px rgba(78,124,242,.35); opacity: 0; }
.oz-ge__chip { position: absolute; left: 10px; bottom: 10px; display: inline-flex; padding: 3px; border-radius: 100px; background: rgba(14,12,11,.8); }
.oz-ge__chip b { padding: 4px 9px; border-radius: 100px; font: 10.5px var(--f-mono); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: rgba(243,238,230,.7); transition: background .4s, color .4s; }
.oz-ge__chip b:first-child, .oz-ge__chip.is-r b:last-child { background: #F3EEE6; color: #15110E; }
.oz-ge__chip.is-r b:first-child { background: transparent; color: rgba(243,238,230,.7); }

/* Telegram */
.oz-tg { background: #D5E4CB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M8 12c3-3 6 0 3 3M28 6l3 3-3 3M22 30a3 3 0 1 0 6 0 3 3 0 1 0-6 0M6 30l5 5' fill='none' stroke='%2385A877' stroke-opacity='.45' stroke-width='1.2'/%3E%3C/svg%3E"); }
:root[data-theme="night"] .oz-tg { background-color: #1F2B23; }
.oz-tg__m { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 12px; }
.oz-tg__m img { width: clamp(84px, 9vw, 112px); aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; }
.oz-tg__m span { padding: 0 6px 2px; color: #3D4A35; font-size: 11.5px; }
.oz-tg__m--me { right: 10px; top: 10px; background: #EFFDDE; border-bottom-right-radius: 4px; }
.oz-tg__m--bot { left: 10px; bottom: 10px; background: #fff; border-bottom-left-radius: 4px; }
.oz-tg__m--bot span { color: #211A15; }
.oz-tg__m--bot b { font-weight: 400; color: #4FAE4E; }
.oz-tg__m--typing { left: 10px; bottom: 10px; flex-direction: row; gap: 4px; padding: 10px 12px; background: #fff; border-bottom-left-radius: 4px; }
.oz-tg__m--typing i { width: 6px; height: 6px; border-radius: 50%; background: #8FA3B5; animation: tg-dot 1.1s infinite; }
.oz-tg__m--typing i:nth-child(2) { animation-delay: .15s; } .oz-tg__m--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tg-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* n8n */
.oz-n8 { background: var(--paper) radial-gradient(rgba(var(--ink-rgb), .14) 1px, transparent 1.3px) 0 0 / 16px 16px; }
.oz-n8__row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; padding: 0 12px; }
.oz-n8__n { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.oz-n8__n b { position: relative; width: 54px; height: 54px; padding: 13px; border-radius: 14px; background: #FFFFFF; border: 1.5px solid rgba(33,26,21,.16); box-shadow: 0 8px 18px -10px rgba(0,0,0,.3); display: grid; place-items: center; transition: border-color .3s, box-shadow .3s, transform .4s var(--ease); }
.oz-n8__code { font: 600 16px var(--f-mono); color: #211A15; }
.oz-n8__n small { font-size: 12px; color: var(--stone); white-space: nowrap; }
.oz-n8__n.is-run b { border-color: #FF6D5A; box-shadow: 0 0 0 4px rgba(255,109,90,.18), 0 8px 18px -10px rgba(0,0,0,.3); transform: scale(1.06); }
.oz-n8__n.is-ok b { border-color: #2FA36B; }
.oz-n8__n b::after { content: "✓"; position: absolute; right: -7px; top: -7px; width: 18px; height: 18px; border-radius: 50%; background: #2FA36B; color: #fff; font: 700 10px/18px var(--f-sans); text-align: center; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.oz-n8__n.is-ok b::after { transform: scale(1); }
.oz-n8__line { position: absolute; z-index: 1; height: 2px; margin-top: -1px; background: rgba(var(--ink-rgb), .18); border-radius: 2px; }
.oz-n8__line i { position: absolute; inset: 0; background: #2FA36B; transform-origin: left; transform: scaleX(0); border-radius: inherit; }
.oz-n8__pk { position: absolute; z-index: 3; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FF6D5A; box-shadow: 0 0 0 4px rgba(255,109,90,.25), 0 0 16px rgba(255,109,90,.8); opacity: 0; }

/* Photoshop */
.oz-ps { cursor: crosshair; --x: 60%; --y: 45%; }
.oz-ps img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oz-ps__raw { filter: saturate(.25) contrast(.72) brightness(.9) sepia(.28); }
.oz-ps__fx { -webkit-mask-image: radial-gradient(circle 54px at var(--x) var(--y), #000 72%, transparent 100%); mask-image: radial-gradient(circle 54px at var(--x) var(--y), #000 72%, transparent 100%); }
.oz-ps.is-half .oz-ps__fx { -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 50%); mask-image: linear-gradient(90deg, transparent 50%, #000 50%); }
.oz-ps.is-half .oz-ps__brush { display: none; }
.oz-ps__brush { position: absolute; left: var(--x); top: var(--y); width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.2); pointer-events: none; }
.oz-ps__brush b { position: absolute; left: 50%; top: 100%; margin-top: 6px; transform: translateX(-50%); padding: 2px 8px; border-radius: 4px; background: rgba(250,250,248,.92); color: #211A15; font: 400 14px var(--f-hand); }
.oz-ps__tag { position: absolute; left: 10px; top: 10px; padding: 2px 8px; border-radius: 4px; background: rgba(250,250,248,.92); color: #211A15; font: 14px var(--f-hand); }
.oz-ps.is-half .oz-ps__tag::after { content: " / après"; }

/* Figma */
.oz-fg { background: #EDEDED; }
:root[data-theme="night"] .oz-fg { background: #2C2C2C; }
.oz-fg__row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.6vw, 22px); padding-top: 12px; }
.oz-fg__f { position: relative; margin: 0; width: clamp(46px, 4.4vw, 64px); }
.oz-fg__f figcaption { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; font: 10px var(--f-sans); color: #7A7A7A; white-space: nowrap; transition: color .3s; }
.oz-fg__f.is-sel figcaption { color: #0D99FF; }
.oz-fg__f img { width: 100%; aspect-ratio: 520 / 1120; object-fit: cover; object-position: top; border-radius: 4px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.oz-fg__sel { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border: 1.5px solid #0D99FF; opacity: 0; pointer-events: none; }
.oz-fg__sel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #0D99FF; }
.oz-fg__sel i:nth-child(1) { left: -4px; top: -4px; } .oz-fg__sel i:nth-child(2) { right: -4px; top: -4px; } .oz-fg__sel i:nth-child(3) { left: -4px; bottom: -4px; } .oz-fg__sel i:nth-child(4) { right: -4px; bottom: -4px; }
.oz-fg__sel em { position: absolute; left: 50%; top: 100%; margin-top: 7px; transform: translateX(-50%); padding: 1px 5px; border-radius: 3px; background: #0D99FF; color: #fff; font: 600 9.5px var(--f-sans); font-style: normal; white-space: nowrap; }
.oz-fg__cur { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 0; pointer-events: none; opacity: 0; }
.oz-fg__cur svg { width: 15px; height: 15px; fill: #9747FF; stroke: #fff; stroke-width: 1.2; }
.oz-fg__cur b { margin: 13px 0 0 -2px; padding: 2px 7px; border-radius: 4px 9px 9px 9px; background: #9747FF; color: #fff; font: 600 10px var(--f-sans); }

/* React Native & Expo */
.oz-rn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(70% 60% at 50% 40%, rgba(255,181,71,.16), transparent 70%), var(--paper); }
.oz-rn__phone { position: relative; height: min(78%, 400px); aspect-ratio: 520 / 1110; border-radius: 26px; padding: 6px; background: #15110E; box-shadow: 0 30px 50px -24px rgba(33,26,21,.55), inset 0 0 0 1.5px rgba(255,255,255,.08); }
.oz-rn__scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; background: #0E0C0B; }
.oz-rn__scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.oz-rn__cap { margin: 0; height: 1.3em; overflow: hidden; font: 12px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--stone); }
.oz-rn__cap span { display: block; }
.oz-rn__chips { position: absolute; right: 10px; top: 10px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oz-rn__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 100px; background: var(--card); border: 1px solid rgba(var(--ink-rgb), .1); font-size: 11.5px; }
.oz-rn__chips span { width: 16px; height: 16px; border-radius: 4px; }

/* Supabase */
.oz-sb { background: #171717; color: #EDEDED; display: flex; flex-direction: column; font: 12px var(--f-mono); }
.oz-sb__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #2E2E2E; color: #A0A0A0; }
.oz-sb__bar em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: #3ECF8E; }
.oz-sb__bar em i { width: 7px; height: 7px; border-radius: 50%; background: #3ECF8E; box-shadow: 0 0 0 0 rgba(62,207,142,.6); animation: pulse-sb 1.8s infinite; }
@keyframes pulse-sb { 70% { box-shadow: 0 0 0 7px rgba(62,207,142,0); } 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); } }
.oz-sb__rows { list-style: none; margin: 0; padding: 0; flex: 1; overflow: hidden; }
.oz-sb__rows li { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: 0 12px; height: 28px; border-bottom: 1px solid #262626; overflow: hidden; transition: background 1s; }
.oz-sb__rows code { color: #8F8F8F; font: inherit; }
.oz-sb__rows span { color: #EDEDED; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-sb__rows b { font-weight: 400; padding: 2px 8px; border-radius: 100px; font-size: 10.5px; letter-spacing: .03em; }
.oz-sb__rows b[data-s="0"] { background: rgba(160,160,160,.16); color: #C8C8C8; }
.oz-sb__rows b[data-s="1"] { background: rgba(255,181,71,.16); color: #FFB547; }
.oz-sb__rows b[data-s="2"] { background: rgba(155,114,203,.2); color: #C3A6F0; }
.oz-sb__rows b[data-s="3"] { background: rgba(62,207,142,.18); color: #3ECF8E; }
.oz-sb__rows li.is-new { background: rgba(62,207,142,.16); transition: none; }
.oz-sb__rows li.is-upd { background: rgba(255,181,71,.14); transition: none; }
.oz-sb__geo { margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #2E2E2E; color: #8F8F8F; font-size: 11px; }
.oz-sb__geo i { width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #3ECF8E; }

/* TypeScript */
.oz-ts { background: #1A1613; }
.oz-ts pre { margin: 0; padding: 11px 10px; height: 100%; overflow: hidden; font: 11.5px/1.58 var(--f-mono); color: #E9E2D8; }
.oz-ts code { position: relative; display: block; font: inherit; white-space: pre; }
.oz-ts .ln { display: inline-block; width: 22px; margin-right: 8px; text-align: right; color: #5E554C; user-select: none; }
.oz-ts i { font-style: normal; opacity: 0; }
.oz-ts i.on { opacity: 1; }
.oz-ts .c { color: #8A7E70; font-style: italic; } .oz-ts .k { color: #FFB547; } .oz-ts .t { color: #8FC1E8; } .oz-ts .f { color: #E8C07E; } .oz-ts .v { color: #E9E2D8; } .oz-ts .n { color: #B5D68E; } .oz-ts .p { color: #A99E92; }
.oz-ts .caret { position: absolute; left: 0; top: 0; width: 7px; height: 1.35em; margin-top: .12em; background: #FFB547; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Git */
.oz-gt { display: grid; place-items: center; padding: 6px; }
.oz-gt svg { width: 100%; height: 100%; overflow: visible; }
.oz-gt__main, .oz-gt__br { fill: none; stroke-width: 3; stroke-linecap: round; }
.oz-gt__main { stroke: var(--ink); }
.oz-gt__br { stroke: #F05032; }
.oz-gt__dots circle { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }
.oz-gt__dots circle.b { stroke: #F05032; }
.oz-gt__dots circle.m { fill: #FFB547; stroke: var(--ink); }
.oz-gt text { font: 11px var(--f-mono); fill: var(--stone); letter-spacing: .04em; }
.oz-gt text.b { fill: #F05032; } .oz-gt text.m { fill: var(--ink); }

/* Les fondations */
.oz-bs { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; }
.oz-bs li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; border-radius: 10px; background: var(--paper); font-size: 12.5px; line-height: 1.15; text-align: center; transition: transform .5s var(--ease), background .3s; }
.oz-bs li small { font: 9.5px var(--f-mono); letter-spacing: .03em; color: var(--stone); }
.oz-bs li:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--paper) 70%, #FFB547); }
.oz-bs span { width: 22px; height: 22px; margin-bottom: 2px; border-radius: 6px; }

@media (max-width: 1180px) {
  .oz__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .oz--su { grid-column: span 6; }
  .oz--vr, .oz--rn { grid-column: span 3; }
  .oz--ge, .oz--tg, .oz--ps, .oz--fg, .oz--sb, .oz--ts, .oz--gt, .oz--bs { grid-column: span 3; }
  .oz--n8 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .oz__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .oz__grid > .oz__c { grid-column: auto; grid-row: auto; min-height: 250px; }
  .oz--su { min-height: 400px !important; } .oz--vr { min-height: 380px !important; } .oz--rn { min-height: 470px !important; }
  .oz--n8 .oz-n8__n small { font-size: 10.5px; } .oz-n8__n b { width: 46px; height: 46px; padding: 11px; }
  .oz__legend button { font-size: 13.5px; padding: 8px 13px 8px 11px; }
  .oz--n8 .oz__link { display: none; }
  .oz-ts pre { font-size: 9.6px; padding: 10px 8px; }
  .oz-ts .ln { display: none; }
  .oz-bs li small { font-size: 8.5px; white-space: nowrap; }
}
.static .oz__c { opacity: 1 !important; transform: none !important; }

/* logos sur fond clair en mode nuit, mot-symbole V-Ray */
:root[data-theme="night"] .chips li > span, :root[data-theme="night"] .tb__logos span { background: #F4F1EB; border-radius: 6px; }
:root[data-theme="night"] .chips li > span { padding: 1px; }
.wordmark { font: 800 10px/1 var(--f-sans); color: #E3242B; letter-spacing: -.03em; }

/* ---------- 7. DesignLink ---------- */
.dl { padding: clamp(60px, 8vw, 120px) 0 clamp(90px, 10vw, 150px); background: var(--paper); }
.dl__pin { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 60px); min-height: 100vh; padding-left: var(--gutter); overflow: hidden; }
.dl__intro p { max-width: 40ch; }
.dl__status { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; margin: 0 0 18px; color: var(--stone); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 0 rgba(255,181,71,.7); animation: pulse 2.2s infinite; flex: none; display: inline-block; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255,181,71,0); } 100% { box-shadow: 0 0 0 0 rgba(255,181,71,0); } }
.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 5px 11px 5px 7px; border-radius: 100px; border: 1px solid rgba(var(--ink-rgb), .2); background: var(--card); }
.chips li > span { width: 16px; height: 16px; }
.dl__flow { perspective: 1400px; perspective-origin: 30% 50%; height: 100%; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%); mask-image: linear-gradient(to right, transparent, #000 7%); }
.dl__track { display: flex; gap: clamp(18px, 2.2vw, 36px); padding: 60px var(--gutter) 60px 40px; transform-style: preserve-3d; will-change: transform; }
.phone { flex: 0 0 auto; width: clamp(190px, 16vw, 250px); transform-style: preserve-3d; }
.phone img { width: 100%; border-radius: 30px; border: 7px solid #17120E; background: #17120E; box-shadow: 0 40px 70px -25px rgba(33,26,21,.5); }
.phone figcaption { margin-top: 14px; font-size: 14px; color: var(--stone); }
.side { padding: 40px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 60px; }
.side__title { margin: 0; font-size: 22px; font-weight: 600; }
.side__list { list-style: none; margin: 0; padding: 0; }
.side__list li { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(var(--ink-rgb), .15); }
.side__list span { color: var(--stone); }
@media (min-width: 901px) and (max-height: 620px) { .phone { width: min(clamp(190px, 16vw, 250px), 34svh); } .dl__track { padding-top: 24px; padding-bottom: 24px; } }
@media (max-width: 900px) {
  .dl__pin { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-right: var(--gutter); }
  .dl__flow { perspective: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .dl__track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px 0; margin-right: calc(var(--gutter) * -1); }
  .phone { scroll-snap-align: start; width: 210px; }
  .side { grid-template-columns: 1fr; }
  .side__list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- 8. Sites web : les projets clients ---------- */
.web { padding: clamp(90px, 11vw, 170px) var(--gutter) clamp(20px, 3vw, 40px); }
.web__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(480px, 38vw, 760px)); align-items: center; gap: clamp(36px, 6vw, 110px); }
.web__lead { max-width: 40ch; margin: 28px 0 0; color: var(--stone); }
.web__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 28px); }

.wcard {
  position: relative; isolation: isolate; padding: 12px 12px 22px; border-radius: 20px;
  background: var(--card); border: 1px solid rgba(var(--ink-rgb), .08);
  box-shadow: 0 30px 60px -44px rgba(33,26,21,.5);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.wcard::before {
  content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(260px circle at var(--x, 50%) var(--y, 0%), rgba(255,181,71,.95), rgba(255,181,71,0) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.wcard:hover { transform: translateY(-4px); box-shadow: 0 44px 80px -46px rgba(33,26,21,.6); }
.wcard:hover::before { opacity: 1; }
.wcard__shot { display: block; overflow: hidden; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .08); text-decoration: none; }
.wcard__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid rgba(var(--ink-rgb), .08); }
.wcard__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--ink-rgb), .18); transition: background .4s, box-shadow .4s; }
.wcard:hover .wcard__bar i:first-child { background: var(--led); box-shadow: 0 0 8px rgba(255,181,71,.8); }
.wcard__url { flex: 1; display: flex; align-items: center; justify-content: center; height: 19px; margin: 0 22px 0 10px; border-radius: 100px; background: var(--card); font-size: 11.5px; letter-spacing: .01em; color: var(--stone); }
.wcard__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.wcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transition: object-position 1.4s var(--ease); }
.wcard:hover .wcard__img img { object-position: 50% 100%; transition: object-position 7s cubic-bezier(.45, .05, .55, .95); }
:root[data-theme="night"] .wcard__img img { filter: brightness(.92); }
.wcard__body { padding: 22px 12px 0; }
.wcard__status { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 13px; color: var(--stone); }
.wcard__title { margin: 0; font-size: clamp(28px, 2.4vw, 38px); font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variation-settings: "opsz" 72, "wdth" 85; }
.wcard__text { max-width: 44ch; margin: 12px 0 0; color: var(--stone); }
.wcard__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; }
.wcard__tags li { padding: 5px 13px; border-radius: 100px; background: var(--paper); border: 1px solid rgba(var(--ink-rgb), .1); font-size: 13.5px; }
.wcard__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 11px 16px 11px 20px; border-radius: 100px;
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 15px;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.wcard__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.wcard__link:hover { background: var(--led); border-color: var(--led); color: #211A15; box-shadow: 0 0 30px rgba(255,181,71,.55); }
.wcard__link:hover svg { transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .web__in { grid-template-columns: minmax(0, 1fr); }
  .web__list { max-width: 560px; }
}
@media (max-width: 520px) { .wcard { padding: 10px 10px 18px; border-radius: 18px; } .wcard__body { padding: 18px 8px 0; } }

/* ---------- 9. Le parcours : la planche d'ambiance ---------- */
.pl { position: relative; padding-top: clamp(90px, 11vw, 170px); }
.pl__head { padding: 0 var(--gutter); }
.pl__track { position: relative; height: calc(100vh + 7 * 92vh); }
.pl__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.pl__cam { position: absolute; inset: 0; }
.pl__board {
  position: absolute; left: 0; top: 0; width: 4000px; height: 2400px; transform-origin: 0 0; will-change: transform; border-radius: 14px;
  background-color: #E9E2D5;
  background-image:
    radial-gradient(120% 80% at 50% 40%, rgba(255,255,255,.38), transparent 70%),
    repeating-linear-gradient(0deg, rgba(110,88,60,.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(110,88,60,.05) 0 1px, transparent 1px 4px);
  box-shadow: 0 80px 160px -60px rgba(33,26,21,.5);
}
.pl__frame { position: absolute; inset: 0; z-index: 30; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 24px #5E3F2A, inset 0 0 0 26px rgba(0,0,0,.25), inset 0 0 0 30px rgba(255,255,255,.12), inset 0 34px 60px -20px rgba(0,0,0,.35); }
:root[data-theme="night"] .pl__board { background-color: #2E2720; background-image: radial-gradient(120% 80% at 50% 40%, rgba(255,214,160,.07), transparent 70%), repeating-linear-gradient(0deg, rgba(255,235,210,.035) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(255,235,210,.03) 0 1px, transparent 1px 4px); }
.pl__ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pl__ink-t { fill: none; stroke: rgba(91,62,42,.55); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 18; }
.pl__ink-m { fill: none; stroke: #fff; stroke-width: 40; stroke-dasharray: 1; stroke-dashoffset: 1; }
:root[data-theme="night"] .pl__ink-t { stroke: rgba(221,176,131,.6); }

/* les pièces épinglées */
.pi { position: absolute; transform: rotate(var(--r, 0deg)); }
.pi > * { transition: transform .6s var(--ease), box-shadow .6s var(--ease), opacity .9s var(--ease); }
.pi.is-dim > * { opacity: .42; }
.pi:hover { z-index: 6; }
.pi:hover > .pi-b { transform: translateY(-6px) scale(1.025); }
.pi-b { display: block; }
.pi-tape i { position: absolute; inset: 0; background: rgba(233,214,168,.78); box-shadow: 0 1px 2px rgba(0,0,0,.1); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); z-index: 1; }
.pi-tape--b i { background: rgba(176,201,214,.78); }
.pi-pin i { display: block; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0 12%, #FFC468 30%, #D98A1C 100%); box-shadow: 0 9px 7px -4px rgba(0,0,0,.4); }
.pi-pin--r i { background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0 12%, #F07A5E 30%, #B8371F 100%); }
.pi-hand { width: max-content; }
.pi-hand span { display: block; font-family: var(--f-hand); line-height: 1.05; color: #5A3E2B; white-space: nowrap; }
.pi-year span { color: #3A2A1E; }
.pi-title span { color: #8A5A2B; }
:root[data-theme="night"] .pi-hand span { color: #E4C49E; } :root[data-theme="night"] .pi-year span { color: #F3E6D4; }
.pi-photo .pi-b { padding: 12px 12px 0; background: #FBFAF6; box-shadow: 0 2px 3px rgba(0,0,0,.12), 0 22px 34px -18px rgba(0,0,0,.5); }
.pi-img { display: block; overflow: hidden; background: #D9D4CA; }
.pi-img img { width: 100%; height: 100%; object-fit: cover; }
.pi-cap { display: block; padding: 10px 6px 14px; text-align: center; font: 27px/1.1 var(--f-hand); color: #3B2E25; }
.pi-photo.is-open { cursor: pointer; }
.pi-photo.is-open:hover .pi-b { box-shadow: 0 2px 3px rgba(0,0,0,.12), 0 30px 44px -18px rgba(0,0,0,.55), 0 0 0 3px #FFB547; }
.pi-note .pi-b { width: 100%; height: 100%; margin: 0; display: flex; align-items: center; padding: 20px 22px; background: linear-gradient(160deg, #FAEEB0, #F3DF85); color: #3B2E25; font: 31px/1.2 var(--f-hand); box-shadow: 0 2px 2px rgba(0,0,0,.08), 0 20px 26px -16px rgba(0,0,0,.45); clip-path: polygon(0 0, 100% 0, 100% 86%, 88% 100%, 0 100%); }
.pi-note--p .pi-b { background: linear-gradient(160deg, #F9D3C9, #F0B9AB); }
.pi-note--b .pi-b { background: linear-gradient(160deg, #D5E5EF, #B9D2E2); }
.pi-note--g .pi-b { background: linear-gradient(160deg, #DCEBD0, #C3DDB2); }
.pi-paper .pi-b { height: 100%; padding: 36px 34px; background: #FBFAF4; color: #2B2620; font-family: var(--f-mono); box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 26px 40px -22px rgba(0,0,0,.5); }
.pi-paper__h { margin: 0; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }
.pi-paper__s { margin: 6px 0 0; font-size: 16px; }
.pi-paper__t { margin: 18px 0 20px; padding-bottom: 12px; border-bottom: 2px solid #2B2620; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.pi-paper .pi-b > i { display: block; height: 11px; margin: 15px 0; background: rgba(43,38,32,.16); border-radius: 2px; }
.pi-paper .pi-b > i:nth-of-type(3n+1) { width: 86%; } .pi-paper .pi-b > i:nth-of-type(3n+2) { width: 72%; } .pi-paper .pi-b > i:nth-of-type(3n) { width: 80%; }
.pi-paper__me { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px -6px; padding: 4px 6px; font-size: 16px; font-weight: 700; background: linear-gradient(transparent 38%, rgba(255,181,71,.8) 38%, rgba(255,181,71,.8) 92%, transparent 92%); }
.pi-paper__me b { text-transform: uppercase; letter-spacing: .1em; }
.pi-stamp { width: max-content; }
.pi-stamp .pi-b { padding: 6px 22px; border: 6px solid #C2410C; border-radius: 10px; color: #C2410C; font: 700 52px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .82; mix-blend-mode: multiply; }
.pi-map .pi-b { position: relative; height: 100%; overflow: hidden; border: 12px solid #FBFAF6; border-bottom-width: 54px; background: #E7E2CF; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 22px 34px -18px rgba(0,0,0,.5); }
.pi-map svg { display: block; width: 100%; height: 100%; }
.pi-map .m-ctr { fill: none; stroke: #CDC3A2; stroke-width: 2; }
.pi-map .m-riv { fill: none; stroke: #9DBBCB; stroke-width: 6; stroke-linecap: round; }
.pi-map .m-road { fill: none; stroke: #FBFAF6; stroke-width: 10; stroke-linecap: round; }
.pi-map .m-road--b { stroke-width: 6; }
.pi-map .m-town { fill: rgba(194,65,12,.14); stroke: #C2410C; stroke-width: 2; stroke-dasharray: 5 5; }
.pi-map__pin { position: absolute; left: 50%; top: 52%; width: 30px; height: 30px; margin: -38px 0 0 -15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #C2410C; box-shadow: 0 6px 10px -4px rgba(0,0,0,.5); }
.pi-map__pin::after { content: ""; position: absolute; left: 9px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: #FBFAF6; }
.pi-map b { position: absolute; left: 0; right: 0; bottom: -46px; padding: 0 4px; font: 600 25px var(--f-sans); color: #2B2620; letter-spacing: -.01em; }
.pi-map small { position: absolute; right: 2px; bottom: -40px; font: 12px var(--f-mono); color: #6F6962; }
.pi-code .pi-b, .pi-term .pi-b { height: 100%; overflow: hidden; border-radius: 12px; background: #1E1A17; box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); }
.pi-code__tab { margin: 0; display: flex; background: #15120F; } .pi-code__tab span { padding: 12px 22px; background: #1E1A17; color: #E9E2D8; font: 15px var(--f-mono); border-top: 2px solid #FFB547; }
.pi-code pre, .pi-term pre { margin: 0; padding: 18px 22px; font: 17px/1.7 var(--f-mono); color: #E9E2D8; white-space: pre; }
.pi-code pre i { font-style: normal; display: inline-block; width: 26px; color: #5E554C; }
.pi-code .k { font-weight: 400; color: #FFB547; } .pi-code .t { font-weight: 400; color: #8FC1E8; } .pi-code .f { font-weight: 400; color: #E8C07E; } .pi-code .s { font-weight: 400; color: #B5D68E; }
.pi-term .pi-b { background: #0E0C0B; }
.pi-term__bar { margin: 0; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #24201C; } .pi-term__bar i { width: 13px; height: 13px; border-radius: 50%; background: #F25F57; } .pi-term__bar i:nth-child(2) { background: #FBBD2E; } .pi-term__bar i:nth-child(3) { background: #33C748; } .pi-term__bar span { margin-left: 10px; color: #8A8178; font: 14px var(--f-mono); }
.pi-term pre { font-size: 16px; color: #D7D0C6; } .pi-term pre b { font-weight: 400; color: #4CD07D; } .pi-term pre u { display: inline-block; width: 11px; height: 20px; vertical-align: -3px; background: #E9E2D8; text-decoration: none; animation: caret 1s steps(2) infinite; }
.pi-sticker .pi-b { width: 100%; height: 100%; padding: 22%; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px #fff, 0 12px 18px -8px rgba(0,0,0,.45); }
.pi-sticker svg { width: 100%; height: 100%; }
.pi-vray { font: 800 26px/1 var(--f-sans); color: #E3242B; letter-spacing: -.03em; font-variation-settings: "opsz" 48, "wdth" 75; }
.pi-browser .pi-b { height: 100%; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 30px 46px -22px rgba(0,0,0,.5); }
.pi-browser__bar { margin: 0; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #EDE9E3; } .pi-browser__bar i { width: 12px; height: 12px; border-radius: 50%; background: #D9D3CA; } .pi-browser__bar span { flex: 1; margin-left: 10px; padding: 6px 12px; border-radius: 100px; background: #fff; color: #6F6962; font: 14px var(--f-mono); }
.pi-browser__body { padding: 16px 20px; }
.pi-browser__body > p { margin: 0 0 14px; display: flex; justify-content: space-between; align-items: baseline; } .pi-browser__body > p b { font: 600 24px var(--f-sans); color: #2B2620; } .pi-browser__body > p span { font: 13px var(--f-mono); color: #6F6962; }
.pi-browser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pi-browser__grid span { display: flex; flex-direction: column; gap: 6px; }
.pi-browser__grid i { display: block; height: 82px; border-radius: 6px; background: linear-gradient(135deg, #E8E2D8, #D7CEC1); }
.pi-browser__grid span:nth-child(2) i { background: linear-gradient(135deg, #DCE3E6, #C3CFD5); } .pi-browser__grid span:nth-child(4) i { background: linear-gradient(135deg, #EADBC9, #D8C1A4); } .pi-browser__grid span:nth-child(6) i { background: linear-gradient(135deg, #D9E2D3, #BFCFB4); }
.pi-browser__grid em { display: block; height: 8px; width: 80%; border-radius: 2px; background: #E4DFD7; } .pi-browser__grid em + em { width: 45%; background: #F2C27A; }
.pi-android .pi-b, .pi-android { }
.pi-android__scr { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 30px 18px; border: 10px solid #1E1A17; border-radius: 30px; background: #F7F5F0; box-shadow: 0 30px 46px -22px rgba(0,0,0,.55); }
.pi-android__scr i { display: block; height: 14px; border-radius: 3px; background: #DDD7CE; }
.pi-android__scr i.h { height: 36px; background: #3DDC84; } .pi-android__scr i.c { height: 110px; background: linear-gradient(135deg, #E6E0D6, #D2C9BB); } .pi-android__scr i.s { width: 60%; } .pi-android__scr i.btn { margin-top: auto; height: 40px; border-radius: 100px; background: #211A15; }
.pi-measure svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 10px rgba(0,0,0,.3)); }
.pi-measure .mt path { stroke: #2B2620; stroke-width: 1.6; }
.pi-measure text { font: 700 13px var(--f-mono); fill: #2B2620; }
.pi-sw .pi-b { width: 100%; height: 100%; padding: 10px 10px 0; background: #FBFAF6; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 18px 26px -14px rgba(0,0,0,.45); }
.pi-sw i { display: block; height: 96px; }
.pi-sw b { display: block; padding: 8px 0 0; text-align: center; font: 400 22px var(--f-hand); color: #3B2E25; }
.pi-sw--noyer i { background: radial-gradient(60% 120% at 30% 50%, rgba(255,255,255,.08), transparent 70%), repeating-linear-gradient(98deg, #4E3221 0 3px, #6C4631 3px 9px, #5B3A27 9px 12px, #7A5338 12px 19px, #563624 19px 22px); }
.pi-sw--marbre i { background: #EEEBE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='96'%3E%3Cpath d='M-5 30C25 18 40 52 70 40S100 20 120 28' fill='none' stroke='%23B79A6A' stroke-width='1.6'/%3E%3Cpath d='M-5 78C20 66 45 90 75 70S100 62 120 66' fill='none' stroke='%239C958A' stroke-width='1'/%3E%3Cpath d='M30 -5C34 20 22 40 40 60S50 90 46 100' fill='none' stroke='%23C8BDA9' stroke-width='.8'/%3E%3C/svg%3E") center / cover; }
.pi-sw--graphite i { background: linear-gradient(135deg, #46413D, #2A2623 70%), #2A2623; }
.pi-tg .pi-b { height: 100%; overflow: hidden; border-radius: 16px; background: #D5E4CB; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 24px 36px -20px rgba(0,0,0,.5); }
.pi-tg__h { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; font: 600 17px var(--f-sans); color: #2B2620; } .pi-tg__h span { width: 26px; height: 26px; }
.pi-tg__m { margin: 14px 16px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 14px 14px 14px 4px; background: #fff; }
.pi-tg__m img { width: 74px; height: 46px; object-fit: cover; border-radius: 8px; } .pi-tg__m span { font-size: 17px; color: #2B2620; } .pi-tg__m b { font-weight: 400; color: #4FAE4E; }
.pi-n8 .pi-b { height: 100%; padding: 16px 22px; border-radius: 14px; background: #F4F2EE radial-gradient(rgba(33,26,21,.12) 1.2px, transparent 1.5px) 0 0 / 18px 18px; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 24px 36px -20px rgba(0,0,0,.45); }
.pi-n8__h { margin: 0 0 18px; font: 14px var(--f-mono); color: #6F6962; }
.pi-n8__row { margin: 0; display: flex; align-items: center; justify-content: space-between; }
.pi-n8__row > span { width: 72px; height: 72px; padding: 17px; border-radius: 16px; background: #fff; border: 2px solid #2FA36B; display: grid; place-items: center; box-shadow: 0 8px 16px -10px rgba(0,0,0,.35); }
.pi-n8__row > i { flex: 1; height: 3px; background: #2FA36B; }
.pi-n8__code { font: 700 20px var(--f-mono); color: #2B2620; }
.pi-dip .pi-b { height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 30px 36px; background: #FBFAF4; border: 2px solid #2B2620; outline: 8px solid #FBFAF4; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 26px 40px -22px rgba(0,0,0,.5); color: #2B2620; }
.pi-dip svg { width: 54px; height: 54px; margin-bottom: 10px; fill: none; stroke: #2B2620; stroke-width: 2; stroke-linejoin: round; }
.pi-dip small { font: 13px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #6F6962; }
.pi-dip b { font: 600 60px/1 var(--f-sans); letter-spacing: -.03em; font-variation-settings: "opsz" 96, "wdth" 82; }
.pi-dip span { margin-top: 6px; font-size: 22px; }
.pi-dip em { margin-top: 14px; font: normal 15px var(--f-mono); color: #8A5A2B; letter-spacing: .06em; }
.pi-dl .pi-b { padding: 8px; border-radius: 30px; background: #15110E; box-shadow: 0 30px 46px -22px rgba(0,0,0,.55); }
.pi-dl img { width: 100%; aspect-ratio: 520 / 1100; object-fit: cover; object-position: top; border-radius: 23px; }
.pi-quote .pi-b { height: 100%; display: grid; place-items: center; padding: 26px 30px; background: #211A15; color: #F3EEE6; box-shadow: 0 30px 46px -22px rgba(0,0,0,.55); }
.pi-quote p { margin: 0; font: 34px/1.2 var(--f-hand); text-align: center; color: #FFD38A; }
.pi-mdf .pi-b { height: 100%; display: flex; align-items: stretch; gap: 0; padding: 10px; background: #FBFAF6; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 20px 30px -18px rgba(0,0,0,.45); position: relative; }
.pi-mdf i { flex: 1; } .pi-mdf span { position: absolute; right: 12px; bottom: -36px; font: 24px var(--f-hand); color: #5A3E2B; }
.pi-bcard .pi-b { height: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px 28px; background: #FBFAF6; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 22px 30px -18px rgba(0,0,0,.45); color: #2B2620; }
.pi-bcard b { font: 600 30px/1 var(--f-sans); letter-spacing: -.02em; } .pi-bcard span { font-size: 15px; color: #6F6962; } .pi-bcard em { font: normal 13px var(--f-mono); color: #8A5A2B; letter-spacing: .06em; }
.pi-bcard i { position: absolute; right: 20px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: #FFB547; box-shadow: 0 0 12px 3px rgba(255,181,71,.7); }
.pi-blank .pi-b { width: 100%; height: 100%; display: grid; place-items: center; border: 5px dashed rgba(107,74,51,.55); border-radius: 14px; background: rgba(255,255,255,.3); }
.pi-blank .hand { font-size: 56px; color: #6B4A33; text-align: center; line-height: 1.1; }
.pl.is-final .pi-blank .pi-b { border-color: #FFB547; animation: pl-blank 2.2s ease-in-out infinite; }
@keyframes pl-blank { 50% { box-shadow: 0 0 0 10px rgba(255,181,71,.25), 0 0 80px 10px rgba(255,181,71,.35); } }

/* le panneau qui raconte l'étape */
.pl__panel {
  position: absolute; z-index: 8; left: var(--gutter); bottom: 34px; width: min(400px, 30vw); padding: 20px 24px 24px;
  border-radius: 18px; background: rgba(var(--plaster-rgb), .96); border: 1px solid rgba(var(--ink-rgb), .08);
  box-shadow: 0 30px 70px -34px rgba(33,26,21,.55);
  transition: left .9s var(--ease), width .9s var(--ease), transform .9s var(--ease);
}
.pl__panel.is-measure { transition: none; visibility: hidden; }
.pl__count { margin: 0 0 2px; font: 12px var(--f-mono); letter-spacing: .08em; color: var(--stone); }
.pl__count b { font-weight: 400; color: var(--walnut); }
.pl__year { position: relative; height: 1.04em; margin: 0 0 12px; overflow: hidden; font-size: clamp(44px, 4.4vw, 74px); line-height: 1; font-weight: 600; letter-spacing: -.045em; font-variation-settings: "opsz" 96, "wdth" 78; }
.pl__year span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.pl__arts { display: grid; }
.pl__art { grid-area: 1 / 1; visibility: hidden; }
.pl__art.is-on { visibility: visible; }
.pl__where { margin: 0 0 6px; font: 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--walnut); }
.pl__title { margin: 0 0 10px; font-size: clamp(24px, 2vw, 32px); line-height: 1.05; letter-spacing: -.02em; font-weight: 600; font-variation-settings: "opsz" 72, "wdth" 85; text-wrap: balance; }
.pl__txt { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--stone); }
.pl__vo { margin: 10px 0 0; font: 20px var(--f-hand); color: var(--walnut); }
.pl__tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pl__tags li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; border-radius: 100px; border: 1px solid rgba(var(--ink-rgb), .16); background: var(--card); font-size: 13px; }
.pl__tags li > span { width: 16px; height: 16px; }
.pl__tags .wordmark { width: auto; height: auto; }
:root[data-theme="night"] .pl__tags li > span[data-logo] { background: #F4F1EB; border-radius: 4px; padding: 1px; }
.pl__link { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 8px 14px; border-radius: 100px; border: 1px solid rgba(var(--ink-rgb), .2); font-size: 14px; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.pl__link i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.pl__link:hover { background: var(--ink); color: var(--plaster); border-color: var(--ink); }
.pl__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pl__panel.is-final { left: 50%; width: min(880px, calc(100vw - 2 * var(--gutter))); transform: translateX(-50%); padding: 18px 22px; }
.pl__panel.is-final .pl__art:not(.pl__art--next), .pl__panel.is-final .pl__year, .pl__panel.is-final .pl__count { display: none; }
.pl__panel.is-final .pl__art--next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 26px; }
.pl__panel.is-final .pl__art--next .pl__where { grid-column: 1; }
.pl__panel.is-final .pl__art--next .pl__title { grid-column: 1; margin: 0; }
.pl__panel.is-final .pl__cta { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.pl__index { position: absolute; z-index: 8; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 124px; display: flex; flex-direction: column; gap: 2px; }
.pl__index button { position: relative; display: flex; flex-direction: column; padding: 7px 10px 7px 22px; border-radius: 10px; text-align: left; color: var(--stone); transition: background .4s, color .4s; }
.pl__index button::before { content: ""; position: absolute; left: 7px; top: 13px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; transition: background .4s, box-shadow .4s, border-color .4s; }
.pl__index button b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pl__index button span { font-size: 11.5px; white-space: nowrap; }
.pl__index button:hover { color: var(--ink); }
.pl__index button.is-past::before { background: currentColor; }
.pl__index button.is-on { color: var(--ink); background: rgba(var(--plaster-rgb), .9); box-shadow: 0 10px 24px -14px rgba(33,26,21,.5); }
.pl.is-final .pl__index { opacity: .55; transition: opacity .6s; }
.pl.is-final .pl__index:hover { opacity: 1; }
.pl__index button.is-on::before { background: var(--led); border-color: var(--led); box-shadow: 0 0 10px 2px rgba(255,181,71,.7); }
.pl__hint { position: absolute; z-index: 8; left: 50%; top: 22px; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 100px; background: rgba(var(--plaster-rgb), .9); box-shadow: 0 10px 24px -14px rgba(33,26,21,.5); font: 16px var(--f-hand); color: var(--walnut); transition: opacity .6s, transform .8s var(--ease); }
.pl__hint i { width: 34px; height: 1px; background: var(--walnut); position: relative; overflow: hidden; }
.pl__hint i::after { content: ""; position: absolute; inset: 0; background: var(--led); transform: translateX(-100%); animation: hint 2.2s var(--ease) infinite; }
.pl__hint.is-gone { opacity: 0; transform: translate(-50%, -10px); }
@media (max-width: 1100px) { .pl__index { width: 104px; } .pl__index button span { display: none; } }
@media (max-width: 760px) {
  .pl__track { height: calc(100svh + 7 * 86svh); }
  .pl__panel { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 46svh; overflow: hidden; padding: 14px 16px 16px; border-radius: 16px; }
  .pl__year { font-size: 38px; margin-bottom: 6px; }
  .pl__title { font-size: 22px; margin-bottom: 6px; }
  .pl__txt { font-size: 14px; line-height: 1.45; }
  .pl__tags { margin-top: 10px; } .pl__tags li { font-size: 12px; padding: 4px 9px 4px 6px; }
  .pl__link { margin-top: 10px; padding: 6px 12px; font-size: 13px; }
  .pl__index { display: none; }
  .pl__hint { top: 14px; font-size: 14px; }
  .pl__panel.is-final { left: 10px; width: auto; transform: none; }
  .pl__panel.is-final .pl__art--next { grid-template-columns: 1fr; }
  .pl__panel.is-final .pl__cta { grid-column: 1; grid-row: auto; }
}
/* tablette en portrait : comme sur téléphone, le panneau passe en bas et la planche prend toute la largeur */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .pl__panel { left: var(--gutter); right: var(--gutter); bottom: 18px; width: auto; max-height: 40svh; overflow: hidden; padding: 18px 22px 20px; }
  .pl__index { display: none; }
}
/* téléphone couché, fenêtre basse : panneau compact à gauche, la planche à droite */
@media (max-height: 560px) and (orientation: landscape) {
  .pl__track { height: calc(100svh + 7 * 86svh); }
  .pl__panel { left: 10px; right: auto; top: auto; bottom: 10px; width: min(380px, 46vw); max-height: calc(100svh - 72px); overflow: hidden auto; overscroll-behavior: contain; padding: 12px 16px 14px; border-radius: 14px; }
  .pl__count { font-size: 11px; }
  .pl__year { font-size: 28px; margin-bottom: 4px; }
  .pl__where { font-size: 10.5px; margin-bottom: 3px; }
  .pl__title { font-size: 18px; margin-bottom: 5px; }
  .pl__txt { font-size: 13px; line-height: 1.4; }
  .pl__vo { font-size: 15px; margin-top: 5px; }
  .pl__tags { margin-top: 7px; gap: 4px; } .pl__tags li { font-size: 11px; padding: 3px 8px 3px 5px; }
  .pl__link { margin-top: 7px; padding: 5px 11px; font-size: 12.5px; }
  .pl__index { display: none; }
  .pl__hint { top: 62px; left: auto; right: 12px; transform: none; font-size: 13px; padding: 6px 12px; }
  .pl__hint.is-gone { transform: translateY(-10px); }
  .pl__panel.is-final { left: 50%; width: min(880px, calc(100vw - 20px)); transform: translateX(-50%); overflow: hidden; }
  .pl__panel.is-final .pl__art--next { grid-template-columns: minmax(0, 1fr) auto; }
  .pl__panel.is-final .pl__cta { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-height: 400px) and (orientation: landscape) { .pl__tags, .pl__vo { display: none; } }
/* sans animation : toute la planche, puis chaque étape en texte */
.pl.is-static .pl__track { height: auto; }
.pl.is-static .pl__stage { position: relative; height: auto; overflow: visible; }
.pl.is-static .pl__cam { position: absolute; inset: 0 0 auto 0; }
.pl.is-static .pl__board { will-change: auto; }
.pl.is-static .pl__panel { position: relative; left: auto; bottom: auto; width: auto; margin: 40px var(--gutter) 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pl.is-static .pl__count, .pl.is-static .pl__year, .pl.is-static .pl__index, .pl.is-static .pl__hint { display: none; }
.pl.is-static .pl__arts { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 34px 40px; }
.pl.is-static .pl__art { grid-area: auto; visibility: visible; }
.pl.is-static .pl__art::before { content: attr(data-y); display: block; margin-bottom: 6px; font: 600 30px/1 var(--f-sans); letter-spacing: -.03em; color: var(--ink); }

/* ---------- Motion design : les détails qui se touchent ---------- */
.mf-k { font-style: normal; position: relative; background: linear-gradient(var(--led), var(--led)) 0 94% / 0% .08em no-repeat; transition: background-size .7s var(--ease); }
.mf-k:hover { background-size: 100% .08em; }
.mf-k::after { content: ""; display: inline-block; width: .14em; height: .14em; margin-left: .06em; border-radius: 50%; background: var(--led); box-shadow: 0 0 .3em rgba(255,181,71,.8); vertical-align: .62em; opacity: 0; transform: scale(.4); transition: opacity .4s, transform .5s var(--ease); }
.mf-k:has(.w.is-lit)::after { opacity: 1; transform: none; }
.peek { position: fixed; left: 0; top: 0; z-index: 230; width: clamp(220px, 19vw, 320px); margin: 0; pointer-events: none; visibility: hidden; transform-origin: 0 100%; will-change: transform, clip-path; }
.peek.is-on { visibility: visible; }
.peek__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--paper); box-shadow: 0 34px 60px -26px rgba(0,0,0,.5); }
.peek__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.peek figcaption { margin-top: 9px; font: 12px var(--f-mono); letter-spacing: .04em; color: var(--stone); }
.phone__scr { position: relative; display: block; transform-style: preserve-3d; will-change: transform; }
.phone__glare { position: absolute; inset: 0; border-radius: 30px; pointer-events: none; opacity: 0; transition: opacity .45s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.34), rgba(255,255,255,0) 46%); mix-blend-mode: soft-light; }
.phone__scr.is-hover .phone__glare { opacity: 1; }
.contact__title .ch { transition: none; }
@media (pointer: fine) {
  .n8n__canvas .node, .n8n__canvas .node-card { cursor: grab; touch-action: none; user-select: none; }
  .n8n__canvas .is-drag { cursor: grabbing; z-index: 3; }
  .n8n__canvas .node.is-drag { box-shadow: 0 26px 40px -18px rgba(0,0,0,.5); border-color: rgba(var(--ink-rgb), .5); }
  .n8n__canvas.is-dragging .n8n__edges .e { stroke: rgba(var(--ink-rgb), .55); }
}

/* ---------- 10. Cartouche + contact ---------- */
.contact { padding: clamp(110px, 14vw, 200px) var(--gutter) clamp(90px, 10vw, 140px); border-top: 1px solid var(--line); overflow-x: clip; }
.tb { position: relative; margin-bottom: clamp(80px, 10vw, 140px); }
.tb__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border: 1.5px solid var(--ink); }
.tb__cell { padding: 14px 18px; border-right: 1px solid rgba(var(--ink-rgb), .3); border-bottom: 1px solid rgba(var(--ink-rgb), .3); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb__cell:nth-child(3n) { border-right: 0; }
.tb__cell:nth-last-child(-n+3) { border-bottom: 0; }
.tb__cell span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.tb__cell b { font-weight: 600; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; }
.tb__cell em { font-style: normal; color: var(--stone); font-size: 13px; }
.tb__cell--name b { font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -.03em; line-height: 1; font-variation-settings: "opsz" 72, "wdth" 82; }
.tb__cell--name { position: relative; padding-left: 104px; min-height: 104px; justify-content: center; }
.tb__face { position: absolute; left: 16px; top: 50%; width: 74px; height: 74px; margin-top: -37px; border-radius: 50%; object-fit: cover; object-position: 50% 50%; background: radial-gradient(circle at 50% 35%, #F6E3C4, #E2C9A4); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .2), 0 8px 20px -10px rgba(0,0,0,.4); }
.tb__cell--sign b { font-size: 30px; font-weight: 400; color: var(--walnut); }
.tb__logos { display: flex; flex-wrap: wrap; gap: 6px; }
.tb__logos span { width: 26px; height: 26px; padding: 3px; border-radius: 7px; background: var(--paper); }
.tb__logos .wordmark { width: auto; padding: 8px 6px; font-size: 10px; display: grid; place-items: center; }
.stamp {
  position: absolute; right: clamp(20px, 5vw, 70px); bottom: -64px; width: 170px; height: 170px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none;
  color: #C2410C; border: 3px solid currentColor; box-shadow: inset 0 0 0 6px var(--plaster), inset 0 0 0 8px currentColor;
  transform: rotate(-12deg); background: rgba(var(--plaster-rgb), .7); backdrop-filter: blur(2px);
  font-family: var(--f-mono); text-transform: uppercase; transition: transform .5s var(--ease), color .3s;
}
.stamp span { font-size: 13px; letter-spacing: .2em; }
.stamp b { font-size: 26px; letter-spacing: .04em; line-height: 1; margin: 4px 0; }
.stamp i { font-style: normal; font-size: 10px; letter-spacing: .14em; opacity: .8; }
.stamp:hover { transform: rotate(-4deg) scale(1.06); color: #E85D04; }
:root[data-theme="night"] .stamp { color: #FF8A4C; }
.contact__clock { display: inline-flex; align-items: center; gap: 10px; color: var(--stone); margin: 0 0 30px; font-variant-numeric: tabular-nums; }
.contact__title { margin: 0; font-size: clamp(58px, 18vw, 340px); line-height: .86; letter-spacing: -.045em; font-weight: 600; font-variation-settings: "opsz" 96, "wdth" 80; }
.contact__title .cl { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.06em; }
.contact__title .cl > span:first-child { display: inline-block; }
.dot-led { display: inline-block; width: .16em; height: .16em; margin-left: .05em; border-radius: 50%; background: var(--led); box-shadow: 0 0 .25em .06em rgba(255,181,71,.75), 0 0 1.2em .2em rgba(255,181,71,.35); }
.contact__mail { display: inline-flex; align-items: center; gap: .45em; margin-top: clamp(36px, 5vw, 70px); font-size: clamp(22px, 3.4vw, 52px); letter-spacing: -.025em; font-weight: 500; text-decoration: none; position: relative; word-break: break-all; }
.contact__mail-logo { width: .9em; height: .9em; flex: none; transition: transform .6s var(--ease); }
.contact__mail:hover .contact__mail-logo { transform: rotate(-10deg) scale(1.15); }
.contact__mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ink); transform-origin: left; transition: transform .6s var(--ease); }
.contact__mail:hover::after { transform: scaleX(.18); }
.contact__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.contact__links a { display: inline-block; text-decoration: none; padding: 12px 20px; border: 1px solid var(--ink); border-radius: 100px; transition: background .3s, color .3s, box-shadow .3s, border-color .3s; }
.contact__links a i { display: inline-block; width: 18px; height: 18px; }
.contact__links a:hover { background: var(--ink); color: var(--plaster); }
.contact__links a.is-dark { background: var(--ink); color: var(--plaster); }
.contact__links a.is-dark:hover { background: var(--led); color: #211A15; border-color: var(--led); box-shadow: 0 0 30px rgba(255,181,71,.6); }
@media (max-width: 900px) {
  .tb__grid { grid-template-columns: 1fr 1fr; }
  .tb__cell:nth-child(3n) { border-right: 1px solid rgba(var(--ink-rgb), .3); }
  .tb__cell:nth-child(2n) { border-right: 0; }
  .tb__cell:nth-last-child(-n+3) { border-bottom: 1px solid rgba(var(--ink-rgb), .3); }
  .tb__cell:last-child { border-bottom: 0; }
  .tb__cell--name, .tb__cell--tools { grid-column: 1 / -1; border-right: 0 !important; }
  .stamp { width: 124px; height: 124px; bottom: -58px; right: 6px; } .stamp b { font-size: 19px; } .stamp span { font-size: 10px; } .stamp i { font-size: 8px; }
}
@media (max-width: 520px) { .tb__grid { grid-template-columns: 1fr; } .tb__cell { border-right: 0 !important; } }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; padding: 26px var(--gutter); border-top: 1px solid var(--line); font-size: 14px; color: var(--stone); }
.foot a { text-decoration: none; } .foot a:hover { color: var(--ink); }
.foot__credit { font-size: 12.5px; }

/* ---------- Visionneuse ---------- */
.lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(var(--plaster-rgb), .97); color: var(--ink); }
.lb::backdrop { background: transparent; }
.lb[open] { display: grid; place-items: center; }
.lb__fig { max-width: 88vw; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lb__fig img { max-width: 88vw; max-height: 80vh; width: auto; border-radius: 3px; box-shadow: 0 30px 80px -30px rgba(33,26,21,.45); }
.lb__fig figcaption { font-size: 15px; color: var(--stone); }
.lb__close { position: absolute; top: 20px; right: var(--gutter); padding: 9px 16px; border: 1px solid var(--ink); border-radius: 100px; font-size: 14px; }
.lb__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: var(--plaster); }
.lb__nav:hover { border-color: var(--ink); }
.lb__nav svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.lb__prev { left: var(--gutter); } .lb__next { right: var(--gutter); }
@media (max-width: 640px) { .lb__nav { top: auto; bottom: 20px; } }

/* ---------- Transition jour / nuit ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: reveal .9s cubic-bezier(.7,0,.2,1); }
@keyframes reveal { from { clip-path: circle(0 at var(--vx, 90%) var(--vy, 30px)); } to { clip-path: circle(150vmax at var(--vx, 90%) var(--vy, 30px)); } }

/* ---------- Sans animation ---------- */
.static .build { height: auto; }
.static .build__stage { position: relative; height: auto; padding-top: 96px; display: flex; flex-direction: column; }
.static .build__head { position: relative; top: 0; left: 0; right: 0; padding: 0 var(--gutter); order: -1; }
.static .build__intro { max-width: 60ch; }
.static .build__canvas { position: relative; height: 72vh; }
.static .build__labels, .static .rail, .static .build__captions, .static .build__hint { display: none; }
.static .manifesto__text .w { color: var(--ink); }
.static .contact__title .cl { overflow: visible; }
.static .n8n__render { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .grain { display: none; }
}