/* Feuille partagée des pages projet — reprend les tokens du site. */
@font-face{font-family:'Bebas Neue';src:url('../fonts/bebas-neue-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Bebas Neue Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:73.68%;ascent-override:122.15%;descent-override:40.72%;line-gap-override:0%;}
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:119.26%;ascent-override:81.17%;descent-override:21.05%;line-gap-override:0%;}
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --mg:#FA06F2; --green:#39B54A; --bg:#0e0e0e; --bg2:#141414;
  --card:#181818; --border:#2a2a2a; --text:#f0f0f0; --muted:#888;
  /* Mentions volontairement discrètes, mais qui doivent rester lisibles :
     3.62:1 sur le fond, au-dessus du seuil de 3:1 exigé pour du grand texte. */
  --faint:#6b6b6b;
  --font-display:'Bebas Neue','Bebas Neue Fallback',sans-serif;
  --font-body:'Montserrat','Montserrat Fallback',sans-serif;
}
html{scroll-behavior:smooth;background:var(--bg);}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.7;}

.skip-link{position:absolute;left:-9999px;top:0;z-index:5000;background:var(--mg);
  color:#0e0e0e;font-size:14px;font-weight:600;padding:12px 20px;text-decoration:none;}
.skip-link:focus{left:8px;top:8px;}

nav{position:fixed;top:0;left:0;right:0;z-index:200;height:76px;display:flex;
  align-items:center;justify-content:space-between;padding:0 48px;
  border-bottom:1px solid var(--border);background:rgba(14,14,14,.95);backdrop-filter:blur(14px);}
.nav-logo{font-family:var(--font-display);font-size:38px;letter-spacing:.12em;
  color:#fff;text-decoration:none;line-height:1;}
.nav-logo span{color:var(--mg);}
.nav-back{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border:1px solid var(--border);padding:10px 20px;
  transition:color .2s,border-color .2s;}
.nav-back:hover,.nav-back:focus{color:#fff;border-color:var(--muted);}
nav{gap:16px;}
.nav-logo{white-space:nowrap;flex-shrink:1;min-width:0;}
.nav-back{white-space:nowrap;flex-shrink:0;}

.wrap{max-width:1040px;margin:0 auto;padding:0 48px;}
.hero{padding:150px 0 52px;border-bottom:1px solid var(--border);}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:18px;}
.eyebrow::before{content:'';width:32px;height:1px;background:var(--green);}
h1{font-family:var(--font-display);font-size:clamp(46px,7vw,94px);line-height:.95;
  letter-spacing:.02em;margin-bottom:18px;}
.tagline{font-size:17px;color:rgba(240,240,240,.74);max-width:640px;}
.meta{display:flex;flex-wrap:wrap;gap:38px;margin-top:34px;padding-top:26px;border-top:1px solid var(--border);}
.meta-item{display:flex;flex-direction:column;gap:5px;}
.meta-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.meta-value{font-size:14px;font-weight:500;}

section.bloc{padding:58px 0;}
h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,44px);letter-spacing:.04em;
  line-height:1;margin-bottom:22px;}
.bloc p{font-size:15.5px;color:rgba(240,240,240,.74);max-width:720px;margin-bottom:16px;}

.media{width:100%;background:#000;border:1px solid var(--border);margin-bottom:22px;}
.media-video{aspect-ratio:16/9;}
/* Format vertical : une vidéo 9/16 affichée en pleine largeur serait
   démesurée sur un écran d'ordinateur, on la borne donc en largeur
   et on la centre. */
.media-vertical{aspect-ratio:9/16;max-width:min(340px,86vw);margin-left:auto;margin-right:auto;}
.media-video iframe,.media-video video{width:100%;height:100%;border:0;display:block;background:#000;}
/* Filet de sécurité : l'intégration Google Drive peut échouer — fichier
   encore en cours de traitement, trop lourd, ou navigateur qui bloque les
   contenus tiers. Le visiteur garde alors un accès direct. */
.video-secours{font-size:13px;color:var(--muted);margin:-8px 0 22px;}
.video-secours a{color:var(--mg);text-decoration:underline;text-underline-offset:3px;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.gallery img{width:100%;height:auto;display:block;border:1px solid var(--border);}

.cta-bloc{background:linear-gradient(145deg,rgba(250,6,242,.10),rgba(57,5,105,.16),var(--card));
  border:1px solid rgba(250,6,242,.42);padding:40px;margin:20px 0 70px;}
.cta-bloc h2{margin-bottom:12px;}
.cta-bloc p{margin-bottom:24px;}
.cta{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);border:1px solid rgba(250,6,242,.55);
  padding:14px 26px;text-decoration:none;transition:background .2s,color .2s,border-color .2s;}
.cta:hover,.cta:focus{background:var(--mg);border-color:var(--mg);color:#0e0e0e;}

footer{border-top:1px solid var(--border);padding:30px 48px;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.foot-logo{font-family:var(--font-display);font-size:26px;letter-spacing:.12em;color:var(--faint);}
.foot-copy{font-size:12px;color:var(--muted);letter-spacing:.06em;}
footer a{color:var(--muted);text-decoration:none;}
footer a:hover,footer a:focus{color:var(--mg);}

a:focus-visible,.cta:focus-visible,.nav-back:focus-visible{outline:2px solid var(--mg);outline-offset:3px;}

@media(max-width:768px){
  nav{padding:0 20px;height:64px;}
  .nav-logo{font-size:30px;}
  .nav-back{padding:9px 15px;font-size:11px;letter-spacing:.14em;}
  .wrap{padding:0 20px;}
  .hero{padding:110px 0 40px;}
  .meta{gap:24px;}
  .cta-bloc{padding:28px 22px;}
  footer{padding:24px 20px;}
}

/* ══ AUTRES PROJETS ══ */
.autres{padding:10px 0 4px;}
.autres h2{margin-bottom:26px;}
.autres-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.autre{display:block;text-decoration:none;color:inherit;border:1px solid var(--border);
  background:var(--card);transition:border-color .25s ease,transform .25s ease;}
.autre:hover,.autre:focus-visible{border-color:rgba(250,6,242,.6);transform:translateY(-4px);}
.autre-vignette{aspect-ratio:16/10;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;}
.autre-vignette img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.autre-vignette .emoji{font-size:44px;line-height:1;}
.autre-txt{padding:16px 18px 18px;}
.autre-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);font-weight:600;margin-bottom:7px;}
.autre-nom{font-family:var(--font-display);font-size:24px;letter-spacing:.03em;
  line-height:1.05;color:var(--text);}
.autre-client{font-size:12.5px;color:var(--muted);margin-top:5px;}
@media(max-width:768px){.autres-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .autre-nom{font-size:19px;} .autre-txt{padding:13px 14px 15px;}}
@media(max-width:420px){.autres-grid{grid-template-columns:1fr;}}

/* ── Bandeau sur petit écran ──
   Le logo et le bouton de retour ne rétrécissaient pas : à 360 px le
   bouton sortait de la barre, et sur les CGV c'est la page entière qui
   débordait de 70 px. Les deux éléments ne peuvent pas non plus se
   toucher, d'où l'écart minimal imposé. */
@media(max-width:600px){
  nav{gap:12px;}
  .nav-logo{font-size:26px;}
  .nav-back{padding:8px 13px;font-size:10px;letter-spacing:.12em;}
  /* « au portfolio » disparaît ; aria-label garde l'intitulé complet
     pour les lecteurs d'écran. */
  .nav-back-plus{display:none;}
}