/* ==========================================================
   ACCUEIL — styles propres à la page d'accueil
   Le site est une salle de projection : viseur en héro, bobine horizontale
   pour les travaux, plans numérotés, générique en pied.
   Couleurs et police : variables :root de style.css.
   ========================================================== */

.section{padding-block:clamp(72px,10vw,140px);}

/* HERO : viseur */
.hero{position:relative; height:clamp(580px,92svh,900px); overflow:hidden; background:var(--nuit);}
.hero .bg{position:absolute; inset:0; background:url(../images/hero-showreel.jpg) center 40%/cover; animation:focus 2.2s ease-out both,drift 24s ease-in-out 2.2s infinite alternate;}
@keyframes focus{from{filter:blur(10px); transform:scale(1.08);} to{filter:blur(0); transform:scale(1.03);}}
@keyframes drift{from{transform:scale(1.03);} to{transform:scale(1.09) translateX(-1.5%);}}
.hero:after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,9,15,.88) 0%,rgba(7,9,15,.35) 55%,rgba(7,9,15,.1)),linear-gradient(0deg,rgba(7,9,15,.7),transparent 40%);}
.hero .lb{position:absolute; left:0; right:0; height:9%; background:#000; z-index:2;}
.hero .lb.t{top:0;}
.hero .lb.b{bottom:0;}
.vf{position:absolute; inset:14% 5% 14%; z-index:3; pointer-events:none;}
.vf i{position:absolute; width:42px; height:42px; border:0 solid rgba(246,241,233,.7);}
.vf i:nth-child(1){top:0; left:0; border-width:2px 0 0 2px;}
.vf i:nth-child(2){top:0; right:0; border-width:2px 2px 0 0;}
.vf i:nth-child(3){bottom:0; left:0; border-width:0 0 2px 2px;}
.vf i:nth-child(4){bottom:0; right:0; border-width:0 2px 2px 0;}
.hud{position:absolute; left:5%; right:5%; z-index:4; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:500;}
.hud.t{top:calc(9% + 18px);}
.hud.b{bottom:calc(9% + 18px);}
.rec{display:inline-flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.18em;}
.rec i{width:10px; height:10px; border-radius:50%; background:var(--accent); animation:blink 1.2s steps(2,start) infinite;}
@keyframes blink{to{opacity:.15;}}
.hero .copy{position:absolute; z-index:4; left:var(--gutter); right:var(--gutter); bottom:calc(9% + 70px); max-width:1320px; margin:0 auto;}
.hero h1{font-size:clamp(46px,9.6vw,150px); line-height:.86; font-weight:800; text-transform:uppercase; letter-spacing:-.015em;}
.hero h1 .o{color:transparent; -webkit-text-stroke:2px var(--ivoire);}
.hero p.sub{margin-top:22px; max-width:46ch; font-size:clamp(16px,1.6vw,19px); color:#D8DBE6;}
.hero .ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
@media (max-width:640px){
  .hud .hide{display:none;}
  .hero .copy{bottom:calc(9% + 56px);}
}

/* BANDEAU DÉFILANT */
.ticker{border-block:1px solid #1F2640; overflow:hidden; background:var(--noir);}
.ticker > div{display:flex; width:max-content; animation:tk 40s linear infinite;}
.ticker span{padding:18px 0; font-size:clamp(22px,3vw,40px); font-weight:700; text-transform:uppercase; white-space:nowrap;}
.ticker span em{font-style:normal; color:var(--indigo-clair); margin:0 .6em;}
@keyframes tk{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){ .hero .bg,.ticker > div,.rec i{animation:none;} }

/* TITRES DE SECTION */
.head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px);}
.head h2{margin-top:8px; font-size:clamp(36px,6vw,88px); line-height:.9; font-weight:800; text-transform:uppercase; letter-spacing:-.01em;}

/* MANIFESTE */
.manif-text{margin-top:20px; font-size:clamp(28px,4.4vw,64px); line-height:1.08; font-weight:300; max-width:22ch; text-wrap:balance;}
.manif-text b{font-weight:700;}
.manif-text em{font-style:normal; color:var(--indigo-clair); font-weight:700;}
.manif .sig{display:flex; gap:40px; flex-wrap:wrap; margin-top:48px; color:var(--gris); font-size:15px; max-width:900px;}
.manif .sig div{flex:1 1 240px; border-top:1px solid var(--ligne); padding-top:14px;}
.manif .sig b{display:block; color:var(--ivoire); font-size:17px; margin-bottom:4px;}

/* TRAVAUX : bobine */
.travaux{padding-bottom:0;}
.reel{background:#000; padding-block:26px; position:relative;}
.reel:before,.reel:after{content:""; position:absolute; left:0; right:0; height:14px; background:repeating-linear-gradient(90deg,transparent 0 14px,#2A2F3F 14px 30px,transparent 30px 44px); opacity:.9;}
.reel:before{top:6px;}
.reel:after{bottom:6px;}
.strip{list-style:none; padding:0 var(--gutter); display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;}
.strip::-webkit-scrollbar{display:none;}
.frame{flex:0 0 clamp(250px,28vw,380px); scroll-snap-align:start; outline:none;}
.frame .pic{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--nuit);}
.frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .5s,transform .8s;}
.frame img.c{opacity:0;}
.frame:hover img.c,.frame:focus-visible img.c{opacity:1;}
.frame:hover img,.frame:focus-visible img{transform:scale(1.04);}
.frame:focus-visible .pic{outline:2px solid var(--accent); outline-offset:3px;}
.fn{position:absolute; left:12px; top:12px; z-index:1; font-size:11px; font-weight:600; letter-spacing:.18em; background:rgba(7,9,15,.7); padding:5px 8px;}
.frame .meta{padding:14px 2px 4px; display:grid; gap:2px;}
.frame .meta b{font-weight:600; font-size:17px;}
.frame .meta span{color:var(--gris); font-size:14px;}
.reelnav{display:flex; gap:10px;}
.reelnav button{width:48px; height:48px; border:1px solid #3A4260; font-size:18px;}
.reelnav button:hover{background:var(--ivoire); color:var(--noir);}
.reel-hint{padding-top:20px;}

/* SERVICES */
.serv ul{list-style:none; border-top:1px solid var(--ligne);}
.serv li{border-bottom:1px solid var(--ligne);}
.serv summary{list-style:none; display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:16px; padding:26px 0; cursor:pointer;}
.serv summary::-webkit-details-marker{display:none;}
.sn{color:var(--indigo-clair); font-weight:600; font-variant-numeric:tabular-nums;}
.st{font-size:clamp(26px,4.2vw,58px); font-weight:700; text-transform:uppercase; line-height:1; transition:color .2s,letter-spacing .3s;}
.serv summary:hover .st{color:var(--indigo-clair); letter-spacing:.01em;}
.pl{font-size:32px; font-weight:300; transition:transform .3s;}
details[open] .pl{transform:rotate(45deg); color:var(--accent);}
.sd{display:grid; grid-template-columns:70px 1fr; gap:16px; padding:0 0 30px;}
.sd p{grid-column:2; max-width:56ch; color:#C9CDDA;}
.sd .dl{color:var(--gris); font-size:14px; letter-spacing:.06em; margin-top:8px;}
@media (max-width:560px){
  .serv summary{grid-template-columns:40px 1fr auto;}
  .sd{grid-template-columns:40px 1fr;}
}

/* MÉTHODE */
.method{background:var(--nuit);}
.method ol{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); position:relative;}
.method li{padding:26px 20px 26px 0; border-top:2px solid #2B3456; position:relative;}
.method li:before{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--indigo-clair);}
.method li:last-child:before{background:var(--accent);}
.tcs{display:block; font-size:13px; color:var(--gris); letter-spacing:.14em; font-variant-numeric:tabular-nums;}
.method b{display:block; font-size:22px; margin:6px 0 8px; text-transform:uppercase;}
.method p{color:#C9CDDA; font-size:15.5px;}

/* LE PLATEAU */
.stage{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,64px); align-items:center;}
.stage .ph{position:relative; aspect-ratio:3/2; overflow:hidden;}
.stage .ph img{width:100%; height:100%; object-fit:cover;}
.stage .ph .vf{inset:8%;}
.stage h2{font-size:clamp(34px,5vw,72px); line-height:.92; margin:10px 0 18px; font-weight:800; text-transform:uppercase;}
.stage p{margin-bottom:14px; color:#C9CDDA; max-width:48ch;}
@media (max-width:820px){ .stage{grid-template-columns:1fr;} }

/* TÉMOIGNAGES */
.temoignages{padding-top:0;}
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:clamp(24px,3vw,48px);}
.quotes blockquote{border-left:2px solid var(--indigo-clair); padding-left:24px;}
.quotes p{font-size:clamp(20px,2.2vw,28px); line-height:1.3; font-weight:300;}
.quotes cite{display:block; margin-top:16px; font-style:normal; color:var(--gris); font-size:14px; letter-spacing:.12em; text-transform:uppercase;}

/* CONTACT */
.contact{background:var(--indigo);}
.cgrid{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(28px,5vw,80px);}
@media (max-width:900px){ .cgrid{grid-template-columns:1fr;} }
.contact h2{font-size:clamp(40px,6.4vw,96px); line-height:.88; margin:10px 0 22px; font-weight:800; text-transform:uppercase;}
.contact .label{color:#C9CFE4;}
.contact-intro{max-width:40ch; color:#E3E6F0;}
.coord{display:grid; gap:14px; margin-top:28px;}
.coord > div{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:20px; font-weight:500;}
.coord button{border:1px solid rgba(246,241,233,.5); font-size:12px; letter-spacing:.12em; padding:6px 10px;}
.brief{display:grid; gap:22px;}
.brief fieldset{border:0; display:grid; gap:10px;}
.brief legend{padding:0; margin-bottom:10px;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chips input{position:absolute; opacity:0; pointer-events:none;}
.chips label{border:1px solid rgba(246,241,233,.5); padding:10px 14px; font-size:15px; cursor:pointer; transition:background .15s;}
.chips input:checked + label{background:var(--ivoire); color:var(--indigo); border-color:var(--ivoire); font-weight:600;}
.chips input:focus-visible + label{outline:2px solid var(--accent); outline-offset:2px;}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .f2{grid-template-columns:1fr;} }
.fld{display:grid; gap:6px;}
.fld span{font-size:13px; color:#C9CFE4;}
.fld input,.fld textarea{background:rgba(7,9,15,.25); border:1px solid rgba(246,241,233,.35); border-radius:2px; color:var(--ivoire); font:inherit; padding:12px 14px;}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent;}
.brief .btn.primary{cursor:pointer;}
.out{background:var(--noir); padding:18px; font-size:15px; display:grid; gap:12px;}
.out[hidden]{display:none;}
.out p{color:#C9CDDA;}