/* ==========================================================================
   DF Detailing — feuille de style unique
   --------------------------------------------------------------------------
   Direction : atelier de nuit. Fond noir profond, une seule couleur d'accent
   (l'orange relevé directement dans le logo), et l'hexagone du plafond
   lumineux de l'atelier comme unique ornement.
   Ordre du fichier : 1. tokens · 2. base · 3. composants · 4. sections
                      5. responsive · 6. accessibilité et mouvement réduit
   ========================================================================== */

/* ---------- 0. POLICES ----------
   Deux familles, auto-hébergées, variables. Le découpage latin / latin-ext
   fait que le fichier étendu (nécessaire au roumain) n'est téléchargé que
   si la page l'utilise réellement. */
@font-face{
  font-family:'Archivo X'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/archivo-x-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo X'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/archivo-x-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter V'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter V'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:        #0A0A0B;   /* fond principal */
  --surface:   #131316;   /* cartes, champs */
  --surface-2: #1A1A1E;   /* survol des cartes */
  --line:      #26262B;   /* filets, 1px, jamais plus */
  --fg:        #EFEDE8;   /* blanc cassé, jamais #FFF pur */
  --muted:     #8B8B92;   /* légendes, métadonnées */
  --accent:    #EB7030;   /* orange du logo, relevé au pixel */
  --accent-dk: #C85A22;

  --maxw: 1240px;
  --gut: clamp(1.25rem, 5vw, 4rem);

  --display: 'Archivo X', 'Arial Narrow', Impact, sans-serif;
  --body: 'Inter V', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t: 220ms cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box }

/* Les classes de composants (.btn, .sent) ont plus de poids que la règle
   [hidden] du navigateur : on la rétablit explicitement. */
[hidden]{ display:none !important }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 clamp(.975rem,.4vw + .9rem,1.0625rem)/1.65 var(--body);
  font-feature-settings:'tnum' 1;      /* chiffres tabulaires : les prix s'alignent */
  overflow-x:hidden;
}

/* Grain : appliqué aux fonds nus uniquement, jamais par-dessus les photos. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .site-header, .site-footer{ position:relative; z-index:1 }

img,svg,iframe{ display:block; max-width:100% }
img{ height:auto }

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:.98;
  text-transform:uppercase;
  margin:0;
}
h1{ font-size:clamp(2.6rem,8.5vw,6.75rem) }
h2{ font-size:clamp(1.9rem,4.6vw,3.5rem) }
h3{ font-size:clamp(1.0625rem,1.4vw,1.3125rem); line-height:1.1 }

p{ margin:0 0 1em; max-width:64ch }

a{ color:inherit; text-decoration:none }

::selection{ background:var(--accent); color:#0A0A0B }

/* ---------- 3. COMPOSANTS ---------- */

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.25rem;
  border:1px solid transparent; border-radius:2px;
  font:500 .9375rem/1 var(--body); letter-spacing:.01em;
  cursor:pointer; transition:background var(--t), color var(--t), border-color var(--t);
}
.btn-lg{ padding:1rem 1.75rem; font-size:1rem }
.btn-accent{ background:var(--accent); color:#0A0A0B; font-weight:600 }
.btn-accent:hover{ background:#F5813F }
.btn-outline{ border-color:#3A3A42; color:var(--fg) }
.btn-outline:hover{ border-color:var(--fg); background:rgba(239,237,232,.06) }
.btn-ghost{ color:var(--muted); padding-inline:.5rem }
.btn-ghost:hover{ color:var(--fg) }

/* En-tête */
.site-header{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--gut);
  transition:background var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom-color:var(--line);
}
.brand img{ width:auto; height:40px }
.site-nav{ display:flex; gap:1.6rem; margin-left:auto; font-size:.9375rem }
.site-nav a{ color:var(--muted); transition:color var(--t) }
.site-nav a:hover{ color:var(--fg) }
.header-actions{ display:flex; align-items:center; gap:.6rem }

/* Sélecteur de langue */
.lang{ position:relative }
.lang-btn{
  display:flex; align-items:center; gap:.35rem;
  background:none; border:1px solid var(--line); border-radius:2px;
  color:var(--fg); font:500 .8125rem/1 var(--body); letter-spacing:.06em;
  padding:.6rem .7rem; cursor:pointer; transition:border-color var(--t);
}
.lang-btn:hover{ border-color:#3A3A42 }
.chev{ width:9px; height:6px; transition:transform var(--t) }
.lang-btn[aria-expanded="true"] .chev{ transform:rotate(180deg) }
.lang-menu{
  position:absolute; top:calc(100% + .4rem); right:0; z-index:5;
  min-width:10rem; margin:0; padding:.3rem; list-style:none;
  background:var(--surface-2); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.lang-menu button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--fg); font:400 .9375rem/1 var(--body); padding:.6rem .7rem; border-radius:2px;
}
.lang-menu button:hover, .lang-menu button[aria-selected="true"]{ background:rgba(239,237,232,.08) }
.lang-menu button[aria-selected="true"]{ color:var(--accent) }

/* Menu burger (mobile) */
.burger{
  display:none; width:42px; height:42px; padding:0;
  background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:11px; width:18px; height:1.5px; background:var(--fg);
  transition:transform var(--t), opacity var(--t);
}
.burger span:first-child{ top:17px } .burger span:last-child{ top:23px }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg) }

/* ---------- 4. SECTIONS ---------- */

/* HERO */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden }
.hero-media{ position:absolute; inset:0 }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:42% 45% }
/* Double dégradé : lisibilité du titre en bas, et respiration sous l'en-tête. */
.hero::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,10,11,.94) 0%, rgba(10,10,11,.5) 38%, rgba(10,10,11,0) 68%),
    linear-gradient(to bottom, rgba(10,10,11,.88), rgba(10,10,11,0) 26%);
}
.hero-inner{ position:relative; z-index:2; padding:0 var(--gut) clamp(4.5rem,9vh,7rem); width:100% }
.hero-place{
  color:var(--accent); font:500 .8125rem/1 var(--body);
  letter-spacing:.18em; margin-bottom:1.1rem;
}
.hero h1{ max-width:17ch }
.hero-sub{ margin:1.25rem 0 2rem; color:#C9C7C2; font-size:1.0625rem; max-width:46ch }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem }

.scroll-cue{
  position:absolute; left:50%; bottom:1.6rem; z-index:2;
  translate:-50% 0; color:var(--muted); opacity:.7;
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(7px) } }

/* BANDEAU DE FAITS */
.band{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border-block:1px solid var(--line);
}
.band-item{ background:var(--bg); padding:clamp(2rem,3.6vw,3.25rem) clamp(1.5rem,2.6vw,2.5rem) }
.band-item h3{ margin-bottom:.85rem }
.band-item p{ color:var(--muted); font-size:.9375rem; margin:0 }

/* Gabarit de section */
.section{ padding:clamp(4.5rem,9vw,8rem) var(--gut); max-width:var(--maxw); margin-inline:auto }
.section-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:end;
  margin-bottom:clamp(2.25rem,4vw,3.5rem);
}
.section-head p{ color:var(--muted); margin:0; align-self:end }

/* Tuiles de prestations */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.tile{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  min-height:clamp(19rem,26vw,23rem);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:border-color var(--t);
}
.tile:hover{ border-color:#38383F }
.tile > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.63; filter:saturate(.92);
  transition:opacity var(--t), transform 600ms cubic-bezier(.2,0,0,1);
}
.tile:hover > img{ opacity:.8; transform:scale(1.035) }
.tile::after{        /* scrim de lisibilité */
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,11,.95) 12%, rgba(10,10,11,.35) 62%, rgba(10,10,11,.15) 100%);
}
.tile-txt{ position:relative; z-index:2; padding:1.5rem }
.tile-txt h3{ margin-bottom:.6rem }
.tile-txt p{ color:#B9B7B3; font-size:.9rem; margin:0 0 1rem }
.price{ font:500 .8125rem/1 var(--body); letter-spacing:.08em; color:var(--muted) }
.price.is-set{ color:var(--accent) }

/* Reflet « vernis » qui suit le curseur — les vars sont posées par app.js */
.glow::before{
  content:''; position:absolute; inset:-1px; z-index:3; pointer-events:none;
  opacity:0; transition:opacity var(--t);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(235,112,48,.20), transparent 70%);
}
.glow:hover::before{ opacity:1 }

.note{ margin:2rem 0 0; color:var(--muted); font-size:.9375rem }
.note a{ color:var(--accent); border-bottom:1px solid rgba(235,112,48,.4); padding-bottom:1px }
.note a:hover{ border-bottom-color:var(--accent) }

/* Bandeau pleine largeur */
.gloss{ position:relative; height:clamp(20rem,46vw,34rem); overflow:hidden }
.gloss img{ width:100%; height:100%; object-fit:cover; object-position:50% 35% }
.gloss::after{ content:''; position:absolute; inset:0; background:rgba(10,10,11,.45) }
.gloss p{
  position:absolute; z-index:2; inset:auto var(--gut) clamp(2rem,5vw,3.5rem) var(--gut);
  max-width:34ch; margin:0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.125rem,2.4vw,1.875rem); line-height:1.15; letter-spacing:-.01em;
}

/* Filtres de la galerie */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem }
.chip{
  background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer;
  color:var(--muted); font:500 .8438rem/1 var(--body); padding:.6rem .9rem;
  transition:color var(--t), border-color var(--t), background var(--t);
}
.chip:hover{ color:var(--fg); border-color:#3A3A42 }
.chip.is-active{ background:var(--accent); border-color:var(--accent); color:#0A0A0B }

/* Galerie en mosaïque */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(9rem,13vw,12rem); gap:.75rem; grid-auto-flow:dense;
}
.card{
  position:relative; grid-row:span 2; overflow:hidden; padding:0; cursor:none;
  background:var(--surface); border:0; border-radius:3px;
  transition:opacity 300ms ease, transform 300ms ease;
}
.card.wide{ grid-column:span 2 }
.card.is-hidden{ display:none }
.card img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms cubic-bezier(.2,0,0,1), filter var(--t) }
.card:hover img{ transform:scale(1.05); filter:brightness(.72) }
.card-cap{
  position:absolute; inset:auto 0 0; z-index:2;
  display:flex; flex-direction:column; gap:.2rem;
  padding:1rem; text-align:left;
  background:linear-gradient(to top, rgba(10,10,11,.9), transparent);
  opacity:0; translate:0 8px; transition:opacity var(--t), translate var(--t);
}
.card:hover .card-cap, .card:focus-visible .card-cap{ opacity:1; translate:0 0 }
.card-cap b{ font:600 .9375rem/1.2 var(--body) }
.card-cap i{ font-style:normal; font-size:.8125rem; color:var(--accent) }

/* Curseur personnalisé sur la galerie */
.cursor{
  position:fixed; z-index:80; top:0; left:0; width:44px; height:44px;
  margin:-22px 0 0 -22px; border:1px solid var(--fg); border-radius:50%;
  pointer-events:none; opacity:0; mix-blend-mode:difference;
  transition:opacity 160ms, scale 160ms;
}
.cursor.is-on{ opacity:1 }
.cursor.is-over{ scale:1.35; background:var(--accent); border-color:var(--accent); mix-blend-mode:normal }

/* Liste de tarifs */
.pricelist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.pricelist li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
}
.pricelist span{ color:#C9C7C2 }
.pricelist b{
  font-family:var(--display); font-weight:600;
  font-size:1.0625rem; letter-spacing:-.01em; white-space:nowrap;
}

/* Formulaire multi-étapes */
.wizard{ max-width:46rem; margin-inline:auto }
.steps{ display:flex; flex-wrap:wrap; gap:1.25rem; list-style:none; margin:0 0 .9rem; padding:0 }
.steps li{ display:flex; align-items:center; gap:.5rem; color:#54545C; font-size:.8125rem }
.steps li span{
  display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px;
  border:1px solid currentColor; border-radius:50%; font-size:.6875rem; font-weight:600;
}
.steps li em{ font-style:normal }
.steps li.is-active{ color:var(--fg) }
.steps li.is-done{ color:var(--accent) }

.bar{ height:2px; background:var(--line); margin-bottom:2.25rem }
.bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width 320ms cubic-bezier(.4,0,.2,1) }

.step{ border:0; margin:0; padding:0; display:none }
.step.is-current{ display:block }
.step legend{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.25rem,2.4vw,1.75rem); letter-spacing:-.015em; line-height:1.05;
  padding:0; margin-bottom:1.25rem;
}
.hint{ color:var(--muted); font-size:.875rem; margin:-.65rem 0 1.1rem }

.opts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.25rem }
.opts button{
  background:var(--surface); border:1px solid var(--line); border-radius:2px; cursor:pointer;
  color:var(--fg); font:400 .9375rem/1 var(--body); padding:.85rem 1.1rem;
  transition:border-color var(--t), background var(--t), color var(--t);
}
.opts button:hover{ border-color:#4A4A54; background:var(--surface-2) }
.opts button[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:#0A0A0B; font-weight:600;
}

.row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field{ display:block; margin-bottom:1rem }
.field > span{ display:block; font-size:.875rem; color:var(--muted); margin-bottom:.4rem }
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%; background:var(--surface); color:var(--fg);
  border:1px solid var(--line); border-radius:2px; padding:.8rem .9rem;
  font:400 1rem/1.4 var(--body); transition:border-color var(--t);
}
input:focus,select:focus,textarea:focus{ outline:0; border-color:var(--accent) }
textarea{ resize:vertical }
select{ appearance:none; background-image:linear-gradient(var(--surface),var(--surface)) }

.check{ display:flex; gap:.65rem; align-items:flex-start; font-size:.875rem; color:var(--muted); margin-bottom:1rem }
.check input{ width:18px; height:18px; margin-top:.15rem; accent-color:var(--accent); flex:0 0 18px }

.gotcha{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

.err{ color:#FF8B6B; font-size:.875rem; margin:.25rem 0 1rem }

.recap{ margin:0 0 1.25rem; border-top:1px solid var(--line) }
.recap div{ display:flex; justify-content:space-between; gap:1.5rem; padding:.8rem 0; border-bottom:1px solid var(--line) }
.recap dt{ color:var(--muted); font-size:.875rem }
.recap dd{ margin:0; text-align:right; font-size:.9375rem }

.wizard-foot{ display:flex; gap:.75rem; margin-top:2rem }
.sent{
  display:block; margin-top:1.5rem; padding:1.1rem 1.25rem;
  background:rgba(235,112,48,.1); border-left:2px solid var(--accent);
  font-size:.9375rem;
}

/* Section en deux colonnes */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center }
.split-media img{ width:100%; border-radius:3px }
.split-txt h2{ margin-bottom:1.5rem }
.split-txt p{ color:var(--muted) }
.split-txt .btn{ margin-top:.75rem }

/* Contact */
.contact-wrap{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,4vw,4rem) }
.contact-info{ border-top:1px solid var(--line) }
.ci{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  margin:0; padding:1.05rem 0; border-bottom:1px solid var(--line);
  max-width:none; font-size:.9375rem;
}
.ci em{ font-style:normal; color:var(--muted); font-size:.8125rem; padding-top:.15rem }
.ci a{ border-bottom:1px solid var(--line); transition:border-color var(--t), color var(--t) }
.ci a:hover{ color:var(--accent); border-bottom-color:var(--accent) }
.social{ display:flex; flex-wrap:wrap; gap:.9rem }
.contact-map iframe{
  width:100%; height:100%; min-height:22rem; border:1px solid var(--line); border-radius:3px;
  filter:grayscale(1) invert(.92) contrast(.85);   /* la carte se met au ton du site */
}

/* Pied de page */
.site-footer{ border-top:1px solid var(--line); padding:clamp(3rem,5vw,4.5rem) var(--gut) 2rem }
.foot-top{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem;
  max-width:var(--maxw); margin-inline:auto;
}
.foot-brand img{ height:54px; width:auto; margin-bottom:1rem }
.foot-brand p{ color:var(--muted); font-size:.875rem; max-width:24ch }
.foot-top nav{ display:flex; flex-direction:column; gap:.6rem; font-size:.9375rem }
.foot-top nav a{ color:var(--muted) }
.foot-top nav a:hover{ color:var(--fg) }
.foot-legal p{ color:var(--muted); font-size:.875rem; margin-bottom:1rem }
.foot-legal b{ color:var(--fg) }
.foot-legal a{ border-bottom:1px solid var(--line) }
.foot-social{ display:flex; flex-wrap:wrap; gap:1rem }
.foot-social a{ color:var(--fg); border-bottom-color:transparent; transition:color var(--t), border-color var(--t) }
.foot-social a:hover{ color:var(--accent); border-bottom-color:var(--accent) }
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  max-width:var(--maxw); margin:clamp(2.5rem,4vw,3.5rem) auto 0;
  padding-top:1.5rem; border-top:1px solid var(--line);
  color:#5E5E66; font-size:.8125rem;
}
.foot-bottom span{ max-width:52ch }

/* WhatsApp flottant */
.wa{
  position:fixed; z-index:70; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  display:flex; align-items:center; gap:.6rem;
  padding:.85rem 1.1rem; border-radius:100px;
  background:#1E6B4A; color:#fff; font:600 .9375rem/1 var(--body);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:background var(--t), transform var(--t);
}
.wa:hover{ background:#24875C; transform:translateY(-2px) }

/* Visionneuse */
.lightbox{
  width:100%; max-width:100%; height:100%; max-height:100%;
  border:0; padding:0; margin:0; background:rgba(6,6,7,.96);
}
.lightbox::backdrop{ background:rgba(6,6,7,.9) }
.lightbox[open]{ display:grid; place-items:center }
.lightbox figure{ margin:0; padding:clamp(1rem,4vw,3rem); max-width:min(1200px,92vw) }
.lightbox img{ width:100%; max-height:76svh; object-fit:contain; border-radius:3px }
.lightbox figcaption{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:baseline; margin-top:1rem; color:var(--fg) }
.lightbox figcaption b{ font:600 1rem/1 var(--body) }
.lightbox figcaption i{ font-style:normal; color:var(--accent); font-size:.875rem }
.lb-close,.lb-nav{
  position:absolute; display:grid; place-items:center;
  width:46px; height:46px; background:rgba(255,255,255,.07); color:var(--fg);
  border:1px solid var(--line); border-radius:50%; cursor:pointer; transition:background var(--t);
}
.lb-close:hover,.lb-nav:hover{ background:rgba(255,255,255,.16) }
.lb-close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem) }
.lb-prev{ left:clamp(.5rem,2vw,2rem); top:50%; translate:0 -50% }
.lb-next{ right:clamp(.5rem,2vw,2rem); top:50%; translate:0 -50% }

/* Révélation au scroll — une seule fois, translation courte */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 620ms ease, transform 620ms cubic-bezier(.2,0,0,1) }
.reveal.is-in{ opacity:1; transform:none }


/* Où ça se passe — trois façons d'être servi */
.ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.way img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--line); border-radius:3px; margin-bottom:1.15rem;
  filter:saturate(.92);
}
.way h3{ margin-bottom:.6rem }
.way p{ color:var(--muted); font-size:.9375rem; margin:0 }

/* Vidéos d'atelier */
.films{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.films figure{ margin:0 }
.films video{
  width:100%; height:auto; aspect-ratio:16/9; background:#000;
  object-fit:cover; border:1px solid var(--line); border-radius:3px;
}
.films figcaption{ margin-top:.8rem; color:var(--muted); font-size:.875rem }

/* Le matériel */
.kit{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem }
.kit-item{
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  overflow:hidden; transition:border-color var(--t);
}
.kit-item:hover{ border-color:#38383F }
.kit-item img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:saturate(.9) }
.kit-item > div{ padding:1.4rem }
.kit-item h3{ margin-bottom:.6rem }
.kit-item p{ color:var(--muted); font-size:.9rem; margin:0 }
/* la première pièce occupe toute la largeur, image à gauche */
.kit-lead{ grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 1fr; align-items:center }
.kit-lead img{ height:100%; aspect-ratio:auto; min-height:16rem }
.kit-lead > div{ padding:clamp(1.5rem,3vw,2.5rem) }

@media (max-width:1080px){
  .ways{ grid-template-columns:1fr 1fr }
  .ways .way:last-child{ grid-column:1 / -1 }
  .ways .way:last-child img{ aspect-ratio:21/9 }
}
@media (max-width:860px){
  .films{ grid-template-columns:1fr }
  .kit-lead{ grid-template-columns:1fr }
  .kit-lead img{ min-height:0; aspect-ratio:3/2 }
}
@media (max-width:620px){
  .ways, .kit{ grid-template-columns:1fr }
  .ways .way:last-child{ grid-column:auto }
  .ways .way:last-child img{ aspect-ratio:3/2 }
}


/* Pages intérieures : il n'y a pas de hero, il faut dégager l'en-tête fixe */
.page-top{ padding-top:calc(clamp(4.5rem,9vw,8rem) + 3rem) }

/* Le h1 d'une page intérieure n'a pas la taille d'un titre de hero */
.section-head h1, .split-txt h1{ font-size:clamp(1.9rem,4.6vw,3.5rem) }

/* Page active dans la navigation */
.site-nav a[aria-current="page"]{ color:var(--fg) }
.site-nav a[aria-current="page"]::after{
  content:''; display:block; height:1px; margin-top:.35rem; background:var(--accent);
}

/* Bandeau d'appel à l'action, en bas des pages */
.cta-band{
  display:grid; grid-template-columns:1.3fr auto; gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  max-width:var(--maxw); margin:0 auto clamp(4rem,8vw,7rem);
  padding:clamp(2rem,4vw,3.25rem) clamp(1.75rem,3vw,3rem);
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  width:calc(100% - 2 * var(--gut));
}
.cta-band h2{ font-size:clamp(1.35rem,2.6vw,2.125rem); margin-bottom:.75rem }
.cta-band p{ color:var(--muted); margin:0; font-size:.9375rem }
.cta-band-actions{ display:flex; flex-wrap:wrap; gap:.75rem }

/* Mentions légales */
.legal{ max-width:62ch }
.legal section{ padding:1.5rem 0; border-top:1px solid var(--line) }
.legal h2{ font-size:clamp(1rem,1.5vw,1.1875rem); margin-bottom:.75rem }
.legal p{ color:var(--muted); font-size:.9375rem; margin:0 }
.legal a{ color:var(--accent) }

@media (max-width:860px){
  .cta-band{ grid-template-columns:1fr }
}

/* ---------- 5. RESPONSIVE ---------- */
@media (max-width:1080px){
  .tiles{ grid-template-columns:repeat(2,1fr) }
  .grid{ grid-template-columns:repeat(2,1fr) }
  .card.wide{ grid-column:span 2 }
  .band{ grid-template-columns:1fr 1fr }
  .band-item:last-child{ grid-column:1 / -1 }
  .foot-top{ grid-template-columns:1fr 1fr }
}

@media (max-width:860px){
  .site-nav{
    position:fixed; inset:0 0 auto; z-index:-1;
    flex-direction:column; gap:0; margin:0;
    padding:5.5rem var(--gut) 1.75rem;
    background:rgba(10,10,11,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%); transition:transform 320ms cubic-bezier(.4,0,.2,1);
  }
  .site-nav.is-open{ transform:none }
  .site-nav a{ padding:.95rem 0; border-bottom:1px solid var(--line); color:var(--fg); font-size:1.0625rem }
  .header-actions{ margin-left:auto }
  .burger{ display:block }
  .tel{ display:none }
  .header-actions .btn-accent{ display:none }
  .section-head{ grid-template-columns:1fr; align-items:start }
  .split{ grid-template-columns:1fr }
  .contact-wrap{ grid-template-columns:1fr }
  .band{ grid-template-columns:1fr }
  .band-item:last-child{ grid-column:auto }
  .wa span{ display:none }
  .wa{ padding:.9rem; border-radius:50% }
}

@media (max-width:620px){
  .tiles{ grid-template-columns:1fr }
  .grid{ grid-template-columns:1fr; grid-auto-rows:14rem }
  .card, .card.wide{ grid-row:span 1; grid-column:span 1 }
  .card-cap{ opacity:1; translate:0 0 }      /* pas de survol au doigt */
  .row{ grid-template-columns:1fr }
  .hero{ min-height:92svh }
  .hero-media img{ object-position:50% 52% }
  .steps li em{ display:none }
  .steps{ gap:.75rem }
  .ci{ grid-template-columns:1fr; gap:.25rem }
  .foot-top{ grid-template-columns:1fr }
  .cursor{ display:none }
}

/* ---------- 6. ACCESSIBILITÉ ET MOUVEMENT ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#0A0A0B; padding:.75rem 1rem; font-weight:600;
}
.skip:focus{ left:0 }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .reveal{ opacity:1; transform:none }
  .cursor{ display:none }
}