/* ═══════════════════════════════════════════════════
   DISTRACT — feuille de style
   (tu n'as normalement pas besoin de toucher ce fichier)
   ═══════════════════════════════════════════════════ */

:root{
  --noir:    #0B0B0C;
  --noir-2:  #121215;
  --noir-3:  #18181C;
  --ligne:   rgba(255,255,255,.10);
  --ligne-2: rgba(255,255,255,.18);
  --txt:     #F3F2EF;
  --txt-2:   rgba(243,242,239,.56);
  --txt-3:   rgba(243,242,239,.34);
  --accent:  #FF4524;

  --max: 1240px;
  --pad: clamp(20px, 5vw, 56px);
  --r:   14px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }

/* un element marque [hidden] doit TOUJOURS rester invisible */
[hidden]{ display:none !important }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--noir);
  color:var(--txt);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ font-family:'Inter Tight', 'Inter', sans-serif; font-weight:600; margin:0; line-height:1.04; letter-spacing:-.025em }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

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

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

.conteneur{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad) }

.saut{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.saut:focus{ left:0 }

/* ───────────────────────── BARRE DU HAUT ───────────────────────── */

.barre{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.barre.colle{
  background:rgba(11,11,12,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--ligne);
}
.barre__in{
  display:flex; align-items:center; gap:24px;
  height:68px;
}

.logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Inter Tight', sans-serif; font-weight:700;
  font-size:15.5px; letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap;
}
@media (max-width:420px){ .logo{ font-size:14px; letter-spacing:.08em } }
.logo__point{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px var(--accent);
  flex:none;
}
.logo--sm{ font-size:13.5px }

.menu{ display:flex; gap:30px; margin-left:auto }
.menu a{
  font-size:14.5px; color:var(--txt-2);
  transition:color .2s; position:relative; padding:4px 0;
}
.menu a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .3s var(--ease);
}
.menu a:hover{ color:var(--txt) }
.menu a:hover::after{ width:100% }

.burger{ display:none; margin-left:auto; width:40px; height:40px; position:relative }
.burger span{
  position:absolute; left:9px; width:22px; height:1.5px; background:var(--txt);
  transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:17px }
.burger span:nth-child(2){ top:23px }
.burger.ouvert span:nth-child(1){ transform:translateY(3px) rotate(45deg) }
.burger.ouvert span:nth-child(2){ transform:translateY(-3px) rotate(-45deg) }

.menu-mob{
  display:none;
  background:rgba(11,11,12,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--ligne);
  padding:8px var(--pad) 22px;
}
.menu-mob.ouvert{ display:block }
.menu-mob a{
  display:block; padding:14px 0;
  font-family:'Inter Tight',sans-serif; font-size:21px; font-weight:500; letter-spacing:-.02em;
  border-bottom:1px solid var(--ligne);
}
.menu-mob a:last-child{ border:0; color:var(--accent) }

@media (max-width:860px){
  .menu, .barre__in .btn{ display:none }
  .burger{ display:block }
}

/* ───────────────────────────── BOUTONS ───────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px;
  font-family:'Inter Tight',sans-serif; font-size:15px; font-weight:500; letter-spacing:-.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:active{ transform:scale(.97) }
.btn--sm{ padding:10px 20px; font-size:14px }

.btn--plein{ background:var(--txt); color:var(--noir) }
.btn--plein:hover{ background:var(--accent); color:#fff }

.btn--vide{ border-color:var(--ligne-2); color:var(--txt) }
.btn--vide:hover{ border-color:var(--txt); background:rgba(255,255,255,.05) }

.btn__play{
  width:9px; height:11px; flex:none;
  background:currentColor;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

/* ────────────────────────────── HERO ────────────────────────────── */

.hero{
  position:relative;
  padding:clamp(140px, 22vh, 210px) 0 0;
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; z-index:0;
  top:-25%; left:50%; transform:translateX(-50%);
  width:min(1100px,130vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,69,36,.10) 0%, rgba(255,69,36,.03) 38%, transparent 68%);
  pointer-events:none;
}
.hero__film{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:var(--noir) url("images/affiche.jpg") center/cover no-repeat;
}
.hero__film video{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity 1.6s var(--ease);
  filter:saturate(.88) contrast(1.06);
}
.hero__film video.visible{ opacity:1 }

/* voile : sans lui, le texte devient illisible sur l'image */
.hero__voile{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,11,12,.96) 0%, rgba(11,11,12,.86) 38%, rgba(11,11,12,.52) 100%),
    linear-gradient(to bottom, rgba(11,11,12,.88) 0%, transparent 26%, transparent 62%, rgba(11,11,12,.96) 100%);
}
@media (max-width:860px){
  .hero__voile{
    background:linear-gradient(to bottom, rgba(11,11,12,.9) 0%, rgba(11,11,12,.74) 38%, rgba(11,11,12,.97) 100%);
  }
}

.hero__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.4;
  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)' opacity='.055'/%3E%3C/svg%3E");
}
.hero .conteneur{ position:relative; z-index:2 }

.eyebrow{
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:26px;
}

.hero__titre{
  font-size:clamp(2.6rem, 8.2vw, 6.1rem);
  max-width:17ch;
  margin-bottom:30px;
}
.hero__titre em{
  font-style:normal; color:var(--accent);
}

.hero__texte{
  font-size:clamp(1.02rem, 2.1vw, 1.2rem);
  color:var(--txt-2); max-width:46ch; margin-bottom:40px;
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:14px;
  padding-bottom:clamp(80px,13vh,130px);
}

.bandeau{
  border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
  overflow:hidden; padding:17px 0; position:relative; z-index:2;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.bandeau__piste{
  display:flex; gap:44px; width:max-content;
  animation:defile 42s linear infinite;
}
.bandeau__piste span{
  font-family:'Inter Tight',sans-serif; font-size:13.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--txt-3);
  display:inline-flex; align-items:center; gap:44px; white-space:nowrap;
}
.bandeau__piste span::after{
  content:''; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.6;
}
@keyframes defile{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .bandeau__piste{ animation:none } }

/* ───────────────────────────── SECTIONS ──────────────────────────── */

.section{ padding:clamp(76px,11vw,132px) 0 }
.section--bord{ border-top:1px solid var(--ligne) }

.tete{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 26px;
  margin-bottom:40px;
}
.titre2{ font-size:clamp(1.95rem,5vw,3.1rem) }
.tete__note{ color:var(--txt-3); font-size:15px }

/* ───────────────────────────── FILTRES ───────────────────────────── */

.filtres{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:34px }
.puce{
  padding:9px 19px; border-radius:100px;
  border:1px solid var(--ligne); color:var(--txt-2);
  font-size:14px; transition:all .22s var(--ease);
}
.puce:hover{ border-color:var(--ligne-2); color:var(--txt) }
.puce.actif{ background:var(--txt); border-color:var(--txt); color:var(--noir) }

/* ────────────────────────── GRILLE TRAVAUX ───────────────────────── */

.grille{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%,330px), 1fr));
  gap:clamp(14px,2vw,22px);
}

.projet{
  grid-column:span 1;
  border:1px solid var(--ligne);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--noir-2);
  cursor:pointer;
  text-align:left; width:100%; padding:0; display:block;
  transition:border-color .3s var(--ease), transform .4s var(--ease);
  animation:monte .5s var(--ease) both;
}
.projet:hover{ border-color:var(--ligne-2); transform:translateY(-4px) }
.projet--vedette{ grid-column:span 2 }
@media (max-width:760px){ .projet--vedette{ grid-column:span 1 } }

@keyframes monte{ from{ opacity:0; transform:translateY(16px) } }
@media (prefers-reduced-motion:reduce){ .projet{ animation:none } }

.projet__media{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--noir-3);
}
.projet__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), opacity .4s;
  opacity:0;
}
.projet__media img.chargee{ opacity:1 }
.projet:hover .projet__media img{ transform:scale(1.045) }

.projet__voile{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,11,12,.72) 0%, transparent 55%);
  opacity:0; transition:opacity .35s var(--ease);
}
.projet:hover .projet__voile{ opacity:1 }

.projet__play{
  position:absolute; inset:0; margin:auto;
  width:54px; height:54px; border-radius:50%;
  background:rgba(243,242,239,.94);
  display:grid; place-items:center;
  opacity:0; transform:scale(.8);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.projet__play::before{
  content:''; width:13px; height:15px; margin-left:3px;
  background:var(--noir); clip-path:polygon(0 0,100% 50%,0 100%);
}
.projet:hover .projet__play{ opacity:1; transform:scale(1) }

.projet__badge{
  position:absolute; top:12px; left:12px;
  padding:5px 11px; border-radius:100px;
  background:rgba(11,11,12,.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--ligne);
  font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt);
}

.projet__bas{ padding:19px 20px 21px }
.projet__haut{ display:flex; justify-content:space-between; align-items:baseline; gap:14px }
.projet__titre{
  font-family:'Inter Tight',sans-serif; font-size:19px; font-weight:600; letter-spacing:-.02em;
}
.projet__annee{ font-size:12.5px; color:var(--txt-3); flex:none; font-variant-numeric:tabular-nums }
.projet__client{ font-size:14px; color:var(--txt-2); margin-top:3px }
.projet__role{ font-size:12.5px; color:var(--txt-3); margin-top:11px; line-height:1.5 }

.vide{ color:var(--txt-3); padding:30px 0 }

/* ───────────────────────────── SERVICES ─────────────────────────── */

.cartes{
  display:grid; gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,290px), 1fr));
}
.carte{
  border:1px solid var(--ligne); border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
  background:linear-gradient(170deg, var(--noir-2), var(--noir));
  transition:border-color .3s var(--ease);
}
.carte:hover{ border-color:var(--ligne-2) }
.carte__num{
  font-family:'Inter Tight',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.14em; color:var(--accent); display:block; margin-bottom:18px;
}
.carte h3{ font-size:1.42rem; margin-bottom:13px }
.carte p{ color:var(--txt-2); font-size:15px }

.liste{ margin-top:22px; border-top:1px solid var(--ligne); padding-top:6px }
.liste li{
  font-size:14px; color:var(--txt-2);
  padding:10px 0 10px 17px; position:relative;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.liste li:last-child{ border:0 }
.liste li::before{
  content:''; position:absolute; left:0; top:18px;
  width:5px; height:1px; background:var(--accent);
}

/* ────────────────────────────── STUDIO ──────────────────────────── */

.duo{
  display:grid; gap:clamp(40px,6vw,76px);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .duo{ grid-template-columns:1.05fr .95fr; align-items:start } }

.duo .titre2{ margin-bottom:24px }
.prose{ color:var(--txt-2); font-size:clamp(1rem,1.7vw,1.1rem); margin-bottom:18px; max-width:52ch }

.lien-fort{
  display:inline-block; margin-top:14px;
  font-family:'Inter Tight',sans-serif; font-size:16px; font-weight:500;
  border-bottom:1px solid var(--accent); padding-bottom:3px;
  transition:color .25s, gap .25s;
}
.lien-fort:hover{ color:var(--accent) }

.etapes{ counter-reset:e }
.etapes li{
  counter-increment:e;
  border-top:1px solid var(--ligne);
  padding:22px 0 22px 52px; position:relative;
}
.etapes li:last-child{ border-bottom:1px solid var(--ligne) }
.etapes li::before{
  content:'0' counter(e);
  position:absolute; left:0; top:22px;
  font-family:'Inter Tight',sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.1em; color:var(--txt-3); font-variant-numeric:tabular-nums;
}
.etapes h3{ font-size:1.14rem; margin-bottom:6px }
.etapes p{ color:var(--txt-2); font-size:14.5px }

/* ────────────────────────────── CONTACT ─────────────────────────── */

.contact{ text-align:center; position:relative; overflow:hidden }
.contact::before{
  content:''; position:absolute; z-index:0;
  bottom:-45%; left:50%; transform:translateX(-50%);
  width:min(900px,120vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,69,36,.13) 0%, transparent 62%);
  pointer-events:none;
}
.contact .conteneur{ position:relative; z-index:1 }
.contact__titre{ font-size:clamp(2.1rem,6.4vw,4.2rem); margin-bottom:24px }
.contact__texte{ color:var(--txt-2); max-width:44ch; margin:0 auto 44px; font-size:1.04rem }

.mail{
  display:inline-block;
  font-family:'Inter Tight',sans-serif; font-weight:500;
  font-size:clamp(1.15rem,3.6vw,2rem); letter-spacing:-.025em;
  padding-bottom:7px; border-bottom:1px solid var(--ligne-2);
  transition:color .25s, border-color .25s;
  word-break:break-word;
}
.mail:hover{ color:var(--accent); border-color:var(--accent) }

.reseaux{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:46px }
.reseaux a{
  padding:10px 20px; border-radius:100px; border:1px solid var(--ligne);
  font-size:14px; color:var(--txt-2);
  transition:all .25s var(--ease);
}
.reseaux a:hover{ border-color:var(--txt); color:var(--txt) }

/* ─────────────────────────────── PIED ───────────────────────────── */

.pied{ border-top:1px solid var(--ligne); padding:30px 0 }
.pied__in{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
}
.pied__note{ font-size:13px; color:var(--txt-3) }

/* ────────────────────────── LECTEUR VIDÉO ───────────────────────── */

.boite{
  position:fixed; inset:0; z-index:150;
  background:rgba(5,5,6,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; padding:var(--pad);
  animation:fondu .28s var(--ease);
}
@keyframes fondu{ from{ opacity:0 } }

.boite__cadre{
  width:100%; max-width:1120px; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 40px 110px rgba(0,0,0,.7);
}
.boite__cadre iframe{ width:100%; height:100%; border:0; display:block }

.boite__fermer{
  position:absolute; top:max(18px,3vh); right:max(18px,3vw);
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--ligne); background:rgba(255,255,255,.05);
  font-size:27px; line-height:1; color:var(--txt);
  display:grid; place-items:center;
  transition:background .2s, border-color .2s;
}
.boite__fermer:hover{ background:rgba(255,255,255,.12); border-color:var(--txt) }

/* ─────────── APPEL VERS LA CHAINE, SOUS LA GRILLE ─────────── */

.apres-grille{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center; margin-top:clamp(40px,6vw,64px);
  padding-top:clamp(36px,5vw,52px); border-top:1px solid var(--ligne);
}
.apres-grille p{ color:var(--txt-3); font-size:15px }

/* ───────────── EMPLACEMENT PAS ENCORE REMPLI ───────────── */

.projet--libre{ border-style:dashed; cursor:default }
.projet--libre:hover{ transform:none; border-color:var(--ligne) }
.projet__libre{
  display:grid; place-items:center; text-align:center; padding:24px;
}
.projet__libre p{
  color:var(--txt-3); font-size:13.5px; line-height:1.6; max-width:30ch;
}
.projet__libre strong{ color:var(--txt-2); font-weight:500 }

/* ───────────────── LOUPE SUR LES PHOTOS ────────────────── */

.projet__loupe{
  position:absolute; inset:0; margin:auto;
  width:54px; height:54px; border-radius:50%;
  background:rgba(243,242,239,.94);
  display:grid; place-items:center;
  opacity:0; transform:scale(.8);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.projet__loupe::before{
  content:''; width:15px; height:15px; border-radius:50%;
  border:2px solid var(--noir); box-shadow:7px 7px 0 -5px var(--noir);
  transform:translate(-2px,-2px);
}
.projet:hover .projet__loupe{ opacity:1; transform:scale(1) }

/* ───────────────────── LE PORTRAIT ─────────────────────── */

.portrait{
  position:relative; margin-bottom:34px;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--ligne);
  max-width:250px;
}
.portrait img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  filter:saturate(.92) contrast(1.04);
}
.portrait::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,11,12,.42), transparent 48%);
}
@media (min-width:900px){ .portrait{ max-width:230px } }

/* ───────────────── BOUTON WHATSAPP ─────────────────────── */

.reseaux__wa{
  border-color:rgba(37,211,102,.45) !important;
  color:#5BE48C !important;
}
.reseaux__wa:hover{
  border-color:#25D366 !important; color:#25D366 !important;
  background:rgba(37,211,102,.08);
}

/* ──────────── PHOTO AGRANDIE DANS LE LECTEUR ───────────── */

.boite__cadre--libre{
  aspect-ratio:auto !important;
  max-height:86vh; width:auto !important; max-width:min(1120px,96vw);
  background:transparent !important; box-shadow:none !important;
}
.boite__cadre--libre img{
  display:block; width:auto; height:auto;
  max-width:min(1120px,96vw); max-height:86vh;
  border-radius:12px; box-shadow:0 40px 110px rgba(0,0,0,.7);
}

/* ──────────────────── APPARITION AU DÉFILEMENT ─────────────────── */

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.vu{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}