/* ════════════════════════════════════════════════════════════════
   PIERRE GHYSELEN — Production vidéo & social media
   Feuille de style partagée (4 pages)
   Palette : noir profond + blanc cassé + bandes signature
   (couleurs reprises de la bannière LinkedIn — à affiner avec
   les codes hex exacts de sa charte si Pierre les fournit)
   ════════════════════════════════════════════════════════════════ */

:root{
  --noir:#0b0b0b;
  --noir-2:#141414;
  --blanc:#f5f4f0;
  --gris:#8d8c86;
  --ligne:#262626;

  /* Bandes signature (ordre de la bannière) */
  --rouge:#e8402a;
  --orange:#f47b20;
  --jaune:#f2b824;
  --vert:#2fa45b;
  --bleu:#1b6fd8;

  /* Ordre identique à la diagonale, partout sur le site :
     bleu → vert → jaune → orange → rouge */
  --stripes:linear-gradient(90deg,
    var(--bleu) 0 20%, var(--vert) 20% 40%, var(--jaune) 40% 60%,
    var(--orange) 60% 80%, var(--rouge) 80% 100%);

  --display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --texte:'Inter', system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;  /* pas d'inflation auto mobile */
}
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:var(--texte);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
}
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }

/* ── Navigation : colonne en haut à droite, comme la référence ── */
.nav{
  position:fixed; top:1.5rem; right:1.8rem; z-index:100;
  display:flex; flex-direction:column; align-items:flex-end; gap:.35rem;
  mix-blend-mode:difference; /* reste lisible sur tous les fonds */
}
.nav a{
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  position:relative; padding-bottom:2px;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--stripes);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

/* Identité haut-gauche : uniquement le nom « Pierre Ghyselen » (pas de logo).
   En position:absolute → il défile avec la page (ne reste pas figé par-dessus
   les projets au scroll). Le bouton ☰ (lui) reste fixe pour la navigation.
   Les 5 couleurs de la bannière vivent dans la diagonale signature ci-dessous. */
.nav-logo{
  position:absolute; top:3rem; left:3rem; z-index:100;  /* décalage accentué : logo davantage centré dans la diagonale */
}
.logo-nom{
  font-family:var(--display); font-size:1.9rem; line-height:.9;  /* ratio aligné sur le mobile (logo/diagonale) */
  letter-spacing:.05em; text-transform:uppercase; color:var(--blanc);
  text-shadow:0 1px 10px rgba(0,0,0,.5);   /* lisible sur médias clairs */
}

/* ── Signature : bande diagonale arc-en-ciel ───────────────────── */
.stripe{ height:6px; width:100%; background:var(--stripes); }
/* Coin de bandes diagonales — 5 couleurs de la bannière LinkedIn,
   du bleu (dans le coin) vers le rouge, bandes parallèles à l'hypoténuse. */
.stripe-diag{
  position:absolute; top:0; left:0;
  width:340px; height:340px;        /* taille fixe (desktop/tablette) */
  background:linear-gradient(135deg,
    var(--bleu) 0 10%, var(--vert) 10% 20%, var(--jaune) 20% 30%,
    var(--orange) 30% 40%, var(--rouge) 40% 50%);
  clip-path:polygon(0 0, 100% 0, 0 100%);
  pointer-events:none;
}

/* ── Hero de la home ───────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center; padding:2rem;
  overflow:clip;
}
.hero-nom{
  font-family:var(--display);
  font-size:clamp(3.4rem, 13vw, 12.5rem);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:.015em;
}
.hero-nom .mask{ display:inline-block; overflow:clip; }
.hero-nom .letter{ display:inline-block; }
/* Variante phrase d'accroche sur deux lignes (home) */
.hero-nom--phrase{
  font-size:clamp(1.4rem, 6.4vw, 6.5rem);
  line-height:1.02;
}
.hero-nom--phrase .hero-ligne{ display:block; white-space:nowrap; }
.hero-tagline{
  margin-top:1.6rem;
  font-size:clamp(.85rem, 1.4vw, 1.05rem);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gris);
}
.hero-scroll{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  font-family:var(--display); letter-spacing:.15em; font-size:.95rem;
  animation:rebond 1.8s ease-in-out infinite;
}
@keyframes rebond{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)} }

/* ── Section works (défilement de vidéos) ──────────────────────── */
.works{ padding:14vh 0 16vh; }
.works-title{
  font-family:var(--display);
  font-size:clamp(2.6rem, 9vw, 8rem);
  line-height:1; text-align:center; text-transform:uppercase;
  letter-spacing:.02em; margin-bottom:12vh;
}
.works-title .mask{ display:inline-block; overflow:clip; }
.works-title .letter{ display:inline-block; }

.works-list{
  width:min(92vw, 1480px); margin-inline:auto;
  display:flex; flex-direction:column;
  gap:clamp(4rem, 12vh, 9rem);
}
.work-card{ width:clamp(280px, 38vw, 520px); display:block; }
.work-card.is-right{ margin-left:auto; }

.card-media{
  position:relative; aspect-ratio:4/5; overflow:clip; background:var(--noir-2);
}
.card-media-inner{
  position:absolute; inset:-8% 0;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.card-media video, .card-media img, .card-media .placeholder{
  width:100%; height:100%; object-fit:cover;
}
.placeholder{
  background:linear-gradient(115deg,#1c1c1c 0%,#2c2a26 35%,#15151a 70%,#26221c 100%);
  background-size:300% 300%;
  animation:derive 9s ease-in-out infinite;
}
@keyframes derive{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.card-voile{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .5s ease;
}
/* Liseré signature qui apparaît au survol, en bas du média */
.card-stripe{
  position:absolute; left:0; right:0; bottom:0; height:5px;
  background:var(--stripes);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.work-card:hover .card-media-inner{ transform:scale(1.05); }
.work-card:hover .card-voile{ opacity:1; }
.work-card:hover .card-stripe{ transform:scaleX(1); }

.card-infos{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:.9rem; gap:1rem;
}
.card-nom{
  font-family:var(--display); font-size:clamp(1.2rem,2vw,1.6rem);
  text-transform:uppercase; letter-spacing:.04em;
}
.card-cat{ color:var(--gris); font-size:.85rem; }

/* ── Bandeau CTA bas de home ───────────────────────────────────── */
.cta-bande{
  border-top:1px solid var(--ligne);
  padding:14vh 2rem; text-align:center;
}
.cta-bande h2{
  font-family:var(--display);
  font-size:clamp(2rem, 6vw, 5rem);
  text-transform:uppercase; line-height:1.05;
}
.btn{
  display:inline-block; margin-top:2.4rem;
  font-family:var(--display); font-size:1.1rem; letter-spacing:.1em;
  text-transform:uppercase;
  padding:1rem 2.6rem; border:1px solid var(--blanc);
  position:relative; overflow:clip; z-index:0;
  transition:color .35s ease;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--stripes);
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.btn:hover{ color:var(--noir); }
.btn:hover::before{ transform:translateY(0); }

/* ── Pages intérieures : en-tête commun ────────────────────────── */
.page-head{
  position:relative; overflow:clip;
  padding:22vh 6vw 8vh;
}
.page-head h1{
  font-family:var(--display);
  font-size:clamp(3rem, 11vw, 10rem);
  line-height:.95; text-transform:uppercase;
}
.page-head p{
  margin-top:1.4rem; max-width:52ch; color:var(--gris); font-size:1.05rem;
}
.page-head--centre{ text-align:center; }

/* ── Page projets : filtres par typologie ──────────────────────── */
.projets-filtres{
  width:min(92vw,1480px); margin:0 auto 5vh;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 2rem;
}
.projets-filtres button{
  background:none; border:0; cursor:pointer; color:var(--gris);
  font-family:var(--texte); font-size:.85rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.45rem 0; position:relative;
  transition:color .25s ease;
}
.projets-filtres button:hover,
.projets-filtres button.is-actif{ color:var(--blanc); }
.projets-filtres button.is-actif::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--stripes);
}
.work-card.is-cachee{ display:none; }

/* ── Page projets : grille ─────────────────────────────────────── */
.projets-grille{
  width:min(92vw,1480px); margin:4vh auto 16vh;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(2rem,4vw,4rem);
}
.projets-grille .work-card{ width:100%; }
.projets-grille .work-card:nth-child(even){ transform:translateY(8vh); }

/* ── Page à propos ─────────────────────────────────────────────── */
.apropos{
  width:min(90vw,1200px); margin:0 auto 14vh;
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.apropos-photo{
  position:relative; aspect-ratio:4/5; background:var(--noir-2); overflow:clip;
}
.apropos-photo .stripe{ position:absolute; bottom:0; }
.apropos-texte h2{
  font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem);
  text-transform:uppercase; margin:2.4rem 0 .9rem;
}
.apropos-texte h2:first-child{ margin-top:0; }
.apropos-texte p{ color:#c9c8c2; margin-bottom:1rem; }
.competences{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; }
.competences li{
  border:1px solid var(--ligne); padding:.45rem 1rem;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
}

/* ── Page vision : cadre paysage, images qui s'enchaînent (0,8 s) ── */
.vision-defile{ width:min(86vw,1000px); margin:0 auto 13vh; }
.defile-cadre{
  position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--noir-2);
}
.defile-cadre img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
}
.defile-cadre img.is-active{ opacity:1; }

/* ── Page vision : manifeste + piliers (archi. type Nash & Young) ── */
.vision-manifeste{
  width:min(90vw,1180px); margin:2vh auto 13vh;
  display:flex; flex-direction:column; gap:clamp(2.2rem,5vw,4.5rem);
}
.vision-manifeste p{
  font-size:clamp(1.5rem,3.6vw,3rem);
  line-height:1.18; font-weight:500; max-width:22ch;
  color:var(--blanc); text-wrap:balance;
}
.vision-manifeste p em{ font-style:normal; color:var(--gris); }
.vision-manifeste p:nth-child(2){ align-self:center; text-align:center; }
.vision-manifeste p:nth-child(3){ align-self:flex-end; text-align:right; }

.vision-piliers{
  width:min(90vw,1180px); margin:0 auto 12vh;
  border-top:1px solid var(--ligne);
}
.pilier{
  border-bottom:1px solid var(--ligne);
  padding:clamp(2rem,5vw,3.6rem) 0;
  display:grid; grid-template-columns:.95fr 1.4fr; gap:clamp(1.4rem,5vw,5rem);
  align-items:baseline;
}
.pilier h2{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.6vw,3.6rem); line-height:.9;
  text-transform:uppercase; letter-spacing:.01em;
  display:flex; align-items:center; gap:.85rem;
}
.pilier h2::before{
  content:""; width:.55em; height:.16em; flex:none; border-radius:2px;
  background:var(--accent, var(--bleu));
}
.pilier:nth-child(1){ --accent:var(--bleu); }
.pilier:nth-child(2){ --accent:var(--jaune); }
.pilier:nth-child(3){ --accent:var(--rouge); }
.pilier p{ color:#c9c8c2; font-size:clamp(1rem,1.5vw,1.18rem); max-width:48ch; }

.marques{
  border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
  margin:10vh 0; padding:3rem 6vw;
  display:flex; flex-wrap:wrap; gap:2rem 4rem;
  justify-content:center; align-items:center;
}
.marques span{
  font-family:var(--display); font-size:clamp(1.2rem,2.4vw,2rem);
  letter-spacing:.06em; color:var(--gris); text-transform:uppercase;
  transition:color .3s ease;
}
.marques span:hover{ color:var(--blanc); }

/* ── Page contact ──────────────────────────────────────────────── */
.contact-mail{
  display:block; width:fit-content; margin:2vh 6vw 8vh;
  font-family:var(--display);
  font-size:clamp(1.6rem, 5.5vw, 4.6rem);
  text-transform:lowercase; letter-spacing:.01em;
  position:relative; padding-bottom:.3rem;
}
.contact-mail::after{
  content:''; position:absolute; left:0; bottom:0; height:5px; width:100%;
  background:var(--stripes);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.contact-mail:hover::after{ transform:scaleX(1); transform-origin:left; }

.contact-grille{
  width:min(90vw,1200px); margin:0 auto 14vh;
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);
}
/* Contact épuré : un seul formulaire centré sur la page */
.contact-centre{ width:min(92vw,620px); margin:2vh auto 16vh; }
.contact-centre .btn{ display:block; width:100%; text-align:center; }
.form label{
  display:block; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris); margin:1.6rem 0 .5rem;
}
.form input, .form textarea{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--ligne);
  color:var(--blanc); font-family:var(--texte); font-size:1.05rem;
  padding:.6rem 0; outline:none;
  transition:border-color .3s ease;
}
.form input:focus, .form textarea:focus{ border-color:var(--blanc); }
.form textarea{ min-height:120px; resize:vertical; }
.coordonnees p{ color:#c9c8c2; margin-bottom:1.2rem; }
.coordonnees strong{
  display:block; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris); margin-bottom:.3rem;
}

/* ════════════════════════════════════════════════════════════════
   PAGE PROJET — version épurée (façon nashandyoung.com/client) :
   nom du client → quelques lignes → grille de médias
   (photos + emplacements vidéo).
   ════════════════════════════════════════════════════════════════ */
.projet-tete{
  position:relative; overflow:clip;
  width:min(92vw,1100px); margin:0 auto;
  padding:clamp(360px,40vh,420px) 0 3vh;  /* dégage la diagonale (340px) */
}
.projet-tete .projet-eyebrow{ margin-bottom:1.1rem; }
.projet-intro{
  width:min(92vw,1100px); margin:0 auto 9vh; max-width:62ch;
  display:flex; flex-direction:column; gap:1.1rem;
  font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.6; color:#c9c8c2;
}

.projet-medias{
  width:min(92vw,1100px); margin:0 auto 12vh;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.8rem,1.6vw,1.4rem);
}
.media{
  position:relative; overflow:hidden; margin:0;
  background:var(--noir-2); aspect-ratio:4/5;
}
.media img, .media video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.media--plein{ grid-column:1 / -1; aspect-ratio:16/9; }

/* Emplacement vidéo : cadre prêt à recevoir un <video> (cf. commentaire HTML) */
.media-video{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; color:var(--gris); border:1px dashed var(--ligne);
}
.media-video .play{
  width:62px; height:62px; border-radius:50%;
  border:2px solid currentColor; display:grid; place-items:center;
  transition:color .3s ease;
}
.media-video .play::before{
  content:""; width:0; height:0; margin-left:5px;
  border-style:solid; border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent currentColor;
}
.media-video:hover{ color:var(--blanc); }
.media-video .etiquette{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}

/* ════════════════════════════════════════════════════════════════
   PAGE PROJET (étude de cas) — structure inspirée d'agence.wtf
   Hero plein écran → Expérience → Production 360° → galerie →
   citation client → projet suivant.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero projet : média plein écran + nom en surimpression ─────── */
.projet-hero{
  position:relative; min-height:92svh; overflow:clip;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:6vh 6vw 8vh;
}
.projet-hero-media{ position:absolute; inset:0; z-index:-2; background:var(--noir-2); }
.projet-hero-media video,
.projet-hero-media img,
.projet-hero-media .placeholder{ width:100%; height:100%; object-fit:cover; }
.projet-hero::after{           /* voile dégradé pour la lisibilité du titre */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,11,11,.25) 0%, rgba(11,11,11,.05) 38%, rgba(11,11,11,.85) 100%);
}
.projet-eyebrow{
  font-size:.85rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris); margin-bottom:1rem;
}
.projet-titre{
  font-family:var(--display);
  font-size:clamp(3rem, 12vw, 11rem);
  line-height:.92; text-transform:uppercase; letter-spacing:.015em;
}
.projet-titre .mask{ display:inline-block; overflow:clip; }
.projet-titre .letter{ display:inline-block; }
.projet-hero-scroll{
  position:absolute; bottom:2.2rem; right:6vw;
  font-family:var(--display); letter-spacing:.15em; font-size:.95rem;
  animation:rebond 1.8s ease-in-out infinite;
}

/* ── Méta : client / rôle / année, en bandeau ──────────────────── */
.projet-meta{
  border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
  width:min(92vw,1480px); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2rem; padding:2.4rem 0;
}
.projet-meta div{ padding:0 clamp(1rem,3vw,2.5rem); }
.projet-meta strong{
  display:block; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris); margin-bottom:.5rem;
}
.projet-meta span{ font-size:1.05rem; color:#c9c8c2; }

/* ── Bloc de texte : libellé à gauche, contenu à droite ────────── */
.projet-bloc{
  width:min(92vw,1480px); margin:0 auto; padding:12vh 0;
  display:grid; grid-template-columns:1fr 2fr;
  gap:clamp(2rem,6vw,6rem); align-items:start;
}
.projet-bloc + .projet-bloc{ padding-top:0; }
.projet-label{
  font-size:.85rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris); padding-top:.6rem;
}
.projet-lead{
  font-family:var(--display);
  font-size:clamp(1.8rem,4.2vw,3.4rem);
  line-height:1.05; text-transform:uppercase; margin-bottom:1.8rem;
}
.projet-corps{ font-size:1.1rem; color:#c9c8c2; max-width:60ch; }
.projet-corps p + p{ margin-top:1.1rem; }

/* ── Chiffres clés ─────────────────────────────────────────────── */
.projet-stats{
  width:min(92vw,1480px); margin:0 auto 12vh;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--ligne); border:1px solid var(--ligne);
}
.projet-stats div{ background:var(--noir); padding:3rem 2rem; text-align:center; }
.projet-stats .chiffre{
  font-family:var(--display);
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:1;
  background:var(--stripes); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.projet-stats .libelle{
  margin-top:.8rem; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris);
}

/* ── Galerie : médias alternés plein cadre ─────────────────────── */
.projet-galerie{
  width:min(94vw,1480px); margin:0 auto 14vh;
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(1rem,2.5vw,2rem);
}
.projet-galerie figure{
  position:relative; overflow:clip; background:var(--noir-2);
  grid-column:span 3; aspect-ratio:4/5;
}
.projet-galerie figure.large{ grid-column:span 6; aspect-ratio:16/9; }
.projet-galerie figure.haut{ grid-column:span 2; aspect-ratio:3/4; }
.projet-galerie .card-media-inner{ position:absolute; inset:-8% 0; }
.projet-galerie video,
.projet-galerie img,
.projet-galerie .placeholder{ width:100%; height:100%; object-fit:cover; }

/* ── Citation client ───────────────────────────────────────────── */
.projet-cite{
  border-top:1px solid var(--ligne);
  width:min(90vw,1100px); margin:0 auto; padding:14vh 0;
  text-align:center;
}
.projet-cite blockquote{
  font-family:var(--display);
  font-size:clamp(1.6rem,4vw,3.2rem); line-height:1.1;
  text-transform:uppercase;
}
.projet-cite .auteur{
  margin-top:2.4rem; font-size:.85rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}
.projet-cite .auteur strong{ display:block; color:var(--blanc); margin-bottom:.25rem; }

/* ── Bandeau « projet suivant » ────────────────────────────────── */
.projet-suivant{
  border-top:1px solid var(--ligne);
  display:block; padding:10vh 6vw; position:relative; overflow:clip;
}
.projet-suivant .sur{
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris);
}
.projet-suivant .nom{
  font-family:var(--display);
  font-size:clamp(2.4rem,8vw,7rem); line-height:1; text-transform:uppercase;
  margin-top:.6rem; transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.projet-suivant::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:var(--stripes); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.projet-suivant:hover .nom{ transform:translateX(1.5vw); }
.projet-suivant:hover::after{ transform:scaleX(1); }

/* ── Footer commun ─────────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--ligne);
  padding:3.5rem 6vw 2.5rem;
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; align-items:flex-end;
  color:var(--gris); font-size:.85rem;
}
.footer .nom{
  font-family:var(--display); color:var(--blanc);
  font-size:1.3rem; letter-spacing:.06em; text-transform:uppercase;
}
.footer nav{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; }
.footer a:hover{ color:var(--blanc); }

/* ── Accessibilité & responsive ────────────────────────────────── */
:focus-visible{ outline:2px solid var(--bleu); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

@media (max-width:860px){
  .nav{ flex-direction:row; gap:1.1rem; top:1.1rem; right:1.2rem; }
  .nav a{ font-size:.75rem; }
  .work-card{ width:78vw; }
  .projets-grille{ grid-template-columns:1fr; }
  .projets-grille .work-card:nth-child(even){ transform:none; }
  .apropos, .contact-grille{ grid-template-columns:1fr; }
  .vision-manifeste p,
  .vision-manifeste p:nth-child(2),
  .vision-manifeste p:nth-child(3){ align-self:flex-start; text-align:left; }
  .pilier{ grid-template-columns:1fr; gap:.9rem; }

  .projet-meta{ grid-template-columns:1fr; gap:1.6rem; }
  .projet-meta div{ padding:0 1.2rem; }
  .projet-bloc{ grid-template-columns:1fr; gap:1.4rem; padding:9vh 1.2rem; }
  .projet-bloc + .projet-bloc{ padding-top:0; }
  .projet-stats{ grid-template-columns:1fr; }
  .projet-galerie{ grid-template-columns:1fr; }
  .projet-tete{ padding-top:clamp(195px,26vh,235px); }  /* dégage la diagonale (180px) */
  .projet-medias{ grid-template-columns:1fr; }
  .projet-medias .media--plein{ grid-column:auto; }
  .projet-galerie figure,
  .projet-galerie figure.large,
  .projet-galerie figure.haut{ grid-column:auto; aspect-ratio:4/5; }
  .projet-hero-scroll{ display:none; }
}

/* ── VARIANTE HOME : nom épinglé qui rétrécit au scroll ────────── */
.hero--pin .hero-pin{
  position:relative; z-index:1;          /* le nom passe SOUS les vidéos */
  will-change:transform, opacity;
}
.hero--pin .hero-nom{
  will-change:transform;
  transform-origin:center center;
}
.works--sans-titre{
  position:relative; z-index:2;          /* les cartes défilent par-dessus */
  padding-top:55vh;                      /* respiration avant la 1re carte */
}
.cta-bande, .footer{ position:relative; z-index:2; background:var(--noir); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — navigation mobile (hamburger) & petits écrans
   ════════════════════════════════════════════════════════════════ */

/* Bouton hamburger (injecté par script.js) — masqué sur desktop */
.nav-toggle{
  display:none;
  position:fixed; top:1rem; right:1rem; z-index:120;
  width:48px; height:48px; padding:0; cursor:pointer;
  background:rgba(11,11,11,.5); border:1px solid var(--ligne);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.nav-toggle span{
  position:absolute; left:50%; top:50%; width:22px; height:2px;
  background:var(--blanc);
  transform:translate(-50%,-50%);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle span:nth-child(1){ transform:translate(-50%,-50%) translateY(-6px); }
.nav-toggle span:nth-child(3){ transform:translate(-50%,-50%) translateY(6px); }

/* Tablette : la grille projets passe à un format plus respirant */
@media (max-width:1024px){
  .projet-bloc{ gap:clamp(1.5rem,4vw,3rem); }
}

@media (max-width:768px){
  /* Cibles tactiles confortables */
  .nav-toggle{ display:block; }

  /* La nav devient un overlay plein écran déclenché par le hamburger */
  .nav{
    position:fixed; inset:0; z-index:115;
    flex-direction:column; justify-content:center; align-items:center;
    gap:.4rem; padding:2rem;
    background:var(--noir); mix-blend-mode:normal;
    transform:translateY(-100%); visibility:hidden;
    transition:transform .45s cubic-bezier(.22,1,.36,1), visibility .45s;
  }
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav{ transform:translateY(0); visibility:visible; }
  .nav a{ font-size:1.6rem; letter-spacing:.08em; padding:.55rem 1rem; }
  .nav a::after{ height:3px; }

  /* Hamburger → croix à l'ouverture */
  body.nav-open .nav-toggle span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

  /* Logo dégagé du bouton, légèrement compacté */
  .nav-logo{ top:1.15rem; left:1.15rem; }
  .logo-nom{ font-size:1rem; }

  /* Diagonale en taille fixe réduite sur mobile */
  .stripe-diag{ width:180px; height:180px; }

  /* Pas d'épinglage du nom sur mobile → on supprime la grande réserve
     d'espace au-dessus des projets (le hero suffit). */
  .works--sans-titre{ padding-top:8vh; }
}

@media (max-width:520px){
  .page-head{ padding:17vh 6vw 6vh; }
  .projet-hero{ padding:5vh 6vw 7vh; }
  .cta-bande{ padding:11vh 1.4rem; }
  .works-list{ width:88vw; }
  .work-card{ width:100%; }
  .marques{ padding:2.4rem 6vw; gap:1.4rem 2.4rem; }
  .footer{ padding:3rem 6vw 2rem; gap:1.4rem; }
  .projet-meta div{ padding:0 .2rem; }
}