/* ==========================================================================
   MADINÉA — charte v2 : turquoise · orange · violet — DejaVu Sans
   ========================================================================== */
/* DejaVu Sans réduite aux caractères utiles (français, Europe de l'Ouest, ponctuation) : voir .claude/outils-medias/polices.ps1 */
@font-face {
  font-family: 'DejaVu Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: local('DejaVu Sans'), local('DejaVuSans'), url('fonts/dejavu-sans.woff') format('woff');
  unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+02C6-02C7, U+02D8-02DD, U+0300-0328, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: 'DejaVu Sans'; font-weight: 700; font-style: normal; font-display: swap;
  src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold'), url('fonts/dejavu-sans-bold.woff') format('woff');
  unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+02C6-02C7, U+02D8-02DD, U+0300-0328, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193;
}

:root {
  /* Charte Madinéa v2 */
  --turq: #24B6B0;
  --turq-deep: #0B7571;     /* turquoise lisible sur fond clair */
  --turq-light: #8EE6E0;
  --orange: #E94D1A;
  --violet: #A8519A;
  --violet-deep: #85428F;

  /* Neutres dérivés du turquoise */
  --ink: #06181A;
  --ink-2: #0C2729;
  --ink-line: #1F3C3E;
  --ink-muted: #8AA5A3;
  --snow: #EAF4F3;
  --paper: #F1F5F4;
  --paper-2: #E1EBE9;
  --paper-line: #C3D3D1;
  --paper-muted: #4F6967;

  --font: 'DejaVu Sans', 'Bitstream Vera Sans', Verdana, Geneva, sans-serif;

  --text-body: clamp(17px, 1.45vw, 21px);
  --text-heading: clamp(26px, 2.6vw, 42px);
  --text-display: clamp(32px, 3.8vw, 60px);

  --gutter: 24px;
  --gap: 18px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Thèmes de section ---------- */
.t-dark  { --bg: var(--ink);   --fg: var(--snow); --muted: var(--ink-muted);   --line: var(--ink-line);   --surface: var(--ink-2);   --accent: var(--turq);      --dot: var(--violet); }
.t-light { --bg: var(--paper); --fg: var(--ink);  --muted: var(--paper-muted); --line: var(--paper-line); --surface: var(--paper-2); --accent: var(--turq-deep); --dot: var(--violet-deep); }
.t-turq  { --bg: var(--turq);  --fg: var(--ink);  --muted: rgba(6, 24, 26, .8); --line: rgba(6, 24, 26, .3); --surface: #1E9E99; --accent: var(--ink); --dot: var(--violet); }
.t-dark, .t-light, .t-turq { background-color: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* jamais de défilement horizontal, même si un bloc dépasse un instant (rotation du téléphone) ;
   « clip » ne crée pas de zone de défilement, le défilement vertical reste celui de la page */
html { background: var(--ink); color-scheme: dark; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* navigateurs anciens */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
ul, ol { list-style: none; }
i { font-style: normal; }
img { max-width: 100%; }
::selection { background: var(--turq); color: var(--ink); }
:focus-visible { outline: 2px solid var(--turq); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nobr { white-space: nowrap; }

.accent { color: var(--accent); }
.label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.3; letter-spacing: .1em; }
.label .num { color: var(--accent); }
.dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.body-copy { font-size: var(--text-body); line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; }
.dash { border: 0; border-top: 1px dashed var(--line); margin: var(--gap) 0; }

/* Titres en minuscules (plus lisibles que les capitales) */
.reveal__title, .work__title, .process__title, .refs__title, .contact__title, .step__title, .work__cta-title {
  font-weight: 700; text-transform: none; letter-spacing: -.015em;
}

/* ---------- Survol des liens : les lettres roulent (découpées par le JS) ---------- */
.roll { display: inline-flex; vertical-align: top; line-height: 1.2; }
/* place au-dessus des lettres pour les accents (É), copie de survol assez basse pour ne pas transparaître */
.roll__in { display: inline-flex; overflow: hidden; vertical-align: top; padding-top: .18em; margin-top: -.18em; }
.roll .rc { display: inline-block; position: relative; transition: transform .55s var(--ease); transition-delay: calc(var(--i) * 18ms); }
.roll .rc::after { content: attr(data-c); position: absolute; left: 0; top: calc(100% + .3em); }
.roll:hover .rc, .btn-fill:hover .roll .rc, .nav__cta:hover .roll .rc { transform: translateY(calc(-100% - .3em)); }

/* ---------- Allumage des néons ---------- */
@keyframes flickerOn {
  0% { opacity: .15 } 6% { opacity: 1 } 10% { opacity: .25 } 16% { opacity: 1 }
  22% { opacity: .4 } 26% { opacity: 1 } 60% { opacity: .85 } 64%, 100% { opacity: 1 }
}
@keyframes hum { 0%, 100% { opacity: 1 } 48% { opacity: .93 } 50% { opacity: .8 } 52% { opacity: .95 } }

/* ---------- Nav : toujours visible, s'adapte à la section en dessous ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px;
  padding: 16px var(--gutter);
  font-size: 12px; letter-spacing: .1em;
  --nav-fg: var(--snow); --nav-bg: rgba(6, 24, 26, .92); --nav-accent: var(--turq);
  color: var(--nav-fg);
  transition: color .45s;
}
.nav[data-theme="light"] { --nav-fg: var(--ink); --nav-bg: rgba(241, 245, 244, .94); --nav-accent: var(--turq-deep); }
.nav[data-theme="turq"]  { --nav-fg: var(--ink); --nav-bg: rgba(36, 182, 176, .95); --nav-accent: var(--ink); }
.nav::before {
  content: ""; position: absolute; inset: 0 0 -24px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--nav-bg) 55%, transparent);
  opacity: 0; transition: opacity .5s;
}
.nav.is-scrolled::before { opacity: 1; }
.nav__logo { display: inline-flex; align-items: center; height: 17px; }
.nav__logo svg { height: 100%; width: auto; overflow: visible; fill: currentColor; }
/* Le logo du menu n'apparaît qu'une fois que le grand logo du hero l'a rejoint */
.js .nav__logo { opacity: 0; pointer-events: none; }
.nav.logo-in .nav__logo { opacity: 1; pointer-events: auto; }
.js .nav__links, .js .nav__actions { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.nav.links-in .nav__links, .nav.links-in .nav__actions { opacity: 1; }
.nav__links { justify-self: end; display: flex; gap: 28px; }
.nav__links a { position: relative; padding-bottom: 5px; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px dashed var(--nav-accent);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav__links a.is-active::after, .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__tel { display: inline-flex; align-items: center; gap: 8px; transition: color .3s; }
.nav__tel svg { width: 15px; height: 15px; fill: currentColor; }
.nav__tel:hover { color: var(--nav-accent); }
.nav__cta { display: inline-flex; padding: 10px 20px; border-radius: 0 999px 0 999px; background: var(--orange); color: var(--ink); transition: background .3s, color .3s; }
.nav__cta:hover { background: var(--snow); }

/* ---------- Hero : le logo seul, qui s'allume puis rejoint le menu ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  display: grid; place-items: center;
  overflow: hidden;
}
/* Vidéo de fond : visible en transparence, teintée turquoise, voilée d'encre pour garder le logo lisible */
.hero__media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.hero__video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .55; filter: grayscale(1) contrast(1.1);
}
.hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--turq); mix-blend-mode: color; opacity: .9; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(6, 24, 26, .35), rgba(6, 24, 26, .7) 70%),
    linear-gradient(180deg, rgba(6, 24, 26, .55), rgba(6, 24, 26, .2) 40%, rgba(6, 24, 26, .85));
}
.hero__glow { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hero__glow span { position: relative; width: min(110vmin, 1100px); aspect-ratio: 1; }
.hero__glow span::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(36, 182, 176, .22), rgba(36, 182, 176, .07) 45%, transparent 72%);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.08); opacity: 1 } }

.hero__center { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: -4vh; }
.hero__lockup { position: relative; width: clamp(260px, 44vw, 700px); font-size: 0; line-height: 0; }
.hero__iconwrap, .hero__wordwrap { display: block; will-change: transform; }
.hero__iconwrap { perspective: 900px; }
.hero__icontilt { display: block; }
.hero__wordwrap { margin-top: 4.324%; }   /* écart icône / texte de la charte : 42 / 971.4 */
.hero__icon, .hero__word { display: block; width: 100%; height: auto; overflow: visible; }
.hb { fill: var(--turq); fill-opacity: 0; stroke: var(--turq); stroke-width: 2.5; stroke-linejoin: round; transition: fill-opacity .6s; }
.hb.on { fill-opacity: 1; filter: url(#glowT); animation: flickerOn 1.1s steps(1) both; }
.hero__icon.is-hum .hb.on { animation: hum 5s ease-in-out infinite; }
.hd { fill: var(--violet); }
.hd.on { filter: url(#glowV); }
.hero__shine { pointer-events: none; }
.hero__letters { fill: var(--fg); }
.hl-accent { fill: var(--orange); }
.hero__baseline {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px;
  margin-top: clamp(40px, 7vh, 72px);
  font-size: 12px; letter-spacing: .22em; color: var(--muted);
}
.hero__baseline .dot { width: 5px; height: 5px; }

/* Le contenu du hero attend que l'animation soit prête (sécurité : visible après 3,5 s) */
.js .hero__center, .js .hero__scroll, .js .hero__glow { opacity: 0; animation: heroFallback .01s 3.5s forwards; }
.hero.is-ready .hero__center, .hero.is-ready .hero__scroll, .hero.is-ready .hero__glow { opacity: 1; animation: none; }
@keyframes heroFallback { to { opacity: 1 } }

.hero__scroll {
  position: absolute; left: 50%; bottom: var(--gutter); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .14em;
}
.hero__scroll-line { width: 1px; height: 42px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--turq);
  animation: scrollLine 1.8s var(--ease) infinite;
}
@keyframes scrollLine { 0% { transform: translateY(-100%) } 100% { transform: translateY(260%) } }

/* ---------- Manifeste (clair) ---------- */
.manifesto { position: relative; padding: 22vh 60px 20vh var(--gutter); overflow: hidden; }
.manifesto__blades {
  position: absolute; right: -8vw; top: 50%; width: min(42vw, 620px); height: auto;
  overflow: visible; pointer-events: none; opacity: .6;
  fill: var(--turq); fill-opacity: 0; stroke: var(--turq); stroke-width: 1.4;
}
.manifesto .label { position: relative; margin-bottom: 31px; }
.manifesto__text {
  position: relative; max-width: 17em;
  font-size: clamp(26px, 3vw, 50px); line-height: 1.22; font-weight: 400;
  letter-spacing: -.01em; text-transform: none;
}
.manifesto__text strong { font-weight: 700; color: var(--accent); }

/* ---------- Titres découpés mot à mot ---------- */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em 0 .1em; margin: -.16em 0 -.1em; }
[data-split] .w__i { display: inline-block; will-change: transform; }

/* ---------- Sections métiers ---------- */
.reveal {
  position: relative; height: 100vh; min-height: 640px;
  display: grid; grid-template-columns: 1fr minmax(320px, 1.2fr) 1fr; gap: var(--gap);
  align-items: center;
  padding: 90px 60px 48px var(--gutter);
  border-top: 1px dashed var(--line);
  overflow: hidden;
}
.reveal__col--left { align-self: start; padding-top: 6vh; }
.reveal__col--left .label { margin-bottom: 24px; }
.reveal__title { font-size: var(--text-heading); line-height: 1.08; }
.reveal__col--right { align-self: end; padding-bottom: 4vh; }
.taglist { margin: 24px 0; border-top: 1px dashed var(--line); }
.taglist li {
  display: flex; align-items: center;
  font-size: 12px; letter-spacing: .08em; padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.taglist li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); margin-right: 10px; }
.reveal__object { height: 100%; display: grid; place-items: center; perspective: 1400px; position: relative; }
.reveal__stage { transform-style: preserve-3d; display: flex; flex-direction: column; align-items: center; }

.btn-ghost {
  display: inline-flex; font-size: 12px; letter-spacing: .1em;
  padding: 13px 24px; border: 1px solid currentColor; border-radius: 0 999px 0 999px;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn-ghost:hover { background: var(--turq); border-color: var(--turq); color: var(--ink); }
.t-turq .btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--turq); }

/* « En vrai » : une réalisation réelle en complément de l'enseigne et du totem */
.proof { margin: 28px 0 0; width: clamp(150px, 24vh, 220px); }
.proof__media {
  position: relative; aspect-ratio: 9 / 14; overflow: hidden;
  border-radius: 0 26px 0 26px; border: 1px solid var(--line); background: var(--ink-2);
}
.proof__media video, .proof__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proof__cap { display: block; margin-top: 10px; font-size: 12px; line-height: 1.5; letter-spacing: .08em; }
.proof__cap small { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.proof--street { position: absolute; right: 60px; bottom: 44px; z-index: 3; margin: 0; width: clamp(140px, 21vh, 200px); }

/* Sections photo (covering, mobilier) : le texte d'un côté, les vraies réalisations de l'autre */
.reveal.reveal--media {
  height: auto; min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--gap) 6vw;
  align-items: center; padding: 16vh 60px 16vh var(--gutter);
}
.reveal--flip .media__text { order: 2; }
.media__text .label { margin-bottom: 24px; }
.media__text .reveal__title { max-width: 14em; margin-bottom: 26px; }
.media__text .taglist { max-width: 30em; }
.media__photos { display: flex; justify-content: center; }
.media__photos .photo { width: min(100%, 440px); }
.media__photos--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.media__photos--pair .photo { width: 100%; }
.media__photos--pair .photo:nth-child(2) { margin-top: 14vh; }
.photo { margin: 0; }
.photo__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0 32px 0 32px; background: var(--surface); }
.photo__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__cap { display: block; margin-top: 12px; font-size: 12px; line-height: 1.4; letter-spacing: .08em; }
.photo__cap small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* 05 — Impression 3D : un prénom imprimé couche par couche, puis allumé */
.reveal.reveal--print {
  height: auto; min-height: 100vh;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--gap) 5vw;
  align-items: center; padding: 110px 60px 80px var(--gutter);
}
.reveal--print .reveal__col--left { align-self: center; padding-top: 0; }
.print__intro { margin-top: 28px; }
.print__perso { margin-top: 18px; font-size: 15px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.print__perso .accent { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.print__stage {
  position: relative; overflow: hidden; border-radius: 0 44px 0 44px;
  background: radial-gradient(ellipse at 50% 100%, #0E2A2C, var(--ink) 70%);
  padding: 34px 26px 44px;
}
.print__stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(127, 155, 153, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 155, 153, .07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.print__svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.print__txt { font-family: var(--font); font-weight: 700; letter-spacing: 0; text-transform: none; }
.print__ghost { fill: none; stroke: #4C7C79; stroke-width: 1.6; stroke-dasharray: 7 6; }
.print__solid { fill: url(#pr-layers); }
.print__lit { fill: #F2FFFE; filter: url(#pr-glow); opacity: 0; }
.print__lit.on { opacity: 1; animation: flickerOn 1.1s steps(1) both; }
.print__bed { fill: #1B3A3C; }
.print__rail rect { fill: #1F3F41; }
.print__carriage { fill: #2C5052; }
.print__nozzle { fill: #9DB7B5; }
.print__hot { fill: var(--orange); animation: hotPulse 1.2s ease-in-out infinite; }
@keyframes hotPulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.print__status { position: absolute; left: 26px; bottom: 16px; font-size: 12px; letter-spacing: .1em; color: var(--ink-muted); }
.print__status #printPct { color: var(--turq); }
.print__fonts { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.print__fonts-label { font-size: 12px; letter-spacing: .1em; color: var(--muted); margin-right: 4px; }
.print__font {
  font-size: 12px; letter-spacing: .08em; padding: 9px 20px; border-radius: 0 999px 0 999px;
  border: 1px solid var(--line); color: var(--fg);
  transition: background .35s, color .35s, border-color .35s;
}
.print__font:hover { border-color: var(--turq); }
.print__font[aria-checked="true"] { background: var(--turq); border-color: var(--turq); color: var(--ink); }
.print__font--script { font-family: 'Dancing Script', cursive; font-size: 19px; line-height: 1; padding: 6px 20px 7px; letter-spacing: 0; text-transform: none; }
.print__try { display: flex; align-items: flex-end; gap: 22px; margin-top: 18px; }
.print__field { flex: 1; }
.print__reel { grid-column: 1 / -1; margin-top: 6vh; }
.print__reel-label { margin-bottom: 20px; }
.print__clips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.print__clip-media {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 0 26px 0 26px; background: var(--ink-2);
}
.print__clip-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.print__clip figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .08em; }
.print__clip figcaption .num { color: var(--accent); margin-right: 6px; }

/* 01 — La rue : l'enseigne du local central s'allume au milieu des façades voisines */
.reveal.reveal--street { display: block; padding: 0; }
.street__text {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap) 10vw;
  padding: 92px 60px 0 var(--gutter);
}
.reveal--street .reveal__col--left, .reveal--street .reveal__col--right { align-self: start; padding: 0; }
.reveal--street .reveal__col--right { justify-self: end; max-width: 30em; }
.reveal--street .reveal__title { max-width: 13em; }
.taglist--inline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 22px; border: 0; }
.taglist--inline li { padding: 0; border: 0; }
.taglist--inline li::before { margin-right: 8px; }
.street { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; }
.street__scene { display: block; width: 100%; height: 100%; }
/* Enseigne en écriture cursive : mot éteint dessous, lettres allumées une à une par-dessus (avec le halo) */
.sign__off, .sign__on { font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 92px; letter-spacing: 0; text-transform: none; }
.sign__off { fill: #0A1E20; stroke: #29494C; stroke-width: 1.4px; }
.sign__on { fill: #F2FFFE; stroke: #C9FBF7; stroke-width: 1px; }
.sl { fill-opacity: 0; stroke-opacity: 0; transition: fill-opacity .25s, stroke-opacity .25s; }
.sl.on { fill-opacity: 1; stroke-opacity: 1; }
.sl.flick { animation: flickerLetter .9s steps(1) both; }
@keyframes flickerLetter {
  0% { fill-opacity: .15; stroke-opacity: .15 } 6% { fill-opacity: 1; stroke-opacity: 1 } 10% { fill-opacity: .25; stroke-opacity: .25 }
  16% { fill-opacity: 1; stroke-opacity: 1 } 22% { fill-opacity: .4; stroke-opacity: .4 } 26%, 100% { fill-opacity: 1; stroke-opacity: 1 }
}
.street__cta { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.street__cta .btn-fill { pointer-events: auto; }
.street.is-lit .street__veil, .street.is-lit .sign__halo, .street.is-lit .shop__light,
.street.is-lit .shop__bulb, .street.is-lit .shop__spill { opacity: 1; }
@media (max-height: 720px) and (min-width: 900px) { .street { height: 56%; } }

/* 03 — Totem (sur fond clair) : panneau noir brillant, tranches lumineuses dégradées */
.totem-scene { position: relative; perspective: 1600px; }
.totem {
  --w: clamp(150px, min(13vw, 25vh), 220px); --h: calc(var(--w) * 2.6667); --d: calc(var(--w) * .24);
  width: var(--w); height: var(--h); position: relative; transform-style: preserve-3d; transform: rotateY(-25deg);
}
.totem__face {
  position: absolute; left: 0; top: 0; width: var(--w); height: var(--h);
  background: #07090B; border-radius: 2px;
  backface-visibility: hidden; overflow: hidden;
}
.totem__art { display: block; width: 100%; height: 100%; }
.totem__front { transform: translateZ(calc(var(--d) / 2)); }
.totem__back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.totem__right, .totem__left {
  width: var(--d); left: calc(50% - var(--d) / 2);
  background: linear-gradient(180deg, #B4FFF9 0%, #3FD1C9 16%, #24B6B0 34%, #6F6BE8 62%, #A8519A 84%, #D08BE6 100%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .55);
}
.totem__right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.totem__left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.totem__top { height: var(--d); top: calc(-1 * var(--d) / 2); transform: rotateX(90deg); background: #101317; }
.tm-tag { font-family: var(--font); font-size: 6.6px; font-weight: 700; letter-spacing: 1.1px; fill: #BFD3D1; }
.tm-txt { font-family: var(--font); font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; fill: #EAF4F3; }
.tm-ico { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tm-script { font-family: 'Dancing Script', cursive; font-weight: 700; letter-spacing: 0; text-transform: none; fill: #F4FAF9; }
/* lumière du socle, en couleurs, sur le sol clair */
.totem__floor {
  position: absolute; left: 50%; bottom: -38px; width: 340px; height: 76px; transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(6, 24, 26, .34), transparent 75%),
    radial-gradient(ellipse 45% 60% at 32% 50%, rgba(36, 182, 176, .45), transparent 70%),
    radial-gradient(ellipse 40% 55% at 66% 50%, rgba(168, 81, 154, .35), transparent 70%),
    radial-gradient(ellipse 30% 45% at 80% 55%, rgba(233, 77, 26, .22), transparent 70%);
}

/* ---------- Réalisations (sombre) : grille de photos ---------- */
.work { position: relative; padding: 16vh 60px 14vh var(--gutter); border-top: 1px dashed var(--line); }
.work__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 6vw;
  align-items: end; margin-bottom: 7vh;
}
.work__head .label { grid-column: 1 / -1; }
.work__title { font-size: var(--text-display); line-height: 1.02; }
.work__head .body-copy { max-width: 30em; color: var(--muted); }
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(300px, 34vw, 520px); gap: var(--gap); }
.card { position: relative; margin: 0; overflow: hidden; border-radius: 0 32px 0 32px; background: var(--ink-2); }
.card--wide { grid-column: span 2; }
.card__img { position: absolute; inset: 0; }
.card__img picture { display: block; width: 100%; height: 100%; }
.card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
/* chaque carte ouvre le projet dans la galerie (realisations.html) */
.card__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.card__link::after {
  content: "→"; position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(6, 24, 26, .75); color: var(--snow); font-size: 18px; opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s var(--ease-out);
}
.card:hover .card__img img { transform: scale(1.04); }
.card:hover .card__link::after, .card__link:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .card__link::after { opacity: .9; transform: none; } }
.work__intro .btn-ghost { margin-top: 22px; }
.card__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 64px var(--gutter) var(--gutter);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: end;
  background: linear-gradient(transparent, rgba(6, 24, 26, .92));
}
.card__num { font-size: 12px; color: var(--turq); grid-row: span 2; align-self: start; }
.card__title { font-size: clamp(16px, 1.35vw, 20px); font-weight: 700; line-height: 1.15; }
.card__tag { font-size: 12px; letter-spacing: .08em; color: rgba(234, 244, 243, .8); }
/* bandeau d'appel sous la grille */
.work__cta {
  margin-top: var(--gap); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 4vw, 56px); border: 1px dashed var(--line); border-radius: 0 32px 0 32px;
}
.work__cta-title { font-size: var(--text-heading); line-height: 1.08; margin-bottom: 8px; }
.work__cta .body-copy { max-width: 34em; color: var(--muted); }

/* ---------- Méthode (clair) ---------- */
.process { position: relative; padding: 16vh 60px 12vh var(--gutter); }
.process__head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); margin-bottom: 56px; align-items: end; }
.process__title { font-size: var(--text-display); line-height: 1.02; }
.process__sub { grid-column: 2; max-width: 36em; color: var(--muted); }
.steps { border-bottom: 1px dashed var(--line); }
.step {
  display: grid; grid-template-columns: 70px minmax(0, .8fr) minmax(0, 1.6fr);
  gap: var(--gap) 3vw; align-items: center;
  padding: 28px 0; border-top: 1px dashed var(--line);
}
.step__num { font-size: 12px; color: var(--accent); }
.step__title { font-size: var(--text-heading); line-height: 1.05; }
.step__desc { font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* ---------- Références (turquoise) : les entreprises qui nous ont fait confiance ---------- */
.refs { position: relative; padding: 14vh 60px 14vh var(--gutter); }
.refs__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 7vh; }
.refs__title { font-size: var(--text-display); line-height: 1.02; }
.refs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px dashed var(--line); border-left: 1px dashed var(--line); }
.ref {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 140px; padding: 24px;
  border-right: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
}
.ref__name { font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .02em; line-height: 1.2; }
.ref__what { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* ---------- Contact (sombre) ---------- */
.contact { padding: 16vh 60px 12vh var(--gutter); border-top: 1px dashed var(--line); }
.contact__head { margin-bottom: 8vh; }
.contact .label { margin-bottom: 24px; }
.contact__title { font-size: var(--text-display); line-height: 1.02; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10vw; align-items: start; }
.contact__dl { display: grid; gap: 18px; }
.contact__dl dt { font-size: 12px; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.contact__dl dd { font-size: 14px; letter-spacing: .06em; }
.contact__dl dd small { display: block; max-width: 34em; margin-top: 6px; font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.link { background: linear-gradient(var(--turq), var(--turq)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; padding-bottom: 2px; }
.link:hover { background-size: 100% 1px; color: var(--turq); }

.form { position: relative; display: grid; gap: 31px; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 31px; }
.chips { border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { font-size: 12px; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
.chip {
  font-size: 12px; letter-spacing: .08em; padding: 10px 20px; border-radius: 0 999px 0 999px;
  border: 1px solid var(--muted);
  transition: background .35s, color .35s, border-color .35s;
}
.chip:hover { border-color: var(--turq); }
.chip[aria-pressed="true"] { background: var(--turq); color: var(--ink); border-color: var(--turq); }
.field { position: relative; display: block; padding-top: 18px; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-radius: 0; outline: none;
  border-bottom: 1px solid var(--line);
  color: var(--fg); font: 400 19px/1.4 var(--font); letter-spacing: 0; padding: 6px 4px 10px 2px; resize: vertical;
}
.field__label { position: absolute; left: 2px; top: 26px; font-size: 12px; letter-spacing: .1em; color: var(--muted); pointer-events: none; transition: transform .45s var(--ease), color .3s; transform-origin: left; }
.field input:focus ~ .field__label, .field input:not(:placeholder-shown) ~ .field__label,
.field textarea:focus ~ .field__label, .field textarea:not(:placeholder-shown) ~ .field__label { transform: translateY(-24px) scale(.9); color: var(--turq); }
.field__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--turq); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.field input:focus ~ .field__line, .field textarea:focus ~ .field__line { transform: scaleX(1); }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__note { margin-top: -10px; font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.form__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.btn-fill {
  display: inline-flex; font-size: 12px; letter-spacing: .1em; padding: 18px 32px;
  border-radius: 0 999px 0 999px; background: var(--turq); color: var(--ink);
  transition: background .4s, color .4s, opacity .3s;
}
.btn-fill:hover { background: var(--snow); }
/* boutons de demande de devis : orange de la charte, texte encre (contraste suffisant pour la lecture) */
.btn-fill--accent { background: var(--orange); color: var(--ink); }
.btn-fill--accent:hover { background: var(--snow); color: var(--ink); }
.btn-fill[disabled] { opacity: .55; pointer-events: none; }
.form__status { font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--turq); }
.form__status.is-error { color: #FF9B73; }

/* ---------- Pied de page ---------- */
.footer { padding: 0 60px 0 var(--gutter); overflow: hidden; }
.footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; letter-spacing: .1em; padding: 14px 0; }
.footer__word { margin-top: 41px; transform: translateY(8%); }
.footer__word svg {
  display: block; width: 100%; height: auto; overflow: visible;
  fill: transparent; stroke: var(--ink-line); stroke-width: 1.3;
}

/* ---------- Page Réalisations : galerie des projets ---------- */
.g-head { padding: 136px 60px 36px var(--gutter); }
.g-head__crumb { gap: 12px; color: var(--muted); }
.g-head__crumb a { color: var(--accent); }
.g-head__title { margin: 22px 0 18px; font-size: var(--text-display); line-height: 1.02; letter-spacing: -.015em; text-transform: none; }
.g-head .body-copy { max-width: 42em; color: var(--muted); }
.g-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.g-grid {
  --cols: 3; --gx: var(--gap);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: row dense; gap: 44px var(--gx);
  container-type: inline-size; padding: 20px 60px 14vh var(--gutter);
}
.g-card { margin: 0; }
.g-card[hidden] { display: none; }
.g-card__cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0 32px 0 32px; background: var(--ink-2); }
.g-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.g-card__cover::after {
  content: "VOIR LE PROJET →"; position: absolute; left: 14px; bottom: 14px; padding: 9px 15px;
  border-radius: 0 999px 0 999px; background: rgba(6, 24, 26, .8); color: var(--snow);
  font-size: 12px; letter-spacing: .08em; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease-out);
}
.g-card__cover:hover img { transform: scale(1.04); }
.g-card__cover:hover::after, .g-card__cover:focus-visible::after { opacity: 1; transform: none; }
/* Photo en paysage : la carte prend deux colonnes, à la hauteur de ses voisines (largeur d'une colonne × 5/4) */
.g-card--wide { grid-column: span 2; }
.g-card--wide .g-card__cover { aspect-ratio: 8 / 5; }
@supports (height: 1cqi) {
  .g-card--wide .g-card__cover { aspect-ratio: auto; height: calc((100cqi - (var(--cols) - 1) * var(--gx)) / var(--cols) * 1.25); }
}
.g-card--wide.is-narrow { grid-column: auto; }
.g-card--wide.is-narrow .g-card__cover { aspect-ratio: 4 / 5; height: auto; }
.g-card__meta { display: grid; gap: 5px; padding-top: 14px; }
.g-card__cat { font-size: 12px; letter-spacing: .1em; color: var(--accent); }
/* le titre du projet et sa nature forment un seul intitulé (lu par Google), affichés sur deux lignes */
.g-card__head { display: grid; gap: 5px; font-size: inherit; }
.g-card__head > span { display: block; }
.g-card__title { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.2; }
.g-card__what { font-size: 15px; line-height: 1.45; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.g-card__count { font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.g-cta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px 40px; padding: 11vh 60px 11vh var(--gutter); }
.g-cta__title { font-size: var(--text-heading); line-height: 1.08; letter-spacing: -.015em; text-transform: none; }
.g-cta .body-copy { max-width: 34em; margin-top: 10px; }

/* ---------- Page Mentions légales ---------- */
.legal { max-width: calc(46em + 84px); padding: 8px 60px 14vh var(--gutter); }
.legal section + section { margin-top: 40px; padding-top: 32px; border-top: 1px dashed var(--line); }
.legal h2 { margin-bottom: 14px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; text-transform: none; }
.legal .body-copy { color: var(--muted); }
.legal .body-copy + .body-copy { margin-top: 12px; }
.legal a, .form__note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover, .form__note a:hover { color: var(--turq); }

/* Visionneuse */
html.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: rgba(4, 14, 15, .97); color: var(--snow); }
.lightbox[hidden] { display: none; }
/* la photo occupe la place laissée par la légende, quelle que soit sa longueur */
.lightbox__stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 70px 90px 10px; }
.lightbox__img, .lightbox__video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0 24px 0 24px; }
.lightbox__img[hidden], .lightbox__video[hidden] { display: none; }
.lightbox__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 12px 90px 24px; }
.lightbox__title { font-size: 14px; letter-spacing: .08em; }
.lightbox__text { max-width: 62em; font-size: 15px; line-height: 1.45; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.lightbox__count { margin-left: auto; font-size: 12px; letter-spacing: .08em; color: var(--ink-muted); }
.lightbox__btn {
  position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(234, 244, 243, .35); background: rgba(6, 24, 26, .7); color: var(--snow); font-size: 20px; letter-spacing: 0;
  transition: border-color .3s, background .3s;
}
.lightbox__btn:hover { border-color: var(--turq); background: rgba(36, 182, 176, .18); }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) and (min-width: 900px) {
  .nav__links { gap: 20px; }
  .nav__tel span { display: none; }
  .hero__baseline { letter-spacing: .14em; gap: 10px 12px; }
}
@media (max-width: 899px) {
  :root { --gutter: 16px; }
  .nav { padding: 12px var(--gutter); gap: 12px; }
  .nav__links { display: none; }
  .nav__actions { justify-self: end; grid-column: 3; gap: 10px; }
  .nav__tel { width: 38px; height: 38px; justify-content: center; border: 1px solid currentColor; border-radius: 50%; }
  .nav__tel span { display: none; }
  .nav__cta { padding: 9px 16px; }
  .hero__lockup { width: 78vw; }
  .hero__baseline { flex-direction: column; gap: 10px; letter-spacing: .18em; }
  .hero__baseline .dot { display: none; }
  .manifesto, .process, .refs, .contact, .footer { padding-left: 16px; padding-right: 16px; }
  .manifesto { padding-top: 14vh; padding-bottom: 14vh; }
  .manifesto__blades { display: none; }
  .reveal { height: auto; min-height: 100svh; grid-template-columns: 1fr; padding: 96px 16px 64px; gap: 41px; }
  .reveal__col--left, .reveal__col--right { padding: 0; }
  .reveal__object { min-height: 420px; }
  .reveal.reveal--media { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 96px 16px 72px; gap: 40px; }
  .reveal--flip .media__text { order: 0; }
  .media__photos--pair .photo:nth-child(2) { margin-top: 48px; }
  .reveal.reveal--street { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 40px; min-height: 0; }
  .street__text { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 96px 16px 0; }
  .reveal--street .reveal__col--right { justify-self: start; }
  .street { position: relative; width: 100%; height: auto; aspect-ratio: 1100 / 720; margin-top: 28px; }
  .reveal.reveal--print { grid-template-columns: minmax(0, 1fr); padding: 96px 16px 64px; gap: 36px; }
  .print__stage { padding: 22px 14px 38px; border-radius: 0 30px 0 30px; }
  .print__try { flex-direction: column; align-items: stretch; }
  .print__clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .print__try .btn-fill { justify-content: center; }
  .proof { width: 48vw; }
  .proof--street { position: relative; right: auto; bottom: auto; margin: 24px 16px 0; width: 48vw; }
  .street__cta { position: relative; bottom: auto; margin-top: 22px; }
  .work { padding: 96px 0 64px; }
  .work__head { grid-template-columns: minmax(0, 1fr); padding: 0 16px; margin-bottom: 32px; }
  .work__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 0 16px 6px; gap: 12px; }
  .card { flex: 0 0 80vw; height: 100vw; max-height: 560px; scroll-snap-align: start; }
  .work__cta { margin: 20px 16px 0; padding: 24px; }
  .process__head { grid-template-columns: 1fr; }
  .process__sub { grid-column: auto; }
  .step { grid-template-columns: 40px minmax(0, 1fr); }
  .step__desc { grid-column: 2; }
  .refs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref { min-height: 110px; padding: 18px 14px; }
  .contact__grid { grid-template-columns: 1fr; gap: 56px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .g-head { padding: 104px 16px 24px; }
  .legal { padding: 4px 16px 72px; }
  .g-grid { --cols: 2; --gx: 12px; gap: 28px var(--gx); padding: 12px 16px 72px; }
  .g-card__cover { border-radius: 0 20px 0 20px; }
  .g-card__cover::after { display: none; }
  .g-card__title { font-size: 15px; }
  .g-card__what { font-size: 13px; }
  .g-cta { padding: 64px 16px; }
  .lightbox__stage { padding: 62px 8px 6px; }
  .lightbox__img, .lightbox__video { border-radius: 0 16px 0 16px; }
  .lightbox__cap { padding: 10px 16px 18px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; }
  .lightbox__prev { left: auto; right: 66px; }
  .lightbox__next { right: 14px; }
  .lightbox__cap { padding-right: 130px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .g-grid { --gx: var(--gap); gap: 36px var(--gx); }
}

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