/* théa.fr — page projet
   Généré depuis les <style> inline. Aucune étape de build. */

/* Écarts assumés par rapport à styles.css */
:root{--rule:rgba(199,212,186,0.25);}
body{min-height:100vh;}
img{height:auto;}

.page{padding-top:48px;}  /* hauteur de la nav commune */
.state-msg{text-align:center;padding:120px 30px;font-size:13px;color:var(--text-muted);}

/* ── Mise en page : médias à gauche, infos à droite ───────
   La colonne d'infos est collante : titre, description et
   disciplines restent lisibles pendant qu'on parcourt les
   médias, au lieu de disparaître après le premier écran. */
.project-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:56px;
  align-items:start;
  max-width:1440px;
  margin:0 auto;
  padding:56px 40px 96px;
}
.project-info{position:sticky;top:96px;}  /* 60 de nav flottante + marge */
.project-tags{font-size:12px;color:var(--text-muted);letter-spacing:0.2px;margin-bottom:14px;}
.project-title{font-size:clamp(28px,3.4vw,46px);font-weight:400;letter-spacing:-1.8px;line-height:1.05;margin-bottom:26px;}
.info-block{padding:20px 0;border-top:1px solid var(--rule);}
.info-label{display:block;font-size:12px;letter-spacing:-0.2px;color:var(--text-muted);margin-bottom:8px;}
.info-block p{font-size:15px;line-height:1.65;letter-spacing:-0.2px;white-space:pre-wrap;}
.info-nav{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--rule-strong);}
.info-nav a{font-size:13px;color:var(--text-muted);transition:color 0.2s;}
.info-nav a:hover{color:var(--text-on-dark);}

/* ── Cartes média ─────────────────────────────────────────
   Rotation légère mais FIGÉE par carte : une suite prédéfinie
   plutôt que Math.random(), sinon les cartes se replacent à
   chaque rendu. Au survol elles se redressent et grandissent. */
/* Maçonnerie. Une grille classique étire chaque carte à la hauteur
   de sa rangée : une photo horizontale posée à côté d'une verticale
   se retrouvait avec 390px de vide sous elle. Ici les cartes gardent
   leur hauteur propre et se calent vers le haut — l'étendue en
   rangées est calculée dans project.js, après chargement du média. */
.project-media{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:26px;
  row-gap:0;
  align-items:start;
  grid-auto-rows:1px;
}
.media-card{margin-bottom:26px;}

/* Dispositions selon le nombre de cartes — une grille à deux colonnes
   figée laisse un trou en bas dès que le compte est impair, et serre
   inutilement les projets qui n'ont qu'un ou deux médias. */
.project-media.count-1{grid-template-columns:1fr;}
/* Deux médias seulement : empilés pleine largeur plutôt que serrés
   côte à côte — à deux, chacun mérite toute la colonne. */
.project-media.count-2{grid-template-columns:1fr;}
.project-media.lead-wide > .media-card:first-child{grid-column:1/-1;}
.project-media.dense{grid-template-columns:repeat(3,1fr);column-gap:20px;}
.project-media.dense .media-card{margin-bottom:20px;}
@media(max-width:1240px){
  .project-media.dense{grid-template-columns:repeat(2,1fr);column-gap:26px;}
  .project-media.dense .media-card{margin-bottom:26px;}
}
/* Un média seul n'a pas à remplir toute la colonne. */
.project-media.count-1 > .media-card{max-width:900px;margin-inline:auto;}
.media-card{
  --rot:0deg; --revealY:0px;
  position:relative; margin:0;
  border:1px solid var(--rule-strong);
  border-radius:14px;
  overflow:hidden;
  background:var(--rule);
  cursor:zoom-in;
  transform:rotate(var(--rot)) translateY(var(--revealY));
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             opacity .5s ease,
             box-shadow .4s ease;
}
/* Vidéos et embeds sur toute la largeur : au format 16:9 ils sont
   illisibles dans une demi-colonne, et ça évite qu'une vidéo
   isolée en fin de grille laisse une case vide à côté. */
.media-card.is-wide,.media-card.is-embed{grid-column:1/-1;}
/* Pleine largeur seulement pour une vidéo SEULE et horizontale :
   quand un projet en a plusieurs, elles se lisent mieux en grille,
   et une verticale n'a jamais besoin de toute la largeur. */
.project-media.solo-video .media-card.is-video:not(.is-portrait){grid-column:1/-1;}
/* Place réservée avant chargement. Sans elle, une image en lazy-load
   mesure 0, la carte se réduit à ses bordures, l'image ne croise
   jamais le viewport et ne se charge donc jamais : la maçonnerie et
   le lazy-load se bloquaient mutuellement. Le ratio réel reprend la
   main dès que le fichier est arrivé. */
.media-card img{aspect-ratio:4/3;}
.media-card img.is-loaded{aspect-ratio:auto;}
.media-card img,.media-card video{display:block;width:100%;height:auto;}
/* Pas de max-height ici : elle écrasait la vidéo sous son format
   naturel, et object-fit:contain ajoutait alors des bandes noires
   sur les côtés. width:100% + height:auto laisse le fichier donner
   son propre rapport, donc la carte est exactement remplie. */
.media-card.is-video video{background:#0a0a0a;}
/* Vidéo verticale : une colonne normale, côte à côte avec sa voisine. */
.media-card.is-video.is-portrait{grid-column:auto;}
.media-card:hover{transform:rotate(0deg) scale(1.03);box-shadow:0 20px 54px rgba(0,0,0,.28);z-index:3;}
.media-card.reveal{opacity:0;--revealY:20px;}

/* Vidéo : lecture muette à l'entrée dans le champ, son au clic. */
.media-card.is-video{cursor:pointer;}
.card-hint{
  position:absolute;right:12px;bottom:12px;
  font-size:11px;letter-spacing:0.2px;
  padding:5px 12px;border-radius:99px;
  color:var(--text-on-dark);
  background:var(--glass);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  opacity:.9;transition:opacity .3s ease;
  pointer-events:none;
}
.media-card.sound-on .card-hint{opacity:0;}
/* Le clic sur une vidéo active le son ; l'agrandissement a donc
   son propre bouton, sinon les deux gestes se marcheraient dessus. */
.card-expand{
  position:absolute;right:12px;top:12px;
  width:34px;height:34px;border-radius:50%;
  font-size:14px;line-height:1;
  color:var(--text-on-dark);
  background:var(--glass);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease,background .2s ease,color .2s ease;
}
.media-card.is-video:hover .card-expand,.card-expand:focus-visible{opacity:1;}
.card-expand:hover{background:var(--light);color:var(--dark);}
@media(hover:none){.card-expand{opacity:1;}}

/* Embeds (Heyzine, PDF) : pleine largeur, ni rotation ni zoom. */
.media-card.is-embed{cursor:default;}
.media-card.is-embed:hover{transform:rotate(0deg);box-shadow:none;}
.embed-wrap{position:relative;width:100%;padding-bottom:62.5%;background:var(--rule);overflow:hidden;}
.embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block;}
.card-actions{padding:12px;display:flex;gap:12px;}
.embed-dl-btn{font-size:12px;color:var(--text-muted);border:1px solid var(--rule-strong);padding:5px 14px;border-radius:99px;transition:background 0.2s,color 0.2s;}
.embed-dl-btn:hover{background:var(--rule);color:var(--text-on-dark);}

/* ── Lightbox « galerie » ─────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  background:rgba(10,14,15,.62);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
}
.lightbox.open{display:flex;animation:lb-in .35s ease;}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lightbox-inner{position:relative;max-width:92vw;max-height:92vh;display:flex;align-items:center;justify-content:center;}
.lightbox-inner img,.lightbox-inner video{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.5);}
.lightbox-inner video{display:block;background:#000;}
.lightbox-inner [hidden]{display:none!important;}
.lightbox-close,.lightbox-arrow{
  position:fixed;
  border:1px solid var(--glass-border);
  background:var(--glass);
  color:var(--text-on-dark);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.lightbox-close{top:20px;right:24px;width:40px;height:40px;font-size:18px;}
.lightbox-arrow{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:20px;}
.lightbox-close:hover,.lightbox-arrow:hover{background:var(--light);color:var(--dark);}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
.lightbox-counter{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--text-muted);}

@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .lightbox{background:rgba(10,14,15,.94);}
}

/* ── Responsive ── */
@media(max-width:1024px){
  .project-layout{grid-template-columns:1fr;gap:36px;padding:40px 24px 80px;}
  .project-info{position:static;order:-1;}
  .info-nav{flex-direction:row;justify-content:space-between;gap:16px;}
}
@media(max-width:760px){
  .project-media,.project-media.count-2,.project-media.dense{grid-template-columns:1fr;column-gap:18px;}
  .project-media .media-card{margin-bottom:18px;}
}
@media(max-width:640px){
  .project-layout{padding:32px 16px 64px;}
  .project-media{grid-template-columns:1fr;column-gap:18px;}
  .media-card{--rot:0deg;}
  .media-card:hover{transform:none;box-shadow:none;}
}
@media(prefers-reduced-motion:reduce){
  .media-card{--rot:0deg!important;transition:opacity .3s ease;}
  .media-card:hover{transform:none;}
  .lightbox.open{animation:none;}
}

/* ── Liseuse magazine ─────────────────────────────────────
   Pages pré-rendues en WebP : rien n'est analysé côté client,
   contrairement à l'ancienne tentative PDF.js. */
.media-card.is-flipbook{cursor:default;background:transparent;border-color:transparent;}
.media-card.is-flipbook:hover{transform:rotate(0deg);box-shadow:none;}
.flipbook{--flip-aspect:0.707;}
.flip-stage{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  perspective:2400px;
  background:#0c0f10;
  border:1px solid var(--rule-strong);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  cursor:pointer;
}
.flip-slot{position:relative;aspect-ratio:var(--flip-aspect);background:#0c0f10;}
.flip-stage .flip-left{cursor:w-resize;}
.flip-stage .flip-right{cursor:e-resize;}
.flip-slot img{width:100%;height:100%;object-fit:contain;display:block;}
/* Pli central, pour que deux pages lisent comme un vrai cahier. */
.flip-stage::after{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:34px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 46%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.30) 54%,rgba(0,0,0,0) 100%);
  pointer-events:none;z-index:4;
}
.flipbook{--flip-dur:.68s;--flip-ease:cubic-bezier(.37,0,.24,1);}
.flip-leaf{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-style:preserve-3d;transform-origin:left center;
  transition:transform var(--flip-dur) var(--flip-ease);
  z-index:6;
}
.flip-leaf.from-left{left:0;transform-origin:right center;}
.flip-leaf.turn-next{transform:rotateY(-180deg);}
.flip-leaf.turn-prev{transform:rotateY(180deg);}
.leaf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0c0f10;overflow:hidden;}
.leaf-face img{width:100%;height:100%;object-fit:contain;display:block;}
.leaf-back{transform:rotateY(180deg);}

/* Ombrage dynamique. Sans lui la rotation se lit comme une image qui
   pivote : une vraie page s'assombrit en passant par la tranche puis
   s'éclaircit en se posant. Animation plutôt que transition, parce
   que l'ombre doit culminer au milieu du geste, pas à la fin. */
.leaf-face::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
}
.leaf-front::after{background:linear-gradient(to left,rgba(0,0,0,.58),rgba(0,0,0,.04) 62%);}
.leaf-back::after{background:linear-gradient(to right,rgba(0,0,0,.58),rgba(0,0,0,.04) 62%);}
.flip-leaf.turn-next .leaf-front::after,
.flip-leaf.turn-prev .leaf-front::after{animation:leaf-shade-out var(--flip-dur) var(--flip-ease) forwards;}
.flip-leaf.turn-next .leaf-back::after,
.flip-leaf.turn-prev .leaf-back::after{animation:leaf-shade-in var(--flip-dur) var(--flip-ease) forwards;}
@keyframes leaf-shade-out{0%{opacity:0}52%{opacity:1}100%{opacity:.55}}
@keyframes leaf-shade-in{0%{opacity:1}48%{opacity:.9}100%{opacity:0}}

/* Le creux du pli s'accentue pendant le geste. */
.flip-stage.turning::after{animation:gutter-deepen var(--flip-dur) var(--flip-ease);}
@keyframes gutter-deepen{0%,100%{opacity:1}50%{opacity:1.6}}

.flip-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 2px;}
.flip-btn{
  width:36px;height:36px;border-radius:50%;
  font-size:16px;line-height:1;
  color:var(--text-on-dark);
  background:var(--glass);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,opacity .2s ease;
}
.flip-btn:hover:not(:disabled){background:var(--light);color:var(--dark);}
.flip-btn:disabled{opacity:.3;}
.flip-counter{font-size:12px;color:var(--text-muted);min-width:92px;text-align:center;}
.flip-title{font-size:12px;color:var(--text-muted);text-align:center;padding-top:2px;}

/* Plein écran : même verre dépoli que la lightbox. */
.flipbook.is-full{
  position:fixed;inset:0;z-index:1200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:26px;
  background:rgba(10,14,15,.62);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
}
.flipbook.is-full .flip-stage{max-width:min(96vw,1500px);max-height:82vh;width:100%;}
.flipbook.is-full .flip-slot{aspect-ratio:var(--flip-aspect);max-height:82vh;}

@media(max-width:760px){
  /* Une seule page à la fois : deux A4 côte à côte sont illisibles
     sur un téléphone. */
  .flip-stage{grid-template-columns:1fr;}
  .flip-stage .flip-left{display:none;}
  .flip-stage::after{display:none;}
  .flip-leaf{left:0;width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .flip-leaf{transition:none;}
}
.flip-dl{text-decoration:none;font-size:15px;}