/* ---------- Tokens ---------- */
:root {
  --ink: #111;
  --accent: #e8622c;
  --placeholder: #e9e9e9;
  --placeholder-light: #f3f3f3;
  --gap: clamp(14px, 2.4vw, 28px);      /* espace vertical entre blocs d'images */
  --col-left: 42.9%;                    /* colonne crédits / colonne texte (193 / 450) */
  --page-w: min(70.3%, 1120px);         /* colonne centrale (450 / 640) */
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(12.5px, 0.55vw + 8px, 15px);
  line-height: 1.55;
}

.page {
  width: var(--page-w);
  margin: 0 auto;
  padding-bottom: 8vw;
}

/* ---------- Logo ---------- */
.logo {
  padding: clamp(18px, 3.4vw, 40px) 0 clamp(10px, 1.8vw, 22px);
}
.logo a { display: inline-block; line-height: 0; }
.logo img {
  display: block;
  height: clamp(22px, 2.3vw, 36px);
  width: auto;
}

/* ---------- Images ---------- */
.img {
  position: relative;
  margin: 0;
  background: var(--placeholder);
  overflow: hidden;
  aspect-ratio: calc(var(--w, 450) / var(--h, 337));
}
.img.light { background: var(--placeholder-light); }

.img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dessins techniques : ne pas rogner */
.img.drawing img { object-fit: contain; }

/* ---------- Hero : hero + titre tiennent dans le premier écran ---------- */
.hero {
  --w: 450;
  --h: 275;
  width: 100%;
  max-height: calc(100svh - clamp(150px, 20vw, 230px));
  min-height: 220px;
  aspect-ratio: auto;
  height: min(calc(100vw * 0.703 * 275 / 450), calc(100svh - clamp(150px, 20vw, 230px)));
}

/* ---------- Titre, crédits, texte ---------- */
.info {
  display: grid;
  grid-template-columns: var(--col-left) 1fr;
  grid-template-areas:
    ".       title"
    "credits text";
  margin-top: clamp(10px, 1.8vw, 22px);
  row-gap: clamp(8px, 1.4vw, 16px);
}

.title {
  grid-area: title;
  margin: 0;
  font-weight: 700;                     /* Open Sans Bold */
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.credits {
  grid-area: credits;
  margin: 0;
  padding-right: 8%;
  font-size: 0.8em;
  line-height: 1.4;
}
.credits div { margin-bottom: 1.15em; }
.credits dt { margin: 0; color: #444; font-weight: 400; }   /* Regular */
.credits dd { margin: 0; font-weight: 700; }                 /* Bold */

.text { grid-area: text; }
.text p { margin: 0 0 1.45em; }
.text .lead { font-weight: 600; }                              /* Semi-bold */
.text p:last-child { margin-bottom: 0; }

/* ---------- Galerie ---------- */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-top: clamp(28px, 6.2vw, 72px);
}

/* Deux images côte à côte : même hauteur, largeurs proportionnelles */
.row {
  display: flex;
  gap: 3.1%;
}
.row .img {
  flex: var(--w) 1 0;
  min-width: 0;
}

/* Dessins plus larges que la colonne de texte */
.img.wide {
  width: 121%;
  margin-inline: -10.5%;
  max-width: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  :root { --page-w: 88%; }

  .info {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "credits";
  }
  .credits { padding-right: 0; margin-top: 1.6em; font-size: 0.85em; }

  .img.wide {
    width: 100%;
    margin-inline: 0;
  }

  .hero { height: auto; aspect-ratio: 450 / 275; max-height: none; min-height: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .img img { transition: opacity .3s ease; }
}