/* Valérie Texier, photographe — feuille unique.

   PARTI PRIS : la page est noire et ne contient rien d'autre que les
   photographies. Pas d'ombre, pas d'angle arrondi, pas d'animation au-delà
   d'un fondu. Tout ce qui se remarque en dehors d'une image est du bruit.

   AUCUNE POLICE N'EST CHARGÉE DE L'EXTÉRIEUR. Les piles ci-dessous prennent
   ce que la machine a de mieux. Un site d'auteur doit s'afficher à
   l'identique dans dix ans, sans dépendre d'un service tiers. */

:root {
  --fond: #0e0e0e;
  --encre: #e9e7e3;
  --discret: #8c8884;
  --filet: #262626;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --marge: clamp(1.25rem, 4vw, 3.5rem);
  --respire: clamp(3rem, 9vw, 7rem);
}

/* Variante claire : une ligne à décommenter, rien d'autre à toucher. */
/* :root { --fond:#faf9f7; --encre:#17150f; --discret:#6e6a64; --filet:#e3e0da; } */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

.invisible {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: var(--fond); padding: .75rem 1.25rem;
}
.evitement:focus { left: 0; }

/* ------------------------------------------------------------- en-tête */
.entete {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  padding: var(--marge) var(--marge) 0;
}

.nom {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  letter-spacing: .02em;
}

.menu { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.menu a {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--discret);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.menu a:hover, .menu a:focus-visible { color: var(--encre); }
.menu a.actif { color: var(--encre); border-bottom-color: var(--filet); }

/* --------------------------------- accueil : la grille EST le sommaire

   Huit photographies en grille, une par série. C'est le menu du site : il
   n'y en a pas d'autre. Un menu de texte à huit entrées occupait toute la
   largeur de l'écran pour dire ce que ces images disent mieux.

   Deux colonnes sur grand écran, pas trois : à trois, chaque image tombe
   sous 450 px et une photographie cesse de se regarder pour devenir une
   icône. */
.planches {
  list-style: none;
  margin: var(--respire) 0 0;
  padding: 0 var(--marge);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
}

.planche a { display: block; }

/* Toutes les couvertures au même format : c'est la régularité de la grille
   qui la fait lire comme un sommaire. Le recadrage ne concerne que la
   couverture — jamais les tirages de la galerie. */
.cadre {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.cadre img { height: 100%; object-fit: cover; }

/* Une série privée dont aucune image n'a été autorisée à paraître : le
   cadre reste, vide, pour que la grille garde son aplomb. Afficher une
   image protégée donnerait ici une vignette cassée — voir
   COUVERTURE_PUBLIQUE dans faire_site.py. */
.cadre-vide {
  display: grid; place-items: center;
  border: 1px solid var(--filet);
  background: #141414;
}
.cadre-vide span {
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--discret);
}

/* L'image s'éclaircit à l'approche : le seul mouvement du site. */
.planche img {
  filter: brightness(.84);
  transition: filter .6s ease;
}
.planche a:hover img,
.planche a:focus-visible img { filter: brightness(1); }

/* Le titre passe SOUS l'image, sur le fond noir. Posé dessus, il fallait un
   dégradé pour rester lisible quelle que soit la photographie — un voile
   sur l'image pour sauver du texte. Dessous, le contraste est acquis et la
   photographie reste intacte. */
.legende {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem;
  padding-top: .85rem;
}

.titre {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.2;
  color: var(--encre);
}

.compte {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--discret);
}

/* ------------------------------------------------------- page de série */
.titre-serie {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  line-height: 1.1;
  margin: var(--respire) var(--marge) clamp(1.5rem, 4vw, 3rem);
}

.grille {
  list-style: none; margin: 0; padding: 0 var(--marge);
  display: grid;
  gap: clamp(.75rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  align-items: start;
}

.grille button {
  display: block; width: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
/* Dans une galerie, rien n'est recadré : une photographie très verticale
   est seulement ramenée à la hauteur de l'écran et centrée dans sa
   colonne. Elle reste entière. */
.grille img {
  max-height: 78vh; width: auto; max-width: 100%; margin-inline: auto;
  filter: brightness(.88); transition: filter .5s ease;
}
.grille button:hover img, .grille button:focus-visible img { filter: brightness(1); }
.grille button:focus-visible { outline: 1px solid var(--discret); outline-offset: 4px; }

/* La mention de tirage. DISCRÈTE ET SOUS L'IMAGE : elle renseigne un
   collectionneur sans transformer la galerie en boutique. Même graisse et
   même espacement que le compte de l'accueil, pour qu'elle se lise comme une
   indication de l'auteure et non comme une étiquette de prix. */
.tirage {
  margin: .55rem 0 0;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--discret);
}

.loupe .tirage-loupe { color: var(--discret); }

/* -------------------------------------------------------- visionneuse */
.loupe {
  position: fixed; inset: 0; z-index: 50;
  display: none; place-items: center;
  background: rgba(8, 8, 8, .97);
  padding: clamp(1rem, 3vw, 3rem);
}
.loupe[open], .loupe.ouverte { display: grid; }
.loupe img { max-width: 100%; max-height: 86vh; width: auto; object-fit: contain; }

.loupe .barre {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: clamp(.75rem, 2vw, 1.5rem) var(--marge);
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--discret);
}
.loupe button {
  background: none; border: 0; color: var(--discret); cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: .5rem;
}
.loupe button:hover, .loupe button:focus-visible { color: var(--encre); }

/* ------------------------------------------------- pages de texte

   Une colonne étroite, et c'est la seule règle qui compte : au-delà d'une
   soixantaine de signes par ligne, l'œil perd le début de la ligne suivante.
   Sur fond sombre, le texte long fatigue plus vite — d'où la taille un peu
   relevée et l'interligne généreux. */
.prose {
  max-width: 38rem;
  margin: var(--respire) var(--marge) 0;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.prose h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.prose h2, .prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 2.25rem 0 .5rem;
}
.prose p { margin: 0 0 1.15rem; }
.prose strong { font-weight: 600; }
/* UN LIEN DOIT SE VOIR SANS DÉPENDRE DE LA COULEUR. Le filet des séparateurs
   (#262626) est presque invisible sur le fond noir : employé ici, il
   rendait les liens indiscernables du texte courant. Le soulignement est
   donc franc, et il s'éclaircit au survol. */
.prose a {
  border-bottom: 1px solid var(--discret);
  transition: border-color .25s, color .25s;
}
.prose a:hover, .prose a:focus-visible {
  border-bottom-color: var(--encre);
}

/* -------------------------------------------------------------- pied */
.pied {
  margin: var(--respire) 0 0;
  padding: clamp(2rem, 5vw, 3.5rem) var(--marge) clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--filet);
  font-size: .8125rem;
  color: var(--discret);
}
.pied p { margin: 0 0 .35rem; }
.pied a { border-bottom: 1px solid var(--filet); }
.pied a:hover { color: var(--encre); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}