/* ==========================================================================
   AK-TIME — feuille de style principale
   Thème unique et assumé (voir CLAUDE.md du dossier plan) : pas de variante
   light/dark, l'instrument garde une seule apparence.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces Var';
  src: url('../fonts/fraunces-variable.woff2') format('woff2-variations'),
       url('../fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces Var';
  src: url('../fonts/fraunces-italic-500.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Var';
  src: url('../fonts/archivo-variable.woff2') format('woff2-variations'),
       url('../fonts/archivo-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono Var';
  src: url('../fonts/jbmono-variable.woff2') format('woff2-variations'),
       url('../fonts/jbmono-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Palette — mouvement d'horlogerie : encre, ivoire, un seul accent laiton */
  --ink:      #0d0d10;
  --ink-2:    #141419;
  --ink-3:    #1b1b21;
  --paper:    #f2ede4;
  --dim:      #8b8780;
  --line:     rgba(242,237,228,0.10);
  --accent:   #b8794a;
  --accent-2: #d99a68;

  --f-display: 'Fraunces Var', ui-serif, Georgia, serif;
  --f-body:    'Archivo Var', ui-sans-serif, system-ui, sans-serif;
  --f-mono:    'JetBrains Mono Var', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease-clockwork: cubic-bezier(.65,0,.35,1);
  --scene: 0; /* piloté par ScrollTrigger global : 0 → 1 sur toute la page */
}

*, *::before, *::after{ box-sizing:border-box; }
html{ background:var(--ink); }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, canvas, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:600; text-wrap:balance; }
p{ margin:0; }

.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}

.container{
  width:100%; max-width:1360px; margin:0 auto;
  padding-left:clamp(20px,5vw,72px); padding-right:clamp(20px,5vw,72px);
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.05em;
  color:var(--paper); background:transparent;
  border:1px solid var(--line); border-radius:100px;
  padding:16px 28px;
  position:relative; isolation:isolate;
  cursor:pointer;
}
.btn::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--accent); z-index:-1;
  transform:scale(0); transform-origin:center;
  transition:transform .45s var(--ease-clockwork);
}
.btn:hover::before{ transform:scale(1); }
.btn:hover{ color:var(--ink); border-color:var(--accent); }

/* Custom cursor */
.cursor{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  will-change:transform;
}
.cursor-ring{
  position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--accent); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); opacity:.6;
  will-change:transform,width,height,opacity;
}
@media (hover:none), (pointer:coarse){
  .cursor, .cursor-ring{ display:none; }
}
/* Curseurs figes evites : la souris entre dans un iframe (autre document),
   plus aucun mousemove ne remonte a la page parente tant qu'elle y reste. */
.lightbox-open .cursor,
.lightbox-open .cursor-ring,
.lightbox-open .gallery-cursor,
.contact-open .cursor,
.contact-open .cursor-ring{ display:none; }

.smooth-wrapper{ overflow:hidden; position:fixed; inset:0; }
.smooth-content{ overflow:visible; width:100%; }

/* ==========================================================================
   Navigation fixe
   ========================================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:8500;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:64px; padding:0 clamp(20px,4vw,48px);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s var(--ease-clockwork), border-color .4s var(--ease-clockwork),
             backdrop-filter .4s var(--ease-clockwork);
}
.site-nav.is-scrolled{
  background:rgba(13,13,16,.82); backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav-brand{ font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:.02em; }
.nav-links{ display:flex; gap:28px; }
.nav-links a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); padding:6px 0; position:relative; transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .3s var(--ease-clockwork);
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after{ right:0; }
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-lang{ display:flex; gap:2px; border:1px solid var(--line); border-radius:100px; padding:3px; }
.nav-lang button{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  color:var(--dim); background:transparent; border:none; border-radius:100px;
  padding:6px 10px; cursor:pointer;
  transition:color .3s, background .3s var(--ease-clockwork);
}
.nav-lang button:hover{ color:var(--paper); }
.nav-lang button.is-active{ background:var(--accent); color:var(--ink); }
.nav-cta{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  color:var(--paper); background:transparent; border:1px solid var(--line);
  border-radius:100px; padding:10px 18px; cursor:pointer;
  transition:background .3s var(--ease-clockwork), color .3s, border-color .3s;
}
.nav-cta:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
@media (max-width:860px){
  .nav-links{ display:none; }
}
@media (max-width:480px){
  /* tres petit ecran : la langue reste accessible, le CTA cede la place
     (les boutons de contact du contenu restent a un scroll) */
  .nav-cta{ display:none; }
}

section{ position:relative; }

/* progress line — fine, functional, reinforces the precision motif */
.progress-line{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:var(--accent); transform-origin:left center; transform:scaleX(0);
  z-index:9997;
}

/* ==========================================================================
   0 — Rideau d'ouverture
   ========================================================================== */
.curtain{
  position:fixed; inset:0; z-index:9000;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.curtain-word{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(32px, 7vw, 92px); color:var(--paper);
  letter-spacing:.02em;
}
.curtain-tick{
  position:absolute; top:50%; left:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
}

/* ==========================================================================
   1 — Hero
   ========================================================================== */
.hero{
  position:relative;
  height:100vh; min-height:640px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg .ring{
  position:absolute; border:1px solid var(--line); border-radius:50%;
  top:50%; left:78%;
}
.hero-bg .ring.r1{ width:60vw; height:60vw; margin:-30vw 0 0 -30vw; }
.hero-bg .ring.r2{ width:38vw; height:38vw; margin:-19vw 0 0 -19vw; border-color:rgba(184,121,74,.18); }
.hero-bg .halo{
  position:absolute; top:38%; left:82%; width:46vw; height:46vw; margin:-23vw 0 0 -23vw;
  background:radial-gradient(circle, rgba(184,121,74,.35), transparent 70%);
  filter:blur(10px);
}
.hero-content{ position:relative; z-index:1; }
.hero h1{
  font-size:clamp(40px, 7.4vw, 108px); line-height:.98; letter-spacing:-.01em;
  overflow:hidden;
}
.hero h1 .line{ overflow:hidden; }
.hero h1 .line-inner{ display:block; }
.hero .sub{
  margin-top:32px; max-width:46ch; color:var(--dim); font-size:17px; line-height:1.65;
}
.hero .actions{ margin-top:44px; display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.hero .actions .link-quiet{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--dim); border-bottom:1px solid var(--line); padding-bottom:2px; }
.hero-trust{
  margin-top:26px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--dim);
}

/* ==========================================================================
   2 — Manifeste
   ========================================================================== */
.manifesto{ min-height:100vh; display:flex; align-items:center; background:var(--ink-2); }
.manifesto .container{ max-width:1080px; }
.manifesto p{
  font-family:var(--f-display); font-weight:400; font-size:clamp(24px, 4vw, 46px);
  line-height:1.35;
}
.manifesto .word{ opacity:.15; filter:blur(2px); }
.manifesto .word.accent{ color:var(--accent); }

/* ==========================================================================
   3 — Services
   ========================================================================== */
.services{ padding:180px 0; }
.services .head{ margin-bottom:88px; max-width:56ch; }
.services .head h2{ font-size:clamp(30px,4.4vw,50px); margin-top:14px; }
.services-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
@media (max-width:860px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--ink); padding:52px 44px; position:relative; overflow:hidden;
  transition:background .4s var(--ease-clockwork);
}
.service-card:hover{ background:var(--ink-2); }
.service-card .num{ font-family:var(--f-mono); font-size:12px; color:var(--dim); }
.service-card h3{ font-size:clamp(22px,2.6vw,30px); margin-top:20px; }
.service-card p{ margin-top:16px; color:var(--dim); font-size:15px; line-height:1.6; max-width:36ch; }
/* Vignettes de services — petites scenes CSS qui montrent le metier au lieu
   d'un aplat decoratif : page qui defile, fiche produit, telephone, specimen
   typographique. Les micro-animations (scrollbar, pastille panier, notif)
   sont en CSS pur et neutralisees par la regle prefers-reduced-motion. */
.svc-visual{
  margin-top:32px; height:120px; border-radius:12px;
  border:1px solid var(--line); background:rgba(242,237,228,.025);
  position:relative; overflow:hidden; padding:14px 16px;
}
.svc-visual .sv-line{
  display:block; height:6px; border-radius:3px;
  background:rgba(242,237,228,.10); margin-top:10px;
}
/* 01 — site vitrine */
.svc-site .sv-dots{ display:flex; gap:5px; }
.svc-site .sv-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(242,237,228,.22); }
.svc-site .sv-block{
  position:absolute; right:26px; bottom:14px; width:56px; height:34px; border-radius:7px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.svc-site .sv-scrollbar{
  position:absolute; right:9px; top:12px; bottom:12px; width:3px;
  border-radius:2px; background:rgba(242,237,228,.08);
}
.svc-site .sv-scrollbar i{
  position:absolute; left:0; top:0; width:100%; height:26px; border-radius:2px;
  background:var(--accent); animation:svScroll 2.8s ease-in-out infinite;
}
@keyframes svScroll{
  0%, 12%{ transform:translateY(0); }
  55%, 70%{ transform:translateY(66px); }
  100%{ transform:translateY(0); }
}
/* 02 — e-commerce */
.svc-shop .sv-thumb{
  position:absolute; left:16px; top:16px; width:46px; height:46px; border-radius:9px;
  background:rgba(242,237,228,.08); overflow:hidden;
}
.svc-shop .sv-thumb::after{
  content:''; position:absolute; right:-8px; bottom:-8px; width:26px; height:26px;
  border-radius:50%; background:rgba(184,121,74,.5);
}
.svc-shop .sv-line:first-of-type{ margin-top:6px; }
.svc-shop .sv-price{
  position:absolute; right:16px; top:16px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  color:var(--accent-2); border:1px solid rgba(184,121,74,.55);
  padding:5px 11px; border-radius:100px;
}
.svc-shop .sv-cart{
  position:absolute; right:16px; bottom:14px; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:15px; line-height:1;
  animation:svPulse 2.6s ease-in-out infinite;
}
@keyframes svPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(184,121,74,.5); }
  50%{ box-shadow:0 0 0 8px rgba(184,121,74,0); }
}
/* 03 — applications */
.svc-app .sv-phone{
  position:absolute; left:16px; top:14px; width:56px; height:92px;
  border:1.5px solid rgba(242,237,228,.28); border-radius:12px;
}
.svc-app .sv-phone::before{
  content:''; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:16px; height:3px; border-radius:2px; background:rgba(242,237,228,.28);
}
.svc-app .sv-apps{
  position:absolute; inset:16px 8px 8px; display:grid;
  grid-template-columns:repeat(3,1fr); gap:5px;
}
.svc-app .sv-apps i{ border-radius:4px; background:rgba(242,237,228,.10); }
.svc-app .sv-apps i.accent{ background:var(--accent); }
.svc-app .sv-notif{
  position:absolute; top:-5px; right:-5px; width:11px; height:11px; border-radius:50%;
  background:var(--accent-2); animation:svPulse 2.2s ease-in-out infinite;
}
.svc-app .sv-line:first-of-type{ margin-top:14px; }
/* 04 — direction artistique */
.svc-art .sv-aa{
  position:absolute; left:18px; top:50%; transform:translateY(-52%);
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:52px; line-height:1; color:var(--paper);
}
.svc-art .sv-swatches{ position:absolute; right:16px; top:16px; display:flex; gap:7px; }
.svc-art .sv-swatches i{ width:14px; height:14px; border-radius:50%; }
.svc-art .sv-swatches i:nth-child(1){ background:var(--accent); }
.svc-art .sv-swatches i:nth-child(2){ background:var(--paper); }
.svc-art .sv-swatches i:nth-child(3){ background:var(--dim); }
.svc-art .sv-wave{
  position:absolute; right:16px; bottom:22px; width:96px; height:20px; overflow:hidden;
}
.svc-art .sv-wave::before{
  content:''; position:absolute; left:0; top:8px; width:200%; height:12px;
  background:radial-gradient(circle 6px at 6px 0, transparent 5px, var(--accent) 5.5px, var(--accent) 6.5px, transparent 7px);
  background-size:24px 12px; background-repeat:repeat-x;
  animation:svWave 3.2s linear infinite;
}
@keyframes svWave{ to{ transform:translateX(-24px); } }
.service-card .line{
  position:absolute; left:44px; bottom:0; height:2px; width:0; background:var(--accent);
  transition:width .5s var(--ease-clockwork);
}
.service-card:hover .line{ width:56px; }
.services-chips{
  margin-top:36px; display:flex; flex-wrap:wrap; gap:10px;
}
.services-chips span{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  color:var(--dim); border:1px solid var(--line); border-radius:100px;
  padding:8px 16px; transition:color .3s, border-color .3s;
}
.services-chips span:hover{ color:var(--paper); border-color:var(--accent); }

/* ==========================================================================
   La différence — points de douleur vs nos engagements
   ========================================================================== */
.difference{ padding:180px 0; }
.difference .head{ margin-bottom:88px; max-width:62ch; }
.difference .head h2{ font-size:clamp(30px,4.4vw,50px); margin-top:14px; }
.diff-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
@media (max-width:860px){ .diff-grid{ grid-template-columns:1fr; } }
.diff-item{ background:var(--ink-2); padding:44px 40px; }
.diff-pain{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(19px,2.2vw,24px); color:var(--dim); line-height:1.4;
}
.diff-fix{
  margin-top:20px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--paper); font-size:15px; line-height:1.65; max-width:46ch;
  position:relative; padding-left:26px;
}
.diff-fix::before{
  content:'—'; position:absolute; left:0; color:var(--accent);
}

/* ==========================================================================
   À propos
   ========================================================================== */
.about{ padding:180px 0; }
.about-inner{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(40px,6vw,96px); }
@media (max-width:860px){ .about-inner{ grid-template-columns:1fr; } }
.about-head h2{ font-size:clamp(30px,4.4vw,50px); margin-top:14px; }
.about-body p{ color:var(--dim); font-size:16px; line-height:1.75; }
.about-body p + p{ margin-top:22px; }
.about-body p::first-letter{ color:var(--paper); }
.about-sign{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.about-name{ font-family:var(--f-display); font-style:italic; font-weight:500; font-size:26px; }
.about-role{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding:180px 0; }
.faq .head{ margin-bottom:72px; max-width:56ch; }
.faq .head h2{ font-size:clamp(30px,4.4vw,50px); margin-top:14px; }
.faq-list{ border-top:1px solid var(--line); max-width:880px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:26px 56px 26px 0;
  font-family:var(--f-display); font-weight:500; font-size:clamp(17px,2vw,21px);
  transition:color .3s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; position:absolute; right:8px; top:50%;
  width:12px; height:12px; margin-top:-6px;
  border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg);
  transition:transform .35s var(--ease-clockwork), border-color .3s;
}
.faq-item summary:hover{ color:var(--accent-2); }
.faq-item[open] summary::after{ transform:rotate(-135deg); border-color:var(--accent); }
.faq-a{ padding:0 0 30px; }
.faq-a p{ color:var(--dim); font-size:15px; line-height:1.75; max-width:64ch; }

/* ==========================================================================
   4 — Méthode (timeline)
   ========================================================================== */
.method{ padding:180px 0 220px; background:var(--ink-2); }
.method .head{ margin-bottom:120px; max-width:56ch; }
.method .head h2{ font-size:clamp(30px,4.4vw,50px); margin-top:14px; }
.timeline{ position:relative; }
.timeline-track{ position:relative; height:2px; background:var(--line); border-radius:2px; overflow:visible; }
.timeline-track .fill{
  position:absolute; inset:0; background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
}
.timeline-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:0; }
@media (max-width:860px){ .timeline-steps{ grid-template-columns:1fr; gap:56px; } }
.timeline-step{ position:relative; padding-top:44px; }
.timeline-step .node{
  position:absolute; top:-6px; left:0; width:13px; height:13px; border-radius:50%;
  background:var(--ink-2); border:2px solid var(--dim);
}
.timeline-step .n{ font-family:var(--f-mono); font-size:12px; color:var(--dim); }
.timeline-step h3{ font-size:20px; margin-top:14px; }
.timeline-step p{ margin-top:10px; color:var(--dim); font-size:14px; line-height:1.6; max-width:28ch; }

/* ==========================================================================
   5 — Directions (galerie horizontale)
   ========================================================================== */
/* Section tenue en place (pin GSAP) le temps que le scroll vertical fasse
   glisser le rail de cartes en x — le meme mecanisme "tenir puis relacher"
   que le reste du site. Sans risque ici : chaque carte est une image
   statique (poster), jamais une iframe chargee — un pin reparente le DOM
   pour son revert, ce qui casse (NotFoundError _swapPinOut) des qu'une
   iframe avec document charge est presente dans la sous-arborescence
   pinnee (confirme par test). Le vrai site vivant reste a un clic, dans
   la lightbox (qui elle ne pinne jamais). */
.gallery{ height:100vh; overflow:hidden; }
.gallery-inner{
  height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(60px,8vw,110px) 0;
}
.gallery .head{ padding:0 clamp(20px,5vw,72px); margin-bottom:48px; }
.gallery .head h2{ font-size:clamp(28px,4vw,44px); margin-top:14px; }
.gallery-sub{ margin-top:14px; color:var(--dim); font-size:14px; max-width:52ch; }
.gallery-track{
  display:flex; gap:28px; padding:0 clamp(20px,5vw,72px);
  will-change:transform;
}
.case-card{
  flex:0 0 auto; width:min(72vw,540px); aspect-ratio:4/3;
  border-radius:18px; border:1px solid var(--line); background:var(--ink-2);
  position:relative; overflow:hidden; cursor:pointer;
}
.case-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  pointer-events:none; background:#141419;
}
.case-card .tag{
  position:absolute; left:20px; bottom:20px; z-index:2;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); background:rgba(13,13,16,.55); backdrop-filter:blur(6px);
  padding:8px 14px; border-radius:100px; border:1px solid var(--line);
}
.case-card .reveal-mask{
  position:absolute; inset:0; background:var(--ink); z-index:3;
  clip-path:inset(0 0 0 0); transform-origin:left;
}
.case-card .expand-hint{
  position:absolute; top:16px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:rgba(13,13,16,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:var(--paper); opacity:0; transform:scale(.7);
  transition:opacity .35s var(--ease-clockwork), transform .35s var(--ease-clockwork);
}
.case-card .expand-hint svg{ width:14px; height:14px; }
.case-card:hover .expand-hint{ opacity:1; transform:scale(1); }
@media (hover:none), (pointer:coarse){
  .case-card .expand-hint{ opacity:.55; transform:scale(1); }
}
.gallery-cursor{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  width:84px; height:84px; border-radius:50%; background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  transform:translate(-50%,-50%) scale(0); opacity:0;
}
/* Mobile / tactile : plus de rail horizontal pinné (scroll-jacking pénible au
   doigt) — les cartes s'empilent verticalement et se révèlent au passage.
   Le JS détecte la même condition (voir GALLERY_VERTICAL dans main.js). */
@media (max-width:860px), ((hover:none) and (pointer:coarse)){
  .gallery{ height:auto; overflow:visible; padding:110px 0; }
  .gallery-inner{ height:auto; padding:0; }
  .gallery-track{
    flex-direction:column; gap:24px; will-change:auto;
  }
  .case-card{ width:100%; }
}

/* ---------- lightbox : aperçu agrandi d'une direction ---------- */
.case-lightbox{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  padding:5vh 24px; pointer-events:none;
}
.case-lightbox.is-open{ pointer-events:auto; }
.case-lightbox-backdrop{
  position:absolute; inset:0; background:rgba(10,10,12,.72);
  backdrop-filter:blur(10px); opacity:0;
}
.case-lightbox-panel{
  position:relative; z-index:1; width:min(980px,94vw);
  background:var(--ink-2); border:1px solid var(--line); border-radius:22px;
  padding:20px; opacity:0; transform:scale(.94);
  display:flex; flex-direction:column; gap:18px;
  max-height:90vh;
}
.case-lightbox-stage{
  position:relative; width:100%; aspect-ratio:16/11; border-radius:14px;
  background:var(--ink); overflow:hidden;
}
.case-lightbox-stage iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:#0d0d10;
}
.case-lightbox-live{
  position:absolute; top:12px; left:12px; z-index:2;
  display:flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); background:rgba(13,13,16,.6); backdrop-filter:blur(6px);
  padding:6px 12px 6px 9px; border-radius:100px; border:1px solid var(--line);
  pointer-events:none;
}
.case-lightbox-live .pulse{
  width:6px; height:6px; border-radius:50%; background:#5ec98f;
  box-shadow:0 0 0 0 rgba(94,201,143,.6); animation:livePulse 1.8s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(94,201,143,.55); }
  70%{ box-shadow:0 0 0 6px rgba(94,201,143,0); }
  100%{ box-shadow:0 0 0 0 rgba(94,201,143,0); }
}
.case-lightbox-hint{
  position:absolute; bottom:12px; right:12px; z-index:2;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.05em;
  color:rgba(242,237,228,.65); background:rgba(13,13,16,.55); backdrop-filter:blur(6px);
  padding:6px 12px; border-radius:100px; border:1px solid var(--line);
  pointer-events:none;
}
.case-lightbox-text{ display:flex; flex-direction:column; gap:10px; padding:0 6px 6px; }
.case-lightbox-text p{
  font-family: ui-sans-serif, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  color:var(--dim); font-size:15px; line-height:1.6; max-width:60ch;
}
.case-lightbox-close{
  position:absolute; top:-14px; right:-14px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:var(--paper); color:var(--ink); border:none; cursor:pointer;
  font-size:15px; display:flex; align-items:center; justify-content:center;
}

/* ---------- fenêtre de contact ---------- */
.contact-modal{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  padding:5vh 24px; pointer-events:none;
}
.contact-modal.is-open{ pointer-events:auto; }
.contact-modal-backdrop{
  position:absolute; inset:0; background:rgba(10,10,12,.72);
  backdrop-filter:blur(10px); opacity:0;
}
.contact-modal-panel{
  position:relative; z-index:1; width:min(520px,92vw);
  background:var(--ink-2); border:1px solid var(--line); border-radius:22px;
  opacity:0; transform:scale(.94);
  /* pas d'overflow ici : il rognerait le bouton ✕ posé sur le coin — le
     défilement vit dans .contact-modal-scroll juste en dessous. */
}
.contact-modal-scroll{
  max-height:90vh; overflow-y:auto; border-radius:inherit;
  padding:clamp(28px,4vw,42px);
}
.contact-modal-panel h3{ font-size:clamp(24px,3vw,30px); margin:12px 0 10px; }
.contact-modal-sub{ color:var(--dim); font-size:14px; line-height:1.6; margin-bottom:28px; max-width:44ch; }
#contactForm{ display:flex; flex-direction:column; gap:16px; }
.cf-field{ display:flex; flex-direction:column; gap:7px; }
.cf-field label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}
.cf-field input, .cf-field textarea, .cf-field select{
  font-family:var(--f-body); font-size:14.5px; color:var(--paper);
  background:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; resize:vertical; transition:border-color .25s var(--ease-clockwork);
}
.cf-field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b8780' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:36px;
}
.cf-field select option{ background:var(--ink); color:var(--paper); }
.cf-field input:focus, .cf-field textarea:focus, .cf-field select:focus{
  outline:none; border-color:var(--accent);
}
/* Brief express — bloc replié, tout optionnel */
.cf-brief{
  border:1px dashed var(--line); border-radius:12px;
  padding:0 16px;
}
.cf-brief summary{
  list-style:none; cursor:pointer; padding:14px 0; position:relative;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--paper);
}
.cf-brief summary::-webkit-details-marker{ display:none; }
.cf-brief summary::after{
  content:''; position:absolute; right:4px; top:50%;
  width:8px; height:8px; margin-top:-5px;
  border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg); transition:transform .3s var(--ease-clockwork);
}
.cf-brief[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.cf-brief-hint{ color:var(--dim); text-transform:none; letter-spacing:.02em; margin-left:6px; }
.cf-brief-fields{ display:flex; flex-direction:column; gap:16px; padding:4px 0 18px; }
.cf-brief-note{ color:var(--dim); font-size:12.5px; line-height:1.5; }
/* pièces jointes : input natif masqué, bouton stylé + liste des fichiers */
.cf-files{ display:flex; flex-direction:column; gap:8px; }
.cf-files input[type="file"]{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}
.cf-files-btn{
  align-self:flex-start; cursor:pointer;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em;
  color:var(--paper); border:1px dashed var(--line); border-radius:100px;
  padding:10px 18px; transition:border-color .25s, color .25s;
}
.cf-files-btn:hover{ border-color:var(--accent); color:var(--accent-2); }
.cf-files input[type="file"]:focus-visible + .cf-files-btn{
  outline:2px solid var(--accent); outline-offset:3px;
}
.cf-files-list{ color:var(--dim); font-size:12px; line-height:1.5; }
.cf-files-list.is-error{ color:#e0847a; }
.cf-files-list.has-files{ color:var(--paper); }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:rgba(139,135,128,.55); }
.cf-field input:invalid:not(:placeholder-shown),
.cf-field textarea:invalid:not(:placeholder-shown){ border-color:#c0645a; }
/* honeypot : présent dans le DOM (les bots le remplissent), invisible et
   inatteignable pour un humain (pas juste display:none, que certains bots
   savent détecter et éviter). */
.cf-honeypot{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}
.cf-submit{ justify-content:center; margin-top:6px; border:none; }
.cf-submit:disabled{ opacity:.6; cursor:default; }
.cf-submit:disabled::before{ transform:scale(0) !important; }
.cf-submit .cf-submit-label{ position:relative; }
.cf-status{
  min-height:1.4em; margin:0; font-size:13px; text-align:center;
  color:var(--dim); font-family:var(--f-mono);
}
.cf-status.is-error{ color:#e0847a; }
.cf-status.is-ok{ color:#7fbf94; }
.cf-privacy{
  margin:4px 0 0; font-size:11.5px; line-height:1.55; text-align:center;
  color:rgba(139,135,128,.75);
}

/* ==========================================================================
   6 — Preuve / chiffres
   ========================================================================== */
.stats{ padding:180px 0; position:relative; overflow:hidden; }
.stats-ticks{ position:absolute; inset:0; z-index:0; opacity:.5; }
.stats-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
@media (max-width:1100px){ .stats-grid{ grid-template-columns:repeat(2,1fr); gap:56px; } }
@media (max-width:640px){ .stats-grid{ grid-template-columns:1fr; gap:64px; } }
.stat .value{
  font-family:var(--f-mono); font-weight:700; font-size:clamp(42px,4.6vw,68px);
  font-variant-numeric:tabular-nums; color:var(--paper); line-height:1;
}
.stat .value .accent-char{ color:var(--accent); }
.stat .label{ margin-top:18px; color:var(--dim); font-size:14px; max-width:26ch; }

/* ==========================================================================
   7 — Philosophie / citation
   ========================================================================== */
.quote{ min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; background:var(--ink-2); }
.quote-ghost{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--f-display); font-weight:600; font-size:22vw; color:rgba(242,237,228,.035);
  white-space:nowrap; z-index:0; pointer-events:none;
}
.quote blockquote{
  position:relative; z-index:1; margin:0; max-width:900px;
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(26px,4.6vw,52px); line-height:1.3;
}
.quote .word{ opacity:.12; }
.quote cite{ display:block; margin-top:36px; font-style:normal; font-family:var(--f-mono); font-size:12px; color:var(--dim); }

/* ==========================================================================
   8 — Contact
   ========================================================================== */
.contact{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; }
.contact-glow{
  position:absolute; width:60vw; height:60vw; border-radius:50%; left:50%; top:50%;
  background:radial-gradient(circle, rgba(184,121,74,.22), transparent 70%);
  transform:translate(-50%,-50%); pointer-events:none;
}
.contact-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.contact h2{ font-size:clamp(34px,6vw,72px); }
.contact .sub{ margin-top:24px; color:var(--dim); font-size:16px; max-width:48ch; margin-left:auto; margin-right:auto; }
.contact .btn{ margin-top:48px; font-size:15px; padding:20px 40px; }
.contact-assurances{
  list-style:none; margin:40px auto 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px;
}
.contact-assurances li{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em; color:var(--dim);
  position:relative; padding-left:18px;
}
.contact-assurances li::before{
  content:'✓'; position:absolute; left:0; color:var(--accent);
}

/* ==========================================================================
   9 — Footer
   ========================================================================== */
.site-footer{ padding:80px 0 48px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.footer-grid .brand{ font-family:var(--f-display); font-size:22px; }
.footer-grid .col .eyebrow{ margin-bottom:14px; display:block; }
.footer-grid .col a, .footer-grid .col p{ display:block; color:var(--dim); font-size:14px; line-height:2; }
.footer-bottom{
  margin-top:64px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--f-mono); font-size:11px; color:var(--ink-3); color:var(--dim);
}

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