/* Une double page sans fin : à droite les travaux défilent, à gauche le titre vertical
   et la légende restent en place. Sans JavaScript ou sur un écran étroit, la page se lit
   sur une seule colonne. Le texte ne change jamais de corps avec la fenêtre.

   Deux corps de texte : 13 px normal pour tout ce qui classe et renseigne, 17 px Light pour
   ce qui se lit, et un seul gras, le nom en 13 px. Deux corps de titre : 26 px et le titre
   vertical. */

:root {
  --encre: #111;
  --papier: #fff;
  --filet: #555;
  --taupe: #aa988a;
  --marge: 20px;
  --ecart: 16px;
  --texte: "source-sans-pro", sans-serif;
  --titre: "lust-didone", serif;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 300 17px / 1.5 var(--texte);
}

h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
.insecable { white-space: nowrap; }
img, video { display: block; width: 100%; height: auto; }

/* Bandeau et menu */

.panneau {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px var(--marge);
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}

.panneau-haut {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.nom {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu { display: flex; gap: 20px; }

.menu a {
  position: relative;
  padding-bottom: 5px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu a::after {
  content: "";
  position: absolute;
  inset: auto .05em 4px 0; /* 5 px sous le pied des lettres, comme sur la première version du site */
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease-out;
}

.menu a:hover::after,
.menu a:focus-visible::after,
.menu a.actif::after { transform: none; }

.legende, .titre, .index { display: none; }

@media (max-width: 480px) {
  .panneau-haut { flex-wrap: wrap; gap: 6px 16px; }
  .menu a { padding-bottom: 3px; }
}

/* Colonne des travaux */

.page { padding: var(--marge); }

.bloc { scroll-margin-top: 92px; }
.bloc + .bloc { margin-top: 88px; }

.entete { margin-bottom: 24px; }
.entete p + p, .entete p + .role, .entete .role + .credit { margin-top: 12px; }

.rubrique { font-size: 13px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.rubrique span { margin-left: 8px; color: var(--filet); }

h1, .entete h2 { margin-bottom: 12px; font: 400 26px / 1.3 var(--titre); }
.entete h2 .client::after { content: ","; }

.role, .credit { font-size: 13px; font-weight: 400; }
.role li { display: inline; margin-right: .7em; white-space: nowrap; }

/* La Lust Didone n'a pas d'italique : le navigateur en fabriquerait un faux. */
.sujet em { font-style: normal; }

.images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ecart);
}

.images .plein { grid-column: 1 / -1; }

.recit { max-width: 36em; margin-bottom: 24px; }
.recit p + p { margin-top: 1em; }

/* Sur écran étroit, chaque projet mène au précédent et au suivant. */
.suite {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Fondu à l'arrivée dans la fenêtre : site.js pose ces classes. */
.images .fondu { opacity: 0; }

.images .fondu.visible {
  opacity: 1;
  transition: opacity .8s ease-out;
}

/* Le nom se lit comme la première ligne de la liste des métiers. */
h1 { margin-bottom: 0; color: var(--taupe); }

.metiers { margin-bottom: 20px; font: 400 26px / 1.3 var(--titre); }

/* Sommaire */

.groupe { break-inside: avoid; margin-bottom: 32px; }

.groupe h3, .texte h3 {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--filet);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.groupe a { display: block; padding: 5px 0; }
.groupe .client { display: block; font: 400 26px / 1.3 var(--titre); }
.groupe .sujet { font-size: 13px; font-weight: 400; }

.groupe a:hover .client,
.groupe a:focus-visible .client {
  text-decoration: underline 1px;
  text-underline-offset: .18em;
}

/* À propos */

.texte { max-width: 36em; }
.texte p + p { margin-top: 1em; }
.texte h3 { margin-top: 48px; }

.dates { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 6px 12px; align-items: baseline; }
.dates dt { font-size: 13px; font-weight: 400; }

/* Contact */

.coordonnees { margin-top: 12px; }
.coordonnees + .credit { margin-top: 12px; }
.coordonnees a { text-decoration: underline 1px; text-underline-offset: .2em; }

/* Double page : site.js pose la classe quand la fenêtre est assez large. */

.double-page {
  --marge: 32px;
  --ecart: 24px;
  --corps: min(132px, calc((100svh - 120px) / 6.2));
  --colonne: calc(var(--corps) * 1.1 + 30px); /* la colonne du titre, entre ses deux filets */
}

.double-page .double {
  display: grid;
  grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr);
}

/* Les capitales du nom et du menu, le bout du titre et le haut de l'image sont sur la même
   ligne, à une marge du bord de la fenêtre. */
.double-page .panneau {
  display: flex;
  flex-direction: column;
  height: 100svh;
  padding: 27px calc(var(--colonne) + var(--marge)) var(--marge) var(--marge);
  border-bottom: 0;
}

/* Deux filets bordent le titre, du haut au bas de l'image d'accueil. Ils ne changent pas
   d'un projet à l'autre. */
.double-page .panneau::before,
.double-page .panneau::after {
  content: "";
  position: absolute;
  top: var(--marge);
  bottom: var(--marge);
  width: 1px;
  background: var(--filet);
}

.double-page .panneau::before { right: var(--colonne); }
.double-page .panneau::after { right: 0; }

/* Un filet sépare le nom et le menu de la liste, comme en tête du CV et des lettres. */
.double-page .panneau-haut {
  flex-wrap: wrap;
  gap: 6px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--filet);
}

/* La liste des travaux reste toujours visible et dit où l'on est. */
.double-page .index {
  display: block;
  max-width: 26em;
  margin: 32px 0 24px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.625;
}

.double-page .index-deux {
  display: grid;
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  column-gap: 24px;
}

.index-trois { display: none; }

.index-groupe { margin-bottom: 12px; }

.index-groupe h2 {
  margin-bottom: 2px;
  font: inherit;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Le même filet que le menu : noir, d'un pixel, au même écart, tracé au survol. */
.index a { position: relative; display: inline-block; }

.index a::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease-out;
}

.index a:hover::after,
.index a:focus-visible::after,
.index a[aria-current]::after { transform: none; }

.double-page .legende {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  margin: auto 0 0;
  overflow-y: auto;
}

/* Sur une fenêtre basse, la liste se resserre. Si elle ne laisse plus la place au texte
   de l'accueil, elle attend le premier projet. */
@media (max-height: 860px) {
  .double-page .index { margin: 20px 0 16px; line-height: 1.4; }
  .index-groupe { margin-bottom: 6px; }
  .legende .entete p + p, .legende .entete p + .role, .legende .entete .role + .credit { margin-top: 8px; }
  .legende .entete h2 { margin-bottom: 8px; }
}

@media (max-height: 760px),
       (max-height: 780px) and (max-width: 1522px),
       (max-height: 930px) and (max-width: 1260px) {
  .double-page[data-bloc="accueil"] .index { display: none; }
}

/* Sur un portable, la liste passe sur trois colonnes : elle perd un tiers de sa hauteur et
   laisse la place aux légendes. Les seuils suivent la largeur de la colonne, qui dépend de la
   hauteur par le corps du titre. */
@media (max-height: 900px) and (min-width: 1390px),
       (max-height: 800px) and (min-width: 1330px) {
  .double-page .index { max-width: none; }
  .double-page .index-deux { display: none; }

  .double-page .index-trois {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    column-gap: 12px;
  }
}

/* Sur un petit portable, la liste se resserre encore pour que les légendes les plus longues
   tiennent en entier. */
@media (max-height: 800px) and (min-width: 1330px) {
  .double-page .panneau-haut { padding-bottom: 12px; }
  .double-page .index { margin: 14px 0 14px; line-height: 1.3; }
  .index-groupe { margin-bottom: 4px; }
}

.page { transition: opacity .3s ease-out; }
.page.saut { opacity: 0; transition-duration: .18s; }

/* Le titre se lit vers le haut et s'arrête sur la ligne de l'image. --approche, posée par
   site.js, retire le blanc de sa dernière lettre ; .015em est son interlettrage. */
.double-page .titre {
  display: block;
  position: absolute;
  top: calc(var(--marge) - var(--approche, 0em) - .015em);
  right: 19px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 400 var(--corps) / 1.1 var(--titre);
  letter-spacing: .015em;
  white-space: nowrap;
}

/* Le calque reste en place en permanence : créé seulement le temps du fondu, il décalait
   le titre d'un pixel dans Safari, au début puis à la fin de chaque changement. */
.double-page .legende,
.double-page .titre {
  transition: opacity .18s ease-out;
  will-change: opacity;
}

.bascule .legende,
.bascule .titre { opacity: 0; }

.legende .entete { max-width: 27em; margin: 0; }
.double-page .legende .client { display: none; }

.double-page .page { padding: var(--marge); }

/* Les images s'arrêtent à une marge du haut et du bas de la fenêtre, comme à droite : deux
   bandes de papier fixes, sous le panneau. Le défilement reste celui de la fenêtre. */
.double-page body::before,
.double-page body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: 4;
  height: var(--marge);
  background: var(--papier);
}

.double-page body::before { top: 0; }
.double-page body::after { bottom: 0; }

.double-page .page .entete {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.double-page .bloc { scroll-margin-top: var(--marge); }
.double-page .bloc + .bloc { margin-top: 132px; }
.double-page .bloc:last-child { min-height: calc(100svh - 2 * var(--marge)); }

.double-page .portrait {
  height: calc(100svh - 2 * var(--marge));
  object-fit: cover;
  object-position: 72% 60%;
}

.double-page #sommaire,
.double-page .suite { display: none; }

.double-page .texte,
.double-page .recit { margin-inline: auto; }