/* =========================================================================
   Bête & Méchant — feuille de style
   Typo : Bricolage Grotesque (Open Font License)
   ========================================================================= */

:root{
  --noir:#0B0B0B;
  --charbon:#141413;
  --os:#EDEAE3;
  --gris:#8B877D;
  --trait:#262520;
  --blanc:#FFFFFF;

  --typo:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;

  --gouttiere:clamp(20px,4vw,56px);
  --entete-h:64px;

  color-scheme:dark;
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--noir);
  color:var(--os);
  font-family:var(--typo);
  font-variation-settings:"opsz" 14,"wdth" 100,"wght" 400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--os);outline-offset:3px;border-radius:1px}

.saut{
  position:absolute;left:-9999px;top:0;
  background:var(--os);color:var(--noir);
  padding:12px 18px;z-index:100;
}
.saut:focus{left:8px;top:8px}

/* ---------------------------------------------------------------- entête */

.entete{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:20px;
  min-height:var(--entete-h);
  padding:0 var(--gouttiere);
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(11,11,11,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}

.marque{
  font-variation-settings:"opsz" 24,"wdth" 88,"wght" 700;
  font-size:17px;
  letter-spacing:-.02em;
  margin-right:auto;
  white-space:nowrap;
}
.marque span{color:var(--gris)}

.menu{display:flex;gap:26px}
.menu a{
  font-size:14px;
  color:var(--gris);
  transition:color .16s;
  position:relative;
  padding-block:6px;
}
.menu a:hover{color:var(--os)}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--os);transition:right .22s ease;
}
.menu a:hover::after{right:0}

.burger{
  display:none;
  align-items:center;
  gap:9px;
  background:none;border:0;padding:8px 0;
  color:var(--os);font:inherit;font-size:13px;cursor:pointer;
}
.burger-trait{
  width:20px;height:9px;
  border-top:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transition:transform .2s;
}
.burger[aria-expanded="true"] .burger-trait{transform:rotate(90deg)}

@media (max-width:720px){
  .burger{display:inline-flex}
  .menu{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    gap:0;
    background:var(--noir);
    border-bottom:1px solid var(--trait);
    padding:6px var(--gouttiere) 18px;
  }
  .menu:not(.est-ouvert){display:none}
  .menu a{font-size:20px;padding-block:12px;color:var(--os)}
  .menu a::after{display:none}
}

/* ------------------------------------------------------------------ hero */

.hero{
  position:relative;
  height:100vh;
  height:100svh;          /* évite la barre d'adresse mobile */
  min-height:460px;
  display:flex;
  align-items:flex-end;
  padding:var(--gouttiere);
  padding-bottom:clamp(36px,6vh,72px);
  overflow:hidden;
  background:#000;
}
.hero-video{position:absolute;inset:0;pointer-events:none;background:#000}

/* La vidéo d'accueil est CARREE (source Vimeo : 1440 x 1440).
   Le lecteur Vimeo insère la vidéo dans le cadre sans la recadrer : si le
   cadre n'a pas exactement le format de la vidéo, il ajoute lui-même des
   bandes noires. On donne donc à l'iframe le format réel de la vidéo, puis
   on l'agrandit jusqu'à recouvrir l'écran. Le débordement est rogné —
   jamais de bande noire.

   --video-ratio : largeur / hauteur de la vidéo.
     1       = carré (la vidéo actuelle)
     1.7778  = 16/9
     0.5625  = 9/16 (vertical)
   Si tu remplaces la vidéo par un autre format, change juste ce chiffre. */
/* --video-ratio  : largeur / hauteur de la vidéo (1 = carré, 1.7778 = 16/9)
   --video-source : largeur en pixels du fichier d'origine. Le lecteur
                    Vimeo n'agrandit jamais au-delà, d'où le zoom en JS. */
.hero-video{--video-ratio:1;--video-source:1440}

/* Vidéo hébergée sur le site : le navigateur recadre lui-même.
   Aucun calcul, aucune bande possible, quel que soit le format du fichier. */
.hero-video-locale video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}

/* Vidéo Vimeo : le lecteur, lui, ne recadre pas — il ajoute des bandes.
   Le JS règle la taille exacte au pixel près ; les règles ci-dessous sont
   la solution de repli si le JS ne tourne pas. */
.hero-video iframe{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  will-change:transform;
  width:max(100vw, 100vh * var(--video-ratio));
  height:calc(max(100vw, 100vh * var(--video-ratio)) / var(--video-ratio));
  border:0;
}
@supports (height:100svh){
  .hero-video iframe{
    width:max(100vw, 100svh * var(--video-ratio));
    height:calc(max(100vw, 100svh * var(--video-ratio)) / var(--video-ratio));
  }
}

.hero-voile{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(11,11,11,.62) 0,rgba(11,11,11,0) 26%),
    linear-gradient(to top,rgba(11,11,11,.72) 0,rgba(11,11,11,0) 32%);
}
.hero-texte{position:relative;max-width:min(100%,640px)}

/* Accueil : l'en-tête flotte sur la vidéo, puis devient opaque au défilement. */
.page-accueil .entete{
  position:fixed;
  left:0;right:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  transition:background-color .25s,border-color .25s,backdrop-filter .25s;
}
.page-accueil .entete.est-posee{
  background:rgba(11,11,11,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--trait);
}
@media (max-width:720px){
  .page-accueil .entete:has(.menu.est-ouvert){
    background:var(--noir);
    border-bottom-color:var(--trait);
  }
}

/* Sur une image claire du clip, le gris du menu disparaîtrait. */
.page-accueil .entete:not(.est-posee) .menu a,
.page-accueil .entete:not(.est-posee) .marque span{color:var(--os)}
.page-accueil .entete:not(.est-posee) .marque,
.page-accueil .entete:not(.est-posee) .menu a,
.page-accueil .entete:not(.est-posee) .burger{text-shadow:0 1px 16px rgba(0,0,0,.65)}

/* Titre gardé pour Google et les lecteurs d'écran, invisible à l'oeil. */
.invisible{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.hero-sur{
  margin:0 0 18px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
  font-variation-settings:"wdth" 100,"wght" 500;
}
.hero h1{
  margin:0 0 20px;
  font-size:clamp(32px,4.6vw,58px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-variation-settings:"opsz" 96,"wdth" 86,"wght" 700;
}
.hero-sous{
  margin:0 0 32px;
  max-width:38ch;
  font-size:clamp(15px,1.5vw,18px);
  color:var(--os);
  opacity:.82;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-fleche{
  position:absolute;
  right:var(--gouttiere);bottom:clamp(36px,6vh,72px);
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid rgba(237,234,227,.35);
  border-radius:50%;
  font-size:16px;
  transition:background-color .18s,border-color .18s;
}
.hero-fleche:hover{background:var(--os);color:var(--noir);border-color:var(--os)}
@media (max-width:720px){.hero-fleche{display:none}}

.bouton{
  display:inline-block;
  padding:13px 24px;
  border:1px solid var(--trait);
  font-size:14px;
  font-variation-settings:"wdth" 96,"wght" 500;
  transition:border-color .18s,background-color .18s,color .18s;
}
.bouton:hover{border-color:var(--os)}
.bouton-plein{background:var(--os);color:var(--noir);border-color:var(--os)}
.bouton-plein:hover{background:var(--blanc);border-color:var(--blanc)}

/* --------------------------------------------------------------- section */

.section{padding:clamp(56px,8vw,112px) var(--gouttiere)}
.section-haut{padding-top:clamp(44px,6vw,80px)}

.section-tete{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:clamp(26px,3.4vw,44px);
  padding-bottom:18px;
  border-bottom:1px solid var(--trait);
}
.section-tete h1,.section-tete h2{
  margin:0;
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.06;
  letter-spacing:-.025em;
  font-variation-settings:"opsz" 48,"wdth" 90,"wght" 700;
}
.section-intro{margin:0;color:var(--gris);font-size:15px}

.lien-fleche{
  font-size:14px;color:var(--gris);
  border-bottom:1px solid transparent;
  transition:color .16s,border-color .16s;
}
.lien-fleche:hover{color:var(--os);border-color:var(--trait)}

/* --------------------------------------------------------------- filtres */

.filtres{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,38px);
}
.filtre{
  font:inherit;font-size:13.5px;
  font-variation-settings:"wdth" 96,"wght" 500;
  color:var(--gris);
  background:none;
  border:1px solid var(--trait);
  padding:9px 16px;
  cursor:pointer;
  transition:color .16s,border-color .16s,background-color .16s;
}
.filtre:hover{color:var(--os);border-color:var(--gris)}
.filtre.est-actif{background:var(--os);color:var(--noir);border-color:var(--os)}
.filtre-nb{opacity:.5;font-size:11px;margin-left:5px;vertical-align:1px}

/* --------------------------------------------------------------- grille */

.grille{
  display:grid;
  gap:clamp(18px,2.2vw,30px);
  grid-template-columns:1fr;
}
@media (min-width:640px){.grille{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.grille{grid-template-columns:repeat(3,1fr)}}

.carte{display:flex;flex-direction:column;gap:13px}
/* sans cette ligne, .carte{display:flex} l'emporte sur [hidden] et les
   filtres ne masquent plus rien. */
.carte[hidden]{display:none}
.carte-image{
  display:block;
  position:relative;
  aspect-ratio:16/9;
  max-width:100%;
  overflow:hidden;
  background:var(--charbon);
}
.carte-image img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.02);
  transform:scale(1.001);
  transition:filter .3s ease,transform .5s cubic-bezier(.2,.7,.3,1);
}
.carte:hover .carte-image img,
.carte:focus-visible .carte-image img{filter:grayscale(0);transform:scale(1.035)}

.carte-texte{display:flex;flex-direction:column;gap:3px}
.carte-titre{
  font-size:17px;
  line-height:1.2;
  letter-spacing:-.015em;
  font-variation-settings:"opsz" 24,"wdth" 92,"wght" 600;
}
.carte-meta{font-size:12.5px;color:var(--gris);font-variant-numeric:tabular-nums}

.grille-vide{color:var(--gris);font-size:15px;padding-block:30px}

/* --------------------------------------------------------------- projet */

.projet-lecteur{
  padding:0 var(--gouttiere);
  padding-top:clamp(20px,3vw,36px);
}
.lecteur{
  display:block;position:relative;
  width:100%;max-width:min(1280px,118vh);margin:0 auto;
  aspect-ratio:16/9;
  padding:0;border:0;background:var(--charbon);
  cursor:pointer;overflow:hidden;
}
.lecteur img{width:100%;height:100%;object-fit:cover;transition:opacity .25s,transform .5s}
.lecteur:hover img{opacity:.78;transform:scale(1.02)}
.lecteur-play{
  position:absolute;top:50%;left:50%;
  width:78px;height:78px;margin:-39px 0 0 -39px;
  border:1.5px solid rgba(237,234,227,.9);
  border-radius:50%;
  background:rgba(11,11,11,.3);
  backdrop-filter:blur(3px);
  transition:background-color .2s,transform .2s;
}
.lecteur-play::after{
  content:"";position:absolute;top:50%;left:calc(50% + 3px);
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--os);
}
.lecteur:hover .lecteur-play{background:rgba(11,11,11,.6);transform:scale(1.07)}
/* L'iframe YouTube injectee au clic reprend exactement la place du bouton,
   sur la page projet comme sur la page showreel. */
.projet-lecteur iframe,
.lecteur-cadre{
  display:block;width:100%;max-width:min(1280px,118vh);margin:0 auto;
  aspect-ratio:16/9;border:0;background:#000;
}

.projet-corps{
  display:grid;
  gap:clamp(30px,4vw,64px);
  grid-template-columns:1fr;
  max-width:1280px;
  margin:0 auto;
  padding:clamp(34px,5vw,64px) var(--gouttiere) clamp(40px,6vw,80px);
}
@media (min-width:900px){
  .projet-corps{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
}

.eyebrow{
  margin:0 0 12px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
  font-variation-settings:"wght" 500;
}
.projet-principal h1{
  margin:0 0 8px;
  font-size:clamp(32px,5vw,58px);
  line-height:1.02;
  letter-spacing:-.03em;
  font-variation-settings:"opsz" 96,"wdth" 86,"wght" 700;
  text-wrap:balance;
}
.projet-annee{
  margin:0 0 28px;color:var(--gris);font-size:15px;font-variant-numeric:tabular-nums;
}
.projet-texte{margin:0;font-size:clamp(16px,1.6vw,18px);line-height:1.68;max-width:62ch}

.projet-aside{padding-top:6px}
.credits{margin:0 0 26px}
.credits dt{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  margin-bottom:3px;font-variation-settings:"wght" 500;
}
.credits dd{margin:0 0 15px;font-size:14.5px;line-height:1.45}
.credits dd a{border-bottom:1px solid var(--trait)}
.credits dd a:hover{border-color:var(--gris)}

.contraintes{
  border-top:1px solid var(--trait);
  padding-top:22px;margin-bottom:26px;
}
.contraintes-tete{
  margin:0 0 18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
}
.projet-retour{margin:0;border-top:1px solid var(--trait);padding-top:22px}

.projet-pied{
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid var(--trait);
  padding:26px var(--gouttiere);
  max-width:1280px;margin:0 auto;
}
.projet-nav{display:flex;flex-direction:column;gap:3px;max-width:45%}
.projet-nav-suiv{text-align:right;margin-left:auto}
.projet-nav span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.projet-nav strong{
  font-size:16px;letter-spacing:-.015em;
  font-variation-settings:"opsz" 24,"wdth" 92,"wght" 600;
  transition:opacity .16s;
}
.projet-nav:hover strong{opacity:.65}

/* ------------------------------------------------------------- showreel */

.showreel{
  padding:clamp(34px,5vw,64px) var(--gouttiere) clamp(50px,7vw,90px);
  max-width:1440px;margin:0 auto;
}
.sr-seule{
  margin:0 0 clamp(20px,3vw,34px);
  font-size:clamp(26px,3.6vw,40px);
  letter-spacing:-.025em;
  font-variation-settings:"opsz" 48,"wdth" 90,"wght" 700;
}
.sr-video{width:100%;background:#000;aspect-ratio:16/9;object-fit:contain}
.sr-note{margin:16px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}

/* ------------------------------------------------- pages texte sur fond */

.texte-fond{
  position:relative;
  min-height:calc(100vh - var(--entete-h));
  display:flex;align-items:center;
  padding:clamp(48px,8vw,110px) var(--gouttiere);
  background-image:var(--fond);
  background-size:cover;
  background-position:center;
}
.texte-fond-voile{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(11,11,11,.9),rgba(11,11,11,.66));
}
.texte-fond-contenu{position:relative;width:100%;max-width:1100px;margin:0 auto}
.texte-fond h1{
  margin:0 0 clamp(24px,3vw,40px);
  font-size:clamp(28px,4vw,46px);
  letter-spacing:-.025em;
  font-variation-settings:"opsz" 48,"wdth" 88,"wght" 700;
}
.colonnes{columns:1;column-gap:clamp(30px,4vw,60px)}
@media (min-width:860px){.colonnes{columns:2}}
.colonnes p{
  margin:0 0 18px;
  font-size:15.5px;line-height:1.7;
  break-inside:avoid;
  max-width:52ch;
}
.signature{margin:22px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}

.texte-fond-centre .texte-fond-contenu{max-width:620px}
.contact-bloc{margin:0 0 22px;font-size:16.5px;line-height:1.62}
.contact-bloc strong{font-variation-settings:"opsz" 24,"wdth" 92,"wght" 700}
.contact-liens a{border-bottom:1px solid var(--trait);transition:border-color .16s}
.contact-liens a:hover{border-color:var(--os)}

/* ------------------------------------------------------------------ 404 */

.erreur{max-width:620px}
.erreur h1{
  margin:0 0 18px;
  font-size:clamp(28px,4vw,46px);
  line-height:1.05;letter-spacing:-.03em;
  font-variation-settings:"opsz" 96,"wdth" 88,"wght" 700;
}
.erreur-texte{margin:0 0 30px;color:var(--gris);font-size:16px;line-height:1.66}

/* ------------------------------------------------------------------ pied */

.pied{
  display:grid;
  gap:22px;
  grid-template-columns:1fr;
  border-top:1px solid var(--trait);
  padding:clamp(34px,4vw,54px) var(--gouttiere);
  padding-bottom:calc(clamp(34px,4vw,54px) + env(safe-area-inset-bottom,0px));
  font-size:13.5px;
  color:var(--gris);
  line-height:1.65;
}
@media (min-width:760px){.pied{grid-template-columns:repeat(3,1fr)}}
.pied p{margin:0}
.pied-marque{
  color:var(--os);
  font-variation-settings:"opsz" 24,"wdth" 92,"wght" 600;
  margin-bottom:4px!important;
}
.pied a{border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
.pied a:hover{color:var(--os);border-color:var(--trait)}
.pied-fin{align-self:end}
@media (min-width:760px){.pied-fin{text-align:right}}