/* ---------------------------------------------------------------
   Marie Aynaud — feuille de style unique du site.
   Polices d'origine : Barlow Condensed (menu), Crimson Pro (sous-menu),
   Crimson Text (textes).
   Navigation : bandeau horizontal en haut de page (logo a gauche,
   menu a droite, sous-menus deroulants au survol).
   --------------------------------------------------------------- */

:root {
  --ink: #1a1a1a;
  --paper: #ffffff;
  --muted: #6e6e6e;
  --rule: #e4e2de;
  --gutter: 60px;
  --top: 30px;
  --gap: 14px;
  /* Hauteur disponible pour une bande de photos : ce qui reste sous le
     bandeau de navigation, une fois les marges et la legende deduites. */
  --row-height: min(750px, calc(100vh - 275px));
  --text-width: 560px;
  --caption-width: 220px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
  z-index: 100;
}
.skip-link:focus { left: 0; }

.page-title,
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Bandeau de navigation ------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 22px var(--gutter) 18px;
  background: var(--paper);
}

.site-title { margin: 0; }
/* La taille du logo vient de content/site.json (attributs width/height). */
.site-title img { height: auto; }

/* L'icone Instagram suit le menu, a l'extremite droite du bandeau.
   `margin-left: auto` sur le menu pousse les deux a droite, que l'icone
   soit presente ou non. */
.site-title { order: 0; }
.nav { order: 1; margin-left: auto; }
.site-instagram { order: 2; }

.site-instagram {
  display: flex;
  align-items: center;
  color: var(--ink);
  transition: opacity 0.18s ease;
}
.site-instagram:hover, .site-instagram:focus-visible { opacity: 0.6; text-decoration: none; }
.site-instagram svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.site-instagram-dot { fill: currentColor; stroke: none; }

.nav-toggle { display: none; }

.nav-list, .nav-sub { list-style: none; margin: 0; padding: 0; }

.nav-list {
  display: flex;
  align-items: baseline;
  gap: 30px;
}

.nav-item { position: relative; }

.nav-item > a,
.nav-section-label {
  display: block;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sous-menu deroulant, ouvert au survol ou au clavier. */
.nav-sub {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 210px;
  padding: 10px 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* Passerelle invisible : le curseur peut descendre du libelle au sous-menu. */
.nav-sub::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
.nav-section:hover > .nav-sub,
.nav-section:focus-within > .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-subitem > a {
  display: block;
  padding: 5px 18px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 16px;
  line-height: 1.35;
}

.nav-item.is-current > a,
.nav-subitem.is-current > a,
.nav-section.is-open > .nav-section-label { text-decoration: underline; }

.site-footer {
  margin: auto 0 0;
  padding: 24px var(--gutter);
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --- Contenu --------------------------------------------------- */

.content {
  flex: 1 1 auto;
  padding: var(--top) 0 50px var(--gutter);
}

/* --- Texte de presentation d'une page --------------------------- */

/* La description d'un projet, sous les photos. Elle se presente de la meme
   facon sur toutes les pages : une colonne de lecture calee sur la marge de
   gauche, annoncee par un filet court, et assez d'air au-dessus pour ne pas
   coller a la galerie — dans une bande, sa barre de defilement s'arrete
   juste au-dessus.
   Les espacements sont en `em` : ils suivent la taille du texte, y compris
   sur petit ecran ou elle diminue.
   Le filet est dessine en fond plutot qu'en `::before` : dans l'apercu de
   l'administration, les deux pseudo-elements de chaque bloc servent deja a
   l'etiquette et au cadre de selection (EDITOR_CSS, admin/public/layout.mjs).
   Un fond laisse le filet visible des deux cotes. */
.entry-text {
  max-width: var(--text-width);
  margin-top: 72px;
  padding-top: 1.7em;
  padding-right: var(--gutter);
  background: linear-gradient(var(--ink), var(--ink)) no-repeat left top / 54px 1px;
  font-size: 18px;
  line-height: 1.72;
  text-wrap: pretty;
}
.entry-text > :first-child { margin-top: 0; }
.entry-text > :last-child { margin-bottom: 0; }
.entry-text p { margin: 0 0 1.05em; }
/* Une ligne laissee vide dans l'editeur : un blanc, pas un paragraphe. Elle
   doit valoir a peu pres une ligne de plus, sans quoi la respiration voulue
   par l'auteur — la strophe d'un poeme, une section — ne se distinguerait
   pas de l'espace ordinaire entre deux paragraphes. */
.entry-text p:empty { margin: 0; height: 1.1em; }
.entry-text strong { font-weight: 600; }
.entry-text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  /* Souligne dans un gris intermediaire : assez visible pour reperer un lien
     dans un paragraphe, assez discret pour ne pas hacher la lecture. */
  text-decoration-color: var(--muted);
  text-underline-offset: 0.18em;
}
.entry-text a:hover, .entry-text a:focus-visible { text-decoration-color: currentColor; }
/* Les titres du texte riche empruntent la police du menu : ce sont des
   intertitres, pas des phrases. */
.entry-text h2, .entry-text h3 {
  margin: 1.9em 0 0.6em;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.entry-text h2 { font-size: 17px; }
.entry-text h3 { font-size: 15px; color: var(--muted); }
.entry-text ul, .entry-text ol { margin: 0 0 1.05em; padding-left: 1.2em; }
.entry-text li { margin-bottom: 0.25em; }
.entry-text blockquote {
  margin: 1.4em 0;
  padding-left: 1.1em;
  border-left: 1px solid var(--rule);
  color: var(--muted);
  font-style: italic;
}

.caption {
  margin-top: 8px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.caption p { margin: 0 0 4px; }
.caption p:last-child { margin-bottom: 0; }
.caption a { text-decoration: underline; }
.caption-description { margin-top: 4px; }

/* Placement du texte par rapport a la photo (choisi photo par photo).
   --ih-max : hauteur maximale d'affichage, soit le double de la version
   reduite, c'est-a-dire la taille de la version 2x (`src`) que le site sert
   deja. C'est ce qui aligne les photos d'une meme bande : une photo paysage,
   ramenee a 750 px de large, ne fait que 533 px de haut et resterait sinon
   plus courte que les portraits. Les images vraiment petites gardent leur
   taille (l'image-titre 300x61 de projets/ma-fi-madineh-bala-baher).
   --zoom : taille voulue par l'editeur de mise en page, 1 par defaut. Elle
   multiplie la taille normale de l'agencement, sans jamais depasser
   --ih-max : une photo agrandie reste servie par sa version 2x. Sur petit
   ecran, ou toutes les photos prennent la largeur de l'ecran, --zoom est
   sans effet. */
.gallery-item {
  position: relative;
  --ih-max: calc(var(--ih, 0px) * 2);
}
.gallery-item[data-caption="above"] { display: flex; flex-direction: column-reverse; }
.gallery-item[data-caption="above"] .caption { margin: 0 0 8px; }

.gallery-item[data-caption="left"],
.gallery-item[data-caption="right"] { display: flex; align-items: flex-start; gap: 16px; }
.gallery-item[data-caption="left"] { flex-direction: row-reverse; }
.gallery-item[data-caption="left"] .caption,
.gallery-item[data-caption="right"] .caption {
  margin-top: 0;
  flex: 0 0 auto;
  width: var(--caption-width);
  max-width: var(--caption-width);
}
/* Sans min-width, l'image refuserait de retrecir et le texte deborderait. */
.gallery-item[data-caption="left"] img,
.gallery-item[data-caption="right"] img { min-width: 0; }

/* Texte incruste : photo et texte partagent une meme cellule de grille,
   pour que le bandeau suive la largeur de la photo et non celle de la colonne. */
.gallery-item[data-caption="overlay"] {
  display: grid;
  grid-template-columns: max-content;
}
.gallery-item[data-caption="overlay"] img,
.gallery-item[data-caption="overlay"] .caption { grid-area: 1 / 1; min-width: 0; }
.gallery-item[data-caption="overlay"] .caption {
  align-self: end;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 26px 14px 12px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
}

/* --- Galeries -------------------------------------------------- */

.gallery { margin: 0; }
.gallery-item { margin: 0; }
.gallery-item img { cursor: zoom-in; }

/* Bande horizontale : la mise en page d'origine du site. */
.gallery--row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: var(--gutter);
  padding-bottom: 14px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.gallery--row .gallery-item { flex: 0 0 auto; }
.gallery--row .gallery-item img {
  height: min(calc(var(--row-height) * var(--zoom, 1)), var(--ih-max));
  width: auto;
  max-width: none;
}
.gallery--row .caption { max-width: calc(var(--iw) * var(--zoom, 1)); }

/* Pile verticale. */
.gallery--pile { display: flex; flex-direction: column; gap: 26px; }
.gallery--pile .gallery-item img { width: min(calc(var(--iw) * var(--zoom, 1)), 100%); }

/* Mosaique en quinconce : les rangees restent alignees en haut, et le
   quinconce vient de deux sources de respiration.
   1. Les photos n'occupent pas toute la largeur de leur case : `--scale`
      varie de l'une a l'autre et elles sont centrees dedans.
   2. Les photos n'ayant pas la meme hauteur, du blanc se cree sous les plus
      courtes de chaque rangee.
   C'est l'agencement du site pris en reference : beaucoup d'air, aucun bord
   commun, et une lecture qui reste de gauche a droite. */
.gallery--grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: 90px var(--gap);
  align-items: start;
  padding-right: var(--gutter);
}
.gallery--grid .gallery-item img { width: calc(100% * var(--zoom, 1)); height: auto; }
.gallery--grid .caption { max-width: none; }
.gallery--grid .gallery-item[data-caption="overlay"] { grid-template-columns: minmax(0, 1fr); }
.gallery--grid .gallery-item[data-caption="left"] .caption,
.gallery--grid .gallery-item[data-caption="right"] .caption { width: 40%; }

/* La photo et sa legende partagent la meme largeur, donc le meme bord gauche.
   Reserve aux legendes posees dessous (ou absentes) : les autres placements
   ont leur propre agencement, qu'il ne faut pas ecraser. */
.gallery--grid .gallery-item[data-caption="below"],
.gallery--grid .gallery-item[data-caption="hidden"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery--grid .gallery-item[data-caption="below"] > img,
.gallery--grid .gallery-item[data-caption="below"] > .caption,
.gallery--grid .gallery-item[data-caption="hidden"] > img {
  width: calc(var(--scale, 84%) * var(--zoom, 1));
}

/* Quatre largeurs qui se succedent : une periode de 4 contre 3 colonnes
   decale le motif d'une rangee a l'autre, sans jamais aligner deux photos
   de meme largeur cote a cote.
   `nth-of-type` et non `nth-child` : seules les photos (des <figure>)
   comptent, pour qu'un bloc de texte glisse dans la mosaique sans decaler
   le motif. */
.gallery--grid .gallery-item:nth-of-type(4n + 1) { --scale: 72%; }
.gallery--grid .gallery-item:nth-of-type(4n + 2) { --scale: 92%; }
.gallery--grid .gallery-item:nth-of-type(4n + 3) { --scale: 80%; }
.gallery--grid .gallery-item:nth-of-type(4n) { --scale: 88%; }

/* Mosaique droite : la meme grille que la mosaique en quinconce, mais sans
   respiration — chaque photo est cadree (recadree si besoin) au meme format
   (--cell-ratio, carre par defaut), pour que toutes les cases s'alignent
   strictement. */
.gallery--grid-strict {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
  padding-right: var(--gutter);
}
.gallery--grid-strict .gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--cell-ratio, 1 / 1);
  object-fit: cover;
}
.gallery--grid-strict .caption { max-width: none; }
.gallery--grid-strict .gallery-item[data-caption="overlay"] { grid-template-columns: minmax(0, 1fr); }
.gallery--grid-strict .gallery-item[data-caption="left"] .caption,
.gallery--grid-strict .gallery-item[data-caption="right"] .caption { width: 40%; }
.gallery--grid-strict .gallery-item.is-full > img { aspect-ratio: auto; }

/* Mosaique damier : la meme grille stricte, mais une case sur deux —
   `tools/lib/markup.mjs` (checkerItemsHtml) intercale les cases vides d'un
   damier, decalees d'une colonne a chaque rangee ; elles n'existent que dans
   le HTML genere, jamais dans le contenu enregistre. */
.gallery--grid-checker {
  display: grid;
  grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
  padding-right: var(--gutter);
}
.gallery--grid-checker .gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--cell-ratio, 1 / 1);
  object-fit: cover;
}
.gallery--grid-checker .caption { max-width: none; }
.gallery--grid-checker .gallery-item[data-caption="overlay"] { grid-template-columns: minmax(0, 1fr); }
.gallery--grid-checker .gallery-item[data-caption="left"] .caption,
.gallery--grid-checker .gallery-item[data-caption="right"] .caption { width: 40%; }
.gallery--grid-checker .gallery-spacer { visibility: hidden; }

/* Diaporama : les vues sont empilees dans une meme cellule de grille et se
   succedent en fondu enchaine. Sans JavaScript, la premiere reste visible :
   c'est le role de la regle ":first-child" ci-dessous, que la classe
   "is-running" neutralise des que le script prend la main. */
.gallery--slideshow {
  display: grid;
  justify-items: start;
}
.gallery--slideshow .gallery-item {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
.gallery--slideshow .gallery-item:first-child,
.gallery--slideshow .gallery-item.is-active { opacity: 1; pointer-events: auto; }
.gallery--slideshow.is-running .gallery-item:first-child:not(.is-active) { opacity: 0; pointer-events: none; }
.gallery--slideshow .gallery-item img {
  width: auto;
  max-width: calc(100vw - var(--gutter) * 2);
  height: min(calc(var(--row-height) * var(--zoom, 1)), var(--ih-max));
  object-fit: contain;
}

/* Sans cette regle, "display: flex" l'emporterait sur l'attribut hidden. */
.slideshow-controls[hidden] { display: none; }

.slideshow-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.slideshow-controls button {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 2px 6px;
  cursor: pointer;
}
.slideshow-controls button:hover { text-decoration: underline; }

/* --- Blocs de texte poses parmi les photos ---------------------- */

/* Un bloc de texte prend sa place dans la galerie : une colonne dans une
   bande horizontale, une case dans une mosaique, un paragraphe dans une
   pile. Sa largeur est reglee photo par photo depuis l'administration
   (--tw), comme la taille des images. */
.gallery-text {
  width: min(var(--tw, 360px), 100%);
  font-size: 17px;
  line-height: 1.65;
}
.gallery-text p { margin: 0 0 10px; }
.gallery-text p:empty { margin: 0; height: 12px; }
.gallery-text p:last-child { margin-bottom: 0; }
.gallery-text a { text-decoration: underline; }
.gallery-text strong { font-weight: 600; }

/* Dans une bande, le texte ne doit pas etirer la hauteur de la bande. */
.gallery--row .gallery-text {
  flex: 0 0 auto;
  align-self: flex-start;
  max-height: var(--row-height);
  overflow: auto;
}
.gallery--grid .gallery-text,
.gallery--grid-strict .gallery-text,
.gallery--grid-checker .gallery-text { width: 100%; }

/* Un diaporama empile ses vues dans une seule cellule de grille : un bloc
   de texte n'y a pas de place. tools/lib/markup.mjs les rejette donc sous
   le diaporama, dans ce conteneur. */
.text-blocks {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 30px;
  padding-right: var(--gutter);
}

/* --- Photo pleine largeur --------------------------------------- */

/* La photo sort des marges pour aller d'un bord a l'autre de la page.
   On raisonne en pourcentage du conteneur, jamais en 100vw : la largeur de
   la barre de defilement verticale serait sinon comptee en trop et la page
   gagnerait un defilement horizontal.
   Sur grand ecran, .content n'a de marge qu'a gauche (--gutter) ; la
   mosaique ajoute la sienne a droite, d'ou les deux largeurs. */
.gallery--pile .gallery-item.is-full {
  width: calc(100% + var(--gutter));
  margin-left: calc(var(--gutter) * -1);
}
.gallery--grid .gallery-item.is-full,
.gallery--grid-strict .gallery-item.is-full {
  grid-column: 1 / -1;
  width: calc(100% + var(--gutter) * 2);
  margin-left: calc(var(--gutter) * -1);
}
.gallery--pile .gallery-item.is-full > img,
.gallery--grid .gallery-item.is-full > img,
.gallery--grid-strict .gallery-item.is-full > img {
  width: 100%;
  max-width: none;
  height: auto;
}
/* La legende, elle, reste dans les marges. */
.gallery-item.is-full > .caption { max-width: none; padding: 0 var(--gutter); }
.gallery--grid .gallery-item.is-full[data-caption="below"] > .caption,
.gallery--grid-strict .gallery-item.is-full[data-caption="below"] > .caption { width: 100%; }

/* --- Page d'accueil : le diaporama est centre dans la page ------ */

[data-page="home"] .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--top) var(--gutter);
}
[data-page="home"] .gallery--slideshow { justify-items: center; }
[data-page="home"] .gallery--slideshow .gallery-item img {
  height: auto;
  max-height: calc(min(var(--row-height), var(--ih)) * var(--zoom, 1));
  max-width: calc(min(52vw, var(--iw)) * var(--zoom, 1));
}

/* --- Page biographie : un CV, pas un texte suivi ---------------- */

/* A droite de la photo : le contact, puis la presentation. Un peu plus grand
   que la legende ordinaire — ce n'est pas une legende mais un texte a lire. */
[data-page="biographie"] .gallery-item[data-caption="right"] .caption {
  font-size: 15px;
  line-height: 1.6;
}
/* Seule la premiere ligne du bloc est un intitule : le reste sont les
   coordonnees, puis la presentation, qui gardent le texte courant. */
[data-page="biographie"] .caption-title p:first-child {
  margin-bottom: 10px;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
[data-page="biographie"] .caption-title p:first-child strong { font-weight: 500; }
[data-page="biographie"] .caption-title p { margin-bottom: 2px; }
[data-page="biographie"] .caption-description { margin-top: 26px; }
[data-page="biographie"] .caption-description p { margin-bottom: 0.9em; }
[data-page="biographie"] .caption-description p:last-child { margin-bottom: 0; }

/* La description de cette page est une suite de listes courtes, pas de la
   prose : sur grand ecran elle tient en deux colonnes, ce qui occupe la
   largeur de la page et divise par deux sa hauteur. Un paragraphe de premier
   niveau, s'il en revient un, garde sa colonne de lecture unique en tete
   (column-span) plutot que d'etre coupe en deux. */
@media (min-width: 901px) {
  /* Une colonne de lecture a cote de la photo, plus large que la legende
     ordinaire : elle porte le contact puis la presentation. */
  [data-page="biographie"] .gallery-item[data-caption="right"] .caption {
    width: 420px;
    max-width: 420px;
  }
  /* Le bloc est plus court que la photo : centre sur sa hauteur, le vide se
     repartit au-dessus et en dessous plutot que de tomber entierement dessous. */
  [data-page="biographie"] .gallery-item[data-caption="right"] { align-items: center; }
  [data-page="biographie"] .entry-text {
    max-width: none;
    columns: 2;
    column-gap: 72px;
  }
  [data-page="biographie"] .entry-text > p {
    column-span: all;
    max-width: var(--text-width);
  }
  [data-page="biographie"] .entry-text h2 { break-after: avoid; break-inside: avoid; }
  /* Chaque intitule reste avec sa liste : une liste coupee reprendrait en
     tete de colonne sans son titre. */
  [data-page="biographie"] .entry-text ul { break-inside: avoid; }
  [data-page="biographie"] .entry-text li { break-inside: avoid; }
  /* Les deux colonnes doivent partir de la meme ligne. Le navigateur supprime
     la marge haute du premier element de la seconde colonne : on retire donc
     aussi celle du premier intitule, et l'air vient du dernier paragraphe. */
  [data-page="biographie"] .entry-text > p:last-of-type { margin-bottom: 2.6em; }
  [data-page="biographie"] .entry-text > p + h2,
  [data-page="biographie"] .entry-text > h2:first-child { margin-top: 0; }
}

/* --- Visionneuse plein ecran ----------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 24px;
  line-height: 1;
  padding: 14px;
  cursor: pointer;
  opacity: 0.6;
}
.lightbox-close { top: 8px; right: 12px; }
.lightbox-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-counter {
  position: absolute;
  bottom: 12px;
  left: 16px;
  color: var(--muted);
  opacity: 0.9;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.lightbox-caption {
  position: absolute;
  bottom: 12px;
  left: 70px;
  right: 70px;
  color: var(--muted);
  opacity: 0.9;
  font-size: 14px;
}

/* --- Mobile / tablette ----------------------------------------- */

@media (max-width: 900px) {
  :root { --gutter: 16px; --top: 16px; }

  .site-header {
    position: static;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px var(--gutter);
    border-bottom: 1px solid var(--rule);
  }
  /* Largeur fixe (et non un pourcentage) : sinon le logo reclame toute la
     ligne et repousse le bouton « Menu » en dessous. */
  .site-title img { width: 180px; }

  /* Sur une ligne : logo a gauche, puis l'icone et le bouton « Menu » a droite.
     C'est le titre qui absorbe l'espace libre, pour que la mise en place tienne
     que l'icone Instagram soit presente ou non. */
  .site-title { margin-right: auto; }
  .site-instagram { order: 1; }
  .nav-toggle { order: 2; }
  .nav { order: 3; }
  .site-instagram svg { width: 25px; height: 25px; }

  .nav-toggle {
    display: block;
    background: none;
    border: 0;
    padding: 6px;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }

  .nav { display: none; flex-basis: 100%; margin: 6px 0 0; }
  .site-header.is-open .nav { display: block; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { margin-bottom: 12px; }
  .nav-item > a, .nav-section-label { font-size: 23px; }

  /* Plus de menu deroulant : les sous-menus sont deplies. */
  .nav-sub {
    position: static;
    min-width: 0;
    padding: 4px 0 0;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-sub::before { content: none; }
  .nav-subitem > a { padding: 4px 0 4px 14px; font-size: 17px; }

  .site-footer { padding: 20px var(--gutter) 24px; }

  .content { padding: var(--top) var(--gutter) 40px; }

  /* Toutes les galeries s'empilent verticalement sur petit ecran. */
  .gallery--row,
  .gallery--pile,
  .gallery--grid,
  .gallery--grid-strict,
  .gallery--grid-checker,
  .gallery--slideshow,
  [data-page="home"] .gallery--slideshow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    overflow: visible;
    padding-right: 0;
  }
  /* Sur une colonne, les photos reprennent toute la largeur. Il faut viser
     les memes proprietes que sur grand ecran : une simple remise a zero de
     --scale perdrait contre la specificite des regles :nth-child. */
  .gallery--grid .gallery-item[data-caption="below"] > img,
  .gallery--grid .gallery-item[data-caption="below"] > .caption,
  .gallery--grid .gallery-item[data-caption="hidden"] > img { width: 100%; }
  /* Le damier redevient une simple pile : les cases vides n'ont plus de role. */
  .gallery--grid-checker .gallery-spacer { display: none; }
  [data-page="home"] .content {
    display: block;
    padding: var(--top) var(--gutter) 40px;
  }
  .gallery--row .gallery-item img,
  .gallery--pile .gallery-item img,
  .gallery--grid .gallery-item img,
  .gallery--grid-strict .gallery-item img,
  .gallery--grid-checker .gallery-item img,
  .gallery--slideshow .gallery-item img,
  [data-page="home"] .gallery--slideshow .gallery-item img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    aspect-ratio: auto;
    cursor: default;
  }
  /* Le diaporama redevient une simple pile : toutes les vues sont visibles. */
  .gallery--slideshow .gallery-item,
  .gallery--slideshow.is-running .gallery-item:first-child:not(.is-active) {
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  .slideshow-controls { display: none !important; }

  .gallery-item[data-caption="left"],
  .gallery-item[data-caption="right"] { flex-direction: column; align-items: stretch; }
  .gallery-item[data-caption="left"] .caption,
  .gallery-item[data-caption="right"] .caption,
  .gallery--grid .gallery-item[data-caption="left"] .caption,
  .gallery--grid .gallery-item[data-caption="right"] .caption,
  .gallery--grid-strict .gallery-item[data-caption="left"] .caption,
  .gallery--grid-strict .gallery-item[data-caption="right"] .caption,
  .gallery--grid-checker .gallery-item[data-caption="left"] .caption,
  .gallery--grid-checker .gallery-item[data-caption="right"] .caption { width: auto; max-width: none; margin-top: 8px; }
  .gallery-item[data-caption="overlay"] { grid-template-columns: minmax(0, 1fr); }

  /* Pleine largeur : ici .content a une marge des deux cotes. */
  .gallery--pile .gallery-item.is-full,
  .gallery--grid .gallery-item.is-full,
  .gallery--grid-strict .gallery-item.is-full {
    width: calc(100% + var(--gutter) * 2);
    margin-left: calc(var(--gutter) * -1);
  }

  /* Un bloc de texte reprend toute la largeur, comme les photos. */
  .gallery-text,
  .gallery--row .gallery-text { width: 100%; max-height: none; overflow: visible; }
  .text-blocks { padding-right: 0; }

  .entry-text {
    max-width: none;
    margin-top: 46px;
    padding-right: 0;
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery--slideshow .gallery-item { transition: none; }
  .nav-sub { transition: none; }
}

@media print {
  .site-header, .slideshow-controls { display: none; }
  .content { padding: 0; }
}