/* ============================================================
   TOM CARVALHO — SITE « PROJECTION »
   Accueil : amorce + projection, générique de fin, films, photos,
   services, fin. Pages services : titre tramé + sélection + fin.
   Même DA : papier crème, noir, rouge sang, Anton, trame, grain.
   ============================================================ */
:root{
  --noir:#0a0a0a;
  --ligne:#242424;
  --ligne-papier:#d9d5cb;
  --rouge:#e3170a;
  --gris:#9b9b9b;
  --gris-clair:#cfcfcf;
  --papier:#f1efea;
  --encre:#141414;
  --anton:'Anton', Impact, sans-serif;
  --mono:'IBM Plex Mono', 'Courier New', monospace;
  --body:'Archivo', Helvetica, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:6vw;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--encre);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--rouge);color:var(--noir)}
a{color:inherit;text-decoration:none}
img,video,canvas{display:block;max-width:100%}
ul,ol{list-style:none}
section{position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- GRAIN FILM ---------- */
.grain{
  position:fixed;inset:-100px;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.06;animation:grain .6s steps(4) infinite;will-change:transform;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-40px,30px)}50%{transform:translate(30px,-50px)}75%{transform:translate(-30px,-20px)}100%{transform:translate(0,0)}}

/* ---------- REVEALS ---------- */
.sr{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i, 0) * 70ms)}
.sr.in{opacity:1;transform:none}
.sr-d1{transition-delay:.1s}.sr-d2{transition-delay:.22s}.sr-d3{transition-delay:.34s}

/* ---------- COMMUN ---------- */
.sec-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--rouge);
  display:flex;align-items:center;gap:14px;
}
.spark{position:absolute;pointer-events:none}
.spark svg{display:block;width:100%;height:100%}
.sub{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}

/* ============================================================
   AMORCE — compte à rebours de pellicule (accueil)
   ============================================================ */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.leader{
  position:fixed;inset:0;z-index:3000;background:var(--papier);
  display:grid;place-items:center;overflow:hidden;
  transition:clip-path .55s var(--ease);clip-path:inset(0 0 0 0);
}
.leader.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
.leader.is-off{display:none}
.leader-wipe{position:absolute;inset:-50%;background:conic-gradient(from 0deg, rgba(20,20,20,.10) var(--a), transparent 0);animation:wipe .45s linear 3}
@keyframes wipe{from{--a:0deg}to{--a:360deg}}
.leader-cross{position:absolute;inset:0;pointer-events:none}
.leader-cross::before,.leader-cross::after{content:"";position:absolute;background:var(--encre);opacity:.55}
.leader-cross::before{left:0;right:0;top:50%;height:1px}
.leader-cross::after{top:0;bottom:0;left:50%;width:1px}
.leader-num{
  position:relative;font-family:var(--anton);font-size:min(52vh,52vw);line-height:1;color:var(--rouge);
  width:.9em;height:.9em;display:grid;place-items:center;border:2px solid var(--encre);border-radius:50%;background:var(--papier);
}
.leader-tag{position:absolute;left:var(--gutter);bottom:5vh;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--encre)}
@media(prefers-reduced-motion:reduce){.leader{display:none}}

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:18px 28px;mix-blend-mode:multiply;
}
/* logo : l'objectif « T » de Tom ; il fait un quart de tour au survol, comme une bague de mise au point */
nav .logo{display:block;line-height:0;border-radius:50%}
.logo-img{width:48px;height:48px;display:block;border-radius:50%;transition:transform .7s var(--ease)}
/* sur fond noir, un fin liseré crème détache l'objectif du décor */
nav.on-dark .logo-img{box-shadow:0 0 0 1.5px rgba(241,239,234,.55)}
nav .logo:hover .logo-img{transform:rotate(-90deg)}
nav .logo:focus-visible{outline:2px solid var(--rouge);outline-offset:4px}
nav ul{display:flex;gap:32px}
nav ul a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);white-space:nowrap}
nav ul a::before{content:"[";opacity:0;transition:.2s;margin-right:2px}
nav ul a::after{content:"]";opacity:0;transition:.2s;margin-left:2px}
nav ul a:hover::before,nav ul a:hover::after{opacity:1}
nav .nav-cta{
  font-family:var(--anton);font-size:13px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--papier);background:var(--encre);padding:9px 14px 8px;transition:.25s var(--ease);
}
nav .nav-cta:hover{background:var(--rouge);transform:skewX(-6deg)}
nav.on-dark{mix-blend-mode:normal}
nav.on-dark .logo,nav.on-dark ul a{color:var(--papier)}
nav.on-dark .nav-cta{background:var(--rouge);color:var(--noir)}
nav.on-dark .nav-cta:hover{background:var(--papier)}
@media(max-width:720px){nav{padding:14px 18px}nav ul{display:none}.logo-img{width:42px;height:42px}}

/* ============================================================
   HERO — projection (accueil et pages services)
   ============================================================ */
.hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--papier)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
/* source vidéo de la trame : présente dans le DOM (exigé par certains mobiles), jamais visible */
.hero-source{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.hero-fallback{
  display:flex;position:absolute;inset:0;padding:0 5vw;flex-direction:column;justify-content:center;
  font-family:var(--anton);font-size:clamp(70px,22vw,340px);line-height:.8;text-transform:uppercase;color:var(--rouge);
}
.hero.has-canvas .hero-fallback{display:none}
.hero-ui{
  position:absolute;z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:var(--encre);
  opacity:0;transform:translateY(10px);
}
body.is-ready .hero-ui{animation:fadeup .9s var(--ease) forwards}
body.is-ready .hero-ui-tl{animation-delay:.3s}body.is-ready .hero-ui-tr{animation-delay:.4s}
body.is-ready .hero-ui-bl{animation-delay:.5s}body.is-ready .hero-ui-br{animation-delay:.6s}
@keyframes fadeup{to{opacity:1;transform:none}}
.hero-ui-tl{top:74px;left:28px;display:flex;align-items:center;gap:10px}
.hero-ui-tl a{color:var(--rouge)}
.hero-ui-tr{top:74px;right:28px;text-align:right}
.hero-ui-bl{bottom:5vh;left:28px;max-width:420px}
.hero-ui-bl.pitch{font-family:var(--body);font-weight:500;font-size:clamp(15px,1.3vw,18px);letter-spacing:0;text-transform:none;line-height:1.45}
.hero-ui-br{bottom:5vh;right:28px;text-align:right;display:flex;align-items:center;gap:14px;color:var(--rouge)}
.hero-ui-br .bar{width:60px;height:1px;background:var(--rouge);transform-origin:left;animation:slide 1.6s var(--ease) infinite}
@keyframes slide{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@media(max-width:720px){
  .hero-ui-tl{top:62px;left:18px}.hero-ui-tr{top:62px;right:18px}
  .hero-ui-bl{left:18px;bottom:11vh;max-width:75vw}.hero-ui-br{right:18px;bottom:4vh}
  .hero-ui{font-size:10px;letter-spacing:.16em}
  /* pages services : les mots-clés passent sous la ligne « Service /01 » */
  body:not([data-page="accueil"]) .hero-ui-tr{top:92px;left:18px;right:18px;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .grain,.hero-ui-br .bar{animation:none}
  .hero-ui{opacity:1;transform:none;animation:none!important}
  .sr{opacity:1;transform:none;transition:none}
}

/* ============================================================
   GÉNÉRIQUE DE FIN — badge de tournage + générique qui défile
   ============================================================ */
.credits{
  background:var(--noir);color:var(--gris-clair);padding:0 var(--gutter);overflow:hidden;
  display:grid;grid-template-columns:minmax(380px,5fr) 7fr;gap:0 5vw;align-items:center;
}
.credits::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/halftone.png");background-size:900px auto;opacity:.07;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 40%);mask-image:linear-gradient(90deg,#000,transparent 40%);
}
.credits > *{position:relative;z-index:2}
/* même place que les étiquettes des autres sections : en haut à gauche, sous la lanière qui passe devant */
.credits > .credits-label{position:absolute;top:12vh;left:var(--gutter);z-index:1}

/* la scène du badge : la lanière rouge tombe du haut de la section */
.credits{min-height:700px}
.badge-anchor{align-self:stretch;min-height:700px}
/* la scène couvre toute la section : on peut emmener le badge partout sans qu'il soit coupé */
.badge-stage{position:absolute!important;inset:0;z-index:5!important;pointer-events:none;user-select:none;-webkit-user-select:none}
.badge-stage .badge-card{pointer-events:auto}
.badge-strap{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.badge-card{position:absolute;left:0;top:0;transform-origin:50% 0;cursor:grab;touch-action:none;will-change:transform;outline:none}
.badge-card.is-grabbing{cursor:grabbing}
.badge-card:focus-visible .badge-face{outline:2px solid var(--papier);outline-offset:4px}
.badge-clip{
  position:absolute;left:50%;top:0;z-index:2;width:1.8em;height:3.6em;transform:translateX(-50%);border-radius:.5em;
  background:linear-gradient(90deg,#ecebe7,#8d8a84 50%,#dedcd6);box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.badge-inner{position:absolute;left:0;right:0;transform-style:preserve-3d}
.badge-face{
  position:absolute;inset:0;border-radius:1.2em;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 24px 50px -10px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.45);
}
.badge-back{transform:rotateY(180deg)}
.badge-slot{
  position:absolute;z-index:3;top:1.2em;left:50%;width:4.8em;height:.84em;transform:translateX(-50%);
  border-radius:999px;background:rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
}
/* ombre de tranche et reflet : pilotés par opacité et transform, donc composés par le GPU sans repeindre la carte */
.badge-shade{position:absolute;inset:0;z-index:4;pointer-events:none;background:#000;opacity:var(--lyd-dim,0);will-change:opacity}
.badge-shine{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.badge-shine::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:250%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  /* équivaut à background-position X = var(--lyd-shine) sur une image de 250 % : décalage = -1,5 × X × largeur */
  transform:translateX(calc(var(--lyd-shine,50%) * -0.6));will-change:transform;
}
/* recto : laissez-passer plateau, papier crème */
.badge-front{background:var(--papier);color:var(--encre)}
.bf-head{position:absolute;top:2.8em;left:2em;right:2em;display:flex;justify-content:space-between;align-items:baseline}
.bf-head b{font-family:var(--anton);font-weight:400;font-size:1.5em;letter-spacing:.04em;text-transform:uppercase;color:var(--rouge)}
.bf-head span{font-family:var(--mono);font-size:.8em;letter-spacing:.2em}
.bf-photo{
  position:absolute;top:5.6em;left:2em;width:20em;height:16.6em;object-fit:cover;object-position:50% 30%;
  outline:.2em solid var(--encre);outline-offset:-.2em;pointer-events:none;-webkit-user-drag:none;
}
.bf-id{position:absolute;top:23.3em;left:2em;right:2em}
.bf-id strong{display:block;font-family:var(--anton);font-weight:400;font-size:2.9em;line-height:1;text-transform:uppercase}
.bf-id small{display:block;margin-top:.7em;font-family:var(--mono);font-size:.74em;letter-spacing:.16em;text-transform:uppercase;color:#4a4741}
.bf-foot{position:absolute;left:2em;right:2em;bottom:2em;height:2.4em;display:flex;align-items:flex-end;gap:1.2em}
.bf-code{
  flex:1;height:100%;
  background:repeating-linear-gradient(90deg,var(--encre) 0 .15em,transparent .15em .35em,var(--encre) .35em .62em,transparent .62em .72em,var(--encre) .72em .8em,transparent .8em 1.1em);
}
.bf-foot b{font-family:var(--anton);font-weight:400;font-size:2.1em;line-height:.8;color:var(--rouge)}
/* verso : all access, noir tramé */
.badge-back{background:var(--noir);color:var(--papier)}
.badge-back::before{content:"";position:absolute;inset:0;background:url("../img/halftone.png") center / 40em auto;opacity:.14}
.bb-star{position:absolute;width:15em;height:15em;right:-4.5em;top:3.2em;color:var(--rouge)}
.bb-body{position:absolute;top:4em;left:2em;right:2em}
.bb-body strong{display:block;font-family:var(--anton);font-weight:400;font-size:4.6em;line-height:.86;text-transform:uppercase}
.bb-body i{display:block;width:3em;height:.25em;margin:1.3em 0 1.1em;background:var(--rouge)}
.bb-body li{font-family:var(--mono);font-size:.82em;line-height:2;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-clair)}
.bb-foot{
  position:absolute;left:0;right:0;bottom:0;height:9.4em;padding:1.7em 2em 0;
  background:var(--rouge);color:var(--noir);border-top-left-radius:3em;
}
.bb-foot strong{display:block;font-family:var(--anton);font-weight:400;font-size:2.1em;line-height:1;text-transform:uppercase;margin-bottom:.35em}
.bb-foot span{display:block;font-family:var(--mono);font-size:.74em;line-height:1.8;letter-spacing:.06em}
/* présentation : un grand paragraphe dont les mots s'allument au scroll, un sous-texte, les chiffres */
.credits-main{grid-column:2;padding:8vh 0;display:flex;flex-direction:column;align-items:flex-start;gap:4vh}
.about{max-width:640px;width:100%}
.ab-lead{
  font-family:var(--body);font-weight:500;font-size:clamp(20px,1.95vw,29px);line-height:1.34;letter-spacing:-.012em;
  color:var(--papier);text-wrap:pretty;
}
.ab-lead em{font-style:normal;color:var(--rouge)}
/* mots éteints tant que le scroll ne les a pas atteints (activé par app.js, texte plein sans JS) */
.ab-lead.is-scrub .w{opacity:.16;transition:opacity .35s linear}
.ab-lead.is-scrub .w.on{opacity:1}
.ab-sub{margin-top:3.2vh;max-width:470px;font-size:14px;line-height:1.7;color:var(--gris)}
.ab-num{margin-top:4.5vh;display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:520px}
.ab-num li{padding:0 18px;border-left:1px solid #2a2a2a}
.ab-num li:first-child{padding-left:0;border-left:0}
.ab-num strong{display:block;font-family:var(--anton);font-weight:400;font-size:clamp(30px,2.6vw,40px);line-height:1;color:var(--papier)}
.ab-num strong i{font-style:normal;color:var(--rouge)}
.ab-num span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--gris)}
.about .sr{transition-delay:calc(var(--i, 0) * 90ms)}
@media(max-width:900px){
  .credits{display:block;padding:0 var(--gutter) 8vh}
  .credits{min-height:0}
  .badge-anchor{min-height:0;height:600px}
  .credits-main{padding:2vh 0 0;gap:4vh}
  .ab-lead{font-size:clamp(19px,5.2vw,23px)}
  .ab-num li{padding:0 12px}
}

/* ============================================================
   FILMS — grille simple (animations à venir)
   ============================================================ */
.films{background:var(--papier);padding:12vh var(--gutter) 8vh}
.films-head,.photos-head,.sel-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6vh}
.films-count,.photos-sub,.sel-count{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);text-align:right;line-height:1.8}
.films-grid,.sel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px}
.card{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer}
.card video,.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s var(--ease)}
.card:hover video,.card:hover img{transform:scale(1.03)}
.card .meta{
  position:absolute;z-index:3;left:0;right:0;bottom:0;padding:16px 18px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85));
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
}
.card .meta h3{font-family:var(--anton);font-size:clamp(20px,2.2vw,36px);text-transform:uppercase;color:var(--papier);line-height:.95}
.card .meta span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.card .play{
  position:absolute;z-index:4;top:50%;left:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
  background:var(--rouge);display:grid;place-items:center;opacity:0;transform:scale(.6) rotate(-10deg);transition:.35s var(--ease);
}
.card .play::before{content:"";width:0;height:0;margin-left:5px;border-left:22px solid var(--noir);border-top:13px solid transparent;border-bottom:13px solid transparent}
.card:hover .play{opacity:1;transform:none}
.card[data-lightbox]{cursor:zoom-in}
.grid-more{grid-column:1 / -1;justify-self:end;margin-top:3vh;text-align:right;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);line-height:2}
.grid-more a{color:var(--rouge);border-bottom:1px solid var(--rouge);padding-bottom:2px}
.grid-more a:hover{background:var(--rouge);color:var(--noir)}
.grid-empty{grid-column:1 / -1;padding:8vh 0;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
@media(max-width:900px){
  .films-grid,.sel-grid{grid-template-columns:1fr;gap:40px}
  .films-head,.photos-head,.sel-head{flex-direction:column;align-items:flex-start;gap:10px}
  .films-count,.photos-sub,.sel-count{text-align:left}
  .grid-more{justify-self:start;text-align:left}
}

/* ============================================================
   PHOTOS — quelques images
   ============================================================ */
.photos{background:var(--papier);padding:6vh var(--gutter) 14vh}
.photos[hidden]{display:none}
.photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.photo{position:relative;display:block;aspect-ratio:4/5;background:#000;overflow:hidden;cursor:zoom-in}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.photo:hover img{transform:scale(1.04)}
.photo .cap{position:absolute;left:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.photo::after{content:"";position:absolute;inset:0;background:var(--rouge);mix-blend-mode:multiply;opacity:0;transition:opacity .4s}
.photo:hover::after{opacity:.6}
/* style « Polaroid » choisi dans l'admin : tirage blanc, légende dans la marge, scotch rouge */
.photo.is-polar{background:#fff;padding:10px 10px 38px;overflow:visible;box-shadow:0 18px 40px rgba(20,20,20,.22)}
.photo.is-polar img{height:100%}
.photo.is-polar .cap{left:0;right:0;bottom:12px;text-align:center;color:#333;text-shadow:none}
.photo.is-polar::before{content:"";position:absolute;z-index:3;top:-12px;left:50%;width:84px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(227,23,10,.85)}
.photo.is-polar::after{inset:10px 10px 38px}
@media(max-width:900px){.photos-grid{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ============================================================
   SERVICES — une ligne par métier (accueil et bas de page service)
   ============================================================ */
.services{background:var(--noir);color:var(--gris-clair);padding:12vh 0 12vh;overflow:hidden}
.services .sec-label{padding:0 var(--gutter);margin-bottom:6vh}
.svc-list{border-top:1px solid #262626}
.svc{
  display:grid;grid-template-columns:70px 1fr 1fr auto;align-items:center;gap:24px;
  padding:24px var(--gutter);border-bottom:1px solid #262626;transition:background .3s,padding-left .3s var(--ease);
}
.svc .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gris)}
.svc .name{font-family:var(--anton);font-size:clamp(28px,4vw,56px);text-transform:uppercase;color:var(--papier);line-height:1;transition:.3s}
.svc .desc{font-size:14px;line-height:1.5;color:var(--gris);transition:.3s}
.svc .arrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);white-space:nowrap;transition:.3s}
.svc:hover{background:var(--rouge);padding-left:calc(var(--gutter) + 16px)}
.svc:hover .name,.svc:hover .desc,.svc:hover .num,.svc:hover .arrow{color:var(--noir)}
.svc.is-current{opacity:.4;pointer-events:none}
@media(max-width:900px){
  .svc{grid-template-columns:44px 1fr auto;grid-template-rows:auto auto;gap:8px 14px;padding:20px var(--gutter)}
  .svc .num{grid-area:1 / 1}.svc .name{grid-area:1 / 2}.svc .arrow{grid-area:1 / 3}
  .svc .desc{grid-area:2 / 2 / 3 / 4}
  .svc:hover{padding-left:var(--gutter)}
}

/* ============================================================
   PAGES SERVICES — sélection
   ============================================================ */
.sel{background:var(--papier);padding:12vh var(--gutter) 14vh}
.cat-head{
  grid-column:1 / -1;display:flex;align-items:baseline;gap:18px;margin-top:6vh;padding-bottom:14px;border-bottom:1px solid var(--ligne-papier);
}
.cat-head:first-child{margin-top:0}
.cat-num{font-family:var(--anton);font-size:clamp(40px,5vw,80px);color:var(--rouge);line-height:1}
.cat-head h3{font-family:var(--anton);font-size:clamp(24px,3vw,48px);text-transform:uppercase;color:var(--encre);line-height:.95}
.cat-count{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.services.next .sec-label span{color:var(--gris);margin-left:auto;letter-spacing:.14em}
.services.next .sec-label a{color:var(--gris)}
.services.next .sec-label a:hover{color:var(--papier)}
@media(max-width:900px){.cat-head{flex-wrap:wrap;gap:10px 14px}.cat-count{flex-basis:100%;margin-left:0}}

/* ============================================================
   CONTACT — le CTA d'origine : grand titre, étoile qui tourne, formulaire
   ============================================================ */
.contact{background:var(--noir);color:var(--gris-clair);padding:12vh var(--gutter) 10vh;overflow:hidden;border-top:1px solid #1a1a1a}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/halftone.png") right top / 1000px auto;opacity:.07;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000);mask-image:linear-gradient(90deg,transparent 35%,#000);
}
.contact > *{position:relative;z-index:2}
.contact .sec-label{margin-bottom:6vh}
.contact-title{
  font-family:var(--anton);font-weight:400;text-transform:uppercase;
  font-size:clamp(64px,12vw,200px);line-height:.94;color:var(--papier);
}
.contact-title a{color:var(--rouge);display:table;margin-top:.17em;transform-origin:0 100%;transition:color .25s,-webkit-text-stroke .25s,transform .35s var(--ease)}
.contact-title a:hover{color:transparent;-webkit-text-stroke:3px var(--rouge);transform:skewX(-5deg)}
.contact .spark-contact{
  position:absolute;z-index:1;width:clamp(130px,17vw,250px);aspect-ratio:1;right:var(--gutter);top:10vh;
  animation:spin 30s linear infinite reverse;will-change:transform;
}
@keyframes spin{to{transform:rotate(360deg)}}

.contact-grid{margin-top:8vh;display:grid;grid-template-columns:5fr 7fr;gap:6vw;align-items:start}
.contact-sub{
  max-width:420px;font-size:16px;line-height:1.65;color:var(--gris-clair);
  border-left:3px solid var(--rouge);padding-left:18px;
}
.contact-mail-row{margin-top:5vh;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.contact-mail{
  font-family:var(--mono);font-size:clamp(14px,1.5vw,19px);letter-spacing:.04em;color:var(--papier);
  border-bottom:2px solid var(--rouge);padding-bottom:5px;transition:background .25s,color .25s;
}
.contact-mail:hover{background:var(--rouge);color:var(--noir)}
.contact-copy{
  border:1px solid #333;border-radius:999px;background:transparent;color:var(--gris);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;
  transition:border-color .25s,color .25s,background .25s;
}
.contact-copy:hover{border-color:var(--papier);color:var(--papier)}
.contact-copy.is-done{background:var(--rouge);border-color:var(--rouge);color:var(--noir)}
.contact-copy:focus-visible{outline:2px solid var(--papier);outline-offset:2px}
.contact-coords{margin-top:5vh;font-family:var(--mono);font-size:11px;line-height:2.1;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.contact-coords a{color:var(--rouge);font-weight:500}
.contact-coords a:hover{color:var(--papier)}

/* formulaire : carte vitrée, libellés flottants, soulignement rouge qui se déploie au focus */
.contact-form{
  padding:32px 32px 26px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cf-trap{display:none}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.cf-field{position:relative;display:block;margin-bottom:26px;padding-top:16px}
.cf-field input,.cf-field textarea{
  display:block;width:100%;padding:10px 0 9px;background:transparent;border:0;border-radius:0;
  border-bottom:1px solid #3a3a3a;color:var(--papier);font-family:var(--body);font-size:17px;line-height:1.45;
  background-image:linear-gradient(var(--rouge),var(--rouge));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s var(--ease),border-color .25s;
}
.cf-field textarea{resize:vertical;min-height:112px}
.cf-field input:focus,.cf-field textarea:focus{outline:none;background-size:100% 2px;border-bottom-color:transparent}
.cf-field span{
  position:absolute;left:0;top:26px;pointer-events:none;transform-origin:0 0;
  font-family:var(--body);font-size:16px;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  transition:transform .3s var(--ease),color .3s,font-size .3s;
}
/* champ rempli ou actif : le libellé monte et passe en mono */
.cf-field input:focus + span,.cf-field input:not(:placeholder-shown) + span,
.cf-field textarea:focus + span,.cf-field textarea:not(:placeholder-shown) + span{
  transform:translateY(-26px);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
}
.cf-field input:focus + span,.cf-field textarea:focus + span{color:var(--rouge)}
.cf-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.contact-form button{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--rouge);color:var(--noir);border:0;border-radius:10px;padding:15px 26px;cursor:pointer;
  font-family:var(--anton);font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  transition:background .25s,transform .35s var(--ease);
}
.contact-form button:hover{background:var(--papier);transform:translateY(-2px)}
.contact-form button:focus-visible{outline:2px solid var(--papier);outline-offset:3px}
.contact-form button:disabled{opacity:.5;cursor:wait;transform:none}
.cf-status{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);line-height:1.8}
.cf-status:empty{display:none}
.cf-status.is-error{color:var(--rouge)}
.cf-status a{color:var(--papier);border-bottom:1px solid var(--rouge)}
.contact-form.is-sent .cf-status{color:var(--papier)}
@media(max-width:900px){
  .contact{padding:10vh var(--gutter) 8vh}
  .contact .spark-contact{top:auto;bottom:40%;opacity:.35}
  .contact-grid{grid-template-columns:1fr;gap:6vh;margin-top:6vh}
  .contact-form{padding:24px 18px 20px}
}
@media(max-width:600px){.cf-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.contact .spark-contact{animation:none}}

/* ---------- FOOTER ---------- */
footer{
  background:var(--noir);color:#666;padding:26px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.madaria-link{display:inline-block;line-height:0;transition:transform .3s var(--ease)}
.madaria-link:hover{transform:scale(1.05)}
.madaria{display:block;height:52px;width:auto;transform:rotate(-2deg)}
footer .up{color:var(--gris)}footer .up:hover{color:var(--rouge)}

/* ---------- LECTEUR VIDÉO — barre de contrôle vitrée ---------- */
.player{
  border:0;padding:0;margin:auto;background:transparent;color:#fff;overflow:visible;
  width:min(1200px,94vw);max-width:none;max-height:none;
}
.player::backdrop{background:rgba(6,6,6,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.player[open]{animation:pl-in .45s var(--ease)}
@keyframes pl-in{from{opacity:0;transform:scale(.97) translateY(12px)}}
.pl-frame{position:relative;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.pl-frame video{display:block;width:100%;max-height:88dvh;object-fit:contain;background:#000;cursor:pointer}
.pl-frame:fullscreen{border-radius:0;display:flex;align-items:center}
.pl-frame:fullscreen video{max-height:100vh;height:100vh}
.pl-bar{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(720px,calc(100% - 32px));padding:14px 18px 12px;border-radius:16px;
  background:rgba(28,28,28,.42);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.pl-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.pl-time{font-family:var(--body);font-size:14px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.92);min-width:2.6em}
.pl-dur{text-align:right}
.pl-ctrl{display:flex;align-items:center;gap:4px;margin-top:10px}
.pl-btn{
  display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;
  background:transparent;color:#fff;cursor:pointer;transition:background .2s;
}
.pl-btn svg{width:22px;height:22px}
.pl-btn:hover{background:rgba(255,255,255,.12)}
.pl-btn:focus-visible,.pl-speeds button:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* curseurs : piste fine, remplissage blanc via --p, pastille au survol */
.pl-range{
  -webkit-appearance:none;appearance:none;height:16px;background:transparent;cursor:pointer;margin:0;
  --p:0%;
}
.pl-range::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.28) var(--p))}
.pl-range::-moz-range-track{height:4px;border-radius:99px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.28) var(--p))}
.pl-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-4.5px;border-radius:50%;background:#fff;border:0;transform:scale(0);transition:transform .2s}
.pl-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:0;transform:scale(0);transition:transform .2s}
.pl-range:hover::-webkit-slider-thumb,.pl-range:focus-visible::-webkit-slider-thumb{transform:scale(1)}
.pl-range:hover::-moz-range-thumb,.pl-range:focus-visible::-moz-range-thumb{transform:scale(1)}
.pl-range:focus-visible{outline:none}
.pl-seek{width:100%}
.pl-vol{width:120px;margin-left:4px}
.pl-speeds{display:flex;gap:2px;margin-left:auto}
.pl-speeds button{
  border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer;
  font-family:var(--body);font-size:15px;font-variant-numeric:tabular-nums;padding:10px 14px;transition:background .2s;
}
.pl-speeds button:hover{background:rgba(255,255,255,.1)}
.pl-speeds button[aria-pressed="true"]{background:rgba(0,0,0,.42)}
.pl-full{margin-left:6px}
.pl-close{
  position:absolute;top:14px;right:14px;z-index:2;border-radius:50%;
  background:rgba(28,28,28,.42);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:opacity .35s var(--ease),background .2s;
}
.pl-close:hover{background:var(--rouge)}
.player .video-error{position:absolute;left:0;right:0;top:40%;text-align:center;padding:18px;font:14px var(--body);color:#fff}
/* inactif pendant la lecture : barre et bouton fermer s'effacent, le curseur aussi */
.player.is-idle .pl-bar{opacity:0;transform:translate(-50%,12px);pointer-events:none}
.player.is-idle .pl-close{opacity:0;pointer-events:none}
.player.is-idle .pl-frame video{cursor:none}
@media(max-width:640px){
  .player{width:100vw}
  .pl-frame{border-radius:0}
  /* sur petit écran la barre passe sous l'image, toujours visible (pas de survol au doigt) */
  .pl-bar{position:static;transform:none;width:auto;margin:8px;padding:10px 12px 8px;border-radius:12px;background:rgba(255,255,255,.06)}
  .player.is-idle .pl-bar,.player.is-idle .pl-close{opacity:1;transform:none;pointer-events:auto}
  .pl-line{gap:10px}.pl-time{font-size:12px}
  .pl-vol{display:none}
  .pl-speeds button{font-size:12px;padding:8px 8px}
  .pl-btn{width:36px;height:36px}.pl-btn svg{width:20px;height:20px}
  .pl-close{top:10px;right:10px}
}
@media(prefers-reduced-motion:reduce){.player[open]{animation:none}}

/* ---------- VISIONNEUSE PHOTO — même langage que le lecteur ---------- */
.viewer{
  border:0;padding:0;margin:0;background:transparent;color:#fff;
  width:100vw;height:100dvh;max-width:none;max-height:none;overflow:hidden;
}
.viewer::backdrop{background:rgba(6,6,6,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.viewer[open]{animation:pl-fade .35s var(--ease)}
@keyframes pl-fade{from{opacity:0}}
.vw-stage{position:absolute;inset:0;margin:0;display:grid;place-items:center}
.vw-img{
  max-width:calc(100vw - 192px);max-height:calc(100dvh - 168px);width:auto;height:auto;object-fit:contain;border-radius:14px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none;
  opacity:0;transform:translateX(var(--dx,0)) scale(.985);transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.vw-img.is-in{opacity:1;transform:none}
.vw-bar{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;align-items:center;gap:18px;max-width:calc(100% - 32px);
  padding:11px 18px;border-radius:14px;
  background:rgba(28,28,28,.42);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  font-family:var(--body);font-size:14px;color:rgba(255,255,255,.92);
}
.vw-bar[hidden]{display:none}
.vw-cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-cap:empty{display:none}
.vw-count{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.6)}
.vw-count:empty{display:none}
.vw-close,.vw-nav{
  position:absolute;z-index:2;border-radius:50%;width:44px;height:44px;
  background:rgba(28,28,28,.42);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.vw-close{top:18px;right:18px}
.vw-close:hover{background:var(--rouge)}
.vw-nav{top:50%;transform:translateY(-50%)}
.vw-prev{left:24px}.vw-next{right:24px}
.vw-nav:hover{background:rgba(255,255,255,.16)}
.viewer.is-single .vw-nav{display:none}
@media(max-width:640px){
  .vw-img{border-radius:0;max-width:100vw;max-height:calc(100dvh - 160px)}
  .vw-nav{top:auto;bottom:22px;transform:none;width:40px;height:40px}
  .vw-prev{left:12px}.vw-next{right:12px}
  .vw-bar{bottom:22px;max-width:calc(100% - 120px);font-size:12px;padding:10px 14px}
  .vw-close{top:12px;right:12px}
}
@media(prefers-reduced-motion:reduce){.viewer[open]{animation:none}.vw-img{transition:none}}

/* ---------- BANDEAU D'APERÇU (admin) ---------- */
.admin-preview-banner{position:fixed;bottom:0;left:0;right:0;background:#d6f46b;color:#181916;z-index:3000;padding:14px 22px;font:12px/1.5 var(--body);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;box-shadow:0 -3px 20px #0003}
.admin-preview-banner a{text-decoration:underline}