/* ================================================================
   PERSONAL WORK — page laboratoire d'exploration
   ================================================================
   Construit sur le même design system que la page principale, mais
   avec des touches "lab" : numérotation des expériences, italiques
   Fraunces poussés, décalages volontaires, ligne fine lime.
   ================================================================ */


/* ---- HERO de page — vidéo plein écran, miroir du hero pro ----
   Le gabarit vient de hero.css (partagé avec index.html). Ici,
   uniquement les touches "perso" : le mot en italique lime et la
   ligne de terminal dans le pied. */

.hero--perso .hero__nom em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1, 'wght' 700;
  color: var(--couleur-accent);
}

/* Le pied accueille la ligne terminal à gauche, le scroll à droite */
.hero--perso .hero__pied {
  justify-content: space-between;
}

.hero__terminal {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--taille-xs);
  letter-spacing: 0.08em;
  color: var(--couleur-accent);
  opacity: 0.9;
}


/* ================================================================
   PROJET — bloc générique (.pw-proj)
   ================================================================
   Les variantes de layout sont obtenues via des modifieurs :
   .pw-proj--wide (vidéo pleine largeur + méta latérale)
   .pw-proj--portrait (vidéo portrait centrée, titre XXL en fond)
   .pw-proj--grid (grille 2×2 de placeholders)
   .pw-proj--stub (placeholder complet)
   ================================================================ */

.pw-proj {
  position: relative;
  padding: var(--espace-xl) var(--padding-cote);
  max-width: var(--largeur-max);
  margin: 0 auto;
  border-top: 1px solid var(--couleur-trait);
}

.pw-proj__entete {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  margin-bottom: var(--espace-l);
  max-width: 900px;
}

.pw-proj__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--taille-xs);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-accent);
}

.pw-proj__titre {
  font-family: var(--typo-titre);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(56px, 8vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--couleur-texte);
}
.pw-proj__titre em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1, 'wght' 700;
  color: var(--couleur-accent);
}

.pw-proj__pitch {
  font-family: var(--typo-corps);
  font-size: var(--taille-m);
  line-height: 1.5;
  max-width: 680px;
  margin: 0;
  color: var(--couleur-texte);
}

.pw-proj__meta {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espace-m);
  margin: 0 0 var(--espace-l);
  padding: var(--espace-m) 0 0;
  border-top: 1px solid var(--couleur-trait);
}
.pw-proj__meta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pw-proj__meta li span {
  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-texte-doux);
}


/* ---- Média vidéo ---- */

.pw-proj__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background-color: #000;
  aspect-ratio: 16 / 9;          /* défaut pour les vidéos */
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.pw-proj__media video,
.pw-proj__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* Lien inline dans un pitch (ex : momoa.vercel.app) */
.pw-proj__pitch a {
  color: var(--couleur-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity var(--duree-courte) var(--ease-doux);
}
.pw-proj__pitch a:hover {
  opacity: 0.75;
}


/* ================================================================
   LLM DEBATE — sous-blocs spécifiques
   ================================================================
   Composition :
     1. Bloc de contexte (texte + portraits Claude / ChatGPT)
     2. Vidéo "CRT" (bords arrondis, vignettage subtil) + son
     3. Transcription de la conversation (chat embed scrollable + toggle FR/EN)
   ================================================================ */

/* --- 1.1 Vidéo principale (16:9, bords légèrement arrondis) --- */

.pw-llm-video {
  position: relative;
  margin: 0 0 var(--espace-xl);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background-color: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.pw-llm-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* --- 1.2 Portraits Claude + ChatGPT --- */

/* Portraits intégrés dans le cartel "the spark".
   Pas d'aspect-ratio : les portraits prennent EXACTEMENT la hauteur du
   bloc texte voisin (grâce à align-items: stretch sur le cartel). L'image
   à l'intérieur fait du cover et se recadre proprement. C'est ce qui
   évite le débordement qu'on avait quand l'aspect-ratio 4/5 imposait
   une hauteur supérieure à celle du texte. */
.pw-llm-portrait {
  position: relative;
  margin: 0;
  min-height: 0;
  border-radius: 4px;
  overflow: hidden;
  background-color: #000;
}
.pw-llm-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* (Révélation au clic : les <details> historiques ont été remplacés
   par le composant "see more" partagé avec la page pro —
   .projet-toggle / .projet-plus, branché par activerProjetsRepliables.) */


/* --- 1.4 Conversation embarquée --- */

.pw-llm-chat {
  position: relative;
  margin: 0;
  border: 1px solid var(--couleur-trait);
  border-radius: 8px;
  background-color: var(--couleur-fond-alt);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Hauteur bornée pour ne pas étirer la page */
  max-height: 75vh;
}

/* En-tête sticky de la fenêtre de chat : titre + toggle de langue */
.pw-llm-chat__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  padding: var(--espace-s) var(--espace-m);
  border-bottom: 1px solid var(--couleur-trait);
  background-color: rgba(11, 10, 9, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pw-llm-chat__titre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--taille-xs);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-texte-doux);
  display: flex;
  align-items: center;
  gap: var(--espace-s);
}
.pw-llm-chat__titre::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--couleur-accent);
  box-shadow: 0 0 8px var(--couleur-accent);
}

/* Toggle FR / EN — bouton-onglet */
.pw-llm-lang {
  display: inline-flex;
  border: 1px solid var(--couleur-trait);
  border-radius: 999px;
  overflow: hidden;
}
.pw-llm-lang__btn {
  padding: 6px 14px;
  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 600, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-texte-doux);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color var(--duree-courte) var(--ease-doux),
              color var(--duree-courte) var(--ease-doux);
}
.pw-llm-lang__btn[data-actif="true"] {
  background-color: var(--couleur-accent);
  color: var(--couleur-fond);
}
.pw-llm-lang__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.pw-llm-lang__drapeau {
  font-size: 14px;
  line-height: 1;
}

/* Zone qui contient le corps + l'indicateur de scroll custom.
   On masque la scrollbar native (capricieuse sur macOS / Safari)
   et on dessine notre propre piste lime, garantie toujours visible. */
.pw-llm-chat__zone {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
.pw-llm-chat__corps {
  flex: 1 1 auto;
  overflow-y: scroll;
  padding: var(--espace-m);
  padding-right: calc(var(--espace-m) + 18px); /* place pour notre track */
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  /* Cache la scrollbar native (toutes plateformes) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pw-llm-chat__corps::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
/* Track custom — toujours visible, collée au bord droit */
.pw-llm-chat__scroll {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 6px;
  width: 8px;
  background: rgba(244, 240, 234, 0.08);
  border-radius: 4px;
  pointer-events: none; /* l'utilisateur scrolle dans le corps */
}
.pw-llm-chat__scroll-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;          /* recalculé en JS au chargement */
  background: var(--couleur-accent);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(183, 255, 26, 0.4);
  transition: background-color var(--duree-courte) var(--ease-doux);
}


/* Bulle générique */
.pw-llm-msg {
  display: flex;
  gap: var(--espace-s);
  align-items: flex-start;
}
.pw-llm-msg__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pw-llm-msg__avatar img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.pw-llm-msg__bulle {
  flex: 1 1 auto;
  padding: var(--espace-s) var(--espace-m);
  border-radius: 12px;
  font-family: var(--typo-corps);
  font-size: 15px;
  line-height: 1.55;
}
.pw-llm-msg__bulle p { margin: 0 0 0.7em; }
.pw-llm-msg__bulle p:last-child { margin-bottom: 0; }
.pw-llm-msg__bulle h4 {
  font-family: var(--typo-titre);
  font-weight: 600;
  font-size: 17px;
  margin: 1em 0 0.4em;
}
.pw-llm-msg__bulle ul,
.pw-llm-msg__bulle ol { margin: 0 0 0.7em 1.2em; }
.pw-llm-msg__bulle li { margin-bottom: 0.3em; }
.pw-llm-msg__bulle hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 0.8em 0;
}
.pw-llm-msg__bulle strong { font-weight: 700; }
.pw-llm-msg__bulle em { font-style: italic; }
.pw-llm-msg__bulle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.9em;
  background: rgba(0,0,0,0.25);
  padding: 1px 6px;
  border-radius: 3px;
}


/* --- Couleurs par speaker --- */

/* Claude message : brun chaud (rappel logo orange Anthropic) */
.pw-llm-msg--claude-message .pw-llm-msg__bulle {
  background-color: #5C3A22;
  color: #F4E8D8;
}
.pw-llm-msg--claude-message .pw-llm-msg__avatar {
  background-color: #DA7756;
}

/* ChatGPT message : vert sombre */
.pw-llm-msg--gpt-message .pw-llm-msg__bulle {
  background-color: #2C4E3F;
  color: #E5F2EA;
}
.pw-llm-msg--gpt-message .pw-llm-msg__avatar {
  background-color: #10A37F;
}

/* Thinking blocks : fond très sombre + texte teinté + petit liseré */
.pw-llm-msg--claude-thinking .pw-llm-msg__bulle,
.pw-llm-msg--gpt-thinking .pw-llm-msg__bulle {
  background-color: #1B1815;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-style: italic;
  font-size: 14px;
}
.pw-llm-msg--claude-thinking .pw-llm-msg__bulle { color: #C99478; }
.pw-llm-msg--gpt-thinking .pw-llm-msg__bulle    { color: #79B395; }

.pw-llm-msg--claude-thinking .pw-llm-msg__avatar,
.pw-llm-msg--gpt-thinking .pw-llm-msg__avatar {
  background-color: #1B1815;
  border: 1px dashed rgba(255, 255, 255, 0.2);
}
.pw-llm-msg--claude-thinking .pw-llm-msg__avatar::after,
.pw-llm-msg--gpt-thinking .pw-llm-msg__avatar::after {
  content: '...';
  font-family: ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}
.pw-llm-msg--claude-thinking .pw-llm-msg__avatar::after { color: #C99478; }
.pw-llm-msg--gpt-thinking .pw-llm-msg__avatar::after    { color: #79B395; }
/* Étiquette "thinking" en haut du bloc */
.pw-llm-msg--claude-thinking .pw-llm-msg__bulle::before,
.pw-llm-msg--gpt-thinking .pw-llm-msg__bulle::before {
  content: 'Chain of thought';
  display: block;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 10px;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0.7;
  margin-bottom: 6px;
}

/* Bloc animateur (Vincent au micro) */
.pw-llm-msg--host .pw-llm-msg__bulle {
  background-color: transparent;
  border: 1px dashed var(--couleur-accent);
  color: var(--couleur-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.pw-llm-msg--host .pw-llm-msg__avatar {
  background-color: transparent;
  border: 1px solid var(--couleur-accent);
  color: var(--couleur-accent);
  font-size: 16px;
}
.pw-llm-msg--host .pw-llm-msg__avatar::after {
  content: '🎤';
}

/* Placeholder version EN */
.pw-llm-chat__placeholder {
  padding: var(--espace-l);
  text-align: center;
  color: var(--couleur-texte-doux);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--taille-s);
  letter-spacing: 0.08em;
}


/* ---- Variante 2 : AI DANCER (projet Degas) ----
   Composition en trois temps :
     1. Cartel de musée (photo originale + fiche + texte)
     2. Vidéo principale "Degas dancer" (reinterprétation IA, majeure)
     3. Bonus : Blue dance 1.0 (exploration, format mineur vertical)
   ---------------------------------------------------------------- */

/* --- 2.1 Cartel de musée --- */

.pw-degas-cartel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--espace-l);
  align-items: start;
  margin-bottom: var(--espace-xl);
  padding: var(--espace-l);
  background-color: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-trait);
  border-radius: 4px;
}

/* Variante "spark" : texte + 2 portraits côte à côte, plus compact */
.pw-degas-cartel--spark {
  grid-template-columns: 1.8fr 1fr 1fr;
  align-items: stretch;
}

.pw-degas-cartel__photo {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  background-color: #000;
}
.pw-degas-cartel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pw-degas-cartel__fiche {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  padding-top: var(--espace-s);
}

.pw-degas-cartel__surtitre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--taille-xs);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-accent);
}

.pw-degas-cartel__titre {
  font-family: var(--typo-titre);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 0, 'wght' 500;
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--couleur-texte);
}

.pw-degas-cartel__auteur {
  font-family: var(--typo-corps);
  font-size: var(--taille-s);
  color: var(--couleur-texte-doux);
  letter-spacing: 0.02em;
}

/* Fiche : petit tableau à deux colonnes façon cartel */
.pw-degas-cartel__infos {
  list-style: none;
  margin: 0;
  padding: var(--espace-m) 0;
  border-top: 1px solid var(--couleur-trait);
  border-bottom: 1px solid var(--couleur-trait);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--espace-m);
  row-gap: var(--espace-s);
  font-family: var(--typo-corps);
  font-size: var(--taille-s);
}
.pw-degas-cartel__infos dt {
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-texte-doux);
  align-self: center;
}
.pw-degas-cartel__infos dd {
  margin: 0;
  color: var(--couleur-texte);
}

.pw-degas-cartel__texte {
  font-family: var(--typo-corps);
  font-size: var(--taille-s);
  line-height: 1.6;
  color: var(--couleur-texte);
  margin: 0;
}
.pw-degas-cartel__texte em {
  font-style: italic;
  color: var(--couleur-accent);
}


/* --- 2.2 Section Degas : bandeau + vidéo principale --- */

/* La section démarre par son bandeau full-bleed : pas de trait ni
   de padding au-dessus (même logique que MOMoA et Chiaroscuro). */
.pw-degas {
  padding-top: 0;
  border-top: none;
}

/* ---- Bandeau vidéo de section (générique) ----
   Même full-bleed que .pw-momoa-hero, mais avec le TITRE de la
   section en overlay (pas de logo). Réutilisable pour toute section
   qui recevra sa vidéo de bandeau. */
.pw-bandeau {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  margin-bottom: var(--espace-xl);
}
.pw-bandeau__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pw-bandeau__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.05) 35%,
      rgba(0, 0, 0, 0.55) 100%
    );
}
.pw-bandeau__contenu {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--espace-s);
  padding: var(--espace-xl) var(--espace-l);
}
.pw-bandeau__contenu .pw-proj__num {
  color: rgba(255, 255, 255, 0.85);
}
.pw-bandeau__titre {
  margin: 0;
}

@media (max-width: 800px) {
  .pw-bandeau { height: 70vh; }
  .pw-bandeau__contenu { padding: var(--espace-l); }
}

/* Le montage principal est un plan large (2206×946, ~21/9) :
   on lui donne son vrai ratio pour ne rien recadrer. */
.pw-degas-principale {
  position: relative;
  margin: 0 0 var(--espace-xl);
  border-radius: 4px;
  overflow: hidden;
  background-color: #000;
  aspect-ratio: 2206 / 946;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
.pw-degas-principale video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Films perso ----
   Même pattern que la page pro : clic n'importe où sur le film =
   restart avec son + controls natifs (brancherFilmAvecSon), bouton
   "Play with sound" en overlay (css/composants/film-play.css). */
.pw-film {
  cursor: pointer;
}

/* --- Hastings : logo seul (en attendant d'autres assets) --- */
.pw-hastings-logo {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--espace-xl) 0;
}
.pw-hastings-logo img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
}


/* --- 2.3 Bonus : Blue dance 1.0 (mineur) --- */

.pw-degas-bonus {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: var(--espace-l);
  align-items: end;
  padding-top: var(--espace-l);
  border-top: 1px solid var(--couleur-trait);
}
.pw-degas-bonus__media {
  position: relative;       /* ancre le bouton son */
  margin: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 4px;
  background-color: #000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.pw-degas-bonus__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pw-degas-bonus__legende {
  padding-bottom: var(--espace-s);
}
.pw-degas-bonus__surtitre {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--taille-xs);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-accent);
  margin-bottom: var(--espace-s);
  padding: 4px 10px;
  border: 1px solid var(--couleur-accent);
  border-radius: 999px;
}
.pw-degas-bonus__titre {
  font-family: var(--typo-titre);
  font-style: italic;
  font-variation-settings: 'opsz' 72, 'SOFT' 80, 'WONK' 1, 'wght' 500;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.1;
  margin: 0 0 var(--espace-s);
  color: var(--couleur-texte);
}
.pw-degas-bonus__texte {
  font-family: var(--typo-corps);
  font-size: var(--taille-s);
  line-height: 1.55;
  max-width: 480px;
  color: var(--couleur-texte-doux);
  margin: 0;
}


/* ---- Responsive ---- */

@media (max-width: 900px) {
  .pw-proj__meta { grid-template-columns: repeat(2, 1fr); }

  .pw-degas-cartel {
    grid-template-columns: 1fr;
    padding: var(--espace-m);
  }
  .pw-degas-cartel__photo {
    max-width: 360px;
    margin: 0 auto;
  }

  .pw-degas-bonus {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .pw-degas-bonus__media {
    max-width: 280px;
    margin: 0 auto;
  }

  /* Sur mobile le cartel spark passe en colonne — portraits en dessous du texte */
  .pw-degas-cartel--spark {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .pw-degas-cartel--spark .pw-degas-cartel__fiche {
    grid-column: 1 / -1;
  }
  .pw-llm-video {
    border-radius: 8px;
  }
  .pw-llm-chat {
    max-height: 70vh;
  }
}


/* ================================================================
   MOMoA — My Own Museum of Art
   ================================================================
   Composition :
     3.0 Hero plein écran (image "Vue générale" + logo blanc en overlay)
     3.1 Pitch + meta (réutilise .pw-proj__entete et .pw-proj__meta)
     3.2 Plan du musée — texte à gauche, plan à droite
     3.3 Architecture — grille mosaïque (6 vues)
     3.4 Rooms — grille avec figcaption (8 visualisations)
     3.5 Sous-section "exposition Portraits" — vidéo Salvador Dalí
   ================================================================ */


/* ---- 3.0 HERO de section ---- */

.pw-momoa {
  /* On annule le padding-top global de .pw-proj — le hero colle en haut.
     On garde max-width et padding latéral pour que les blocs internes
     (plan, grilles, expo) restent dans la grille du site. Le hero, lui,
     fait son propre full-bleed via margin négative (cf. plus bas).
     Pas de trait au-dessus : le bandeau vidéo fait la séparation. */
  padding-top: 0;
  border-top: none;
}

/* Hero plein bord : sort des marges du conteneur .pw-proj parent.
   Bandeau vidéo plein écran — même grammaire que les heros de la
   page pro (Côte d'Or, Crédit Agricole…). */
.pw-momoa-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  margin-bottom: var(--espace-xl);
}
.pw-momoa-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile très léger pour assurer la lisibilité du logo blanc, sans
   assombrir l'image — le logo doit "respirer" sur l'architecture. */
.pw-momoa-hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.05) 35%,
      rgba(0, 0, 0, 0.55) 100%
    );
  pointer-events: none;
}
.pw-momoa-hero__contenu {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: var(--espace-xl) var(--espace-l);
  gap: var(--espace-m);
  max-width: 980px;
}
.pw-momoa-hero__logo {
  width: clamp(240px, 36vw, 520px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.45));
}
.pw-momoa-hero__baseline {
  font-family: var(--typo-titre);
  font-size: clamp(18px, 1.6vw, 24px);
  font-style: italic;
  font-variation-settings: 'opsz' 48, 'SOFT' 60, 'wght' 400;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 540px;
  line-height: 1.35;
}
.pw-momoa-hero__baseline em {
  color: var(--couleur-accent);
  font-style: italic;
}
/* Le numéro "Experiment 01" dans le hero — version sur vidéo, donc
   on force la lisibilité en blanc (l'orig. est en accent lime). */
.pw-momoa-hero__contenu .pw-proj__num {
  color: rgba(255, 255, 255, 0.85);
}


/* ---- CTA "Visit the museum" — le lien vers le site MOMoA ----
   Pill pleine couleur accent : l'élément le plus visible du hero,
   c'est lui qui emmène vers l'expérience réelle. */

.pw-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--espace-xs);
  padding: 16px 30px;
  border-radius: 999px;

  background-color: var(--couleur-accent);
  color: #0B0A09;

  font-family: var(--typo-corps);
  font-size: var(--taille-s);
  font-variation-settings: 'wght' 700, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;

  transition:
    transform var(--duree-courte) var(--ease-doux),
    box-shadow var(--duree-courte) var(--ease-doux);
}

.pw-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(183, 255, 26, 0.35);
}

.pw-cta__fleche {
  font-size: 1.1em;
  line-height: 1;
  transition: transform var(--duree-courte) var(--ease-doux);
}
.pw-cta:hover .pw-cta__fleche {
  transform: translate(2px, -2px);
}


/* ---- Helpers de section MOMoA ---- */

/* Petit titre de bloc — repris du style "// the spark" du LLM debate :
   monospace-ish, accent lime, présence légère. */
.pw-momoa-section-titre {
  display: inline-block;
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 13px;
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.05em;
  color: var(--couleur-accent);
  margin-bottom: var(--espace-m);
}


/* ---- 3.2 La carte interactive du musée ----
   Le cadre lui-même (.pw-carte3d) et le contenu (règles mmap-*)
   vivent dans css/composants/momoa-carte.css. Ici : juste le bloc
   qui l'accueille dans la grille de la section. */

.pw-momoa-carte3d-bloc {
  padding: var(--espace-l) 0 var(--espace-m);
  border-top: 1px solid rgba(244, 240, 234, 0.10);
  margin-bottom: var(--espace-l);
}


/* ---- 3.3 Blocs génériques du see more ---- */

.pw-momoa-bloc {
  margin-bottom: var(--espace-xxl);
}
.pw-momoa-bloc__intro {
  font-family: var(--typo-corps);
  font-size: 15px;
  line-height: 1.55;
  color: var(--couleur-texte-doux);
  margin: 0 0 var(--espace-m);
  max-width: 580px;
}

/* La démarche : deux paragraphes, colonne de lecture confortable */
.pw-momoa-demarche {
  max-width: 720px;
}
.pw-momoa-demarche p {
  font-family: var(--typo-corps);
  font-size: var(--taille-m);
  line-height: 1.6;
  color: var(--couleur-texte);
  margin: 0 0 var(--espace-m);
}
.pw-momoa-demarche p:last-child { margin-bottom: 0; }
.pw-momoa-demarche em {
  font-style: italic;
  color: var(--couleur-accent);
}

/* Trois portes d'entrée vers le site — cartes cliquables */
.pw-momoa-liens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-m);
}
.pw-momoa-lien {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  padding: var(--espace-m);
  border: 1px solid rgba(244, 240, 234, 0.16);
  border-radius: 6px;
  text-decoration: none;
  transition:
    border-color var(--duree-courte) var(--ease-doux),
    background-color var(--duree-courte) var(--ease-doux),
    transform var(--duree-courte) var(--ease-doux);
}
.pw-momoa-lien:hover {
  border-color: var(--couleur-accent);
  background-color: rgba(183, 255, 26, 0.05);
  transform: translateY(-3px);
}
.pw-momoa-lien__titre {
  font-family: var(--typo-titre);
  font-size: clamp(22px, 2vw, 30px);
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0, 'wght' 500;
  color: var(--couleur-texte);
  line-height: 1.05;
}
.pw-momoa-lien__texte {
  font-family: var(--typo-corps);
  font-size: var(--taille-s);
  line-height: 1.5;
  color: var(--couleur-texte-doux);
  max-width: 280px;
}
.pw-momoa-lien__fleche {
  position: absolute;
  top: var(--espace-s);
  right: var(--espace-s);
  font-size: 18px;
  color: var(--couleur-accent);
  transition: transform var(--duree-courte) var(--ease-doux);
}
.pw-momoa-lien:hover .pw-momoa-lien__fleche {
  transform: translate(2px, -2px);
}


/* ---- 3.5 Sous-section : exposition Portraits ---- */

.pw-momoa-expo {
  margin-top: var(--espace-xxl);
  padding: var(--espace-xl) 0 0;
  border-top: 1px solid rgba(244, 240, 234, 0.10);
}
.pw-momoa-expo__entete {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-l);
  max-width: 720px;
}
.pw-momoa-expo__titre {
  font-family: var(--typo-titre);
  font-size: clamp(40px, 5vw, 72px);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0, 'wght' 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0;
  color: var(--couleur-texte);
}
.pw-momoa-expo__titre em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1, 'wght' 500;
  color: var(--couleur-accent);
}
.pw-momoa-expo__pitch {
  font-family: var(--typo-corps);
  font-size: 17px;
  line-height: 1.55;
  color: var(--couleur-texte-doux);
  margin: 0;
}
.pw-momoa-expo__pitch em {
  color: var(--couleur-texte);
  font-style: italic;
}

.pw-momoa-expo__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background-color: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.pw-momoa-expo__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* ---- Responsive MOMoA ---- */

@media (max-width: 1100px) {
  .pw-momoa-liens { grid-template-columns: 1fr; }
  .pw-momoa-lien__texte { max-width: none; }
}

@media (max-width: 800px) {
  .pw-momoa-hero { height: 70vh; }
  .pw-momoa-hero__contenu { padding: var(--espace-l); }
}


/* ================================================================
   CHIAROSCURO CLUB
   ================================================================
   Bandeau vidéo full-bleed (gabarit .pw-bandeau partagé avec Degas)
   + galerie "confrontations" dans le see more.
   ================================================================ */

.pw-chiaroscuro {
  padding-top: 0;
  border-top: none;    /* le bandeau full-bleed fait la séparation */
}


/* ---- Confrontations : l'original ↔ la réinterprétation ----
   Diaporama automatique construit par perso.js : deux calques image
   en fondu croisé + léger zoom (Ken Burns), cartel de musée en bas
   à gauche, points de progression cliquables. */

.pw-confront {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background-color: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.pw-confront img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: opacity, transform;
}
.pw-confront img.est-visible {
  opacity: 1;
}
/* zoom lent pendant la phase (fige en fin grâce à forwards) */
.pw-confront img.est-animee {
  animation: pw-confront-zoom 7s linear forwards;
}
@keyframes pw-confront-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.055); }
}

/* Cartel de musée, discret, en bas à gauche */
.pw-confront__cartel {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 3;
  max-width: min(72%, 430px);
  padding: 12px 16px 13px;
  background: rgba(244, 240, 234, 0.93);
  border-radius: 3px;
  color: #1A1814;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}
.pw-confront__etat {
  display: block;
  font-family: var(--typo-corps);
  font-size: 9px;
  font-variation-settings: 'wght' 600, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #8a8478;
  margin-bottom: 4px;
}
.pw-confront__titre {
  display: block;
  font-family: var(--typo-titre);
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 0, 'wght' 550;
  font-size: 17px;
  line-height: 1.15;
}
.pw-confront__sous {
  display: block;
  margin-top: 3px;
  font-family: var(--typo-corps);
  font-size: 11px;
  color: #6B6659;
}

/* Points de progression (cliquables) */
.pw-confront__points {
  position: absolute;
  right: 18px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.pw-confront__point {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(244, 240, 234, 0.4);
  cursor: pointer;
  transition: background-color var(--duree-courte) var(--ease-doux),
              transform var(--duree-courte) var(--ease-doux);
}
.pw-confront__point:hover {
  transform: scale(1.3);
}
.pw-confront__point.est-actif {
  background: var(--couleur-accent);
}

@media (max-width: 800px) {
  .pw-confront { aspect-ratio: 4 / 3; }
  .pw-confront__cartel {
    left: 10px;
    bottom: 10px;
    padding: 9px 12px 10px;
  }
  .pw-confront__titre { font-size: 14px; }
}


/* ================================================================
   CHIAROSCURO CLUB — sous-blocs internes
   ================================================================
   6.2 Caravaggio's bio + tableau David & Goliath + vidéo
   6.3 Models & muses : intro
   6.4 Fiche personnage Mario Minniti (originaux + AI)
   6.5 Placeholders pour les autres modèles
   ================================================================ */


/* ---- Helpers communs ---- */

/* Petit surtitre style "// section name" — repris du style "lab" déjà
   utilisé dans LLM debate et MOMoA. */
.pw-cc-section-titre {
  display: inline-block;
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 13px;
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.05em;
  color: var(--couleur-accent);
  margin-bottom: var(--espace-m);
}

.pw-cc-bloc__entete {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-l);
  max-width: 820px;
}
.pw-cc-bloc__entete--centre {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--espace-xxl);
  align-items: center;
}
.pw-cc-bloc__titre {
  font-family: var(--typo-titre);
  font-size: clamp(40px, 5vw, 72px);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0, 'wght' 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0;
  color: var(--couleur-texte);
}
.pw-cc-bloc__titre em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1, 'wght' 500;
  color: var(--couleur-accent);
}
.pw-cc-bloc__intro {
  font-family: var(--typo-corps);
  font-size: 16px;
  line-height: 1.55;
  color: var(--couleur-texte-doux);
  margin: var(--espace-s) 0 0;
  max-width: 640px;
}


/* ---- 6.2 Bio Caravaggio + David & Goliath + vidéo ---- */

.pw-cc-bio {
  /* Ouvre le bloc "see more" : pas de marge ni de trait au-dessus */
  margin-top: 0;
  padding-top: var(--espace-m);
}

.pw-cc-bio__grille {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.5fr;
  gap: var(--espace-xl);
  align-items: start;
  margin-bottom: var(--espace-xl);
}

/* Tableau David : portrait, présenté façon "œuvre encadrée" */
.pw-cc-bio__tableau {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}
.pw-cc-bio__tableau img {
  width: 100%;
  height: auto;
  display: block;
  background-color: #000;
  /* léger encadrement ton sur ton pour donner un poids "œuvre" sans cadre criard */
  border: 1px solid rgba(244, 240, 234, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}
.pw-cc-bio__tableau figcaption {
  font-family: var(--typo-corps);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--couleur-texte-doux);
  font-style: italic;
}
.pw-cc-bio__tableau figcaption strong {
  color: var(--couleur-texte);
  font-style: normal;
  font-variation-settings: 'wght' 600, 'wdth' 100;
}

/* Texte bio : 3 paragraphes, justifie pas (mais plus aéré) */
.pw-cc-bio__texte {
  font-family: var(--typo-corps);
  font-size: 16px;
  line-height: 1.65;
  color: var(--couleur-texte);
}
.pw-cc-bio__texte p {
  margin: 0 0 var(--espace-m);
}
.pw-cc-bio__texte p:last-child { margin-bottom: 0; }
.pw-cc-bio__texte em {
  color: var(--couleur-accent);
  font-style: italic;
}

/* Vidéo "That's life" : pleine largeur, 16:9, comme la vidéo Portraits MOMoA */
.pw-cc-bio__video {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background-color: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.pw-cc-bio__video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* ---- 6.4 Fiche personnage (style "dossier") ---- */

.pw-cc-fiche {
  margin-top: var(--espace-l);
  padding: var(--espace-l);
  background-color: var(--couleur-fond-alt);
  border: 1px solid rgba(244, 240, 234, 0.08);
  border-radius: 6px;
}

.pw-cc-fiche__entete {
  display: grid;
  grid-template-columns: minmax(220px, 0.6fr) 1.4fr;
  gap: var(--espace-l);
  align-items: start;
  padding-bottom: var(--espace-l);
  margin-bottom: var(--espace-l);
  border-bottom: 1px dashed rgba(244, 240, 234, 0.14);
}

.pw-cc-fiche__id {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}
.pw-cc-fiche__role {
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 12px;
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.08em;
  color: var(--couleur-accent);
}
.pw-cc-fiche__nom {
  font-family: var(--typo-titre);
  font-size: clamp(32px, 3.4vw, 48px);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0, 'wght' 500;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--couleur-texte);
}
.pw-cc-fiche__dates {
  font-family: var(--typo-corps);
  font-size: 13px;
  font-style: italic;
  color: var(--couleur-texte-doux);
}
.pw-cc-fiche__bio {
  font-family: var(--typo-corps);
  font-size: 15px;
  line-height: 1.6;
  color: var(--couleur-texte);
  margin: 0;
}
.pw-cc-fiche__bio em {
  color: var(--couleur-accent);
  font-style: italic;
}

/* Corps : 2 panneaux côte à côte (originaux | AI) */
.pw-cc-fiche__corps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-l);
}

.pw-cc-fiche__panneau {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}
.pw-cc-fiche__panneau-titre {
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 12px;
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-texte-doux);
  padding-bottom: var(--espace-xs);
  border-bottom: 1px solid rgba(244, 240, 234, 0.10);
}

/* Grille originaux : 3 colonnes, ratio variable selon l'image */
.pw-cc-fiche__grille {
  display: grid;
  gap: var(--espace-s);
}
.pw-cc-fiche__grille--originals {
  grid-template-columns: repeat(3, 1fr);
}
.pw-cc-fiche__grille--ai {
  grid-template-columns: repeat(4, 1fr);
}

.pw-cc-fiche__grille figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: zoom-in;
}
.pw-cc-fiche__grille img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background-color: #000;
  border-radius: 3px;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pw-cc-fiche__grille figure:hover img {
  transform: scale(1.03);
}
.pw-cc-fiche__grille figcaption {
  font-family: var(--typo-corps);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--couleur-texte-doux);
  font-style: italic;
}
/* Pas de figcaption sur les AI — c'est bien le but : visages sans étiquette */
.pw-cc-fiche__grille--ai img {
  aspect-ratio: 3 / 4;
}


/* ---- 6.5 Placeholders pour les autres modèles ---- */

.pw-cc-fiches-suite {
  margin-top: var(--espace-xxl);
  padding-top: var(--espace-l);
  border-top: 1px dashed rgba(244, 240, 234, 0.10);
}

.pw-cc-fiches-stub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-m);
}

.pw-cc-fiche-stub {
  position: relative;
  padding: var(--espace-l);
  background-color: var(--couleur-fond-alt);
  border: 1px dashed rgba(244, 240, 234, 0.18);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 160px;
  justify-content: space-between;
  /* Légère diagonale "brouillon" — comme un coin replié */
  overflow: hidden;
}
.pw-cc-fiche-stub::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background:
    linear-gradient(225deg,
      rgba(244, 240, 234, 0.12) 0%,
      rgba(244, 240, 234, 0.12) 50%,
      transparent 50%);
}
.pw-cc-fiche-stub__num {
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 11px;
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.18em;
  color: var(--couleur-accent);
}
.pw-cc-fiche-stub__nom {
  font-family: var(--typo-titre);
  font-size: 24px;
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0, 'wght' 500;
  color: var(--couleur-texte);
  line-height: 1.1;
}
.pw-cc-fiche-stub__statut {
  font-family: var(--typo-corps);
  font-size: 12px;
  font-style: italic;
  color: var(--couleur-texte-doux);
}


/* ---- Responsive Chiaroscuro ---- */

@media (max-width: 1100px) {
  .pw-cc-fiche__corps {
    grid-template-columns: 1fr;
    gap: var(--espace-xl);
  }
  .pw-cc-fiche__grille--originals { grid-template-columns: repeat(3, 1fr); }
  .pw-cc-fiche__grille--ai        { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 800px) {
  .pw-cc-bio__grille {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
  }
  .pw-cc-fiche {
    padding: var(--espace-m);
  }
  .pw-cc-fiche__entete {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
  }
  .pw-cc-fiche__grille--originals { grid-template-columns: repeat(2, 1fr); }
  .pw-cc-fiche__grille--ai        { grid-template-columns: repeat(2, 1fr); }
  .pw-cc-fiches-stub              { grid-template-columns: 1fr; }
}