/* ==========================================================================
   « La salle » : hub Projets et études de cas
   --------------------------------------------------------------------------
   Idée : les projets sont accrochés comme des œuvres dans une salle de musée
   aux murs vert sombre (les salles Caravage des grands musées), chacun éclairé
   par un spot, avec son cartel à côté : titre en italique, nature, pour qui,
   état. Pas de cartes, pas de pastilles, pas de bordures.
   ========================================================================== */

/* Polices hébergées sur le site (pas de dépendance à Google Fonts) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }

:root {
  --wall: #16201C;
  --wall-deep: #111915;
  --ink: #ECE6D9;
  --ink-2: #B8B6A9;
  --ink-3: #8D938A;
  --rule: rgba(236, 230, 217, 0.14);
  --gilt: #C9A96A;
  --light: 255, 236, 200;
  --shade: rgba(0, 0, 0, 0.62);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(20px, 4.5vw, 64px);
  --max: 1360px;
}

[data-theme="light"] {
  --wall: #DCDDD5;
  --wall-deep: #D2D4CB;
  --ink: #1B211D;
  --ink-2: #48504A;
  --ink-3: #6B726C;
  --rule: rgba(27, 33, 29, 0.16);
  --gilt: #8A6A2C;
  --light: 255, 255, 255;
  --shade: rgba(40, 44, 38, 0.28);
}

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

html { -webkit-text-size-adjust: 100%; }

body.room {
  margin: 0;
  min-height: 100vh;
  background: var(--wall);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.room img { max-width: 100%; display: block; }
body.room a { color: inherit; }

/* Grain léger du mur (plâtre), sous tout le contenu */
.film-grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* L'en-tête commun prend la couleur du mur sur ces pages */
body.room .site-nav {
  background: color-mix(in srgb, var(--wall) 84%, transparent);
  border-bottom-color: var(--rule);
}

body.room :focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 4px;
  border-radius: 2px;
}

.room-main {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(96px, 12vw, 180px);
}

/* Liens texte : soulignement fin, doré au survol */
.room-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.room-link:hover { text-decoration-color: var(--gilt); }

/* ==========================================================================
   L'œuvre accrochée : image + spot
   ========================================================================== */
.frame {
  position: relative;
  isolation: isolate;
}

/* Le spot : un cône de lumière chaude qui tombe du plafond sur le mur */
.frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18%;
  right: -18%;
  top: -42%;
  bottom: 8%;
  background: radial-gradient(closest-side, rgba(var(--light), 0.21), rgba(var(--light), 0.085) 48%, rgba(var(--light), 0.02) 80%, transparent);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.7s ease;
}

.frame img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.35),
    0 46px 60px -34px var(--shade);
}

.frame > a { display: block; }

/* ==========================================================================
   Hub : la salle
   ========================================================================== */
.room-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
  padding: clamp(64px, 10vw, 140px) 0 clamp(72px, 10vw, 150px);
}

.room-title {
  grid-column: 1 / 8;
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(72px, 13vw, 184px);
  line-height: 0.82;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.room-lede {
  grid-column: 8 / 13;
  margin: 0;
}

.room-lede p {
  margin: 0 0 28px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 38ch;
}

.room-index {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 24px;
}

.room-index li { break-inside: avoid; }

.room-index a {
  display: inline-block;
  padding: 3px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.room-index a:hover { color: var(--gilt); }

/* Chaque œuvre : image et cartel côte à côte, en alternance */
.work {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
  margin-bottom: clamp(110px, 15vw, 220px);
  scroll-margin-top: 110px;
}
.work:last-of-type { margin-bottom: 0; }

.work .frame  { grid-column: 1 / 9; grid-row: 1; }
.work .cartel { grid-column: 9 / 13; grid-row: 1; padding-bottom: 6px; }

.work:nth-of-type(even) .frame  { grid-column: 5 / 13; }
.work:nth-of-type(even) .cartel { grid-column: 1 / 5; }

/* Le premier accroché un peu plus grand */
.work:first-of-type .frame  { grid-column: 1 / 10; }
.work:first-of-type .cartel { grid-column: 10 / 13; }

.work:hover .frame::before,
.work:focus-within .frame::before { opacity: 1; }

/* Le cartel */
.cartel { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

.cartel h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cartel h2 a { text-decoration: none; }
.cartel h2 a:hover { color: var(--gilt); }

.cartel-facts { margin: 0 0 18px; }
.cartel-facts p { margin: 0; }
.cartel-facts p:first-child { color: var(--ink); }

.cartel-text { margin: 0 0 22px; max-width: 40ch; }

.cartel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La lumière s'allume une fois, à l'arrivée dans la salle */
@keyframes lights-on {
  0%   { opacity: 0; }
  35%  { opacity: 0.25; }
  45%  { opacity: 0.1; }
  100% { opacity: 0.85; }
}
.work .frame::before {
  animation: lights-on 1.1s ease-out both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.16s);
}

/* ==========================================================================
   Étude de cas
   ========================================================================== */
.cs-head {
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 80px);
}

.cs-back {
  display: inline-block;
  margin-bottom: clamp(48px, 8vw, 96px);
  font-size: 15px;
  color: var(--ink-3);
}

.cs-title {
  margin: 0 0 28px;
  max-width: 13ch;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(54px, 9vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.cs-lede {
  margin: 0 0 clamp(40px, 6vw, 64px);
  max-width: 44ch;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
}

.cs-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.cs-facts dt { font-size: 14px; color: var(--ink-3); margin-bottom: 4px; }
.cs-facts dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }

.cs-figure {
  margin: 0 0 clamp(80px, 10vw, 140px);
  padding-top: clamp(40px, 6vw, 80px);
}
.cs-figure figcaption {
  margin-top: 18px;
  max-width: 60ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* Le texte : une colonne de lecture décalée, comme un texte de salle */
.cs-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.cs-body > * { grid-column: 4 / 11; min-width: 0; }

.cs-section + .cs-section { margin-top: clamp(64px, 8vw, 104px); }

.cs-section h2 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cs-section p,
.cs-section li {
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 64ch;
}
.cs-section p { margin: 0 0 22px; }
.cs-section strong { color: var(--ink); font-weight: 500; }

.cs-list { margin: 8px 0 26px; padding-left: 1.1em; }
.cs-list li { margin-bottom: 10px; padding-left: 6px; }
.cs-list li::marker { color: var(--gilt); }

/* La question du projet : grande, en italique, sans boîte */
.narrative-highlight-box {
  margin: 8px 0 34px;
  max-width: 30ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(27px, 2.6vw, 34px);
  line-height: 1.25;
  color: var(--ink);
}

/* Chiffres : grands, sans cadre */
.metrics-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 32px;
  margin: 36px 0 40px;
}
.metric-item-card { padding-top: 16px; border-top: 1px solid var(--rule); }
.metric-figure {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 10px;
  font-variant-numeric: lining-nums;
}
.metric-desc { font-size: 15px; line-height: 1.5; color: var(--ink-3); }

/* Projet suivant */
.cs-next {
  margin-top: clamp(110px, 14vw, 200px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 32px;
  align-items: end;
}
.cs-next-main { grid-column: 1 / 9; }
.cs-next-prev { grid-column: 9 / 13; justify-self: end; text-align: right; }

.cs-next-label { margin: 0 0 6px; font-size: 15px; color: var(--ink-3); }

.cs-next-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(44px, 7.5vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s ease;
}
.cs-next-title:hover { color: var(--gilt); }

.cs-next-prev a { font-family: var(--serif); font-style: italic; font-size: 22px; }

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
@media (max-width: 1080px) {
  .room-title { grid-column: 1 / -1; margin-bottom: 40px; }
  .room-lede  { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .room-lede p { margin: 0; }

  .work .frame,
  .work:nth-of-type(even) .frame,
  .work:first-of-type .frame  { grid-column: 1 / -1; grid-row: 1; }
  .work .cartel,
  .work:nth-of-type(even) .cartel,
  .work:first-of-type .cartel { grid-column: 1 / 9; grid-row: 2; padding: 30px 0 0; }
  .work:nth-of-type(even) .cartel { grid-column: 5 / -1; }

  .cs-body > * { grid-column: 2 / 12; }
}

@media (max-width: 720px) {
  body.room { font-size: 16px; }

  .room-intro { padding-top: 48px; }
  .room-lede  { display: block; }
  .room-lede p { margin-bottom: 24px; font-size: 18px; }
  .room-index { columns: 1; }

  .work .cartel,
  .work:nth-of-type(even) .cartel,
  .work:first-of-type .cartel { grid-column: 1 / -1; padding-top: 24px; }
  .work { margin-bottom: 96px; }
  .frame::before { left: -10%; right: -10%; top: -26%; }

  .cs-facts { grid-template-columns: 1fr 1fr; }
  .cs-body > * { grid-column: 1 / -1; }
  .cs-section p, .cs-section li { font-size: 17px; }

  .cs-next-main, .cs-next-prev { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .work .frame::before { animation: none; }
  .frame::before, .room-link, .cs-next-title { transition: none; }
}