/* ============================================================
   CASE STUDY — page projet (thème sombre, éditorial)
   Image d'arrivée plein cadre, titre + sous-titre, texte d'intro
   justifié à gauche, blocs de contenu flexibles, nav prev/suivant.
   ============================================================ */

.case-page{
  background:var(--black);
  color:#f1f0ee;
  overflow:visible;       /* override du body overflow:hidden de la home : scroll fenêtre normal */
  height:auto;            /* override du body height:100vh de la home */
}

:root{
  --case-pad: clamp(10px, 2.5vw, 40px);   /* marge horizontale (réduite de moitié) */
  --soft: rgba(241,240,238,.58);
  --hair: rgba(241,240,238,.14);
}

/* ---------- HEADER ---------- */
.case-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center;
  padding:26px var(--case-pad);
  color:#fff;                 /* blanc constant, pas d'inversion selon le fond */
}
/* léger voile noir -> transparent derrière le menu : garde « All projects » et « RG »
   lisibles quand le scroll passe sur un visuel clair (logo sur blanc, mockups, etc.) */
.case-header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:132px;
  background:linear-gradient(to bottom, rgba(6,6,6,.55) 0%, rgba(6,6,6,0) 100%);
  pointer-events:none; z-index:-1;
}
.case-header .brand{
  position:absolute; left:50%; transform:translateX(-50%);   /* RG centré à l'écran */
  font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.06em; color:#fff;
}
.case-back{
  font-family:var(--display); font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
  display:flex; align-items:center; gap:9px; opacity:.85;
  transition:opacity .35s var(--ease);
}
.case-back:hover{ opacity:1; }
.case-back .a{ display:inline-block; transition:transform .45s var(--ease); }
.case-back:hover .a{ transform:translateX(-5px); }

/* ---------- IMAGE D'ARRIVÉE ---------- */
.case-cover{
  position:relative; height:100vh; width:100%; overflow:hidden;
}
.case-cover-img{
  width:100%; height:120%;            /* marge pour la parallaxe */
  object-fit:cover; display:block;
  will-change:transform;
}
.case-cover::after{   /* dégradé bas pour ancrer les infos */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(6,6,6,.25) 0%, rgba(6,6,6,0) 22%, rgba(6,6,6,0) 62%, rgba(6,6,6,.85) 100%);
}
.case-cover-foot{
  position:absolute; left:var(--case-pad); right:var(--case-pad); bottom:34px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.78);
}
.case-cover-num{ font-size:13px; }
.case-scroll{ display:flex; align-items:center; gap:10px; }
.case-scroll .bar{ width:1px; height:30px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.case-scroll .bar::after{ content:""; position:absolute; top:-30px; left:0; width:1px; height:30px; background:#fff; animation:caseScroll 2.2s var(--ease) infinite; }
@keyframes caseScroll{ 0%{transform:translateY(0)} 100%{transform:translateY(60px)} }

/* ---------- INTRO : titre + sous-titre + texte ---------- */
.case-intro{
  padding:clamp(80px,12vh,160px) var(--case-pad) clamp(60px,9vh,120px);
  max-width:1600px; margin:0 auto;
}
.case-kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--soft); margin-bottom:26px;
}
.case-kicker:empty{ display:none; }   /* pas de surtitre -> pas d'espace réservé */
.case-title{
  font-family:var(--serif); font-weight:340; font-style:italic;
  font-size:clamp(52px, 9vw, 150px); line-height:.94; letter-spacing:-0.02em;
  margin-bottom:18px;
}
.case-subtitle{
  font-family:var(--display); font-weight:400;
  font-size:28px; line-height:1.4; letter-spacing:-0.01em;
  color:#f1f0ee; max-width:760px; margin-bottom:48px;
}
/* version anglaise du chapeau : plus petite, grisée, sous le français */
.case-subtitle-en{
  display:block; margin-top:16px;
  font-family:var(--display); font-weight:300;
  font-size:18px; line-height:1.6; letter-spacing:.01em; color:var(--soft);
}
.case-lead{
  font-family:var(--display); font-weight:300;
  font-size:clamp(15px, 1.25vw, 18px); line-height:1.75; letter-spacing:.005em;
  color:var(--soft);
  max-width:560px;            /* colonne de gauche */
  text-align:justify;         /* ferré + justifié à gauche */
  text-justify:inter-word;
}
.case-meta{
  list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px; margin-top:64px; padding-top:30px; border-top:1px solid var(--hair);
  max-width:880px;
}
.case-meta .k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin-bottom:8px; }
.case-meta .v{ font-family:var(--display); font-size:15px; font-weight:500; }

/* ---------- BLOCS DE CONTENU ---------- */
.case-blocks{
  max-width:1600px; margin:0 auto;
  padding:0 var(--case-pad);
  display:flex; flex-direction:column; gap:clamp(60px, 10vh, 150px);
}
figure{ margin:0; }
/* média : le wrap clippe, le zoom se fait sur l'image/vidéo au survol */
.blk-mwrap{ display:block; overflow:hidden; border-radius:6px; background:#0c0c0e; }
.blk-mwrap img,
.blk-mwrap video{
  width:100%; display:block; will-change:transform;
  transition:transform 1.1s var(--ease);
}
.blk-media:hover .blk-mwrap img,
.blk-media:hover .blk-mwrap video{ transform:scale(1.045); }
figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--soft); margin-top:14px; }

/* bouton son (vidéo avec piste audio, ex. film manifeste) */
.blk-mwrap{ position:relative; }
.blk-sound{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  border:none; border-radius:999px; cursor:pointer;
  color:#fff; background:rgba(8,8,10,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.blk-sound:hover{ background:rgba(8,8,10,.78); transform:scale(1.06); }
.blk-sound .on{ display:none; }        /* muet par défaut : ondes cachées, croix visible */
.blk-sound .off{ display:block; }
.blk-sound.is-on .on{ display:block; } /* son actif : ondes visibles, croix cachée */
.blk-sound.is-on .off{ display:none; }

/* visuel plein */
.blk-image{ }

/* média volontairement réduit et centré (ex. vidéo basse résolution, évite l'upscale flou) */
.blk--narrow{ max-width:680px; margin-left:auto; margin-right:auto; }

/* deux visuels côte à côte */
.blk-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); }

/* mosaïque : N visuels de LARGEUR ÉGALE répartis en 2 colonnes, hauteurs libres
   (chaque image garde son ratio). Repli CSS multi-colonnes si le JS ne s'exécute pas ;
   le JS (setupMasonry) bascule ensuite sur de vraies colonnes DOM -> pas de coupure. */
.blk-masonry{ columns:2; column-gap:clamp(16px,2vw,28px); }
.blk-masonry > .blk-media{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 clamp(16px,2vw,28px);
}
.blk-masonry.is-laid{ columns:auto; display:flex; gap:clamp(16px,2vw,28px); align-items:flex-start; }
.blk-masonry.is-laid > .blk-media{ margin:0; }        /* plus de média direct une fois réparti */
.blk-masonry .blk-mcol{
  flex:1 1 0; min-width:0;                              /* colonnes de largeur strictement égale */
  display:flex; flex-direction:column; gap:clamp(16px,2vw,28px);
}

/* visuel + texte sur la même rangée */
.blk-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,80px); align-items:center; }
.blk-split.flip .blk-split-img{ order:2; }
.blk-split-text p{
  font-family:var(--display); font-weight:300;
  font-size:clamp(16px,1.4vw,20px); line-height:1.7; color:#d9d8d4;
  text-align:justify; text-justify:inter-word;
}

/* bloc texte bilingue : deux colonnes (FR d'un côté, EN de l'autre) */
.blk-text{
  max-width:1300px;
  display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(30px,4vw,72px); align-items:start;
}
.blk-text--right{ align-self:flex-end; grid-template-columns:1fr 1.5fr; }

/* liens sous un bloc texte (voir le site en ligne) */
.blk-links{ display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:34px; }
.blk-text--right .blk-links{ justify-content:flex-end; }
.blk-link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:15px; font-weight:500; letter-spacing:.01em;
  color:#f1f0ee; padding-bottom:4px;
  border-bottom:1px solid rgba(241,240,238,.28);
  transition:border-color .35s var(--ease), opacity .35s var(--ease);
}
.blk-link:hover{ border-color:#f1f0ee; }
.blk-link-arrow{ font-size:13px; display:inline-block; transition:transform .35s var(--ease); }
.blk-link:hover .blk-link-arrow{ transform:translate(3px,-3px); }
.blk-text p{
  grid-column:1;   /* FR : colonne principale */
  font-family:var(--serif); font-weight:340;
  font-size:38px; line-height:1.42; letter-spacing:-0.01em; color:#f1f0ee;
}
/* version anglaise : dans l'AUTRE colonne, un peu plus petite et grisée */
.blk-text .blk-en{
  grid-column:2; align-self:start;
  font-family:var(--display); font-weight:300;
  font-size:18px; line-height:1.72; letter-spacing:.01em; color:var(--soft);
}
.blk-text .blk-h{ grid-column:1 / -1; }
.blk-text .blk-links{ grid-column:1; }
/* bloc ancré à droite : FR dans la colonne de droite, EN à gauche */
.blk-text--right p{ grid-column:2; text-align:right; }
.blk-text--right .blk-en{ grid-column:1; text-align:left; }
.blk-text--right .blk-links{ grid-column:2; }
.blk-h{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--soft); margin-bottom:22px;
}

/* ---------- NAV PRÉCÉDENT / SUIVANT ---------- */
.case-nav{
  margin-top:clamp(90px,14vh,180px);
  border-top:1px solid var(--hair);
  display:grid; grid-template-columns:1fr 1fr;
}
.case-nav-item{
  padding:clamp(40px,6vh,80px) var(--case-pad);
  display:flex; flex-direction:column; gap:22px;
  color:#f1f0ee; transition:background .4s var(--ease);
}
.case-nav-item.next{ align-items:flex-end; text-align:right; border-left:1px solid var(--hair); }
.case-nav-item:hover{ background:rgba(241,240,238,.03); }
.case-nav .nav-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft);
}
.case-nav .nav-card{ display:flex; align-items:center; gap:20px; }
.case-nav-item.next .nav-card{ flex-direction:row-reverse; }
.case-nav .nav-card img{
  width:128px; aspect-ratio:16/9; object-fit:cover; border-radius:5px; flex:0 0 auto;
  transition:transform .55s var(--ease); will-change:transform;
}
.case-nav-item:hover .nav-card img{ transform:scale(1.05); }
.case-nav .nav-title{
  font-family:var(--serif); font-style:italic; font-weight:340;
  font-size:clamp(26px,3.4vw,52px); line-height:1; letter-spacing:-0.01em;
}

/* footer : reprise du footer homepage (dégradé vivant + ligne + mentions) */
.case-footer{
  position:relative; overflow:hidden;
  background:#0a0a0c; border-top:1px solid var(--hair);
  min-height:86vh; display:flex; flex-direction:column;
}
.case-footer-inner{
  flex:1 1 auto; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(90px,16vh,180px) var(--case-pad) clamp(50px,8vh,90px);
}
.case-footer-title{
  font-family:var(--serif); font-style:italic; font-weight:340;
  font-size:clamp(44px,7vw,116px); line-height:.98; letter-spacing:-0.02em; color:#fff;
  margin-bottom:clamp(28px,4vh,44px);
}
.case-footer-cta{
  display:inline-block;
  font-family:var(--display); font-size:14px; font-weight:500; letter-spacing:.1em;
  color:#0b0b0b; background:#fff; padding:15px 34px; border-radius:999px;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.case-footer-cta:hover{ transform:scale(1.05); background:#f1f0ee; }

/* ---------- écran de saisie (projet protégé) ---------- */
.case-gate{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:0 24px;
  background:rgba(6,6,6,.78);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.case-gate-inner{ text-align:center; max-width:380px; width:100%; color:#f1f0ee; }
.case-gate-lock{ color:#fff; opacity:.9; margin-bottom:18px; }
.case-gate-inner h2{
  font-family:var(--serif); font-style:italic; font-weight:340;
  font-size:clamp(30px,4vw,46px); letter-spacing:-0.01em; margin-bottom:14px;
}
.case-gate-inner > p{ font-family:var(--display); font-weight:300; font-size:14px; line-height:1.6; color:var(--soft); margin-bottom:26px; }
.case-gate-form{ display:flex; flex-direction:column; gap:12px; }
.case-gate-form input{
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--hair); color:#fff;
  border-radius:999px; padding:14px 20px; font:inherit; font-family:var(--display); text-align:center; outline:none;
  transition:border-color .3s var(--ease);
}
.case-gate-form input:focus{ border-color:rgba(255,255,255,.4); }
.case-gate-form button{
  font-family:var(--display); font-size:14px; font-weight:500; letter-spacing:.06em;
  color:#0b0b0b; background:#fff; border:none; border-radius:999px; padding:14px 24px; cursor:pointer;
  transition:transform .3s var(--ease);
}
.case-gate-form button:hover{ transform:scale(1.03); }
.case-gate-form button:disabled{ opacity:.6; cursor:default; transform:none; }
.case-gate-err{ min-height:18px; margin-top:14px; font-family:var(--display); font-size:13px; color:#ff8b8b; }
.case-gate-back{ display:inline-block; margin-top:22px; font-family:var(--display); font-size:13px; letter-spacing:.04em; color:var(--soft); }
.case-gate-back:hover{ color:#fff; }

/* états initiaux pour les reveals GSAP (réinitialisés si pas de GSAP) */
.case-cover-img,
.case-intro .r,
.case-blocks .blk,
.case-nav-item{ opacity:0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  /* cover réduite en bandeau paysage : ne crope qu'environ 30% de la largeur du 16/9 */
  .case-cover{ height:auto; aspect-ratio:3 / 2; }
  /* pas de shader WebGL sur mobile : lueur statique discrète en bas du footer */
  .case-footer{ min-height:70vh; }
  .case-footer.aurora-off::after{
    content:""; position:absolute; left:-20%; right:-20%; bottom:-30%; height:70%;
    background:radial-gradient(ellipse at 40% 100%, rgba(255,122,40,.34), rgba(214,160,120,.16) 45%, rgba(10,10,12,0) 72%);
    filter:blur(30px); pointer-events:none;
  }
  .case-subtitle-en{ font-size:15px; margin-top:12px; }
  /* mobile : une seule colonne, EN empilé sous le FR */
  .blk-text, .blk-text--right{ grid-template-columns:1fr; }
  .blk-text p, .blk-text--right p{ grid-column:1; font-size:26px; line-height:1.4; text-align:left; }
  .blk-text .blk-en, .blk-text--right .blk-en{ grid-column:1; font-size:15px; margin-top:16px; text-align:left; }
  .blk-text--right .blk-links{ grid-column:1; }
  .blk-duo{ grid-template-columns:1fr; }
  .blk-split{ grid-template-columns:1fr; gap:24px; }
  .blk-split.flip .blk-split-img{ order:0; }
  .case-meta{ grid-template-columns:1fr 1fr; gap:20px; }
  .case-nav{ grid-template-columns:1fr; }
  .case-nav-item.next{ border-left:none; border-top:1px solid var(--hair); align-items:flex-start; text-align:left; }
  .case-nav-item.next .nav-card{ flex-direction:row; }
  .case-back{ font-size:0; gap:0; }            /* garde juste la flèche sur mobile */
  .case-back .a{ font-size:18px; }
}