/* atelier 19 — d'après la maquette validée (maquette/index.html) :
   une suite de planches horizontales sur fond gris. */
:root {
  --page: #9a9894;
  --paper: #e6e2da;
  --ink: #2a2a2a;
  --muted: #77736c;
  --blue: #056af8;
  --rule: #b6b0a6;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  padding: 48px 40px;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--blue); }
.text a { text-decoration: underline; text-underline-offset: .15em; }

/* Une planche : format 16/10, tout est placé en % comme sur une page */
.sheet {
  position: relative;
  max-width: 1200px;
  aspect-ratio: 16 / 10;
  margin: 0 auto 40px;
  background: var(--paper);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  container-type: inline-size;
  font-size: max(10px, .78cqw);
  line-height: 1.55;
}
.sheet:not(.flow) > *, .sheet .corner { position: absolute; }

/* Planche « en flux » : pour les textes de longueur libre, elle s'allonge au besoin */
.sheet.flow { padding: 9cqw 6cqw 7cqw 3cqw; }

/* Titres : grotesque très grasse, minuscules, interlignage serré */
.title {
  color: var(--blue);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 6.4cqw;
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: lowercase;
}
.title.xl { font-size: 8cqw; }
.title.s { font-size: 4.6cqw; }
.title a:hover, .title a:focus-visible { color: var(--ink); }
.vertical { writing-mode: vertical-rl; }

/* Petites mentions dans les coins */
.meta { font-size: max(8px, .62cqw); color: var(--muted); line-height: 1.4; }
.meta.v { writing-mode: vertical-rl; }
.hrule { height: 0; border-top: 1px solid var(--rule); }
.vrule { width: 0; border-left: 1px solid var(--rule); }

.text p + p, .text * + ul, .text * + ol, .text * + h2, .text * + h3 { margin-top: .9em; }
.text h2, .text h3 { font-size: 1em; font-weight: 700; }
.text ul, .text ol { padding-left: 1.2em; }
.cols { column-count: 2; column-gap: 2.4cqw; }

/* Photos : N&B, couleur au survol et au focus clavier */
figure { background: #cbc6bd; }
figure img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .5s ease; }
figure:hover img, figure:focus-within img { filter: none; }
figure a { display: block; height: 100%; }
figure a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Pastille : rond bleu et texte circulaire */
.dot { width: 9cqw; pointer-events: none; z-index: 2; }
.dot svg { display: block; width: 100%; overflow: visible; }

/* Planche d'intro (projet, page) : titre à gauche, texte à droite */
.intro { display: grid; grid-template-columns: 40% 1fr; column-gap: 6cqw; align-content: center; }
.intro .text { max-width: 44cqw; }
.intro .facts { margin-top: 2.4cqw; }

/* Planche de texte d'un item : titre, texte, mentions en marge */
.item-text { display: grid; grid-template-columns: 30% 1fr 20%; column-gap: 4cqw; align-content: center; }
.item-text .title { margin-top: 1.2cqw; }
.item-text aside .meta + .meta, .item-text aside dl + h2 { margin-top: 1.6cqw; }
.item-text aside h2 { font-size: max(8px, .62cqw); font-weight: 700; color: var(--ink); text-transform: lowercase; }
.infos dt { color: var(--ink); }
.infos dd + dt { margin-top: .5em; }
.downloads { list-style: none; padding: 0; }
.downloads li + li { margin-top: .6em; }
.downloads a { color: var(--blue); }
.downloads a:hover, .downloads a:focus-visible { color: var(--ink); }

/* Galerie : 1 à 3 photos côte à côte, à leurs proportions */
.gallery { display: flex; justify-content: center; align-items: center; gap: 3cqw; padding: 6cqw 3cqw; }
.gallery figure { height: calc(var(--h) * 1cqw); }
.gallery figcaption { margin-top: .6em; }
.gallery figure:has(figcaption) { background: none; }
.gallery figure:has(figcaption) a { height: 100%; background: #cbc6bd; }

/* Navigation sous les planches */
.pager { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; color: var(--paper); font-size: 13px; }
.pager a:hover, .pager a:focus-visible { color: #fff; }

/* Vue agrandie, en couleur */
.lightbox { position: fixed; inset: 0; z-index: 10; background: rgba(230, 226, 218, .97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 96px); object-fit: contain; box-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
.lightbox .meta { font-size: 12px; }
.lightbox button { position: absolute; top: 16px; right: 20px; border: 0; background: none; font: inherit; cursor: pointer; }

/* En-tête : téléphone seulement */
.topbar { display: none; }

/* Téléphone : les planches deviennent des pages qui s'empilent */
@media (max-width: 720px) {
  body { padding: 0 0 16px; }
  .topbar {
    display: flex; justify-content: space-between; align-items: baseline;
    position: sticky; top: 0; z-index: 5;
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    font-size: 15px;
  }
  .topbar-nom { color: var(--blue); font-weight: 800; font-stretch: 112%; font-size: 20px; letter-spacing: -.03em; }
  .topbar nav { display: flex; gap: 18px; }

  /* Les mentions de coin et les filets décorent la planche : pas sur téléphone */
  .sheet > .meta, .hrule { display: none; }
  .sheet > .meta.date, .sheet > .meta.crumb { display: block; }
  /* Photos d'habillage de l'accueil (couverture, à propos, index, fin) : retirées */
  .home-deco figure { display: none; }
  /* Une carte par projet ou par item : titre, une photo, texte, bouton */
  .home-projet figure ~ figure { display: none; }
  .home-projet figure, .projet-item figure { aspect-ratio: 4 / 3 !important; }
  .sheet > .date { order: -3; }
  .home-projet .title, .projet-item .title, .home-deco .title { order: -2; }
  .sheet > .cta {
    display: block; order: 10; align-self: flex-start;
    padding: 10px 16px; border: 1.5px solid var(--blue); border-radius: 999px;
    color: var(--blue); font-size: 14px; font-weight: 600;
  }
  #projets .text { font-size: 18px; line-height: 1.8; }
  /* Infos et téléchargements : lisibles et faciles à toucher */
  .item-text aside .meta, .item-text aside h2 { font-size: 14px; }
  .item-text aside h2 { margin-top: 24px !important; }
  .downloads li + li { margin-top: 1em; }
  .sheet, .sheet.flow {
    aspect-ratio: auto;
    margin: 0 0 16px;
    padding: 28px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 14px;
  }
  .sheet > *, .sheet .corner { position: static !important; width: auto !important; }
  .title, .title.xl { font-size: 48px; writing-mode: horizontal-tb; }
  .title.s { font-size: 36px; }
  .meta { font-size: 11px; }
  .meta.v, .vrule, .dot { display: none; }
  .cols { column-count: 1; }
  .intro .text { max-width: none; }
  figure { max-width: 100%; }
  .gallery figure { height: auto; aspect-ratio: var(--r); }
  .gallery figure:has(figcaption) { aspect-ratio: auto; }
  .gallery figure:has(figcaption) a { aspect-ratio: var(--r); }
  .pager { padding: 0 16px; flex-wrap: wrap; }
}