/* =========================================================
   MBKL AGENCY — style.css
   Référence de mise en page : capture 2048 x 1152 px
   ========================================================= */

/*
  Si tu fournis les fichiers de police plus tard (assets/fonts/), remplace
  le <link> Google Fonts dans index.html par ce bloc, adapté aux vrais noms
  de fichiers :

  @font-face{
    font-family:'League Spartan';
    src:url('assets/fonts/LeagueSpartan-Light.woff2') format('woff2');
    font-weight:300; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'League Spartan';
    src:url('assets/fonts/LeagueSpartan-Bold.woff2') format('woff2');
    font-weight:700; font-style:normal; font-display:swap;
  }
*/

:root{
  --white:#ffffff;
  --black:#000000;
  --font-digital:'Share Tech Mono', 'Courier New', monospace;

  /* Valeurs mesurées directement sur les captures fournies (pixel par
     pixel), pas estimées — elles font foi sur les valeurs approximatives
     données dans le brief texte. */
  --pad-left: 10.2vw;    /* logo + compteur, bord gauche */
  --pad-right: 4.2vw;    /* scroll down / burger / barre de progression, bord droit */
  --header-top: 6.6vh;   /* logo + burger */
  --contact-top: 8.6vh;  /* "nous contacter" (métrique de police différente) */

  --content-left: 30.4vw;   /* titre + description + "nous contacter", bord gauche */
  --hero-baseline: 50.05vh; /* ligne de base commune compteur / titre / scroll down */
  --description-top: 79.7vh;

  --fs-number: 19px;
  --fs-title: 46px;
  --fs-scrolldown: 13px;
  --title-weight: 400; /* regular */

  --transition-fast: 700ms cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%;
  background:var(--black);
  color:var(--white);
}

/* Masque la barre de défilement native du navigateur — seul le curseur
   de scroll personnalisé (ligne + point sur le côté, voir plus bas)
   reste visible. Le scroll lui-même continue de fonctionner
   normalement, seule son indicateur visuel disparaît. */
html{
  scrollbar-width:none;       /* Firefox */
  -ms-overflow-style:none;    /* vieux Edge/IE */
}
html::-webkit-scrollbar{      /* Chrome/Safari/Edge récents */
  display:none;
}

body{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------------------------------------------------------
   ANIMATION D'OUVERTURE (accueil)
   Le header apparaît en fondu, et le logo se révèle en balayage
   (wipe) de gauche à droite — reste à sa taille normale dans le
   header, pas d'écran de démarrage séparé.
   --------------------------------------------------------- */

#site-header{
  opacity:0;
  transform:translateY(-14px);
  animation:header-in .85s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:.6s;
}

@keyframes header-in{
  to{ opacity:1; transform:translateY(0); }
}

.logo{
  clip-path:inset(0 100% 0 0);
  animation:logo-reveal .8s cubic-bezier(.65,0,.35,1) forwards;
  animation-delay:.85s;
}

@keyframes logo-reveal{
  to{ clip-path:inset(0 0% 0 0); }
}

@media (prefers-reduced-motion: reduce){
  #site-header{ animation:none; opacity:1; transform:none; }
  .logo{ animation:none; clip-path:none; }
}

/* ---------------------------------------------------------
   HEADER (fixe)
   --------------------------------------------------------- */

#site-header{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  mix-blend-mode:difference; /* effet marqué sur tout le header, comme sur la version Oeuvres */
}

#site-header > *{ pointer-events:auto; }

.logo{
  position:absolute;
  left:var(--pad-left);
  top:var(--header-top);
  font-family:'League Spartan', sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:15px;
  letter-spacing:0.3px;
  white-space:nowrap;
  /* reset des styles par défaut du <button> */
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:var(--white);
  text-align:left;
  cursor:pointer;
}

.contact-nav{
  position:absolute;
  left:var(--content-left);
  top:var(--contact-top);
}

.contact-link{
  font-family:'League Spartan', sans-serif;
  font-weight:300;
  font-size:19px;
  line-height:1;
  border-bottom:1px solid var(--white);
  padding-bottom:6px;
  cursor:pointer;
  transition:opacity .2s ease;
  white-space:nowrap;
}

.contact-link:hover{ opacity:.6; }

.burger{
  position:absolute;
  right:var(--pad-right);
  top:var(--header-top);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:54px;
  height:17px;
  background:none;
  border:none;
  cursor:pointer;
}

.burger span{
  display:block;
  height:2px;
  width:100%;
  background:var(--white);
}

/* ---------------------------------------------------------
   MENU PLEIN ÉCRAN
   --------------------------------------------------------- */

.menu-panel{
  position:fixed;
  inset:0;
  z-index:300;
  background:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(-2%);
  transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}

.menu-panel.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .5s ease, transform .5s ease, visibility 0s;
}

.menu-close{
  position:absolute;
  top:var(--header-top);
  right:var(--pad-right);
  background:none;
  border:none;
  color:var(--white);
  font-size:40px;
  line-height:1;
  cursor:pointer;
}

.menu-links{
  list-style:none;
  text-align:center;
}

.menu-links li{ margin:28px 0; }

.menu-links a{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:44px;
  letter-spacing:1px;
  color:var(--white);
  transition:opacity .2s ease;
}

.menu-links a:hover{ opacity:.55; }

/* ---------------------------------------------------------
   CURSEUR DE SCROLL (ligne verticale sur le côté + point qui suit
   la position de scroll dans toute la page). Discret, sombre et à
   opacité réduite, avec un léger effet de décalage (le point rattrape
   la position réelle avec un peu de retard plutôt qu'un saut net —
   voir script.js).
   --------------------------------------------------------- */

#scroll-cursor{
  position:fixed;
  right:2.6vw;
  top:18vh;
  bottom:18vh;
  width:1px;
  z-index:250;
  pointer-events:none;
}

#scroll-cursor::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.14);
}

#scroll-cursor .cursor-dot{
  position:absolute;
  left:50%;
  top:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  box-shadow:0 0 0 1px rgba(255,255,255,0.35);
  transform:translate(-50%, -50%);
  will-change:top;
}

@media (max-width:900px){
  #scroll-cursor{ display:none; }
}

/* ---------------------------------------------------------
   BARRE DE PROGRESSION MOBILE (remplace le curseur de scroll latéral,
   masqué sur petit écran) — 5 segments horizontaux en bas de l'écran.
   --------------------------------------------------------- */

#mobile-progress{
  display:none;
}

@media (max-width:900px){
  #mobile-progress{
    display:flex;
    position:fixed;
    left:6vw;
    right:6vw;
    bottom:4vh;
    z-index:150;
    gap:6px;
    pointer-events:none;
    transition:opacity .3s ease;
  }

  #mobile-progress .seg{
    flex:1 1 0;
    height:3px;
    background:rgba(255,255,255,0.35);
  }

  #mobile-progress .seg.active{
    background:var(--white);
  }
}

/* ---------------------------------------------------------
   CADRE FIXE (position: relative UNIQUEMENT — jamais sticky/fixed)
   Safari a un bug documenté : une <video> dont un parent est en
   position sticky ou fixed peut ne jamais s'afficher (reste noire),
   même si elle se décode très bien. #reel reste donc un simple bloc
   100vh en position:relative, qui NE bouge PAS et NE change JAMAIS
   de position — c'est le scroll (souris/trackpad/clavier) qui est
   intercepté en JS pour faire avancer une position virtuelle.
   Une fois le dernier projet atteint, la main est rendue au scroll
   natif du navigateur pour rejoindre la section contact.
   --------------------------------------------------------- */

#reel{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:var(--black);
}

.contact-section{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:var(--white);
}

/* le visuel (vidéo + voile) — glisse verticalement avec le scroll,
   coupé net par le overflow:hidden de #reel. Le texte, lui, est un
   élément séparé (voir .project-content plus bas) qui ne glisse
   jamais, seul son opacité change. */
.project-visual{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  overflow:hidden;
  background:var(--black);
  will-change:transform;
  /* position par défaut avant que le JS ne prenne la main (corrigé
     dès la première frame par applyVIndex) */
  transform:translateY(100%);
}

.project-visual:first-of-type{
  transform:translateY(0);
}

/* video plein écran, sans déformation */
.project-visual video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-visual .no-video{
  position:absolute;
  inset:0;
  background:var(--black);
}

/* assombrissement ~50% */
.project-visual .dim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  pointer-events:none;
}

/* ---------------------------------------------------------
   CONTENU D'UN PROJET (numéro / titre / scroll down)
   Reste parfaitement fixe à l'écran — ne glisse jamais avec la
   vidéo. Apparaît/disparaît uniquement en fondu (opacité), calculé
   au scroll, voir script.js. Le compteur et "(scroll down)" ont un
   rendu translucide/inversé (mix-blend-mode) pour se détacher
   légèrement du titre, qui lui reste pleinement opaque.
   --------------------------------------------------------- */

.project-content{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  will-change:opacity;
}

.project-content:first-of-type{
  opacity:1;
}

.hero-anchor{
  position:absolute;
  left:0; right:0;
  top:var(--hero-baseline);
  height:0;
}

.project-number{
  position:absolute;
  left:var(--pad-left);
  bottom:0;
  font-family:var(--font-digital);
  font-weight:400;
  font-size:var(--fs-number);
  line-height:1;
  white-space:nowrap;
}

.project-title{
  position:absolute;
  margin:0; /* reset la marge par défaut des <h1>/<h2> */
  left:var(--content-left);
  right:calc(var(--pad-right) + 200px);
  bottom:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:var(--title-weight);
  font-size:var(--fs-title);
  line-height:1;
  white-space:nowrap;
  text-transform:uppercase;
  mix-blend-mode:difference;
  opacity:0.85; /* même effet que le compteur/scroll down, mais légèrement moins marqué */
}

.scroll-down{
  position:absolute;
  right:var(--pad-right);
  bottom:0;
  font-family:var(--font-digital);
  font-weight:400;
  font-size:var(--fs-scrolldown);
  line-height:1;
  white-space:nowrap;
}

/* rendu translucide/inversé, façon référence — se fond dans la vidéo
   au lieu de rester blanc plein, pour se détacher du titre (solide) */
.project-number,
.scroll-down{
  mix-blend-mode:difference;
}

/* petit repère "(001)" à côté du compteur haut, inspiré de la référence
   AERO — un index discret, distinct du compteur "01 / 05" */
.project-index{
  position:absolute;
  left:var(--pad-left);
  top:calc(var(--description-top) + 2px);
  font-family:var(--font-digital);
  font-weight:400;
  font-size:13px;
  color:rgba(255,255,255,.65);
}

.project-description{
  position:absolute;
  left:var(--content-left);
  top:var(--description-top);
  max-width:480px;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.45;
}

/* Apparition douce à l'entrée dans le viewport — utilisée uniquement
   par la page contact (scroll normal, IntersectionObserver). Les
   textes des projets, eux, sont animés en continu au scroll. */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--transition-fast), transform var(--transition-fast);
}

.contact-section.in-view .reveal{
  opacity:1;
  transform:translateY(0);
}

/* la cascade, appliquée aux blocs de la page contact */
.contact-title.reveal{ transition-delay:0ms; }
.contact-email.reveal{ transition-delay:90ms; }
.say-hello.reveal{ transition-delay:160ms; }
.contact-form.reveal{ transition-delay:230ms; }
.contact-find.reveal{ transition-delay:300ms; }
.contact-location.reveal{ transition-delay:300ms; }
.contact-footer.reveal{ transition-delay:360ms; }

/* Barre de progression à 5 segments retirée — remplacée par le
   curseur de scroll (ligne + point sur le côté, voir plus bas). */

/* ---------------------------------------------------------
   PROJET SANS VIDÉO (04 / 05)
   --------------------------------------------------------- */

.project-content.empty .project-title{ color:rgba(255,255,255,.4); }
.project-content.empty .project-description{ color:rgba(255,255,255,.4); }

/* ---------------------------------------------------------
   CONTACT — thème clair, calé sur la maquette FORMULAIRE.png
   (positions mesurées directement sur la capture, en % de l'écran)
   --------------------------------------------------------- */

.contact-section{
  background:var(--white);
  color:var(--black);
}

.contact-content{
  position:relative;
  height:100%;
  width:100%;
}

.contact-title{
  position:absolute;
  left:var(--pad-left);
  top:14.8vh;
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:56px;
  line-height:1;
}

.contact-email{
  position:absolute;
  left:var(--pad-left);
  top:29.1vh;
  font-size:22px;
  color:rgba(0,0,0,.55);
  transition:opacity .2s ease;
}

.contact-email:hover{ opacity:.6; }

.contact-find{
  position:absolute;
  left:var(--pad-left);
  top:73.9vh;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.find-label{
  font-weight:700;
  font-size:15px;
}

.find-link{
  font-weight:700;
  font-size:13px;
  width:fit-content;
  border-bottom:1.5px solid var(--black);
  padding-bottom:2px;
  transition:opacity .2s ease;
}

.find-link:hover{ opacity:.55; }

.contact-location{
  position:absolute;
  left:44.4vw;
  top:73.7vh;
  font-weight:700;
  font-size:19px;
  white-space:nowrap;
}

.say-hello{
  position:absolute;
  left:62.6vw;
  top:15.6vh;
  font-size:26px;
}

.contact-form{
  position:absolute;
  left:62.6vw;
  top:27.5vh;
  width:calc(100vw - var(--pad-right) - 62.6vw); /* s'arrête au niveau du menu burger */
}

.field{
  position:absolute;
  display:block;
}

.field-label{
  display:block;
  font-weight:700;
  font-size:16px;
  letter-spacing:.2px;
  margin-bottom:6px;
}

.field input,
.field textarea{
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid rgba(0,0,0,.15);
  padding:2px 0 8px;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:15px;
  color:rgba(0,0,0,.45);
  background:transparent;
  resize:none;
}

.field input:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:rgba(0,0,0,.5);
  color:var(--black);
}

.field-name{ left:0; top:0; width:46%; }
.field-phone{ left:54%; top:0; width:46%; }
.field-company{ left:0; top:16.2vh; width:46%; }
.field-mail{ left:54%; top:16.2vh; width:46%; }
.field-message{ left:0; top:30.7vh; width:100%; }

.submit-btn{
  position:absolute;
  left:0;
  top:45.9vh; /* = 73.4vh - top du formulaire (27.5vh), relatif au form */
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:19px;
  font-family:inherit;
  color:var(--black);
  border-bottom:1.5px solid var(--black);
  padding-bottom:2px;
  transition:opacity .2s ease;
}

.submit-btn:hover{ opacity:.6; }
.submit-btn span{ border-bottom:none; }

.form-status{
  position:absolute;
  left:0;
  top:50.7vh; /* = 78.2vh - top du formulaire (27.5vh), relatif au form */
  margin:0;
  font-size:14px;
  color:rgba(0,0,0,.5);
}

.form-thanks{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:19px;
  color:var(--black);
  max-width:420px;
  margin:0;
}

.contact-footer{
  position:absolute;
  left:12vw;
  right:7.2vw;
  top:94vh;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
}

.contact-footer a{
  font-size:12px;
  color:rgba(0,0,0,.75);
  transition:opacity .2s ease;
}

.contact-footer a:hover{ opacity:.55; }

.footer-year{
  font-size:12px;
  color:rgba(0,0,0,.75);
  margin-left:auto;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width:900px){
  :root{
    --pad-left: 6vw;
    --pad-right: 6vw;
    --content-left: 6vw;
    --header-top: 4vh;
    --contact-top: 4vh; /* même hauteur que le logo, à côté (pas en dessous) */
    --hero-baseline: 32vh;
    --description-top: auto;
  }

  .logo{ font-size:13px; line-height:11px; }
  .contact-link{ font-size:12px; }
  .burger{ width:36px; height:13px; }

  /* positionné à côté du logo (pas superposé, pas en dessous) : entre
     le logo et le burger, sur la même ligne */
  .contact-nav{
    left:38vw;
  }

  .project-number{ font-size:14px; position:static; display:block; margin-bottom:12px; }
  .project-title{
    position:static;
    display:block;
    right:auto;
    font-size:46px;
    white-space:normal;
    max-width:88vw;
  }
  .scroll-down{ position:static; display:block; font-size:10px; margin-top:14px; }
  .hero-anchor{
    position:absolute;
    top:32vh;
    left:var(--pad-left);
    right:var(--pad-right);
    height:auto;
  }

  .project-index{
    left:var(--pad-left);
    top:auto;
    bottom:10.5vh;
    font-size:10px;
  }

  .project-description{
    left:var(--pad-left);
    right:var(--pad-right);
    top:auto;
    bottom:14vh;
    max-width:none;
    font-size:12px;
  }

  .menu-links a{ font-size:32px; }

  /* --- CONTACT : passage en colonne, la maquette desktop en position
     absolute ne tient pas sur petit écran --- */

  .contact-section{
    height:auto;
    min-height:100vh;
  }

  .contact-content{
    height:auto;
    display:flex;
    flex-direction:column;
    padding:14vh 6vw 8vh;
    gap:36px;
  }

  .contact-title,
  .contact-email,
  .say-hello,
  .contact-form,
  .contact-footer{
    position:static;
    left:auto; right:auto; top:auto; bottom:auto;
    width:auto;
  }

  .contact-title{ order:1; font-size:38px; }
  .contact-email{ order:2; }
  .say-hello{ order:3; font-size:20px; }
  .contact-form{ order:4; }

  /* "Find us" et "Paris, France" restent côte à côte, comme sur la
     maquette mobile — seul le conteneur global passe en colonne */
  .contact-bottom-row{
    order:5;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
  }
  .contact-find{ position:static; }
  .contact-location{ position:static; }

  .contact-footer{
    order:6;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .footer-year{ margin-left:0; margin-top:8px; }

  /* le formulaire garde ses 2 colonnes (NAME/PHONE, COMPANY/MAIL),
     seul Message passe en pleine largeur — géré via flex-wrap plutôt
     que le positionnement absolu utilisé sur desktop */
  .contact-form{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    row-gap:22px;
  }
  .field{
    position:static;
    width:47%;
    margin-bottom:0;
  }
  .field-message{ width:100%; }
  .submit-btn{ position:static; width:100%; margin-top:20px; }
  .form-status{ position:static; width:100%; margin-top:10px; }
}

/* ---------------------------------------------------------
   PAGE PROJET — grille de 6 images plein écran (3 colonnes x 2
   lignes = 100vh) + une 7e image visible en scrollant en dessous.
   Chaque case est un lien cliquable (voir projet.js).
   --------------------------------------------------------- */

#project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
  width:100vw;
  height:100vh;
}

.grid-cell{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--black);
  opacity:0;
  transform:scale(1.05);
  transition:opacity .7s ease, transform .8s ease;
}

.grid-cell.revealed{
  opacity:1;
  transform:scale(1);
}

.cell-thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .35s ease, transform .5s ease;
}

.grid-cell:hover .cell-thumb{
  transform:scale(1.04);
}

/* la vidéo se cache derrière la vignette par défaut, et prend sa
   place au survol — la vignette s'efface en fondu pendant ce temps */
.cell-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .35s ease;
}

.grid-cell:hover .cell-thumb,
.grid-cell.is-active .cell-thumb{
  opacity:0;
}

.grid-cell:hover .cell-video,
.grid-cell.is-active .cell-video{
  opacity:1;
}

.grid-cell .no-image{
  position:absolute;
  inset:0;
  background:#111;
}

/* assombrissement, comme sur la maquette */
.grid-cell .dim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  pointer-events:none;
  transition:background .3s ease;
}

.grid-cell:hover .dim,
.grid-cell.is-active .dim{
  background:rgba(0,0,0,0.15);
}

/* titre en surimpression, révélé au survol */
.cell-text{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  transform:translate(-50%, -50%) translateY(10px);
  text-align:center;
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
  padding:0 24px;
}

.cell-title{
  display:block;
  margin:0; /* reset la marge par défaut des <h1>/<h2> */
  color:var(--white);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:.4px;
  text-transform:uppercase;
  line-height:1.2;
}

.cell-subtitle{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.75);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:12px;
  letter-spacing:.3px;
}

.grid-cell:hover .cell-text,
.grid-cell.is-active .cell-text{
  opacity:1;
  transform:translate(-50%, -50%) translateY(0);
}

/* les cases supplémentaires (7, 8...) sont alignées comme les autres,
   sur la même grille à 3 colonnes — la 3e colonne reste noire/vide
   tant qu'il n'y a pas de 9e case */
#project-extra{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:1fr;
  width:100vw;
  height:50vh; /* même hauteur qu'une case de la grille principale (2 lignes dans 100vh) */
  background:var(--black);
}

#project-extra .grid-cell{
  height:100%;
}

@media (max-width:900px){
  #project-grid{
    grid-template-columns:1fr;
    grid-template-rows:repeat(6, 60vh);
    height:auto;
  }
  #project-extra{
    grid-template-columns:1fr;
    height:auto;
  }
  #project-extra .grid-cell{
    height:60vh;
  }
}

/* page projet : pas d'écran de démarrage ici, donc le header doit
   être visible tout de suite (pas de délai calé sur le splash) */
.page-project #site-header{
  opacity:1;
  transform:none;
  animation:none;
}

/* ---------------------------------------------------------
   FOOTER (pages sur fond sombre — ex : page projet)
   Même contenu que le footer de la page contact, mais en clair sur
   fond noir puisque la page projet reste dans le thème sombre du
   site (contrairement à la page contact, qui passe en thème clair).
   --------------------------------------------------------- */

.page-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:16px 24px;
  padding:32px 6vw 28px;
  background:var(--black);
}

.page-footer a{
  font-size:12px;
  color:rgba(255,255,255,.75);
  transition:opacity .2s ease;
}

.page-footer a:hover{ opacity:.6; }

.page-footer-year{
  font-size:12px;
  color:rgba(255,255,255,.75);
  margin-left:auto;
}

@media (max-width:900px){
  .page-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:28px 6vw 32px;
  }
  .page-footer-year{ margin-left:0; margin-top:8px; }
}

/* ---------------------------------------------------------
   PAGES LÉGALES (mentions légales, confidentialité, cookies)
   Simples, sur fond noir, cohérentes avec le reste du site.
   --------------------------------------------------------- */

.legal-page{
  min-height:100vh;
  padding:16vh 6vw 10vh;
  max-width:760px;
}

.legal-page h1{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:clamp(32px, 4vw, 48px);
  margin-bottom:12px;
}

.legal-page .legal-updated{
  font-size:13px;
  color:rgba(255,255,255,.5);
  margin-bottom:48px;
}

.legal-page h2{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:20px;
  margin:40px 0 12px;
}

.legal-page p,
.legal-page li{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.8);
}

.legal-page ul{
  margin:8px 0 8px 20px;
}

.legal-page a{
  text-decoration:underline;
  color:var(--white);
}

.legal-page .legal-todo{
  color:rgba(255,180,120,.85);
  font-style:italic;
}

.legal-back{
  display:inline-block;
  margin-top:56px;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.6);
  padding-bottom:2px;
}

/* ---------------------------------------------------------
   PAGE À PROPOS — texte centré, deux cercles en pointillés
   animés en rotation lente de part et d'autre.
   --------------------------------------------------------- */

/* thème clair pour cette page (fond blanc, texte noir) — le header
   reste lisible grâce au mix-blend-mode déjà en place */
.page-about,
.page-about .page-footer{
  background:var(--white);
  color:var(--black);
}

.page-about .page-footer a,
.page-about .page-footer-year{
  color:rgba(0,0,0,.75);
}

/* le mix-blend-mode du header (pensé pour les vidéos sombres) rend le
   logo illisible sur fond blanc uni — sur cette page, on repasse en
   couleurs pleines et lisibles */
.page-about #site-header{
  mix-blend-mode:normal;
}

.page-about .logo,
.page-about .contact-link{
  color:var(--black);
}

.page-about .contact-link{
  border-bottom-color:var(--black);
}

.page-about .burger span{
  background:var(--black);
}

.about-section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0 6vw;
}

.about-text{
  position:relative;
  z-index:2;
  margin:0; /* reset la marge par défaut du <h1> */
  max-width:680px;
  text-align:center;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:clamp(15px, 1.6vw, 19px);
  line-height:1.7;
  letter-spacing:.3px;
  cursor:default;
}

/* chaque mot est un span animable ; au survol du paragraphe, ils
   dansent légèrement en vague les uns après les autres */
.about-text .word{
  display:inline-block;
  transition:transform .4s ease, color .4s ease;
}

.about-text:hover .word{
  animation:about-word-bounce 1.1s ease;
}

@keyframes about-word-bounce{
  0%   { transform:translateY(0); }
  35%  { transform:translateY(-8px); color:rgba(0,0,0,.55); }
  100% { transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .about-text:hover .word{ animation:none; }
}

.about-circle{
  position:absolute;
  top:50%;
  width:min(38vw, 480px);
  height:min(38vw, 480px);
  transform:translateY(-50%);
  z-index:1;
  pointer-events:none;
}

.about-circle-left{
  left:min(-8vw, -60px);
  animation:about-spin 40s linear infinite;
}

.about-circle-right{
  right:min(-8vw, -60px);
  animation:about-spin 34s linear infinite reverse;
}

@keyframes about-spin{
  to{ transform:translateY(-50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .about-circle{ animation:none; }
}

@media (max-width:900px){
  .about-circle{
    width:60vw;
    height:60vw;
    opacity:.6;
  }
  .about-circle-left{ left:-20vw; }
  .about-circle-right{ right:-20vw; }
  .about-text{ font-size:14px; }
}