/* Site d'Adrien Audry — la feuille de style de toutes les pages.

   Tirée de la maquette « Fenêtre habillée », validée par Adrien le 14/10/2026 (maquettes/commun.css
   et maquettes/M2-fenetre-habillee/habillee.css, réunies et allégées de ce qui ne servait qu'aux
   maquettes). La mécanique est celle de M2 : un écran par projet, l'image qui remplit l'écran, la
   bande d'images de côté, le menu fixé. La peau est celle de la
   direction graphique : papier, trait, EB Garamond pour les titres, texte sur une bande de papier
   sous l'image ; trois tons (papier, encre, mine), un accent (sable), aucun gras, aucun cadre,
   aucune ombre.

   Le défilement (demande d'Adrien du 26/10 : « à chaque fois qu'on scrolle, ça s'arrête sur une image »,
   sans arrêt brutal) : dans une bande, un geste passe une image ; la page unique s'arrête en douceur sur
   le premier écran et sur chaque projet, et un geste vif en traverse plusieurs. C'est le seul calage :
   « je garde le calage souple », a dit Adrien après l'avoir essayé contre un arrêt ferme (section 3).

   Le téléphone couché (moins de 500 px de haut, section 19) : l'image remplit l'écran, recadrée comme
   debout, le texte passe dessous, et le menu s'efface quand on descend. La mise en page de
   l'ordinateur demande un écran d'au moins 900 px de large et de plus de 500 px de haut.

   Partout, chaque bande porte en bas à droite le signe « plein écran » des lecteurs vidéo : il met la bande
   entière en plein écran, sur le noir, images et films entiers, et on continue d'y glisser d'image en image ;
   deux touchers rapides sur une image (un double clic à la souris) font de même (section 20, avec le script
   de la page). Le calque de la section 15 ne sert qu'aux pages à lire.

   C'est un gabarit : outils/generer-site.py y écrit l'adresse des trois esquisses de fond (les mots
   précédés du signe dollar, section 11), puis le pose dans site/assets/site.css. La copie de site/
   ne se modifie jamais à la main. */


/* ── 1. Les polices, servies par le site lui-même (aucun appel extérieur) ── */

/* Source Sans 3 pour le menu, les légendes, les compteurs, les mentions, le formulaire ; EB Garamond
   pour la phrase-signature, les titres, l'exergue d'À propos et le texte explicatif (la prose d'À
   propos, de la page Art, de la page Mobilier et de ses pièces). Pas de graisse grasse : aucun gras
   nulle part. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("polices/SourceSans3-Light.ttf.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/SourceSans3-Regular.ttf.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/EBGaramond-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("polices/EBGaramond-Italic.woff2") format("woff2");
}


/* ── 2. Les tons et les mesures ── */

:root {
  --papier: #f7f4ee;       /* blanc papier : chaud, pas jaune */
  --encre: #1f1c19;        /* noir d'encre, un peu chaud */
  --mine: #6f685f;         /* gris de mine : lieu, année, compteur, pied */
  --sable: #d3c09c;        /* le seul accent : un filet posé sur une image sombre */
  --filet: #e3ddd2;        /* le filet sous le menu */
  --attente: #ece7de;      /* une photo pas encore arrivée */
  --texte: "Source Sans 3", sans-serif;
  --garamond: "EB Garamond", serif;
  --menu: 56px;            /* hauteur du menu fixé en haut */
  --gouttiere: 20px;       /* marge de côté */
  --reserve: 60px;         /* marge de droite des textes : la place qu'avait le monogramme dans le coin, gardée vide */
  --apres-trait: 56px;     /* l'air entre un trait de section et son titre */
  --ecran: calc(100vh - var(--menu));   /* un écran, sous le menu */
}
/* Sur téléphone, « svh » est la hauteur visible quand la barre d'adresse est là : le calage tombe juste. */
@supports (height: 100svh) {
  :root { --ecran: calc(100svh - var(--menu)); }
}
/* À l'ordinateur, la réserve (248 px) est celle qui contenait le monogramme du coin (128 px de haut,
   151 de large, à 24 px du bord). Le 24/10, la signature monte dans le menu (section 14) ; Adrien garde
   pour l'instant cette marge, vide, en attendant de décider s'il la rend aux textes. */
@media (min-width: 900px) and (min-height: 501px) {
  :root { --menu: 64px; --gouttiere: 48px; --reserve: 248px; --apres-trait: 88px; }
}


/* ── 3. La page ── */

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

/* Le défilement vertical : sur la page unique, un arrêt souple sur le premier écran et sur chaque projet
   (demande d'Adrien du 26/10) ; un geste vif en traverse plusieurs, un geste lent s'arrête au début du
   projet le plus proche. Souple, et seulement souple : « je garde le calage souple » (Adrien, après
   l'essai d'un arrêt ferme, qui menait chaque geste au projet suivant). Les autres pages (Art, Mobilier,
   un projet, les mentions) défilent librement. Les liens du menu gardent leur glissement doux : la page
   s'arrête sur leur cible, qui est un point d'arrêt ou une section qu'on peut parcourir librement. */
html {
  scroll-padding-top: var(--menu);   /* les liens du menu s'arrêtent sous le menu */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html.page-unique { scroll-snap-type: y proximity; }
.premier-ecran,
.projet {
  scroll-snap-align: start;
  scroll-snap-stop: normal;          /* un geste vif passe outre : plusieurs projets d'un coup */
}
/* Les sections d'œuvres (Projets, Art, Mobilier) ont aussi leur arrêt : sans lui, l'arrêt du premier
   projet, tout proche, tirait le lien « Projets » au-delà de son titre (98 px plus bas au téléphone, 165
   à l'ordinateur). Les textes (À propos, Contact) n'en ont pas : un arrêt y happait la lecture (le
   bouton d'envoi, posé au ras du bas de l'écran, remontait de 50 px hors de vue). */
.groupe {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 17px/1.55 var(--texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
a { color: inherit; }
img, video, picture { display: block; }
::selection { background: var(--sable); color: var(--encre); }

/* Le lien « aller au contenu », pour qui parcourt la page au clavier : caché tant qu'on n'y arrive pas. */
.evitement {
  position: absolute;
  top: -200px;
  left: var(--gouttiere);
  z-index: 20;
  padding: 10px 12px;
  background: var(--papier);
  font-size: 14px;
}
.evitement:focus { top: 8px; }


/* ── 4. Le trait tiré à la main, entre les sections ── */

/* Un chemin SVG un peu irrégulier, le même partout, à 60 % de l'encre, sur toute la largeur moins
   les gouttières. Dans les sections de texte, qui gardent à droite la place vide du coin, il
   reprend cette place pour finir à la même gouttière que les autres. */
.trait {
  display: block;
  width: calc(100% - 2 * var(--gouttiere));
  height: 8px;
  margin: 0 var(--gouttiere) var(--apres-trait);
  overflow: visible;
}
.trait path {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1px;
  stroke-opacity: .6;
  stroke-linecap: round;
}
.texte > .trait,
.pied > .trait {
  width: calc(100% + var(--reserve) - var(--gouttiere));
  margin-left: 0;
  margin-right: 0;
}


/* ── 5. Le menu : des liens qui descendent dans la page, sur le papier, en capitales fines ── */

/* Demandes d'Adrien : le menu « un peu plus gros », texte compris (19/10), puis, le 23/10, « grossir
   les mots » de tout le bandeau, le nom « Adrien Audry » comme les entrées : environ 15 % de plus
   (nom 14 → 16 px, entrées 13 → 15 px à l'ordinateur, 3 → 3,45 % de la largeur au téléphone). Le
   même soir, devant la page en ligne : « tout à l'heure c'était un peu petit, là c'est un peu gros ».
   On prend le milieu : nom 15 px, entrées 14 px à l'ordinateur, 3,2 % de la largeur au téléphone (au
   plus 12,9 px). Au téléphone, la taille des lettres suit la largeur de l'écran. Le 24/10, avec la
   page Mobilier, le menu passe à sept entrées (Accueil, Projets, Art, Mobilier, À propos, Contact, la
   langue) et Adrien tranche : au téléphone, « lettres un peu plus petites ». Environ 2,95 % de la
   largeur était visé ; mesuré, le menu français n'y gardait que 0,4 px d'air à 360 px. On prend donc
   2,9 % (au plus 11,7 px, le plafond baissé dans la même proportion) : les sept entrées tiennent sur
   360 px sans glisser, avec au moins 4 px d'air, en français comme en anglais. L'ordinateur ne change pas. */

.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--menu);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--gouttiere);
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}
.menu-nom {
  display: flex;
  align-items: center;
  flex: none;
  font-size: 15px;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.menu nav {
  flex: 1;
  display: flex;
  justify-content: space-between;
  overflow-x: auto;          /* sur un très petit écran, le menu glisse au lieu de déborder */
  scrollbar-width: none;
}
.menu nav::-webkit-scrollbar { display: none; }
.menu nav a {
  padding: 14px 0;
  font-size: min(11.7px, 2.9vw);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mine);
  text-decoration: none;
  white-space: nowrap;
}
.menu nav a + a { margin-left: 6px; }
.menu nav a:hover,
.menu nav a[aria-current="true"],
.menu nav a[aria-current="page"] { color: var(--encre); }
.menu nav a[aria-current="true"],
.menu nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
/* La dernière entrée change de langue : séparée des sections par un filet. */
.menu nav .langue {
  padding-left: 8px;
  border-left: 1px solid var(--filet);
}
/* Au téléphone, la signature prend la place du mot « Accueil », avec le même lien : le nom écrit et
   l'entrée « Accueil » s'effacent ; le lien garde le nom pour un lecteur d'écran (aria-label). */
.menu { gap: 6px; }
.menu-nom .nom { display: none; }
.menu nav a:first-child { display: none; }
.menu nav a:first-child + a { margin-left: 0; }
/* Un repère vide en tête des entrées : l'écart entre la signature et « Projets » s'élargit comme les autres. */
.menu nav::before { content: ""; }
/* Le menu de l'ordinateur ne prend sa place que sur un écran assez large pour lui : plus étroit, il
   garde la taille du téléphone (décision d'Adrien du 24/10, « sous 970 px », mesurée sans la signature).
   Avec la signature à côté du nom, le menu français à 14 px demande 1 042 px : il passe à 1 050 px, où il
   garde 8 px d'air (33 en anglais). Le reste de la mise en page passe à l'ordinateur dès 900 px. */
@media (min-width: 1050px) and (min-height: 501px) {
  .menu { gap: 32px; justify-content: space-between; }
  .menu-nom .nom { display: inline; }
  .menu nav a:first-child { display: inline; }
  .menu nav a:first-child + a { margin-left: 40px; }
  .menu nav::before { display: none; }
  .menu nav { flex: 0 1 auto; align-items: center; }
  .menu nav a { font-size: 14px; letter-spacing: .18em; }
  .menu nav a + a { margin-left: 40px; }
  .menu nav .langue { padding-left: 40px; }
}


/* ── 6. Accueil : l'image en haut, une bande de papier dessous (environ un tiers de l'écran) ── */

/* Le premier écran (l'image, la phrase-signature, la ligne de métier) se calcule comme si « Écrire à
   Adrien Audry » suivait encore la ligne de métier : la bande de papier lui garde sa place
   (--place-d-ecrire : sa marge, son air, et ses deux lignes au téléphone, où l'adresse passe à la
   ligne ; une seule à l'ordinateur), et l'image garde sa hauteur. La présentation (demande du 23/10)
   et « Écrire » viennent ensuite, remontées dans cette place : la présentation commence au bas du
   premier écran et coule en dessous, aussi loin qu'il le faut ; « Écrire » la suit. */
.accueil {
  --place-d-ecrire: calc(10px + 20px + 2 * 1.55 * 16px);
  --bas-de-l-accroche: 30px;
  margin-top: var(--menu);
}
.premier-ecran {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: var(--ecran);
}
.accueil .cadre { min-height: 0; }

.accroche { padding: 22px var(--reserve) calc(var(--place-d-ecrire) + var(--bas-de-l-accroche)) var(--gouttiere); }
.accroche-suite {
  position: relative;      /* posée au-dessus du bas de la bande de papier, qu'elle occupe */
  margin-top: calc(-1 * (var(--place-d-ecrire) + var(--bas-de-l-accroche)));
  padding: 0 var(--reserve) var(--bas-de-l-accroche) var(--gouttiere);
}
.accroche h1 {
  margin: 0 0 12px;
  font-family: var(--garamond);
  font-size: clamp(34px, 9.6vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.005em;
}
.accroche .metier {
  max-width: 30em;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}
/* La présentation (demande d'Adrien du 23/10 : « il n'y a pas assez de texte ; en première page on
   voit un transat, on ne comprend pas ») : quelques lignes qui disent ce qu'est l'œuvre, entre la
   ligne de métier et « Écrire à Adrien Audry », dans la colonne de lecture d'À propos. */
.accroche-suite .presentation {
  max-width: 34em;
  margin-top: 14px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--encre);
}

/* « Écrire à Adrien Audry », puis l'adresse en clair : le lien dit ce qu'il fait et à qui il écrit
   (demande d'Adrien du 15/10). Pas de filet, pas de bouton, pas de cadre ; un trait fin dessous au
   survol. Au téléphone, l'adresse passe à la ligne. */
.ecrire {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 0;
  font-size: 16px;
  letter-spacing: .06em;
  text-decoration: none;
}
.ecrire .courriel-en-clair { letter-spacing: .02em; color: var(--mine); }
.ecrire:hover > *,
.ecrire:focus-visible > * {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

@media (min-width: 900px) and (min-height: 501px) {
  .accueil { --place-d-ecrire: calc(10px + 20px + 1.55 * 16px); --bas-de-l-accroche: 40px; }
  .accroche { padding-top: 30px; }
  .accroche h1,
  .accroche .metier { max-width: 40vw; }   /* une colonne de 40 % au plus, à gauche */
  .accroche h1 { margin-bottom: 14px; }
  .accroche .metier { font-size: 17px; }
  .accroche-suite .presentation { font-size: 18px; }
}


/* Les références, juste sous l'écran d'accueil (demande d'Adrien du 19/10 : « tout en haut […]
   écrire toutes les références que les gens puissent le voir ») : deux lignes, les réalisations
   puis les études, dans la typographie du site, sans cadre. Chaque nom mène à sa bande ; il ne se
   coupe jamais (nowrap) : au téléphone, la ligne passe à la ligne entre deux noms. */
.references {
  padding: 30px var(--reserve) 4px var(--gouttiere);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
}
.references p + p { margin-top: 6px; }
.references .sorte {
  margin-right: 4px;
  font-family: var(--garamond);
  font-size: 18px;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
  color: var(--mine);
}
.references .nom { white-space: nowrap; }
.references a { text-decoration: none; }
.references a:hover,
.references a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
@media (min-width: 900px) and (min-height: 501px) {
  .references { padding-top: 44px; font-size: 16px; }
  .references .sorte { font-size: 19px; }
}


/* ── 7. La section des projets : posés et études mêlés, par date ── */

/* Les titres de section et de projet sont dans la même famille, EB Garamond, en petites capitales
   espacées : un seul caractère de titre, à l'ancienne, comme sur ses planches de présentation. */
.groupe { padding-top: 28px; }
.groupe-titre { padding: 0 var(--reserve) 32px var(--gouttiere); }
.groupe-titre h2,
.texte h2,
.mentions h1,
.en-tete-oeuvres h1,
.en-tete-oeuvres h2 {
  font-family: var(--garamond);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 400;
  font-variant-caps: all-small-caps;
  line-height: 1.1;
  letter-spacing: .16em;
}
@media (min-width: 900px) and (min-height: 501px) {
  .groupe { padding-top: 40px; }
  .groupe-titre { padding-bottom: 56px; }
}


/* ── 8. Un projet : l'image nue en haut, la bande de papier et son cartel dessous ── */

.projet {
  position: relative;
  height: var(--ecran);
  overflow: hidden;
}
.cadre { position: relative; }
.projet .cadre {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
}
.bande {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;     /* d'image en image, au doigt */
  overscroll-behavior-x: contain;    /* glisser au bout de la bande ne fait pas « page précédente » */
  scrollbar-width: none;
}
.bande::-webkit-scrollbar { display: none; }
.bande:focus-visible { outline: 1px solid var(--encre); outline-offset: -1px; }
.vue {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background: var(--attente);
}
/* Un geste = une image (demande d'Adrien du 26/10 : « ça accroche pas suffisamment ») : chaque enfant de
   la bande (vue, carte-phrase, page à lire, film) fait toute sa largeur, s'y cale au début et arrête le
   geste, même vif. */
.bande > * {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.vue picture,
.feuille picture,
.vue img,
.vue video {
  width: 100%;
  height: 100%;
}
.vue img,
.vue video { object-fit: cover; }
.vue img { transition: opacity .7s ease; }
img.arrive { opacity: 0; }   /* le script de la page l'enlève quand l'image est arrivée : fondu */

/* Un dessin au trait, ou une page à lire (une page de présentation, une image qui porte des mots),
   s'affiche entier sur le papier, jamais recadré, au téléphone comme à l'ordinateur (les rendus
   d'étude, eux, remplissent l'écran comme les photos). La « feuille » a les proportions de l'image
   (--proportion, écrite par la page) et tient dans la place laissée par le cartel : le tampon se
   cale sur le coin de l'image elle-même. Un dessin tourné selon l'écran a une seconde proportion
   pour l'ordinateur (--proportion-ordinateur) : sa version couchée y prend toute la place. */
.vue.entiere {
  display: grid;
  place-items: center;
  padding: 16px var(--gouttiere) 0;
  background: var(--papier);
  container-type: size;
}
.feuille {
  --forme: var(--proportion);
  position: relative;
  width: min(100cqw, 100cqh * var(--forme));
  aspect-ratio: var(--forme);
}
@media (min-width: 900px) and (min-height: 501px) {
  .feuille { --forme: var(--proportion-ordinateur, var(--proportion)); }
}
.feuille img { object-fit: contain; }

/* La marque « étude » : un petit tampon, droit, sans fond, dans le coin bas gauche de l'image (sur
   une image qui remplit l'écran, le coin bas gauche de ce qu'on en voit). Écrite par la page, jamais
   dans le fichier image ; en sable sur le bas d'une image sombre. */
.tampon { position: relative; }
.tampon::after {
  content: "Étude";
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  pointer-events: none;
  padding: 4px calc(7px - .26em) 3px 7px;   /* l'espacement des lettres ajoute un blanc après la dernière */
  border: 1px solid var(--encre);
  font: 400 9px/1 var(--texte);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--encre);
}
.tampon:lang(en)::after { content: "Study"; }
.tampon.sombre::after { border-color: var(--sable); color: var(--sable); }
@media (min-width: 900px) and (min-height: 501px) {
  .tampon::after { left: 14px; bottom: 14px; padding: 5px calc(9px - .26em) 4px 9px; font-size: 10px; }
}

/* La bande de papier : les points au milieu en haut, le cartel à gauche dessous ; le compteur (et
   les flèches, sur ordinateur) en haut à droite, à la hauteur des points, loin du coin bas, gardé
   vide. Demande d'Adrien du 19/10 : ce bandeau « un peu plus large » (plus haut,
   plus aéré), et les titres « un peu plus gros ». */
.papier {
  position: relative;
  padding: 42px var(--reserve) 28px var(--gouttiere);
  background-color: var(--papier);
}
.cartel h3 {
  font-family: var(--garamond);
  font-size: 24px;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  line-height: 1.32;       /* la hauteur des lettres de Garamond : deux lignes ne se touchent pas */
  letter-spacing: .12em;
  text-wrap: balance;
}
.cartel .lieu {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--mine);
}
.cartel .legende {
  max-width: 34em;
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.5;
}
.reperes {
  position: absolute;
  top: 14px;
  right: var(--gouttiere);
  display: flex;
  align-items: center;
}

/* Le compteur « 1 / 4 » : fin, en mine. Le script de la page tient le rang à jour ; sans lui, le
   compteur se tait plutôt que de dire faux. */
.compteur {
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--mine);
  white-space: nowrap;
}
html:not(.js) .compteur { display: none; }

@media (min-width: 900px) and (min-height: 501px) {
  .papier { padding: 66px calc(var(--reserve) + 220px) 36px var(--gouttiere); }
  .cartel {
    display: grid;
    grid-template-columns: minmax(0, 24em) minmax(0, 34em);
    column-gap: 64px;
    align-items: start;
  }
  .cartel h3 { grid-column: 1; font-size: 28px; }
  .cartel .lieu { grid-column: 1; }
  .cartel .legende { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; font-size: 16px; }
  .reperes { top: 12px; right: var(--reserve); }
}

/* Les flèches d'ordinateur : deux traits dessinés, sans fond, sans cercle. Elles vivent sur la
   bande de papier, de part et d'autre du compteur ; seule une souris les fait paraître, et seulement
   si le script tourne (sans lui, la bande glisse à la molette ou au pavé tactile). Demande d'Adrien
   du 19/10 : « un peu plus grosses, qu'on voit mieux » : un trait plus long et plus appuyé, en
   encre pleine ; arrivée au bout de la bande, la flèche pâlit sans disparaître. */
.fleche { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .js .fleche {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--encre);
    cursor: pointer;
  }
  .js .fleche svg { display: block; width: 16px; height: 37px; overflow: visible; }
  .js .fleche path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .js .fleche:hover:not(:disabled) { color: var(--mine); }
  .js .fleche:disabled { opacity: .25; cursor: default; }
  .js .reperes .compteur { padding: 0 8px; }
}
.fleche:focus-visible { outline: 1px solid var(--encre); outline-offset: 2px; }

/* Les points, juste sous l'image et au milieu, comme dans le fil d'Instagram : un par vue, pour
   dire qu'on peut glisser de côté (demandes d'Adrien du 19/10 : « un peu plus gros et pas entouré
   d'une pastille grise », « que ça ressemble vraiment à Instagram »). Ils sont posés sur le papier,
   sans ruban ni fond : celui de la vue qu'on regarde en encre pleine, les autres en encre très
   claire. Le script de la page les pose et marque le bon ; sans lui, il n'y en a pas. Au-delà de
   sept vues, une fenêtre de sept points (--visibles) laisse voir la piste de tous les points,
   décalée de --decalage points ; les points du bord rapetissent quand il en reste derrière eux. Ils
   ne prennent aucun geste (pointer-events). La bande et le papier sont posés dans leur case de la
   grille : les points se posent en haut de la case du papier, au-dessus du cartel. */
.projet .bande { grid-area: 1 / 1; }
.projet .papier { grid-area: 2 / 1; }
.points {
  --pas: 14px;               /* d'un point au suivant */
  --point: 8px;              /* diamètre d'un point */
  grid-area: 2 / 1;
  align-self: start;
  justify-self: center;
  z-index: 2;
  margin-top: 17px;          /* le milieu des points, à la hauteur du compteur */
  pointer-events: none;
}
.points .fenetre {
  width: calc(var(--visibles) * var(--pas));
  overflow: hidden;
}
.points .piste {
  display: flex;
  transform: translateX(calc(var(--decalage, 0) * var(--pas) * -1));
  transition: transform .3s ease;
}
.points span {
  display: flex;
  justify-content: center;
  flex: 0 0 var(--pas);
  height: var(--point);
}
.points span::before {
  content: "";
  width: var(--point);
  height: var(--point);
  border-radius: 50%;
  background: var(--encre);
  opacity: .2;
  transition: transform .3s ease, opacity .3s ease;
}
.points .vu::before { opacity: 1; }
.points .moyen::before { transform: scale(.7); }
.points .petit::before { transform: scale(.45); }
.points .cache::before { transform: scale(0); }
@media (min-width: 900px) and (min-height: 501px) {
  .points { --pas: 16px; --point: 9px; margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .points .piste,
  .points span::before { transition: none; }
}

/* Une phrase d'Adrien, tirée de ses présentations, glissée entre les images (demande du 19/10) :
   une vue de papier, la phrase seule au milieu, en Garamond italique, comme l'exergue d'À propos.
   Pas de source, pas de signature : la bande et le cartel disent déjà de qui elle est. */
.vue.carte {
  display: grid;
  place-items: center;
  padding: 24px var(--gouttiere);
  background: var(--papier);
}
.carte blockquote {
  max-width: 19em;
  font-family: var(--garamond);
  font-size: clamp(24px, 6.6vw, 34px);
  font-style: italic;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 900px) and (min-height: 501px) {
  .carte blockquote { max-width: 22em; font-size: clamp(32px, 2.6vw, 42px); }
}


/* ── 9. Les films : une image d'attente, la lecture au toucher ── */

/* Rien ne se charge avant le toucher : la page ne porte que l'image d'attente (chargée quand on
   approche) et un lien vers le film, qui l'ouvre dans le lecteur du navigateur si le script ne tourne
   pas. Avec le script, le film se lit sur place, muet, en boucle. Le signe de lecture est un
   triangle d'un trait fin, comme les flèches, posé sur un disque de papier translucide cerclé d'un
   fil : il se voit sur une image claire comme sur une sombre, et dit qu'on peut toucher.
   Au téléphone, le film et son image d'attente se montrent entiers, posés en haut du papier, juste
   sous le menu, le papier restant en dessous : l'œil les trouve là où commence le projet. Leur
   « écran » a les proportions du film (--proportion, écrite par la page) et tient dans la place
   laissée par le cartel, comme la feuille d'un dessin ; le tampon « étude » se cale sur son coin et
   le signe de lecture sur son milieu. À l'ordinateur, l'écran remplit la place et le film la
   couvre, comme une photo. */
.vue.film {
  display: grid;
  place-items: start center;
  background: var(--papier);
  container-type: size;
}
.ecran-du-film {
  position: relative;
  width: min(100cqw, 100cqh * var(--proportion));
  aspect-ratio: var(--proportion);
}
.vue.film img,
.vue.film video { object-fit: contain; }
@media (min-width: 900px) and (min-height: 501px) {
  .vue.film { display: block; background: var(--attente); container-type: normal; }
  .ecran-du-film { width: 100%; height: 100%; aspect-ratio: auto; }
  .vue.film img,
  .vue.film video { object-fit: cover; }
}
.lancer {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.lecture {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border: 1px solid rgba(31, 28, 25, .22);
  border-radius: 50%;
  background: rgba(247, 244, 238, .8);
  pointer-events: none;
}
.lecture svg {
  width: 24px;
  height: 29px;
  overflow: visible;
  transform: translateX(15%);   /* le triangle est centré sur son centre de gravité, pas sur sa boîte */
}
.lecture path {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (min-width: 900px) and (min-height: 501px) {
  .lecture { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .lecture svg { width: 30px; height: 36px; }
}
.film video {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.film.lancee .lancer { visibility: hidden; }
.film.lancee.en-pause .lancer { visibility: visible; z-index: 1; }   /* devant le film arrêté */
.film.lancee.en-pause .lancer img { visibility: hidden; }   /* en pause, le film reste à sa place, le signe revient */

/* La barre d'avance : un trait d'un pixel sur toute la largeur du film, au bas de son image, posé
   par le script dès que le film se lance. Le trait plein dit où on en est ; on le touche ou on le
   tire, au doigt comme à la souris, pour avancer ou reculer. La zone qu'on attrape est plus haute
   que le trait : un doigt la trouve sans viser. Encre sur le bas d'une image claire, sable sur
   celui d'une sombre, comme les flèches. */
.avance {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 28px;
  color: var(--encre);
  cursor: pointer;
  touch-action: none;        /* le doigt tire la barre, pas la bande d'images */
}
.film.bas-sombre .avance { color: var(--sable); }
.avance::before,
.avance-faite {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background: currentColor;
}
.avance::before { opacity: .3; }
.avance-faite { transform: scaleX(0); transform-origin: left; }
.avance:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }

/* « Son » : le mot qui rend le film audible, sur la bande de papier, près du compteur ; le script le
   montre quand l'image vue est un film qui a du son. Souligné quand le son est mis. */
.son {
  min-height: 40px;
  margin-right: 14px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 11px/1 var(--texte);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mine);
  cursor: pointer;
}
.son[aria-pressed="true"] {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.son:focus-visible { outline: 1px solid var(--encre); outline-offset: 2px; }


/* ── 10. À propos, Contact ── */

.texte { padding: 28px var(--reserve) 72px var(--gouttiere); }

/* À propos : l'exergue en Garamond italique, le texte en colonne de 34 em au plus, en Garamond
   droit lui aussi (choix d'Adrien du 24/10/2026 : à 18 px en Source Sans, le texte paraissait plus
   gros que les noms de pièce, Garamond 18 px en petites capitales ; la même règle vaut pour les pages
   Art et Mobilier) ; le dessin au trait en grand, entier sur le papier. Au téléphone, il vient en pleine
   largeur (entre les gouttières) juste sous l'exergue ; à l'ordinateur, il tient la colonne de
   droite sur toute la hauteur de la section. */
.a-propos-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "exergue" "dessin" "prose";
  margin-top: 28px;
}
.exergue {
  grid-area: exergue;
  font-family: var(--garamond);
  font-size: clamp(21px, 5.8vw, 30px);
  font-style: italic;
  line-height: 1.3;
}
.dessin-a-propos {
  grid-area: dessin;
  align-self: start;
  margin: 28px calc(var(--gouttiere) - var(--reserve)) 0 0;   /* jusqu'à la gouttière de droite */
}
.dessin-a-propos img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity .7s ease;
}
.prose {
  grid-area: prose;
  max-width: 34em;
  margin-top: 32px;
  font-family: var(--garamond);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}
.prose p + p { margin-top: 1.1em; }

/* Contact : l'amorce, le formulaire, l'adresse en clair en secours, puis le lieu et le lien du
   book (qui a la forme d'« Écrire à Adrien Audry » : des mots sans filet). Demande d'Adrien du
   19/10 : un formulaire plutôt qu'un lien qui ouvre un logiciel de mail. Il garde la peau du
   site : aucun cadre, aucun fond ; chaque champ est un trait d'encre sous son nom, comme une
   ligne à remplir sur une feuille ; le bouton est un mot souligné. Les messages s'écrivent sous
   le champ concerné (script de la page) ; sans script, le navigateur vérifie les champs lui-même,
   et le message de retour s'affiche quand la page revient à son ancre (« :target »). */
.contact .amorce { margin-top: 28px; }
.formulaire { position: relative; max-width: 46em; margin-top: 20px; }
.champs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 22px;
}
.champ label {
  display: block;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mine);
}
.champ .facultatif { letter-spacing: .02em; text-transform: none; }
.champ input,
.champ select,
.champ textarea {
  display: block;
  width: 100%;
  margin: 2px 0 0;
  padding: 8px 0 7px;
  border: 0;
  border-bottom: 1px solid var(--mine);
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  font: 300 17px/1.4 var(--texte);   /* 17 px : un téléphone n'agrandit pas la page quand on touche le champ */
}
.champ textarea { min-height: 7.4em; resize: vertical; }
/* La liste des professions : la flèche du système remplacée par un petit chevron d'encre. */
.champ select {
  padding-right: 26px;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mine) 50%),
                    linear-gradient(135deg, var(--mine) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-bottom-color: var(--encre); outline: none; }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible { outline: 1px solid var(--encre); outline-offset: 4px; }
.champ [aria-invalid="true"] { padding-bottom: 6px; border-bottom: 2px solid var(--encre); }
.erreur { margin-top: 6px; font-size: 14px; line-height: 1.4; }
.erreur:empty { display: none; }
/* Le champ piège : hors de l'écran, jamais vu ni atteint au clavier ; seul un robot le remplit. */
.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  margin-top: 30px;
}
.envoyer {
  min-height: 44px;
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--encre);
  border-radius: 0;
  background: none;
  color: var(--encre);
  font: 400 15px/1.2 var(--texte);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.envoyer:hover { color: var(--mine); border-bottom-color: var(--mine); }
.envoyer:focus-visible { outline: 1px solid var(--encre); outline-offset: 4px; }
.envoyer:disabled { opacity: .45; cursor: progress; }
.etat,
.retour {
  font-family: var(--garamond);
  font-size: 20px;
  font-style: italic;
  line-height: 1.35;
}
.etat:empty { display: none; }
.retour { display: none; margin-bottom: 20px; }
.retour:target { display: block; }
/* L'adresse en clair, en secours : du texte, pas un lien. Un toucher la sélectionne entière, pour la copier. */
.secours { margin-top: 24px; font-size: 14px; color: var(--mine); }
.secours .courriel-en-clair {
  letter-spacing: .02em;
  color: var(--encre);
  -webkit-user-select: all;
  user-select: all;
}
.contact .lieu { margin-top: 20px; color: var(--mine); }
.contact .lieu + p { margin-top: 10px; }
.contact .livre { margin-top: 26px; }

@media (min-width: 900px) and (min-height: 501px) {
  .texte { padding-top: 40px; padding-bottom: 120px; }
  .a-propos-page {
    grid-template-columns: minmax(0, 612px) minmax(240px, 1fr);   /* 612 px : 34 em du texte à 18 px */
    grid-template-areas: "exergue dessin" "prose dessin";
    column-gap: clamp(48px, 6vw, 96px);
    margin-top: 40px;
  }
  .dessin-a-propos { margin: 0; }
  .exergue { max-width: 20em; }
  .prose { margin-top: 40px; }
  .champs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 26px; }
  .champ.large { grid-column: 1 / -1; }
}


/* ── 11. Les esquisses en fond : ses dessins, très clairs, derrière les bandes de papier ── */

/* Demandes d'Adrien du 15/10 : « mes esquisses en images de fond, bien plus transparentes […] on
   verrait un peu des formes au fond », puis qu'elles couvrent toute la largeur du bandeau, vues de
   près, quelques traits seulement. Le générateur ne garde de chaque dessin qu'un détail, là où des
   traits se croisent, ramené à une encre très claire (le trait entre 6 et 12 % d'encre sur le
   papier) ; il s'étire ici à toute la largeur de la bande de papier (« cover » : jamais de bord
   vide), centré sur son milieu, où passent les traits. Dans les hautes sections de texte, à
   l'ordinateur, il garde la largeur de l'écran sans grandir davantage, posé vers le bas. Seulement derrière le papier (accueil,
   cartels, À propos, Contact, pied), jamais sur une photo ; rien ne bouge. Le dessin vit sur un
   calque sous le texte, qui s'estompe en haut et en bas de sa bande : sur un papier continu, aucune
   coupure nette ne trahit la limite d'une section. Un cartel sur deux prend le détail en miroir,
   pour que deux bandes voisines ne se répètent pas. Au téléphone, absent d'À propos, où son grand
   dessin suffit. */
.fond {
  position: relative;
  isolation: isolate;      /* le calque du dessin passe sous le texte, jamais sous le papier */
  --fondu: 40px;           /* hauteur du fondu, en haut et en bas de la bande */
}
.fond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent);
}
.fond-a::before { background-image: url("esquisses/augecolin-01.webp?v=00776c6b"); }
.fond-b::before { background-image: url("esquisses/augecolin-06.webp?v=496d1ea2"); }
.fond-c::before { background-image: url("esquisses/morzine-05.webp?v=44ecfeeb"); }

.papier.fond.a-gauche::before { transform: scaleX(-1); }
.a-propos.fond::before { content: none; }
.mentions.fond::before { content: none; }

@media (min-width: 900px) and (min-height: 501px) {
  .fond { --fondu: 56px; }
  .texte.fond::before,
  .mentions.fond::before { background-size: 100% auto; background-position: center 80%; }
  .a-propos.fond::before { content: ""; }
  .mentions.fond::before { content: ""; }
}


/* ── 12. Le pied : mentions légales, langues, en mine, séparés par des filets ── */

/* La signature, dans le menu de chaque écran, ferme la ligne : elle n'est pas répétée. */
.pied {
  padding: 28px var(--reserve) 40px var(--gouttiere);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--mine);
}
.pied > .trait { margin-bottom: 28px; }
.pied-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.pied-ligne > * + * {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--filet);
}
.pied a { text-decoration: none; }
.pied a:hover,
.pied a:focus-visible { color: var(--encre); }
.pied a[aria-current="page"] { color: var(--encre); }


/* ── 13. La page des mentions légales ── */

.mentions {
  min-height: calc(100vh - 160px);
  margin-top: var(--menu);
  padding-top: 48px;
}
.mentions h2 {
  margin-top: 32px;
  font-family: var(--texte);   /* les intitulés sont du texte courant, pas des titres de section */
  font-size: 12px;
  font-weight: 400;
  font-variant-caps: normal;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mine);
}
.mentions h2 + p { margin-top: 8px; }
.mentions p { max-width: 38em; }
.mentions h1 + h2 { margin-top: 40px; }
@media (min-width: 900px) and (min-height: 501px) {
  .mentions { padding-top: 88px; }
}


/* ── 14. La signature dans le menu, à côté du nom à l'ordinateur, à la place de « Accueil » au téléphone ── */

/* Le 24/10, Adrien choisit la place « A » de la planche du 19/10 : la signature quitte le coin bas droit
   pour le menu, toujours sur le papier, lisible sur toutes les pages. Elle reste noire, sans mélange
   avec ce qui passe dessous (demande du 19/10 : « il faudrait qu'elle puisse rester en noir »). Sa
   hauteur est la plus grande que la barre du menu porte avec de l'air : 8 px dessus et dessous, 40 px
   dans les 56 px du téléphone, 48 px dans les 64 px de l'ordinateur. Sous 390 px de large, elle baisse
   avec la largeur de l'écran (35 px à 360 px, 28 px à 320 px), comme les lettres du menu : les sept
   entrées tiennent sans glisser. Elle ne gêne aucun geste : le lien est celui du nom. */
.monogramme {
  display: block;
  width: auto;
  height: min(40px, 17.3vw - 27.5px);
  pointer-events: none;
}
@media (min-width: 1050px) and (min-height: 501px) {
  .monogramme { height: 48px; margin-left: 20px; }
}


/* ── 15. Le calque : une page à lire, en grand ── */

/* Un toucher ou un clic sur une page à lire (section 8) l'ouvre ici, dans sa version de 1 920 px,
   entière, sur le papier de tout l'écran ; un toucher n'importe où, la croix ou Échap la referment
   (script de la page). Le calque passe devant le menu et sa signature : rien ne couvre un mot.
   Sans script, le lien ouvre le fichier seul dans le navigateur. Un petit signe, dans le coin de
   la page, dit qu'elle s'agrandit : deux flèches d'un trait fin sur un disque de papier. */
.agrandir {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.loupe {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(31, 28, 25, .22);
  border-radius: 50%;
  background: rgba(247, 244, 238, .82);
  pointer-events: none;
}
.loupe svg { width: 14px; height: 14px; overflow: visible; }
.loupe path,
.calque .fermer path {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.calque {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 56px 10px;
  background: var(--papier);
  cursor: zoom-out;
}
.calque[hidden] { display: none; }
.calque img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.calque .fermer {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.calque .fermer svg { width: 18px; height: 18px; overflow: visible; }
.calque .fermer:focus-visible { outline: 1px solid var(--encre); outline-offset: -6px; }
html.calque-ouvert { overflow: hidden; }   /* la page ne défile pas derrière */
@media (min-width: 900px) and (min-height: 501px) {
  .loupe { top: 12px; right: 12px; }
  .calque { padding: 64px 48px; }
  .calque .fermer { top: 12px; right: 16px; }
}


/* ── 16. Le mouvement : seulement le fondu des images, et rien si on le refuse ── */

@media (prefers-reduced-motion: reduce) {
  .vue img,
  .dessin-a-propos img,
  .oeuvre img { transition: none; }
}


/* ── 17. Les pages d'œuvres (Art, Mobilier) : l'en-tête, puis l'accrochage ── */

/* Demandes d'Adrien du 23/10 : « reprendre pas mal d'esquisses dans un onglet art », puis, le soir :
   « utiliser la largeur de l'écran, mettre un peu à droite, à gauche, reprendre ce qui se fait dans
   l'art aujourd'hui, plus dynamique ». Le dynamisme vient du rythme, pas du mouvement : des œuvres de
   tailles différentes, à gauche, à droite, au centre, parfois sur toute la largeur, beaucoup de vide,
   des cartels petits. Aucun cadre, aucun bouton, aucune grille serrée ; le seul mouvement reste le
   fondu d'arrivée des images. Plus tard le même soir, devant ses écrans de 1 920 et 2 560 px : « Il
   faut que tu fasses des bordures blanches, parce que là, sur la largeur de l'écran, ça ne convient
   pas. » La largeur se prend donc dans une bande centrée, avec une marge blanche de chaque côté.

   En haut, le titre, l'exergue et la prose, sur le papier, sans esquisse de fond : elle aurait répété
   un dessin de la page. À l'ordinateur, l'exergue tient cinq douzièmes de la largeur à gauche, la
   prose sept à droite, dans la place que les textes laissent au coin (gardée vide). */
.en-tete-oeuvres {
  margin-top: var(--menu);
  padding-top: 48px;
}
.en-tete-oeuvres .exergue { margin-top: 28px; }

/* La page Mobilier : après l'en-tête, une section par pièce. Le nom de la pièce est un titre discret,
   de la famille des titres de cartel (Garamond en petites capitales, 18 px) ; son paragraphe a la
   largeur et la voix de la prose de l'en-tête ; ses images suivent, accrochées comme les dessins de
   la page Art, dans la même bande. À l'ordinateur, le nom tient la colonne de l'exergue et le
   paragraphe celle de la prose : la page garde le pas de son en-tête. */
.en-tete-piece { padding: 0 var(--reserve) 0 var(--gouttiere); }
.en-tete-piece h2 {
  font-family: var(--garamond);
  font-size: 18px;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  line-height: 1.32;
  letter-spacing: .12em;
}
.en-tete-piece .prose { margin-top: 12px; }

/* Les sections Art et Mobilier de la page unique (décision d'Adrien du 24/10 : « la page Art n'est pas
   contenue dans la page générale »). Le titre et l'exergue de la page entière, quatre de ses images
   accrochées comme sur elle, puis le lien vers elle, de la forme d'« Écrire à Adrien Audry ». Le titre
   suit le trait de la section comme les autres titres de la page : ni la marge du menu ni le grand air
   du haut d'une page d'œuvres, et les images viennent tout de suite sous l'exergue. */
.oeuvres-a-l-accueil .en-tete-oeuvres { margin-top: 0; padding-top: 0; padding-bottom: 0; }
.oeuvres-a-l-accueil .accrochage { padding-bottom: 4vh; }
.vers-la-page { padding: 0 var(--reserve) 72px var(--gouttiere); }

/* L'accrochage. Le générateur écrit sur chaque œuvre sa place (outils/generer-site.py,
   placer_les_oeuvres) : ses colonnes (--colonnes) et sa rangée (--rangee) à l'ordinateur, l'air ou le
   chevauchement qui la sépare du haut de sa rangée (--avant), son côté (--calage), sa hauteur permise
   (--haut), la part de la bande qu'elle vise (--largeur-visee), sa largeur au téléphone (--part), la
   proportion de son image (--proportion, et --proportion-ordinateur pour un dessin tourné selon
   l'écran). La feuille ne fait que poser.

   Demande d'Adrien du 24/10 : « il faudrait qu'elles fassent toutes à peu près la même taille, les
   esquisses ». La largeur visée et la part au téléphone suivent donc la forme du dessin, pour que les
   surfaces restent proches : plus étroit s'il est en hauteur, plus large s'il est en longueur.

   Au téléphone : une seule colonne ; les œuvres touchent tour à tour le bord gauche et le bord droit
   de la zone utile (telephone-gauche, telephone-droite), de 40 à 92 % de sa largeur selon leur forme,
   et celles de pleine largeur la prennent toute ; 10 % de la hauteur de l'écran entre deux. Une œuvre
   en hauteur s'arrête à 80 % de l'écran : la figure prend la largeur que l'image occupe vraiment, et
   le cartel s'aligne ainsi sur le bord gauche de l'image. La proportion écrite tient la place de
   l'image avant qu'elle n'arrive : rien ne bouge quand elle se charge. Le fond des dessins est
   transparent, posé sur le papier ; le JPEG de secours (navigateur sans WebP) garde un fond blanc. */
.accrochage { padding: 4vh var(--gouttiere) 14vh; }
.oeuvre {
  --haut-telephone: 80vh;
  --cartel: 15em;            /* largeur de texte du cartel, au moins : le titre tient sur deux lignes */
  --abri: calc(var(--reserve) - var(--gouttiere));   /* la place qu'avait le monogramme, gardée vide au bord droit du cartel */
  width: min(var(--part, 100%), calc(var(--haut-telephone) * var(--proportion, 1)));
}
.oeuvre + .oeuvre { margin-top: 10vh; }
.oeuvre.telephone-droite {
  margin-left: auto;
  translate: min(0px, calc(100% - var(--cartel) - var(--abri))) 0;
}
.oeuvre img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--proportion, auto);
  max-height: var(--haut-telephone);
  object-fit: contain;
  transition: opacity .7s ease;
}
/* Le cartel, petit, sous le bord gauche de l'image : le titre en petites capitales Garamond (il mène
   à la bande du projet), le lieu et l'année en mine. Au téléphone, il laisse au bord droit la place
   qu'avait le monogramme, gardée vide.

   Sous un dessin étroit, le cartel ne se coupe pas à chaque mot : il n'est jamais plus étroit que
   --cartel (environ 15em, deux lignes de titre au plus), quitte à déborder à droite de l'image, son
   bord gauche toujours sous celui de l'image. Une œuvre posée contre le bord droit n'a pas cette
   place : elle se décale vers la gauche, juste de ce qui manque au cartel et à sa réserve (translate,
   compté sur la largeur de la figure : rien ne bouge quand l'image est assez large). Le décalage ne
   change pas la mise en page : les œuvres voisines restent où elles sont. */
.oeuvre figcaption {
  margin-top: 14px;
  padding-right: var(--abri);
  width: max(100%, calc(var(--cartel) + var(--abri)));
}
.oeuvre .titre {
  font-family: var(--garamond);
  font-size: 18px;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  line-height: 1.32;
  letter-spacing: .12em;
  text-wrap: balance;
}
.oeuvre .titre a { text-decoration: none; }
.oeuvre .titre a:hover,
.oeuvre .titre a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.oeuvre .lieu {
  margin-top: 3px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--mine);
}

/* À l'ordinateur : une bande centrée sur le papier, une marge blanche de chaque côté (--marge-bande) :
   8 % de la largeur de l'écran, et la bande ne dépasse jamais 1 400 px. À 1 440 px de large, une bande
   de 1 210 px entre deux marges de 115 ; à 1 920, des marges de 260 ; à 2 560, de 580. Le titre,
   l'exergue et la prose partent du même bord gauche que les œuvres ; à droite, ils gardent au moins
   la place qu'avait la signature (gardée vide). Le générateur dit au navigateur la largeur de chaque image dans cette
   bande, pour qu'il charge le bon fichier (tailles_d_une_place, MARGE_DE_LA_BANDE,
   LARGEUR_DE_LA_BANDE) : un changement ici se reporte là-bas. Le menu et le pied restent pleine largeur.

   Dans la bande, douze colonnes séparées par la gouttière. Chaque œuvre se pose dans ses colonnes,
   contre leur bord gauche, contre leur bord droit ou en leur milieu (--calage), à la largeur qu'elle
   vise, une part de la bande (100cqi : la bande est le conteneur de mesure), et jamais plus haute que
   sa hauteur permise (85 % de l'écran). Ses colonnes sont comptées pour contenir cette largeur ; seule
   la pleine largeur, qui ne vise rien, s'étend à toutes les siennes. Une rangée suit la
   précédente après un grand air (12 % de la hauteur de l'écran) ; une œuvre de droite qui suit une
   œuvre de gauche sans colonne commune commence 8 % avant la fin de celle-ci (--avant négatif) : les
   deux se chevauchent en hauteur, jamais en largeur, et jamais sur un cartel. Le cartel est toujours
   sous le bord gauche de l'image, près du trait, même sous un dessin étroit. Celui d'une œuvre qui
   s'approche du bord droit s'arrête avant la place qu'avait la signature (cartel-a-l-abri), comptée depuis
   le bord de la bande : au-delà de 1 900 px de large environ, la marge blanche la contient déjà. Seule
   une œuvre calée à droite de ses colonnes (ordinateur-droite) se décale pour son cartel ; celle de
   gauche ou du milieu le laisse déborder dans ses colonnes, vers la droite. */
@media (min-width: 900px) and (min-height: 501px) {
  .en-tete-oeuvres,
  .en-tete-piece,
  .accrochage,
  .vers-la-page { --marge-bande: max(var(--gouttiere), 8vw, (100vw - 1400px) / 2); }
  .vers-la-page { padding-left: var(--marge-bande); padding-bottom: 120px; }
  .en-tete-oeuvres {
    padding-left: var(--marge-bande);
    padding-right: max(var(--reserve), var(--marge-bande));
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
    padding-top: 88px;
  }
  /* L'exergue et la prose ont leurs cases nommées dans À propos : ici, on donne les leurs. */
  .en-tete-oeuvres h1,
  .en-tete-oeuvres h2 { grid-area: 1 / 1 / 2 / -1; }
  .en-tete-oeuvres .exergue { grid-area: 2 / 1; }
  .en-tete-oeuvres .prose { grid-area: 2 / 2; }
  .en-tete-oeuvres .exergue,
  .en-tete-oeuvres .prose { margin-top: 40px; }
  .en-tete-piece {
    padding-left: var(--marge-bande);
    padding-right: max(var(--reserve), var(--marge-bande));
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: baseline;
  }
  .en-tete-piece h2 { grid-area: 1 / 1; }
  .en-tete-piece .prose { grid-area: 1 / 2; margin-top: 0; }
  .accrochage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gouttiere);
    align-items: start;
    padding-top: 6vh;
    padding-inline: var(--marge-bande);
    container-type: inline-size;
  }
  .oeuvre,
  .oeuvre + .oeuvre,
  .oeuvre.telephone-droite {
    position: relative;
    grid-column: var(--colonnes);
    grid-row: var(--rangee);
    justify-self: var(--calage);
    width: min(100%, calc(var(--largeur-visee, 1) * 100cqi),
               calc(var(--haut) * var(--proportion-ordinateur, var(--proportion, 1))));
    margin: var(--avant) 0 0;
  }
  .oeuvre img {
    aspect-ratio: var(--proportion-ordinateur, var(--proportion, auto));
    max-height: var(--haut);
  }
  .oeuvre { --abri: 0px; }
  .oeuvre.cartel-a-l-abri { --abri: max(0px, var(--reserve) - var(--marge-bande)); }
  .oeuvre.telephone-droite { translate: none; }
  .oeuvre.ordinateur-droite { translate: min(0px, calc(100% - var(--cartel) - var(--abri))) 0; }
}


/* ── 18. Les pages de projet : le titre et sa ligne en haut, la première image juste dessous ── */

/* La page d'un projet porte en haut son titre et la ligne lieu · année, puis la bande du projet telle
   que la page unique la montre. Le grand blanc qui termine un bloc de texte (72 px au téléphone,
   120 px à l'ordinateur) y séparait trop l'image de son titre : 40 px les tiennent ensemble. Un dessin
   ou une page à lire, montré entier, se cale en haut de sa bande au lieu d'y flotter au milieu : une
   image couchée dans la bande haute d'un téléphone laissait sinon plus de 150 px vides au-dessus
   d'elle. L'air passe dessous, avant le cartel. L'accueil et les pages d'œuvres ne changent pas. */
body.page-projet .en-tete-oeuvres { padding-bottom: 40px; }
body.page-projet .vue.entiere { align-items: start; }


/* ── 19. Le téléphone couché : l'image qui remplit l'écran, le texte dessous, le menu qui s'efface ── */

/* Demande d'Adrien du 26/10 : « quand on le met en mode paysage, on ne voit plus du tout les images ». Un
   téléphone couché n'a que 360 à 430 px de haut : la bande de papier d'un projet, tenu dans un écran, en
   prenait presque tout. Couché, l'image prend donc tout l'écran ; le titre, le lieu et la légende passent
   dessous, et un projet dépasse l'écran : on descend pour les lire. L'accueil de même : l'image sur toute
   la largeur et toute la hauteur sous le menu, puis la phrase et la ligne de métier. L'image remplit sa
   place, recadrée autour de son point fort comme debout (section 8) : posée entière sur le papier, elle
   ne faisait qu'une bande au milieu de l'écran, « ça fait pas du tout fini », a dit Adrien. Pour la voir
   entière, le bouton « plein écran » de la bande la montre sur le noir (section 20). Les dessins, les pages
   à lire et les films gardent leur règle : entiers sur le papier.
   La mise en page de l'ordinateur ne s'y applique pas, même sur un téléphone de plus de 900 px de large. */
@media (orientation: landscape) and (max-height: 500px) {
  /* Le menu s'efface quand on descend : la page s'arrête au ras du haut de l'écran. Le premier écran
     commence sous le menu (la marge de l'accueil) : son arrêt reste le haut de la page. */
  html { scroll-padding-top: 0; }
  .premier-ecran { display: block; height: auto; scroll-margin-top: var(--menu); }
  .accueil .cadre { height: var(--ecran); }
  .projet { height: auto; overflow: visible; }
  /* Un projet, lui, prend l'écran entier, menu compris : on y arrive en descendant, le menu s'est
     effacé, et le premier écran ne montre que l'image (rien du titre ne dépasse dessous). En remontant,
     le menu revient par-dessus le haut de l'image. Retouche du 26/10, vue sur les captures à 844×390. */
  .projet .cadre { grid-template-rows: calc(var(--ecran) + var(--menu)) auto; height: auto; }

  /* Le menu se cache quand on descend et revient dès qu'on remonte (le script pose ou retire la classe
     « efface »), ou dès que le clavier y entre. */
  .menu { transition: transform .3s ease; }
  .menu.efface:not(:focus-within) { transform: translateY(-100%); }
}
/* Si le mouvement est refusé, le menu disparaît et revient sans glisser. */
@media (orientation: landscape) and (max-height: 500px) and (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}


/* ── 20. Le plein écran d'une bande : l'icône connue, la bande entière sur le noir ── */

/* Demandes d'Adrien du 26/10 : « il faut pouvoir mettre les vidéos en grand écran sur toute la largeur » ;
   « quand on double-clique sur une image, il faut que l'image soit en plein écran, pas ouverte toute seule,
   toute petite dans la fenêtre » ; « et surtout, il faut que le carrousel soit toujours actif, c'est ça qui
   est important » ; « à la place de double-cliquer, il faudrait une icône, mettre en plein écran, l'icône
   qu'on connaît, qu'on utilise tout le temps ».
   Chaque bande porte donc, en bas à droite, le signe des lecteurs vidéo : quatre coins tournés vers
   l'extérieur, et vers l'intérieur pour sortir. Il est posé sur un disque de papier translucide cerclé d'un
   fil, comme le signe de lecture d'un film (section 9) : il se voit sur une image claire comme sur une
   sombre. Le bouton fait 44 px de côté, la taille d'un doigt. Il reste au coin de l'écran pendant qu'on
   glisse d'image en image : il est « collé » au bord droit de la bande, sans prendre de place parmi les
   images, et la bande ne s'arrête jamais sur lui. Il se tient au-dessus de la zone qu'on attrape sur la
   barre d'avance d'un film (28 px), et loin du tampon « étude », posé au coin bas gauche : il ne couvre ni
   l'un ni l'autre. Le menu passe devant lui. Sans script, il est caché : il ne ferait rien. */
.bande > .plein-ecran {
  position: sticky;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin: 0 0 34px -44px;   /* aucune place prise dans la bande ; au-dessus de la barre d'un film */
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre);
  cursor: pointer;
  scroll-snap-align: none;
}
html:not(.js) .plein-ecran { display: none; }
.plein-ecran::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(31, 28, 25, .22);
  border-radius: 50%;
  background: rgba(247, 244, 238, .8);
}
.plein-ecran svg {
  position: relative;
  width: 15px;
  height: 15px;
  overflow: visible;
}
.plein-ecran path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.plein-ecran .sortir,
.en-plein-ecran > .plein-ecran .entrer { display: none; }
.en-plein-ecran > .plein-ecran .sortir { display: inline; }
.plein-ecran:focus-visible { outline: 1px solid var(--encre); outline-offset: -2px; }

/* Deux touchers rapides sur une photo ou un rendu d'une bande font comme le bouton. Sur ces images, le
   navigateur ne zoome donc plus la page au double toucher, il le laisse au script ; le pincement et le
   glissement de la bande restent libres. Les films (un toucher les lance ou les arrête) et les pages à
   lire (un toucher les ouvre sur le calque) ne sont pas concernés. */
.bande .vue:not(.film):not(.a-lire) img { touch-action: manipulation; }

/* En plein écran, c'est la bande entière qui prend l'écran, jamais une image seule : on y glisse d'image en
   image, de film en film, avec le même arrêt qu'avant (une image par geste). Le fond est noir ; chaque
   image et chaque film se montrent entiers, aussi grands que l'écran le permet, au milieu : une photo
   large touche les deux bords. Les cartes-phrases restent à leur place, la phrase couleur papier sur le
   noir ; un dessin et une page à lire gardent leur feuille de papier, sinon leurs traits se perdraient
   dans le noir. Le
   script pose la classe « en-plein-ecran » dans les deux cas : le vrai plein écran du navigateur, ou, quand
   il le refuse (l'iPhone), la bande posée devant toute la page, au-dessus du menu et du calque. Le reste
   de la page ne bouge pas et ne défile pas derrière. */
.bande.en-plein-ecran {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100%;
  height: 100%;
  background: #000;
}
.bande:fullscreen { background: #000; }   /* le temps que le script pose sa classe */
html.plein-ecran-dans-la-page { overflow: hidden; }
.en-plein-ecran .vue { background: #000; }
/* Le point fort, écrit dans la page pour recadrer une photo, n'a plus lieu d'être : l'image est entière. */
.en-plein-ecran .vue img,
.en-plein-ecran .vue video {
  object-fit: contain;
  object-position: 50% 50% !important;
}
.en-plein-ecran .vue.entiere,
.en-plein-ecran .vue.film {
  display: grid;
  place-items: center;
  padding: 0;
  container-type: size;
}
/* Un film se pose au milieu de l'écran, entier. Quand il reste sous lui trop peu de noir pour le bouton
   (78 px : le bouton et l'air qui le sépare du bas), il descend au ras du bas de l'écran : sa barre d'avance
   passe alors sous le bouton, jamais dessous. Le calcul dit « la moitié du noir qui reste, ou rien s'il en
   reste moins que la place du bouton ». */
.en-plein-ecran .vue.film { place-items: end center; }
.en-plein-ecran .ecran-du-film {
  --noir: calc(100cqh - min(100cqh, 100cqw / var(--proportion)));   /* le noir au-dessus et au-dessous du film */
  width: min(100cqw, 100cqh * var(--proportion));
  height: auto;
  aspect-ratio: var(--proportion);
  margin-bottom: clamp(0px, (var(--noir) / 2 - 78px) * 1000, var(--noir) / 2);
}
.en-plein-ecran .feuille { background: var(--papier); }
.en-plein-ecran .vue.carte { color: var(--papier); }
.en-plein-ecran .agrandir { cursor: auto; }
.en-plein-ecran .loupe { display: none; }