/* ==========================================================================
   NEOSQUARE — Brand tokens
   Typeface: Inter (SemiBold / Medium / Regular) — fonts.google.com/specimen/Inter
   Theme: dark (default) + light, toggled via [data-theme] on <html>
   ========================================================================== */
:root{
  /* Raw palette — NEOSQUARE gold & charcoal */
  --c-gold:      #B08D57;
  --c-gold-light:#C9A876;
  --c-gold-dark: #8F6F42;
  --c-charcoal:  #1C1C1C;
  --c-charcoal-light: #2E2E2E;
  --c-light:     #ededed;
  --c-white:     #ffffff;
  --c-offwhite:  #FAFAF8;
  --c-black:     #000000;
  --c-muted:     #7b8087;

  /* ---- Semantic tokens: DARK theme (default) ---- */
  --bg:            var(--c-charcoal);
  --bg-elevated:   var(--c-charcoal-light);
  --bg-elevated-hover: #3a3a3a;
  --bg-alt:        var(--c-charcoal-light);
  --bg-footer:     var(--c-black);

  --ink:           var(--c-white);
  --ink-muted:     var(--c-muted);
  --border:        rgba(255,255,255,0.08);
  --surface-tint:  rgba(255,255,255,0.06);
  --surface-tint-strong: rgba(255,255,255,0.22);

  --alt-ink:       var(--c-white);
  --alt-ink-muted: var(--c-muted);
  --alt-border:    rgba(255,255,255,0.08);
  --alt-accent-text: var(--c-muted);

  --accent-fill:       var(--c-gold);
  --accent-fill-hover: var(--c-gold-light);
  --accent-on-fill:    var(--c-charcoal);
  --accent-text:       var(--c-gold);
/* 
  --header-bg:          rgba(28,28,28,.7);
  --header-bg-scrolled: rgba(28,28,28,.92); */
   --header-bg:          rgba(250, 250, 248, 0.938);
  --header-bg-scrolled: rgba(250,250,248,.94);

  --grid-line: rgba(255,255,255,.035);
  --grid-fade: rgba(255,255,255,.05);
  --shadow-dropdown: 0 20px 40px rgba(0,0,0,.4);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container-w: 1240px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---- Semantic tokens: LIGHT theme ---- */
:root[data-theme="light"]{
  --bg:            var(--c-offwhite);
  --bg-elevated:   var(--c-white);
  --bg-elevated-hover: #f0ede8;
  --bg-alt:        var(--c-white);
  --bg-footer:     var(--c-light);

  --ink:           var(--c-charcoal);
  --ink-muted:     var(--c-muted);
  --border:        rgba(28,28,28,0.1);
  --surface-tint:  rgba(28,28,28,0.05);
  --surface-tint-strong: rgba(28,28,28,0.18);

  --alt-ink:       var(--c-charcoal);
  --alt-ink-muted: var(--c-charcoal-light);
  --alt-border:    rgba(28,28,28,0.1);
  --alt-accent-text: var(--c-charcoal-light);

  --accent-fill:       var(--c-gold);
  --accent-fill-hover: var(--c-gold-dark);
  --accent-on-fill:    var(--c-white);
  --accent-text:       var(--c-gold-dark);

  --header-bg:          rgba(250,250,248,.75);
  --header-bg-scrolled: rgba(250,250,248,.94);

  --grid-line: rgba(28,28,28,.045);
  --grid-fade: rgba(28,28,28,.06);
  --shadow-dropdown: 0 20px 40px rgba(28,28,28,.12);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .35s var(--ease), color .35s var(--ease);
  /* Sticky footer: stack the flow children in a column at least a screen
     tall, and let <main> absorb the slack so the footer is pinned to the
     bottom on short pages / when zoomed out. The fixed header and the
     absolute sprite/overlays sit outside this flow and are unaffected. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main{ flex: 1 0 auto; }
.site-footer{ flex-shrink: 0; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--accent-fill); color:var(--accent-on-fill); padding:.75rem 1.25rem; border-radius:var(--radius-sm);
}
.skip-link:focus{ left:1rem; top:1rem; }

.container{
  width:100%;
  max-width: var(--container-w);
  margin-inline:auto;
  padding-inline: 24px;
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 18px;
}
.eyebrow-rule{ width:28px; height:1px; background: var(--accent-text); display:inline-block; }
.why-intro .eyebrow{ color: var(--alt-accent-text); }

.section-title{
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

.accent{ color: var(--accent-text); font-style: normal; }
.why-intro .accent{ color: var(--alt-accent-text); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 26px;
  font-size:.94rem; font-weight:600; letter-spacing:.04em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn svg{ transition: transform .25s var(--ease); }
.btn:hover{ transform: translateY(-2px); }
.btn:hover svg{ transform: translateX(3px); }

.btn-accent{
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill);
}
.btn-accent:hover{
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill);
  box-shadow: 0 6px 24px rgba(176,141,87,.35);
}
.btn-accent:hover svg{ color:#fff; }

.btn-outline{
  background: transparent;
  color: var(--ink);
  border-color: var(--surface-tint-strong);
}
.btn-outline:hover{ border-color: var(--accent-fill); background: var(--surface-tint); }

.btn-sm{ padding: 10px 20px; font-size:.85rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed; left:0; right:0; top:14px; z-index: 100;
  width: min(1040px, calc(100% - 32px));
  margin-inline: auto;
  background: var(--header-bg-scrolled);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
}

/* Le header est sur fond clair (off-white) dans les DEUX thèmes :
   ses variables locales doivent donc être calibrées pour du texte foncé. */
.site-header{
  --ink:           var(--c-charcoal);
  --ink-muted:     #5c6167;
  --border:        rgba(28,28,28,0.1);
  --surface-tint:  rgba(28,28,28,0.06);
  --surface-tint-strong: rgba(28,28,28,0.18);
}

.brand{ display:flex; align-items:center; gap:12px; color: var(--ink); transition: color .3s var(--ease); }
.brand-mark{ color: var(--ink); flex-shrink:0; transition: color .3s var(--ease); }

.brand-logo{ height: 30px; width: auto; display:block; flex-shrink:0; }
.brand-type{ height: 18px; width: auto; display:block; }
.brand-logo-img{ height: 40px; width: auto; display:block; flex-shrink:0; object-fit: contain; transition: opacity .3s var(--ease); }
.brand-logo-img:hover{ opacity: .8; }
.brand-logo-footer{ height: 34px; }
.logo-mark{ fill: var(--ink); transition: fill .3s var(--ease); }
.logo-text{ fill: var(--ink); transition: fill .3s var(--ease); }

.nav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav-link{
  font-size:.92rem; font-weight:500; color: var(--ink-muted); letter-spacing:.06em;
  display:flex; align-items:center; gap:6px;
  background:none; border:none; padding:0;
  transition: color .2s var(--ease);
}
.nav-link:hover{ color: var(--ink); }
.nav-link.is-active{ color: var(--accent-text); }

/* ---- Services dropdown ----
   .nav-item-dropdown is the hover/focus root. .nav-dropdown is an
   invisible hit-box that spans from the trigger's bottom edge all the way
   through the panel (via padding-top instead of a margin/gap), so moving
   the cursor straight down from "Services" into the menu never crosses a
   dead zone and never drops the hover state. */
.nav-item-dropdown{ position:relative; }

.nav-dropdown-trigger svg{ transition: transform .2s var(--ease); }

.nav-dropdown{
  position:absolute; top:100%; left:50%;
  transform: translateX(-50%);
  padding-top: 16px; /* bridges the gap — still part of the hoverable box */
  width: max-content;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s var(--ease), visibility .2s;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-item-dropdown.is-open .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav-item-dropdown:hover .nav-dropdown-trigger svg,
.nav-item-dropdown:focus-within .nav-dropdown-trigger svg,
.nav-item-dropdown.is-open .nav-dropdown-trigger svg{
  transform: rotate(180deg);
}

.nav-dropdown-panel{
  background: rgba(250,250,248,.98);
  border: 1px solid rgba(28,28,28,.1);
  border-radius: var(--radius-md);
  padding: 10px;
  min-width: 220px;
  display:flex; flex-direction:column; gap:2px;
  box-shadow: 0 20px 40px rgba(28,28,28,.16);
  transform: translateY(-6px);
  transition: transform .2s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown:focus-within .nav-dropdown-panel,
.nav-item-dropdown.is-open .nav-dropdown-panel{
  transform: translateY(0);
}
.nav-dropdown-panel a{
  font-size:.88rem; color:#5c6167; padding: 10px 12px; border-radius: var(--radius-sm);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-dropdown-panel a:hover{ background: rgba(28,28,28,.07); color: var(--c-charcoal); }
.nav-dropdown-panel .nav-dropdown-all{
  margin-top:6px; padding-top:12px; border-top:1px solid rgba(28,28,28,.1);
  font-weight:600; color: var(--accent-text);
}
.nav-dropdown-panel .nav-dropdown-all:hover{ color: var(--c-gold-dark); background: rgba(176,141,87,.1); }

.nav-cta{ flex-shrink:0; margin-left:14px; }

/* ---- Theme toggle ---- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-left:18px; flex-shrink:0;
  background: var(--accent-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--c-white);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.theme-toggle:hover{ border-color: var(--accent-fill); background: var(--surface-tint); color: var(--ink); }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; margin-left:12px;
}
.nav-toggle span{
  width:100%; height:2px; background: var(--ink); border-radius:2px;
  transition: transform .25s var(--ease), opacity .25s var(--ease), background-color .3s var(--ease);
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:2px;
  max-height:0; overflow:hidden;
  background: rgba(250,250,248,.98);
  transition: max-height .35s var(--ease);
}
.mobile-nav.is-open{ max-height: 600px; }
.mobile-nav a{
  padding: 16px 24px; font-size:.95rem; font-weight:500; color:#5c6167;
  border-top:1px solid rgba(28,28,28,.08);
}
.mobile-nav .btn{ margin: 14px 24px; }
.mobile-nav .mobile-nav-sub{
  padding: 10px 24px 10px 40px; font-size:.88rem; color: var(--c-muted);
}

/* ==========================================================================
   Grid texture overlay (used on dark hero / CTA sections)
   ========================================================================== */
.grid-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, var(--grid-fade), transparent 55%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, black 40%, transparent 100%);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding: 0;
  overflow:hidden;
  height: 100vh;
  display:flex; align-items:center; justify-content:center;
}

.hero-slides{
  position:absolute; inset:0;
  z-index:0;
}
/* Overlay sombre sur l'image (sous le texte) pour la lisibilité */
.hero-slides::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.2);
  pointer-events:none;
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity 1.8s ease, visibility 1.8s;
}
.hero-slide.is-active{
  opacity:1; visibility:visible;
}
.hero-slide picture,
.hero-slide picture img{
  display:block;
  width:100%; height:100%;
}
.hero-bg{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform 14s linear;
}
.hero-slide.is-active .hero-bg{
  transform: scale(1.18);
}
/* Same idea mirrored at the top: bg → transparent, pulled up under the header */
.hero-fade-top{
  position:absolute; left:0; right:0; top:-50px;
  height: 240px;
  z-index:0; pointer-events:none;
  background: linear-gradient(180deg, var(--c-black), transparent);
}
.hero-dots{
  position:absolute; left:50%; bottom:80px;
  transform:translateX(-50%);
  z-index:3;
  display:flex; gap:10px;
  align-items:center;
}
.hero-dot{
  width:10px; height:10px;
  padding:0; border:none; border-radius:50%;
  background: rgba(255,255,255,.45);
  cursor:pointer;
  transition: background .25s, transform .25s;
}
.hero-dot.is-active{
  background: #fff;
  transform: scale(1.35);
}
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.28);
  cursor:pointer;
  transition: background .25s, border-color .25s, transform .25s;
}
.hero-arrow:hover{
  background: rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.6);
}
.hero-arrow--prev{ left:18px; }
.hero-arrow--next{ right:18px; }
.hero-arrow--prev:hover{ transform: translateY(-50%) translateX(-2px); }
.hero-arrow--next:hover{ transform: translateY(-50%) translateX(2px); }
.hero-inner{
  position:relative; z-index:1;
  text-align: center;
  /* display:grid; grid-template-columns:1fr 1fr; */
  gap: clamp(40px, 5vw, 72px); align-items:start;
  max-width: 1120px;
}
/* .hero-copy{ max-width: 620px; } */
.hero-scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  color: var(--ink); border:1px solid var(--border);
  background: var(--surface-tint);
  animation: cueBob 2.2s ease-in-out infinite;
}
@keyframes cueBob{
  0%,100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 7px); }
}
.hero-media{ margin:0; 
}
.hero-media img{
  display:block;
  width:100%;
  height:auto;
  max-height: 380px;
  object-fit:cover;
  border-radius: 28px;
  box-shadow:
    0 34px 70px -18px rgba(0,0,0,.5),
    0 18px 36px -20px rgba(0,0,0,.45);
  /* display:block; width:100%;
  aspect-ratio: 10/9; object-fit:cover;
  border-radius: var(--radius-lg);
  border:1px solid var(--border);
  box-shadow: var(--shadow-dropdown); */
}
:root[data-theme="light"] .hero-media img{
  box-shadow:
    0 34px 70px -22px rgba(28,28,28,.28),
    0 18px 36px -20px rgba(28,28,28,.2);
}
.hero-media-cta{
  position:absolute; left:75%; bottom:18px;
  transform: translateX(-50%);
  width:max-content; max-width: calc(100% - 32px);
  white-space:nowrap;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.hero-media-cta:hover{ transform: translateX(-50%) translateY(-2px); }
@media (max-width: 760px){
  .hero-media-cta{
    left:50%;
    white-space:normal;
    text-align:center;
    max-width: calc(100% - 28px);
  }
}

/* ---- Modale maquette interactive ---- */
.maquette-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding: 32px;
  background: rgba(9,9,11,.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s var(--ease), visibility .25s;
}
.maquette-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.maquette-dialog{
  position:relative;
  max-width: min(960px, 100%);
  max-height: 100%;
  transform: translateY(14px) scale(.98);
  transition: transform .3s var(--ease);
}
.maquette-modal.is-open .maquette-dialog{ transform: translateY(0) scale(1); }
.maquette-dialog img,
.maquette-frame{
  display:block; max-width:100%; max-height: calc(100vh - 160px);
  object-fit:contain; border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.14);
  width:100%;
}
.maquette-frame{
  height: 80vh;
}
.maquette-close{
  position:absolute; top:-16px; right:-16px; z-index:2;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--accent-fill); color:#fff;
  border:none; border-radius:50%;
  cursor:pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.maquette-hint{
  text-align:center; margin-top:14px;
  font-size:.85rem; color: rgba(255,255,255,.75);
}
.hero-title{
  font-size: clamp(2.8rem, 4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  color: var(--c-white);
}
.hero-line{ display:block; }
.hero-line--accent{ color: var(--accent-text); }
.hero-desc{
  font-size: 1.1rem;
  line-height:1.6;
  color: var(--c-offwhite);
  text-align: center;
  max-width: 560px;
  font-style: italic;
  margin: 0 auto 2rem auto;
  
}
.hero-actions{ 
  display:flex; flex-wrap:wrap; gap:16px;
align-items: start;
justify-content: center;
}

/* Entrance stagger — titre ligne par ligne puis texte puis actions */
.hero-line,
.hero-enter{
  opacity: 0;
  animation: heroRise 1.2s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.4s + var(--hero-i) * .6s);
}
@keyframes heroRise{
  from{
    opacity: 0;
    transform: translateY(40px);
    filter: blur(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-line, .hero-enter{ animation: none; opacity: 1; }
  .hero-slide .hero-bg{ transform: none; }
}
/* ==========================================================================
   Lifecycle / Architectural timeline
   ========================================================================== */

.lifecycle {
  padding: 7rem 2rem;
  background: var(--bg);
  transition: background-color .35s var(--ease);
}

.lifecycle-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 80px;
}

/* Main horizontal line */
.lifecycle-timeline::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}

/* --------------------------------------------------------------------------
   Phase
   -------------------------------------------------------------------------- */

.lifecycle-phase {
  position: relative;
  min-width: 0;
  padding-right: 40px;
  cursor: pointer;
}

.lifecycle-phase:last-child {
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   Marker
   -------------------------------------------------------------------------- */

.phase-marker {
  position: relative;
  height: 70px;
  display: flex;
  align-items: flex-start;
}

.phase-number {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 68px;
  height: 68px;

  border-radius: 50%;

  background: var(--bg);
  border: 1px solid var(--border);

  color: var(--ink-muted);

  font-size: .8rem;
  font-weight: 600;

  transition:
    background-color .35s var(--ease),
    border-color .35s var(--ease),
    color .35s var(--ease),
    transform .35s var(--ease);
}

/* Small architectural line after marker */
.phase-line {
  position: absolute;
  top: 34px;
  left: 68px;
  width: 32px;
  height: 1px;

  background: var(--border);

  transition: background-color .35s var(--ease);
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.phase-content {
  padding-top: 35px;
  padding-right: 15px;
}

.phase-eyebrow {
  margin-bottom: 10px;

  color: var(--accent-text);

  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.phase-content h3 {
  margin: 0 0 16px;

  color: var(--ink);

  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.15;

  transition: transform .35s var(--ease);
}

.phase-description {
  max-width: 300px;
  margin: 0 0 24px;

  color: var(--ink-muted);

  font-size: .94rem;
  line-height: 1.65;
}

.phase-content ul {
  display: flex;
  flex-direction: column;
  gap: 9px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.phase-content li {
  position: relative;
  padding-left: 18px;

  color: var(--ink);

  font-size: .86rem;
  line-height: 1.4;
}

.phase-content li::before {
  content: "";

  position: absolute;
  top: .55em;
  left: 0;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--surface-tint-strong);

  transition: background-color .35s var(--ease);
}

/* --------------------------------------------------------------------------
   Hover
   -------------------------------------------------------------------------- */

.lifecycle-phase:hover .phase-number {
  border-color: var(--accent-fill);
  color: var(--accent-text);
  transform: translateY(-4px);
}

.lifecycle-phase:hover .phase-line {
  background: var(--accent-fill);
}

.lifecycle-phase:hover .phase-content h3 {
  transform: translateX(4px);
}

.lifecycle-phase:hover li::before {
  background: var(--accent-fill);
}

/* --------------------------------------------------------------------------
   Active phase
   -------------------------------------------------------------------------- */

.lifecycle-phase.is-active .phase-number {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-on-fill);
}

.lifecycle-phase.is-active .phase-line {
  background: var(--accent-fill);
}

.lifecycle-phase.is-active .phase-content h3 {
  color: var(--ink);
}

.lifecycle-phase.is-active li::before {
  background: var(--accent-fill);
}

/* --------------------------------------------------------------------------
   Subtle vertical divider between phases
   -------------------------------------------------------------------------- */

.lifecycle-phase:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 70px;
  right: 20px;

  width: 1px;
  height: calc(100% - 70px);

  background: var(--border);

  opacity: .45;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

  .lifecycle {
    padding: 5rem 1.5rem;
  }

  .lifecycle-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 30px;
  }

  .lifecycle-timeline::before {
    display: none;
  }

  .lifecycle-phase {
    padding-right: 20px;
  }

  .lifecycle-phase:nth-child(2n)::after {
    display: none;
  }

  .phase-line {
    display: none;
  }

  .phase-content {
    padding-top: 25px;
  }
}

@media (max-width: 600px) {

  .lifecycle {
    padding: 4rem 1.25rem;
  }

  .lifecycle-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 55px;
  }

  .lifecycle-timeline::before {
    display: block;

    top: 0;
    bottom: 0;
    left: 34px;
    right: auto;

    width: 1px;
    height: auto;
  }

  .lifecycle-phase {
    display: grid;
    grid-template-columns: 68px 1fr;
    column-gap: 24px;

    padding: 0 0 55px;
  }

  .lifecycle-phase:last-child {
    padding-bottom: 0;
  }

  .phase-marker {
    height: auto;
  }

  .phase-number {
    width: 68px;
    height: 68px;
  }

  .phase-content {
    padding-top: 5px;
  }

  .phase-content h3 {
    font-size: 1.4rem;
  }

  .phase-description {
    font-size: .9rem;
  }

  .lifecycle-phase:not(:last-child)::after {
    display: none;
  }
}

/* ==========================================================================
    Lifecycle — stepper horizontal (4 étapes)
    ========================================================================== */
.steps-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 56px;
}
.step-card{
  position:relative;
  display:flex; flex-direction:column;
  padding: 30px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.step-card:hover{
  transform: translateY(-5px);
  border-color: var(--accent-fill);
  box-shadow: var(--shadow-dropdown);
}
/* ligne de connexion entre les cartes */
.step-card:not(:last-child)::after{
  content:"";
  position:absolute; top:44px; right:-19px;
  width:20px; height:1px;
  background: var(--accent-text);
  opacity:.6;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  font-size:.95rem; font-weight:700;
  color: var(--c-light);
  background: var(--accent-fill);
  border-radius: 12px;
  margin-bottom: 20px;
}
.step-title{
  font-size: 1.15rem; font-weight:700; letter-spacing:-.01em;
  margin-bottom: 12px;
}
.step-desc{
  font-size:.92rem; line-height:1.55; color: var(--ink-muted);
  margin-bottom: 18px;
}
.step-list{ list-style:none; margin-top:auto; }
.step-list li{
  position:relative;
  padding-left: 18px;
  font-size:.86rem; line-height:1.7; color: var(--ink-muted);
}
.step-list li::before{
  content:"";
  position:absolute; left:0; top:.72em;
  width:8px; height:2px;
  background: var(--accent-text);
  border-radius:1px;
}

@media (max-width: 1080px){
  .steps-grid{ grid-template-columns: repeat(2, 1fr); }
  .step-card:nth-child(2)::after{ display:none; }
}
@media (max-width: 640px){
  .steps-grid{ grid-template-columns: 1fr; }
  .step-card::after{ display:none; }
}

/* ==========================================================================
   Expertise cards
   ========================================================================== */
.expertise{ padding: 60px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); }
.expertise-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
  margin-top: 56px;
}
.expertise-card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding:  2em;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.expertise-card:hover{ background: var(--bg-elevated); border-color: var(--surface-tint-strong); }
.expertise-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius: var(--radius-sm);
  border: 1px solid var(--surface-tint-strong);
  color: var(--ink);
  margin-bottom: 26px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.expertise-num{
  display:block; font-size:.8rem; font-weight:600; color: var(--accent-text); margin-bottom: 10px;
}
.expertise-card h3{
  font-size: 1.02rem; font-weight:600; margin-bottom: 12px; line-height:1.35;
}
.expertise-card p{
  font-size:.9rem; line-height:1.6; color: var(--ink-muted);
}
/* Variante splite (image à gauche, comme #marque) */
.expertise .why-media img{ aspect-ratio: 4 / 4.6; }
.expertise-side .expertise-grid{
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
  margin-top: 8px;
}
.expertise-side .expertise-card{
  padding: 22px;
}
.expertise-side .expertise-icon{ margin-bottom: 16px; }

/* ==========================================================================
   Why NEOSQUARE — image à gauche (contenue) / cartes à droite
   ========================================================================== */
.why{ background: var(--bg-alt); color: var(--alt-ink); padding: clamp(80px, 10vw, 120px) 0; transition: background-color .35s var(--ease); }
.why-grid{
  display:grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 72px);
  align-items:center;
}
.why-side .section-title{ margin-bottom: 28px; }

/* Image contenue — jamais plus large que sa colonne */
.why-media{
  position:relative;
  margin:0;
  min-width:0;              /* empêche le débordement dans la grille */
}
.why-media::before{
  content:"";
  position:absolute; top:-18px; left:-18px; right:18px; bottom:18px;
  border:1px solid var(--c-tertiary);
  border-radius: var(--radius-lg);
  opacity:.45;
  pointer-events:none;
}
.why-media img{
  position:relative; z-index:1;
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio: 4 / 4.4;
  object-fit:cover;
  object-position:center;
  border-radius: var(--radius-lg);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.45),
    0 14px 30px -16px rgba(0,0,0,.4);
}
.why-badge{
  position:absolute; z-index:2;
  left:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  font-size:.82rem; font-weight:600;
  color:#fff;
  background: rgba(13,13,15,.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-md);
}

/* Cartes des 3 arguments */
.why-list{
  display:flex; flex-direction:column; gap:14px;
  min-width:0;
}
.why-item{
  display:flex; gap:22px;
  padding: 24px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.why-item:hover{ transform: translateX(6px); border-color: var(--c-tertiary); }
/* .why-item:last-child{ border-bottom:1px solid var(--border); } */
.why-num{
  font-size:1.25rem; font-weight:700; color: var(--c-tertiary); flex-shrink:0; width:40px;
  line-height:1.3;
}
.why-item h3{ font-size:1.08rem; font-weight:600; margin-bottom:8px; }
.why-item p{ font-size:.94rem; line-height:1.6; color: var(--ink-muted); }

@media (max-width: 900px){
  .why-grid{ grid-template-columns: 1fr; gap: 44px; }
  .why-media{ max-width: 520px; margin-inline:auto; }
  .why-media::before{ top:-12px; left:-12px; right:12px; bottom:12px; }
}

/* ==========================================================================
   Projets — mosaïque asymétrique (homepage)
   ========================================================================== */
.projects-section{
  background: var(--bg);
  padding: clamp(80px, 10vw, 120px) 0;
  transition: background-color .35s var(--ease);
}
.projects-head{ max-width: 720px; margin: 0 auto clamp(44px, 6vw, 64px); text-align:center; }
.projects-head .eyebrow{ justify-content:center; }
.projects-head .section-title{ margin-bottom: 14px; }
.projects-intro{ color: var(--ink-muted); font-size: 1.05rem; line-height: 1.7; }

.projects-rows{
  display:flex;
  flex-direction:column;
  gap: clamp(56px, 7vw, 88px);
}
.project-row{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.project-row--reverse .project-row-media{ order: 2; }
.project-row--reverse .project-row-body{ order: 1; }
.project-row-media{
  position: relative;
  display:block;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-dropdown);
}
.project-row-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .7s var(--ease);
}
.project-row:hover .project-row-media img{ transform: scale(1.05); }
.project-row-maquette{
  position:absolute; left:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px;
  font: inherit; font-size:.86rem; font-weight:600;
  color:#fff; cursor:pointer;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  backdrop-filter: blur(4px);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.project-row-maquette:hover{
  background: rgba(0,0,0,.75);
  transform: translateY(-2px);
}
.project-row-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap: 14px;
}
.project-row-eyebrow{
  font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent-text);
}
.project-row-name{
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight:700; letter-spacing:-.01em;
  color: var(--ink);
}
.project-row-desc{
  font-size:1rem; line-height:1.7;
  color: var(--ink-muted);
}
.project-row .btn{ margin-top: 6px; }

@media (max-width: 860px){
  .project-row{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .project-row--reverse .project-row-media{ order: 1; }
  .project-row--reverse .project-row-body{ order: 2; }
  .project-row-body{ align-items:flex-start; }
}


/* ==========================================================================
   Récap / chiffres clés
   ========================================================================== */
.recap-section{
  background: var(--bg-alt);
  color: var(--alt-ink);
  padding: clamp(70px, 9vw, 110px) 0;
  transition: background-color .35s var(--ease);
}
.recap-head{ max-width: 720px; margin: 0 auto clamp(40px, 5vw, 56px); text-align:center; }
.recap-head .eyebrow{ justify-content:center; }
.recap-head .section-title{ margin-bottom: 0; }
.recap-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.recap-stat{
  position: relative;
  padding: 28px 8px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.recap-stat::after{
  content: "";
  position: absolute; left: 50%; top: -2px;
  width: 40px; height: 3px;
  transform: translateX(-50%);
  background: var(--accent-fill);
  border-radius: 3px;
}
.recap-num{
  display: block;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 12px;
}
.recap-num i{
  font-style: normal;
  font-size: .5em;
  font-weight: 600;
  color: var(--accent-text);
}
.recap-label{
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 900px){
  .recap-stats{ grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}
@media (max-width: 480px){
  .recap-stats{ grid-template-columns: 1fr 1fr; gap: 20px 14px; }
}


/* ==========================================================================
   Contact — page simple : texte + formulaire
   ========================================================================== */
.contact-simple{ padding: 150px 0 110px; background: var(--bg); transition: background-color .35s var(--ease); }
.contact-simple-inner{
  max-width: 680px; margin-inline:auto;
}
.contact-head{ text-align:center; margin-bottom: 44px; }
.contact-head .eyebrow{ justify-content:center; }
.contact-lead{
  margin-top: 18px;
  font-size: 1rem; line-height:1.7;
  color: var(--ink-muted);
}
.contact-lead a{ color: var(--accent-text); font-weight:600; }
.contact-simple .contact-form{
  background: var(--bg-elevated);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
}
/* Carte / localisation du projet */
.contact-map{
  margin-top: 48px;
  text-align: center;
}
.contact-map-title{
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 700; letter-spacing:-.01em;
  color: var(--ink);
}
.contact-map-desc{
  margin: 8px 0 20px;
  font-size: .98rem; line-height:1.6;
  color: var(--ink-muted);
}
.contact-map-frame{
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-dropdown);
}
.contact-map-frame iframe{
  display:block;
  width:100%; height:420px;
  border:0;
}
@media (max-width: 760px){
  .contact-map-frame iframe{ height: 320px; }
}
@media (max-width: 760px){
  .contact-simple{ padding: 120px 0 80px; }
}

/* ==========================================================================
   References / trust wall
   ========================================================================== */
.trust{ padding: 100px 0 72px; background: var(--bg); overflow:hidden; transition: background-color .35s var(--ease); }
.trust-heading{
  max-width: 620px; margin: 0 auto;
  text-align:center;
  font-size: 1.4rem; font-weight:600; line-height:1.4;
  color: var(--ink);
}

/* Logo marquee — two rows, opposite directions, edges fade via mask */
.trust-marquee{
  margin-top: 52px;
  display:flex; flex-direction:column; gap: 26px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.trust-row{ display:flex; overflow:hidden; width:100%; }
.trust-track{
  display:flex; align-items:center; flex-shrink:0;
  gap: 56px;
  padding-right: 56px;
  animation: trust-scroll 34s linear infinite;
  will-change: transform;
}
.trust-row-a .trust-track{ animation-name: trust-scroll; }
.trust-row-b .trust-track{ animation-name: trust-scroll; animation-direction: reverse; animation-duration: 40s; }
.trust-row:hover .trust-track{ animation-play-state: paused; }

@keyframes trust-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

.trust-logo{
  flex-shrink:0;
  font-size: 1.15rem; font-weight:700; letter-spacing:-.01em;
  white-space: nowrap;
  color: var(--ink-muted);
  opacity: .8;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.trust-row:hover .trust-logo{ opacity:.55; }
.trust-row .trust-logo:hover{ color: var(--ink); opacity:1; }

@media (prefers-reduced-motion: reduce){
  .trust-track{ animation: none; }
}

/* Divider + stats */
.trust-divider{ height:1px; background: var(--border); margin-top: 64px; }
.trust-stats{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 56px;
  text-align:center;
}
.trust-stat-num{
  display:block;
  font-size: 2.75rem; font-weight:700; letter-spacing:-.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.trust-stat-label{
  display:block; margin-top: 10px;
  font-size: .92rem; color: var(--ink-muted);
}

/* ==========================================================================
   About page — hero + presentation
   ========================================================================== */
.about-hero{
  position:relative; padding: 170px 0 72px; overflow:hidden;
  background: var(--bg);
  transition: background-color .35s var(--ease);
}
.about-hero-inner{ position:relative; z-index:1; max-width: 800px; }
.about-hero .hero-title{ font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-bottom: 20px; }
.about-hero-desc{
  font-size:1.08rem; line-height:1.6; color: var(--ink-muted); max-width: 620px;
}

.about-intro{ padding: 60px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); }
.about-intro-grid{
  display:grid; grid-template-columns: 1.3fr .7fr; gap: 90px; align-items:start;
}
.about-intro-text p{
  font-size:1.02rem; line-height:1.75; color: var(--ink-muted); margin-bottom: 20px;
}
.about-intro-text p strong{ color: var(--ink); font-weight:600; }
.about-intro-text .btn{ margin-top: 14px; }

/* Facts panel — sticks alongside the narrative on wide screens */
.about-facts{
  position:sticky; top: 110px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.about-facts h3{
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  color: var(--ink-muted); margin-bottom: 22px;
}
.about-facts dl{ margin:0; }
.about-fact{ padding: 16px 0; border-top: 1px solid var(--border); }
.about-fact:first-of-type{ border-top:none; padding-top:0; }
.about-fact:last-of-type{ padding-bottom:0; }
.about-fact dt{ font-size:.82rem; color: var(--ink-muted); margin-bottom:6px; }
.about-fact dd{ margin:0; font-size:.98rem; font-weight:600; line-height:1.45; color: var(--ink); }

/* ==========================================================================
   Founders
   ========================================================================== */
.founders{ padding: 40px 0 90px; background: var(--bg); transition: background-color .35s var(--ease); }
.founders-head{ max-width: 620px; }
.founders-desc{ font-size:1.02rem; line-height:1.65; color: var(--ink-muted); }
.founders-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px;
}
.founder-card{
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 40px;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.founder-card:hover{ transform: translateY(-4px); }
.founder-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius: var(--radius-sm);
  background: var(--surface-tint);
  color: var(--ink);
  font-weight:700; font-size:1rem; letter-spacing:.02em;
  margin-bottom: 26px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.founder-card h3{ font-size:1.2rem; font-weight:600; margin-bottom: 6px; }
.founder-role{ font-size:.88rem; color: var(--ink-muted); margin-bottom: 14px; }
.founder-bio{ font-size:.92rem; line-height:1.6; color: var(--ink-muted); margin-bottom: 22px; }
.founder-contact{ display:flex; flex-direction:column; gap:8px; }
.founder-contact a{
  font-size:.9rem; color: var(--ink);
  border-top:1px solid var(--border); padding-top:8px;
  transition: color .2s var(--ease);
}
.founder-contact a:first-child{ border-top:none; padding-top:0; }
.founder-contact a:hover{ color: var(--accent-text); }

/* ==========================================================================
   Gallery band — blurred black & white image with CTA
   ========================================================================== */
.gallery{ padding: 20px 0 72px; background: var(--bg-alt); transition: background-color .35s var(--ease); }
.gallery-card{
  position:relative; isolation:isolate; overflow:hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 460px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: clamp(32px, 6vw, 80px);
}
/* Blurred, desaturated backdrop — assets/Villa.jpg (case-sensitive filename;
   GitHub Pages serves on Linux). The brand gradient below shows through if the
   file is absent. The negative inset + scale hide the blur's soft edges. */
.gallery-media{
  position:absolute; inset:-8%; z-index:0;
  background-image: url('../assets/Villa.jpg'),
                    linear-gradient(135deg, var(--c-charcoal), var(--c-slate));
  background-size: cover, cover;
  background-position: center, center;
  filter: grayscale(1) contrast(1.05) blur(7px);
  transform: scale(1.05);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.gallery-card:hover .gallery-media{ transform: scale(1.1); filter: grayscale(1) contrast(1.05) blur(5px); }
/* Symmetric dark scrim so the centered copy stays readable, in both themes */
.gallery-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(9,9,11,.62) 0%, rgba(9,9,11,.74) 100%),
    radial-gradient(ellipse 75% 90% at 50% 50%, rgba(9,9,11,.2), transparent 78%);
}
/* Content sits on the dark image — force a light-on-dark palette regardless
   of theme (this band deliberately keeps one look). */
.gallery-content{ position:relative; z-index:2; max-width: 620px; margin-inline:auto; color:#fff; }
.gallery-content .eyebrow{ justify-content:center; color: rgba(255,255,255,.7); }
.gallery-content .eyebrow-rule{ background: rgba(255,255,255,.55); }
.gallery-content .section-title{ color:#fff; }
.gallery-content .accent{ color: rgba(255,255,255,.6); }
.gallery-desc{
  font-size:1.05rem; line-height:1.6; color: rgba(255,255,255,.82);
  margin: 0 auto 34px; max-width: 500px;
}
.gallery-cta{ background:#fff; color:#111; }
.gallery-cta:hover{ background: var(--c-light); }

@media (prefers-reduced-motion: reduce){
  .gallery-media{ transition:none; }
  .gallery-card:hover .gallery-media{ transform: scale(1.05); }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  position:relative; padding: 150px 0 72px; text-align:center; overflow:hidden;
  background: var(--bg);
  transition: background-color .35s var(--ease);
}
.cta-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;display:none }
.cta-bg svg{ display:block; width:100%; height:100%; }

/* Smooth hand-off from the previous section (founders, plain var(--bg))
   into the animated bands — taller and eased with a two-step gradient */
.cta-fade-top{
  position:absolute; left:0; right:0; top:0;
  height: 320px;
  z-index:0; pointer-events:none;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 8%, transparent 100%);
}

/* Band colors per theme (gradient stops live in the shared sprite SVG,
   referenced by both the hero and CTA band layers) */
.cta-bg .cta-bg-base{ fill:#0d0d0f; }
.cta-stop-edge{ stop-color:#0b0b0d; }
.cta-stop-mid{ stop-color:#17171a; }
:root[data-theme="light"] .cta-bg .cta-bg-base{ fill:#f0f0f2; }
:root[data-theme="light"] .cta-stop-edge{ stop-color:#f5f5f6; }
:root[data-theme="light"] .cta-stop-mid{ stop-color:#d6d6da; }
.cta-inner{ position:relative; z-index:1; max-width: 680px; margin-inline:auto; }
.cta .eyebrow{ justify-content:center; }
.cta-desc{
  font-size:1.05rem; color: var(--ink-muted); line-height:1.6;
  margin: 22px auto 40px; max-width: 520px;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-page{
  position:relative; padding: 170px 0 72px; overflow:hidden;
  background: var(--bg);
  transition: background-color .35s var(--ease);
}
.contact-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1fr 1.2fr; gap: 90px;
  align-items:start;
}
.contact-desc{
  font-size:1.05rem; color: var(--ink-muted); line-height:1.6;
  margin: 22px 0 36px; max-width: 420px;
}
.contact-details{ display:flex; flex-direction:column; gap:12px; }

.contact-form{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display:flex; flex-direction:column; gap:22px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{
  font-size:.85rem; font-weight:500; color: var(--ink-muted);
}
.form-field input,
.form-field select,
.form-field textarea{
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color .2s var(--ease), background-color .3s var(--ease);
}
.form-field textarea{ resize: vertical; min-height: 140px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color: var(--accent-fill);
}
.form-submit{ align-self:flex-start; }
.form-submit:disabled{ opacity:.6; pointer-events:none; }
.form-status{ font-size:.9rem; color: var(--ink-muted); min-height:1.2em; margin:0; }
.form-status.is-success{ color: var(--ink); }
.form-status.is-error{ color: var(--ink); }

/* Direct founder contacts on the contact page */
.contact-founders{
  display:grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 30px;
}
.contact-founder{
  display:flex; flex-direction:column; gap:6px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
}
.contact-founder-name{ font-weight:600; font-size:.95rem; margin-bottom:2px; }
.contact-founder a{ font-size:.88rem; color: var(--ink-muted); transition: color .2s var(--ease); }
.contact-founder a:hover{ color: var(--accent-text); }

/* ==========================================================================
   Services hub page
   ========================================================================== */
.services-hero{
  position:relative; padding: 170px 0 72px; overflow:hidden;
  background: var(--bg);
  transition: background-color .35s var(--ease);
}
.services-hero-inner{ position:relative; z-index:1; max-width: 760px; }
.services-hero .hero-title{ font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-bottom: 20px; }
.services-hero-desc{
  font-size:1.08rem; line-height:1.6; color: var(--ink-muted); max-width: 620px;
}

.services-list{ padding: 60px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); }
.service-block{
  padding: 46px 0;
  border-top: 1px solid var(--border);
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  column-gap: 56px;
  row-gap: 26px;
  grid-template-areas:
    "head prestations"
    "text prestations";
  align-items: start;
}
.service-block:first-child{ border-top: none; }
.service-head{ grid-area: head; display:flex; align-items:center; gap:16px; }
.service-num{
  font-size:.9rem; font-weight:700; color: var(--accent-text);
  letter-spacing:.04em; flex-shrink:0;
}
.service-head h2{
  font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight:600; line-height:1.25;
}
.service-body{ display:contents; }
.service-text{ grid-area: text; }
.service-text p{
  font-size:.98rem; line-height:1.68; color: var(--ink-muted); margin-bottom: 16px;
}
.service-text .btn{ margin-top: 10px; }
.service-prestations{
  grid-area: prestations;
  align-self: stretch;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.service-prestations h3{
  font-size:.74rem; font-weight:600; letter-spacing:.05em;
  color: var(--accent-text); margin-bottom: 16px;
}
.service-prestations ul{ display:flex; flex-direction:column; gap:12px; }
.service-prestations li{
  position:relative; padding-left:20px; font-size:.92rem; line-height:1.45; color: var(--ink);
}
.service-prestations li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%; background: var(--accent-text);
}

/* Opportunités à saisir */
.opportunities{ padding: 80px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); }
.opportunities-intro{
  font-size:1.02rem; line-height:1.6; color: var(--ink-muted); max-width: 620px; margin-top: 18px;
}
.opportunities-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top: 48px;
}
.opp-card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.opp-card:hover{ background: var(--bg-elevated); border-color: var(--surface-tint-strong); }
.opp-card h3{ font-size:1rem; font-weight:600; margin-bottom:10px; }
.opp-card p{ font-size:.9rem; line-height:1.6; color: var(--ink-muted); }


/* ==========================================================================
   Galerie / réalisations (galerie.html)

   Layout follows the modular-mosaic portfolio format: a fixed sidebar
   carrying the page title and the category list, and a gutterless grid
   built on a square base module, with tiles spanning 2 columns and/or
   2–3 rows. Hovering a tile dims every other tile and surfaces the
   project name in a fixed readout at the bottom left — the tiles
   themselves stay caption-free.

   The mosaic is CSS Grid with `grid-auto-flow: dense` rather than a
   masonry library: same packing, no dependency, and it re-packs itself
   when a category filter removes tiles.
   ========================================================================== */
 .works-page{
  padding: 150px 0 90px;
  background: var(--bg);
  transition: background-color .35s var(--ease);
}

/* ---- Nouvelle mise en page simple : en-tête + pills + blocs projet ---- */
.works-head{ max-width: 640px; }
.works-lead{
  margin-top: 16px;
  font-size: 1rem; line-height:1.65;
  color: var(--ink-muted);
}
.works-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 34px;
}
.works-filters .projets-nav-btn{
  padding: 10px 18px;
  font-size:.86rem; font-weight:500;
  color: var(--ink-muted);
  background: transparent;
  border:1px solid var(--border);
  border-radius: 999px;
  cursor:pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.works-filters .projets-nav-btn:hover{ color: var(--ink); border-color: var(--c-tertiary); }
.works-filters .projets-nav-btn.is-active{
  color:#fff;
  background: var(--accent-fill);
  border-color: var(--accent-fill);
}

.works-list{
  display:flex; flex-direction:column; gap: clamp(64px, 8vw, 96px);
  margin-top: clamp(44px, 6vw, 72px);
}
/* ---- Page détail : simplifiée ---- */
.project-single{ padding-top: 130px; }
.project-nav-row .project-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.88rem; font-weight:500;
  color: var(--ink-muted);
  margin-bottom: 24px;
  transition: color .2s var(--ease);
}
.project-nav-row .project-back:hover{ color: var(--accent-text); }

/* Cover plein écran, alignée sur le contenu (.project-content) */
.project-cover{
  position:relative; display:block;
  max-width:760px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  padding-inline: 24px;
  overflow:hidden;
}
.project-cover img{
  width:100%; aspect-ratio:16/7; object-fit:cover;
  border-radius: var(--radius-lg);
  transition: transform .6s var(--ease), border-radius .6s var(--ease);
}
.project-cover:hover img{ transform:scale(1.03); }

/* Contenu centré */
.project-content{ max-width:760px; }
.project-header{ margin-bottom:24px; }
.project-title{
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight:700; letter-spacing:-.01em;
  color: var(--ink);
}
.project-tagline{
  font-size:1rem; font-weight:500;
  color: var(--accent-text);
  margin-top:6px;
}
.project-intro{
  font-size:1rem; line-height:1.7;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

/* Chips */
.project-chips{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom: 36px;
}
.project-chips li{
  padding: 9px 16px;
  font-size:.84rem;
  color: var(--ink-muted);
  background: var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:999px;
}
.project-chips li strong{
  color: var(--accent-text);
  font-weight:600;
  margin-right:7px;
}

/* Galerie */
.project-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
  margin-top: 0;
  margin-bottom: 1em;
}
.project-gallery--videos{
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

/* Pager */
.project-pager{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
  margin-top: clamp(56px, 7vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.project-pager-link{
  display:flex; flex-direction:column; gap:4px;
  padding: 20px 24px;
  background: var(--bg-elevated);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.project-pager-link:hover{ border-color: var(--c-tertiary); transform: translateY(-3px); }
.project-pager-link--next{ text-align:right; }
.project-pager-dir{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-muted);
}
.project-pager-name{
  font-size:1rem; font-weight:700;
  color: var(--accent-text);
}
@media (max-width: 640px){
  .project-pager{ grid-template-columns: 1fr; }
  .project-pager-link--next{ text-align:left; }
}

/* 404 */
.error-404{
  padding: 170px 0 120px;
  background: var(--bg);
  min-height: 70vh;
  transition: background-color .35s var(--ease);
}
.error-404-inner{ text-align:center; max-width: 560px; }
.error-404-code{
  font-size: clamp(5rem, 14vw, 8rem);
  font-weight:800; letter-spacing:-.03em; line-height:1;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent-text);
  margin-bottom: 18px;
}
.error-404-text{
  color: var(--ink-muted);
  line-height:1.7;
  margin-bottom: 32px;
}

/* ---- Page liste : grille de cartes projets ---- */
.projects-grid{
  display:grid;
  /* grid-template-columns: repeat(2, 1fr); */
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(44px, 6vw, 64px);
}
/* md */
@media (min-width: 768px) {
  .projects-grid{
   grid-template-columns: repeat(3, 1fr);
  }
}

/* lg */
@media (min-width: 1024px) {
   .projects-grid{
   grid-template-columns: repeat(3, 1fr); 
  }
}

/* xl */
@media (min-width: 1280px) {
}

/* 2xl */
@media (min-width: 1536px) {
}

.project-card{
  display:flex; flex-direction:column;
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--bg-elevated);
  border:1px solid var(--border);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Le hidden de filtrage doit l'emporter sur display:flex */
.project-card[hidden]{ display:none; }
.project-card:hover{
  transform: translateY(-6px);
  border-color: var(--c-tertiary);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.45),
    0 14px 30px -16px rgba(0,0,0,.4);
}
:root[data-theme="light"] .project-card:hover{
  box-shadow: 0 30px 60px -24px rgba(28,28,28,.22);
}
.project-card-media{
  position:relative; display:block;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background: var(--bg-alt);
}
.project-card-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease);
}
.project-card:hover .project-card-media img{ transform: scale(1.04); }
.project-badge{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center;
  padding: 6px 12px;
  font-size:.72rem; font-weight:600;
  letter-spacing:.06em;
  color:#fff;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  backdrop-filter: blur(4px);
  z-index:1;
}
.project-cover-count{
  position:absolute; bottom:12px; right:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 12px;
  font-size:.74rem; font-weight:500;
  color:#fff;
  background: rgba(0,0,0,.5);
  border-radius:999px;
  backdrop-filter: blur(4px);
  z-index:1;
}
/* Filtres projets */
.projets-filter{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 30px;
}
.project-card-body{
  display:flex; flex-direction:column; gap:8px;
  padding: 22px 24px 24px;
}
.project-card-name{
  font-size:1.25rem; font-weight:700; letter-spacing:-.01em;
  color: var(--ink);
}
.project-card-tagline{
  font-size:.92rem; line-height:1.5;
  color: var(--ink-muted);
}
.project-card-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px;
  font-size:.86rem; font-weight:600;
  color: var(--accent-text);
}
.project-card:hover .project-card-cta svg{ transform: translateX(4px); }
.project-card-cta svg{ transition: transform .25s var(--ease); }

/* ---- Sidebar: title + categories ----
   Sticky rather than fixed, so it rides alongside the mosaic but stops
   at the end of the section instead of floating over the footer. */
.works-sidebar{
  position: sticky;
  top: 110px;
  width: 12.5vw;
  flex-shrink: 0;
  z-index: 5;
}
.works-title{
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.1;
  margin: 0 0 6.25vw;
}
.works-cats ul{ display:block; }
.works-cat{
  display:block;
  position:relative;
  border-bottom: 1px solid var(--border);
  margin: 0 0 20px;
  transition: border-color .3s var(--ease);
}
.works-cat button{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  width:100%;
  padding: 5px 0;
  background:none; border:none;
  text-align:left;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.45;
  color: var(--ink-muted);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.works-cat button:hover{ color: var(--ink); }
.works-cat.is-active{ border-color: var(--ink); }
.works-cat.is-active button{ color: var(--ink); }
/* Zero-padded tally (024, 006) — recomputed from the markup by main.js */
.works-count{
  flex-shrink:0;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
/* Compact control that replaces the list once the sidebar unpins */
.works-select{ display:none; }
.works-select select{
  font: inherit; font-size:.85rem;
  color: var(--ink);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  width: 100%;
}

/* ---- Mosaic ----
   6 columns over the track the sidebar leaves free — 100vw less the page
   padding (2 × 6.25vw), the sidebar (12.5vw) and the flex gap (6.25vw),
   i.e. 68.75vw — separated by --mosaic-gap. grid-auto-rows subtracts the
   gaps so a row is exactly as tall as a column is wide: every module is a
   square (1×1 or 2×2). */
.works-mosaic{
  --mosaic-gap: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: calc((68.75vw - 5 * var(--mosaic-gap)) / 6);
  grid-auto-flow: dense;
  gap: var(--mosaic-gap);
  flex: 1;
  min-width: 0;
}
.tile{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  grid-column: span 1;
  grid-row: span 1;
}
.tile--w2{ grid-column: span 2; }
.tile--h2{ grid-row: span 2; }
.tile[hidden]{ display:none; }

/* Placeholder surface: theme-aware gradient + fine trame + logomark
   watermark. Set --img on .tile-media to drop a real photograph in;
   it covers the placeholder completely. */
.tile-media{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px),
    linear-gradient(150deg, var(--bg-elevated), var(--bg-elevated-hover));
  background-size: auto, auto, cover;
  transition: opacity .3s var(--ease), transform .6s var(--ease);
}
.tile:nth-child(3n+2) .tile-media{
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px),
    linear-gradient(28deg, var(--bg-elevated-hover), var(--bg-elevated));
}
.tile:nth-child(3n+3) .tile-media{
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px),
    linear-gradient(205deg, var(--bg-elevated), var(--bg-elevated-hover));
}
/* Photograph layer — paints over the watermark once --img is set */
.tile-media::after{
  content:""; position:absolute; inset:0;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  z-index:1;
}
.tile-mark{
  width: 30%; max-width: 72px; height:auto;
  color: var(--ink);
  opacity: .07;
}
/* Real photo overrides the placeholder gradient */
.tile-media--photo{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Section titles inside the mosaic (Images / Vidéos) */
.mosaic-section{
  grid-column: 1 / -1;
  padding: 24px 0 8px;
}
.mosaic-section:first-child{ padding-top: 0; }
.mosaic-section-title{
  font-size: 1.1rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

/* Video tiles — show actual video, not SVG */
.tile-media--video-wrap{
  background: var(--c-black) !important;
  display:flex; align-items:center; justify-content:center;
}
.tile-media--video-wrap video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.tile-play{
  position:relative; z-index:2;
  width:56px; height:56px; color: var(--c-white);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  opacity:.85; transition: opacity .25s var(--ease), transform .25s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.tile:hover .tile-play{ opacity:1; transform: scale(1.1); }
/* Hairline separating adjacent modules. The reference has none — its
   tiles are photographs — but flat placeholders need the edge to read. */
.tile::before{
  content:""; position:absolute; inset:0; z-index:2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border);
  pointer-events:none;
}

/* Hover: the pointed-at tile lifts, everything else recedes */
.works-mosaic.is-hovered .tile-media{ opacity: .2; }
.tile:hover .tile-media,
.tile:focus-visible .tile-media{ opacity: 1; transform: scale(1.03); }

/* Wipe-in "open" badge at the centre of the hovered tile */
.tile::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:50px; height:50px; z-index:3;
  background-color: var(--accent-fill);
  background-image: linear-gradient(var(--accent-on-fill), var(--accent-on-fill)),
                    linear-gradient(var(--accent-on-fill), var(--accent-on-fill));
  background-size: 14px 1px, 1px 14px;
  background-position: center, center;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path .35s var(--ease);
}
.tile:hover::after,
.tile:focus-visible::after{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ---- Readout: year + name of the hovered project ----
   Lives at the foot of the sidebar column rather than pinned to the
   viewport, so it stays inside its column and can never ride over the
   footer. Nothing sits below it, so fading it in shifts no other
   content — only opacity animates. */
.works-readout{
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.works-readout.is-visible{ opacity: 1; }
.works-readout-year{
  display:flex; align-items:center; gap:15px;
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.works-readout-year::before{
  content:""; display:block;
  width:0; height:0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.works-readout-title{
  font-size: .78rem; font-weight: 300; letter-spacing: .03em;
  color: var(--ink);
}

/* ---- Detail overlay (stands in for per-project pages) ---- */
.works-lightbox{
  position:fixed; inset:0; z-index:200;
  display:none;
  align-items:center; justify-content:center;
  padding: 48px;
  background: rgba(9,9,11,.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.works-lightbox.is-open{ display:flex; }
/* Full-screen dialog: media stage on the left 60%, description + CTA on
   the right 40%. Fills the viewport inside the overlay's 12px inset. */
.lightbox-dialog{
  position:relative;
  display:grid; grid-template-columns: 60% 40%;
  width: 100%;
  height: 100%;
  max-height: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow:hidden;
}
.lightbox-frame{
  position:relative;
  min-height: 0;
  overflow:hidden;
  background: var(--bg-elevated);
}

/* ---- Carousel (the "images" work type) ---------------------------------
   A horizontal track of full-bleed slides translated by whole widths.
   Arrows sit over the media as translucent chips; a pill counter and a
   morphing dot row anchor to the corners. Controls collapse when a
   project has a single slide (.is-single). */
.carousel{ position:absolute; inset:0; }
.carousel-track{
  display:flex; height:100%;
  transition: transform .5s var(--ease);
  will-change: transform;
  touch-action: pan-y;
}
.carousel.is-dragging .carousel-track,
.carousel.no-anim .carousel-track{ transition:none; }

.cslide{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; }
/* Per-slide surface: brand placeholder (trame + gradient + logomark and a
   faint slide number), overpainted by the real photo when --img is set. */
.cslide-media{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px),
    linear-gradient(150deg, var(--bg-elevated), var(--bg-elevated-hover));
}
.cslide:nth-child(3n+2) .cslide-media{
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px),
    linear-gradient(28deg, var(--bg-elevated-hover), var(--bg-elevated));
}
.cslide:nth-child(3n+3) .cslide-media{
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px),
    linear-gradient(205deg, var(--bg-elevated), var(--bg-elevated-hover));
}
.cslide-media::after{
  content:""; position:absolute; inset:0; z-index:2;
  background-image: var(--img, none);
  background-size: cover; background-position:center;
}
.cslide-num{
  position:absolute; left:18px; top:14px;
  font-size:2.4rem; font-weight:700; letter-spacing:.04em;
  color: var(--ink); opacity:.10;
  font-variant-numeric: tabular-nums;
}
.cslide .tile-mark{ width:24%; max-width:92px; opacity:.09; }

/* Arrows — dark translucent chips, image-agnostic in either theme */
.carousel-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(9,9,11,.5);
  color:#fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity:0;
  transition: opacity .3s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.carousel-prev{ left:16px; }
.carousel-next{ right:16px; }
.carousel:hover .carousel-arrow,
.carousel:focus-within .carousel-arrow{ opacity:1; }
.carousel-arrow:hover{ background: rgba(9,9,11,.72); }
.carousel-prev:hover{ transform: translateY(-50%) scale(1.08) translateX(-2px); }
.carousel-next:hover{ transform: translateY(-50%) scale(1.08) translateX(2px); }

/* Position counter — pill, top-right of the media column (the close chip
   sits over the info column, so they never meet) */
.carousel-count{
  position:absolute; top:16px; right:16px; z-index:4;
  font-size:.7rem; font-weight:600; letter-spacing:.12em;
  font-variant-numeric: tabular-nums;
  color:#fff; background: rgba(9,9,11,.5);
  padding:5px 11px; border-radius:999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* Dot row — active dot stretches into a bar */
.carousel-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:4;
  display:flex; gap:7px; justify-content:center; align-items:center;
}
.carousel-dot{
  width:7px; height:7px; border-radius:999px; padding:0;
  border:none; background: rgba(255,255,255,.45);
  transition: width .3s var(--ease), background-color .3s var(--ease);
}
.carousel-dot:hover{ background: rgba(255,255,255,.7); }
.carousel-dot.is-active{ width:22px; background:#fff; }

/* Single-slide projects (maquette / before-after fallback): no controls */
.carousel.is-single .carousel-arrow,
.carousel.is-single .carousel-count,
.carousel.is-single .carousel-dots{ display:none; }

@media (prefers-reduced-motion: reduce){
  .carousel-track{ transition:none; }
}
.lightbox-info{
  padding: clamp(32px, 4vw, 64px);
  display:flex; flex-direction:column; gap:14px;
  overflow-y:auto;
}
.lightbox-cat{
  font-size:.68rem; font-weight:600; letter-spacing:.06em;
  color: var(--ink-muted);
}
.lightbox-title{
  font-size:1.35rem; font-weight:300; letter-spacing:.01em;
  line-height:1.3;
  /* keeps a long title from running under the close button */
  padding-right: 42px;
}
.lightbox-desc{ font-size:.95rem; line-height:1.7; color: var(--ink-muted); margin-top:6px; }
.lightbox-actions{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top: 24px; }
/* Floats over the media, so it keeps one look in both themes:
   white glyph on a dark chip, inset from the dialog corner. */
.lightbox-close{
  position:absolute; top:12px; right:12px; z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:none;
  border-radius: 5px;
  background: rgba(9,9,11,.72);
  color: #fff;
  transition: background-color .2s var(--ease);
}
.lightbox-close:hover{ background: rgba(9,9,11,.92); }

@media (prefers-reduced-motion: reduce){
  .tile-media{ transition: opacity .3s; }
  .tile:hover .tile-media{ transform:none; }
  .tile::after{ transition:none; }
}

/* ---- Mosaic responsive ----
   The sidebar unpins and the module count drops; wide/tall spans are
   progressively flattened so a tile never dominates a narrow screen. */
@media (max-width: 1400px){
  .works-page{ gap: 5vw; padding-left: 5vw; padding-right: 5vw; }
  .works-sidebar{ width: 16vw; }
  .works-mosaic{
    /* 100vw − 2×5vw padding − 16vw sidebar − 5vw flex gap = 69vw */
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: calc((69vw - 4 * var(--mosaic-gap)) / 5);
  }
}

@media (max-width: 1080px){
  .works-page{
    display: block;
    padding: 120px 24px 56px;
  }
  .works-sidebar{
    position: static;
    width: 100%;
    max-width: var(--container-w);
    margin-inline: auto;
  }
  .works-title{ font-size:1.6rem; margin-bottom: 26px; }
  .works-cats{ display:none; }
  .works-select{ display:block; max-width: 320px; }
  /* Sidebar is no longer a column here, and hover has no meaning on touch */
  .works-readout{ display:none; }
  .works-mosaic{
    width: 100%;
    margin-left: 0;
    margin-top: 40px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc((100vw - 48px - 3 * var(--mosaic-gap)) / 4);
  }
}

@media (max-width: 760px){
  .works-page{ padding-top: 100px; }
  .works-mosaic{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: calc((100vw - 48px - var(--mosaic-gap)) / 2);
  }
  /* Two columns only — every tile flattens to the same square module */
  .tile--w2{ grid-column: span 1; }
  .tile--h2{ grid-row: span 1; }
  .tile::after{ width:40px; height:40px; }
  /* 48px a side would eat a phone screen */
  .works-lightbox{ padding: 16px; }
  /* Too narrow for two columns — the media stage moves back on top and
     the info panel takes the rest of the screen height */
  .lightbox-dialog{
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .lightbox-frame{ aspect-ratio: 4 / 3; min-height:0; }
  .lightbox-info{ padding: 28px 24px 30px; }
  /* Stacked again, so the close chip lands on the media — shift the
     image counter clear of it */
  .carousel-count{ right: 60px; }
  .carousel-arrow{ width:38px; height:38px; }
  .carousel-prev{ left:10px; }
  .carousel-next{ right:10px; }
}

/* No hover to reveal the arrows on touch devices — keep them visible */
@media (hover: none){
  .carousel-arrow{ opacity:1; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--bg-footer); padding-top: 90px; transition: background-color .35s var(--ease); }
.footer-grid{
  display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 60px;
  padding-bottom: 70px;
}
.footer-brand p{
  font-size:.92rem; color: var(--ink-muted); line-height:1.6;
  margin: 20px 0 26px; max-width: 320px;
}
.footer-social{ display:flex; gap:10px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--ink-muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.icon-btn:hover{ color: var(--ink); border-color: var(--ink); }

.footer-col h4{
  font-size:.78rem; font-weight:600; letter-spacing:.05em;
  color: var(--c-tertiary); margin-bottom: 22px;
}
.footer-col a{
  display:block; font-size:.92rem; color: var(--ink-muted);
  padding: 8px 0; transition: color .2s var(--ease);
}
.footer-col a:hover{ color: var(--ink); }
.footer-contact-line{
  display:flex; align-items:center; gap:10px; font-size:.92rem;
  color: var(--ink-muted); padding: 8px 0;
}
.footer-contact-line svg{ flex-shrink:0; color: var(--ink); }
.footer-contact-line a:hover{ color: var(--ink); }
.footer-wa-btn{
  
}
:root[data-theme="light"] .site-footer .footer-wa-btn img{
  filter: invert(1);
}

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding: 26px 0; border-top: 1px solid var(--border);
  font-size:.85rem; color: var(--ink-muted);
}
.footer-quote{ font-style: italic; }
.footer-line{
  display:block; width:32px; height:1px; background: var(--ink-muted); opacity:.35; margin: 14px 0;
}
.footer-brand-name{
  font-size: 1.5rem; font-weight: 700; letter-spacing:.08em; color: var(--c-white);
}
:root[data-theme="light"] .footer-brand-name{ color: var(--c-charcoal); }

/* ==========================================================================
   Projets page — new layout
   ========================================================================== */
.projets-page{
  display:grid; grid-template-columns: 1fr; gap: 48px;
  max-width: 1000px;
  padding: 150px 6.25vw 72px;
  background: var(--bg); transition: background-color .35s var(--ease);
  max-width: var(--container-w); margin: 0 auto;
}

#main .project-cover.reveal.is-visible{
    max-width: 760px;
    align-self: center;
    margin: 0 auto clamp(36px, 5vw, 56px);
}
.projets-sidebar{
  position: sticky; top: 110px; align-self: start;
}
.projets-sidebar-title{
  font-size: 1.6rem; font-weight: 300; letter-spacing: .04em;
  margin-bottom: 24px;
}
.projets-nav{ display:flex; flex-direction:column; gap: 0; }
.projets-nav-btn{
  font-family:inherit; font-size:.85rem; font-weight:500;
  color: var(--ink-muted); cursor:pointer;
  transition: color .2s var(--ease);
}
.projets-nav-btn:hover{ color: var(--ink); }
.projets-select{ display:none; max-width: 320px; margin-top: 12px; }

.projets-content{ min-width:0; }

/* Project block */
.projet-block{
  scroll-margin-top: 110px;
}
.projet-block:last-child{ border-bottom:none; margin-bottom:0; }
.projet-block[hidden]{ display:none; }

/* ---- Photothèques / Vidéothèques pages ---- */
.media-page{ padding: 150px 0 90px; background: var(--bg); transition: background-color .35s var(--ease); }
.media-page-desc{ color: var(--ink-muted); max-width: 560px; margin-top: 14px; }
.media-group{ margin-top: 64px; }
.media-group-title{
  font-size: 1.4rem; font-weight:700; letter-spacing:-.01em;
  margin-bottom: 22px; padding-left: 16px; border-left: 3px solid var(--accent-text);
}
.media-empty{ color: var(--ink-muted); margin-top: 48px; }

.projet-header{ margin-bottom: 32px; scroll-margin-top: 100px; }
.projet-name{
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600;
  letter-spacing: .02em; margin-bottom: 8px;
}
.projet-tagline{
  font-size: 1.05rem; color: var(--accent-text); font-weight: 500;
}

/* Description */
.projet-desc{
  max-width: 720px; margin-bottom: 36px;
}
.projet-desc p{
  font-size: .95rem; line-height: 1.7; color: var(--ink-muted);
  margin-bottom: 16px;
}
.projet-desc-title{
  font-size: 1.1rem; font-weight: 600; margin: 28px 0 12px;
  color: var(--ink);
}
.projet-features{
  list-style:none; padding:0; margin: 16px 0;
  display:flex; flex-direction:column; gap: 8px;
}
.projet-features li{
  position:relative; padding-left: 18px;
  font-size: .92rem; color: var(--ink);
}
.projet-features li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background: var(--accent-fill);
}
.projet-closing{
  font-size: 1rem; font-weight: 600; color: var(--ink);
  margin-top: 20px; font-style: italic;
}

/* Characteristics table */
.projet-chars{ margin-bottom: 36px; }
.projet-chars-title{
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text);
  margin-bottom: 14px;
}
.projet-table{
  width:100%; border-collapse:collapse;
  font-size: .88rem;
}
.projet-table tr{ border-bottom: 1px solid var(--border); }
.projet-table th{
  text-align:left; padding: 10px 16px 10px 0;
  font-weight: 500; color: var(--ink-muted); white-space:nowrap;
  width: 160px;
}
.projet-table td{
  padding: 10px 0; color: var(--ink);
}

/* Media sections */
.projet-media-section{ margin-bottom: 36px; }
.projet-media-title{
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 16px;
}
.projet-gallery{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.projet-img-wrap{
  display:block; overflow:hidden; border-radius: var(--radius-md);
  /* aspect-ratio: 4/3; */
}
.projet-img-wrap img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s var(--ease);
}
.projet-img-wrap:hover img{ transform: scale(1.03); }
.projet-gallery--videos{
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.projet-video-wrap{
  border-radius: var(--radius-md); overflow:hidden;
  background: var(--c-black);
}
.projet-video-wrap video{
  width:100%; display:block; aspect-ratio: 16/9; object-fit:cover;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .projets-page{ grid-template-columns: 1fr; gap: 32px; padding: 140px 24px 56px; }
  .projets-sidebar{ position:static; }
  .projets-nav{ flex-direction:row; flex-wrap:wrap; gap:0; }
  .projets-nav-btn{ border-bottom:none; border-right:1px solid var(--border); padding: 8px 14px; }
  .projets-nav-btn:last-child{ border-right:none; }
  .projets-nav-btn:hover,
  .projets-nav-btn.is-active{ padding-left:14px; }
  .projets-select{ display:block; }
  .projet-gallery{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .projet-gallery--videos,
  .project-gallery--videos{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 900px){
  .nav{ gap: 16px; }
  .nav-link{ font-size:.84rem; }
  .hero-inner{ 
    text-align: center;
    grid-template-columns: 1fr; gap: 44px; }
}

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */
.whatsapp-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(37,211,102,.45);
}
@media (max-width: 760px){
  .nav, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{ display:flex; }
  .header-inner{ height:68px; }
  .theme-toggle{ margin-left:auto; margin-right:8px; }
  .hero-inner{ padding-block: 90px; }
  .hero-scroll-cue{ display:none; }
  .hero-arrow{ width:38px; height:38px; }
  .hero-arrow--prev{ left:10px; }
  .hero-arrow--next{ right:10px; }
  .showcase{ padding-bottom: 70px; }
  .hero-actions{ flex-direction:column; align-items:center; }
  .hero-actions .btn{ width:100%; justify-content:center; max-width: 320px; }
  /* Typo mobile : plus compacte */
  .hero-title{ font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 600; letter-spacing: .02em;
     margin-bottom: 20px;
      color: var(--c-white);
    }
  .hero-desc{ font-size: .98rem; }
  .eyebrow{ font-size:.72rem; }
  .section-title{ font-size: 1.55rem; }
  .step-title{ font-size: 1.05rem; }
  .why-item h3{ font-size: 1.02rem; }
  .lifecycle, .expertise, .why, .trust, .founders{ padding-top: 70px; padding-bottom: 70px; }
  .expertise-grid{ grid-template-columns: 1fr; }
  .trust-heading{ font-size: 1.2rem; }
  .trust-stat-num{ font-size: 2.2rem; }
  .founders-grid{ grid-template-columns: 1fr; }
  .gallery{ padding-bottom: 70px; }
  .gallery-card{ min-height: 380px; padding: 32px 26px; }
  .gallery-overlay{
    background: linear-gradient(180deg, rgba(9,9,11,.5) 0%, rgba(9,9,11,.82) 100%);
  }
  .cta{ padding: 100px 0; }
  .contact-page{ padding: 130px 0 80px; }
  .contact-form{ padding: 28px; }
  .form-row{ grid-template-columns: 1fr; }
  .contact-founders{ grid-template-columns: 1fr; }
  .services-hero{ padding: 130px 0 20px; }
  .about-hero{ padding: 130px 0 20px; }
  .about-intro{ padding: 50px 0 60px; }
  .about-facts{ padding: 26px; }
  .opportunities-grid{ grid-template-columns: 1fr; }
  .service-head{ gap: 12px; }
  .footer-grid{ grid-template-columns: 1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  /* Detail projet mobile */
  .projets-page.project-single{ padding: 110px 20px 50px; }
  .project-cover img{ aspect-ratio: 4 / 3; }
  .project-content{ max-width:100%; }
  .project-chips{ gap:8px; }
  .project-chips li{ font-size:.78rem; padding: 7px 12px; }
  .project-pager{ grid-template-columns:1fr; }
  .project-pager-link--next{ text-align:left; }
}

/* WhatsApp mobile sizing */
@media (max-width: 480px){
  .whatsapp-float{
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
}