/* =========================================================
   clavelier.art — feuille unique, partagée par toutes les pages.
   Design : voir conception/WEB_clavelier.art/design.md
   ========================================================= */

/* --- Polices auto-hébergées (Montserrat, OFL 1.1) -------- */
@font-face {
  font-family: "Montserrat";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("fonts/montserrat-thin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/montserrat-light.woff2") format("woff2");
}

/* --- Variables ------------------------------------------- */
:root {
  --noir: #000;
  --blanc: #fff;
  --gris: #888;
  --police: "Montserrat", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique : le corps sert de référence au reste. */
  --corps: clamp(1.1rem, 2.4vw, 1.6rem);

  /* La signature ne se compacte pas : sa hauteur est donc calculable ici,
     ce qui permet au titre de se bloquer dessous en CSS pur, sans JavaScript.
     3.54 est le rapport largeur/hauteur du fichier signature.svg. */
  --signature-largeur: clamp(180px, 32vw, 320px);
  --entete-haut: clamp(1.5rem, 4vw, 3rem);
  --entete-bas: clamp(1rem, 2.5vw, 1.5rem);
  --entete-hauteur: calc(
    var(--entete-haut) + (var(--signature-largeur) / 3.54) + var(--entete-bas)
  );
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police);
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gris); }

/* --- Accessibilité --------------------------------------- */
/* Sans cette règle, un visiteur au clavier ne sait plus où il est :
   le site supprime les soulignements de liens partout. */
:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 3px;
}

/* Respecte le réglage système « réduire les animations ». Le calage des
   œuvres est conservé : il structure la lecture, il n'anime rien. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Lien d'évitement : hors de l'écran tant qu'il n'a pas le focus, donc jamais
   vu à la souris, et premier arrêt au clavier. */
.evitement {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  padding: 0.8rem 1.2rem;
  background: var(--noir);
  color: var(--blanc);
  transform: translateY(-100%);
}

.evitement:focus { transform: none; }

/* --- En-tête : la signature ------------------------------ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  padding: var(--entete-haut) 1rem var(--entete-bas);
  text-align: center;
  background: var(--noir);
}

header .logo { display: inline-block; }

header .logo img {
  width: var(--signature-largeur);
  height: auto;
  /* Lisible même quand la signature flotte au-dessus d'une œuvre claire. */
  filter: drop-shadow(0 0 8px rgb(0 0 0 / 0.7));
}

/* Le contenu démarre sous la signature, qui est hors flux. */
main { padding-top: var(--entete-hauteur); }

/* --- Pavé de navigation ---------------------------------- */
.pave {
  position: fixed;
  top: clamp(1rem, 2.5vw, 1.6rem);
  right: clamp(1rem, 2.5vw, 1.6rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pave > a,
.pave > button {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris);
  font-family: var(--police);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 0 6px rgb(0 0 0 / 0.7);
}

.pave > a:hover,
.pave > button:hover { color: var(--blanc); }

.pave .menu-btn { font-size: 2rem; }

.pave svg {
  width: 1.7rem;
  height: 1.7rem;
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.7));
}

.pave .bas svg { transform: rotate(180deg); }

/* Menu déroulant, masqué par l'attribut `hidden` que pilote menu.js. */
.pave-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 12rem;
  margin: 0;
  padding: 1.1rem 1.3rem;
  list-style: none;
  background: rgb(0 0 0 / 0.85);
  text-align: right;
}

.pave-menu[hidden] { display: none; }
.pave-menu li + li { margin-top: 0.8rem; }

.pave-menu a {
  color: var(--blanc);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.pave-menu a:hover { color: var(--gris); }

/* --- Page texte ------------------------------------------ */
.page {
  /* Colonne calée sur la « mesure » typographique : ~60 caractères par ligne.
     Le ch se base sur cette taille de police, celle du corps. */
  font-size: var(--corps);
  max-width: 60ch;
  margin: 0 auto;
  /* Le titre démarre au premier quart de l'écran sous la signature : c'est cette
     réserve qui lui donne une distance à parcourir avant de se bloquer. Sans
     elle, il serait à sa position d'arrivée dès le chargement, donc immobile. */
  padding: calc((100dvh - var(--entete-hauteur)) / 4) 1.5rem clamp(2rem, 5vw, 3rem);
  text-align: center;
}

/* Le titre remonte avec le texte, puis se bloque juste sous la signature. */
.page .tete {
  position: sticky;
  top: var(--entete-hauteur);
  z-index: 10;
  padding: 0.5rem 0 clamp(1.2rem, 3vw, 1.8rem);
  background: var(--noir);
}

/* Le texte s'efface en douceur en glissant derrière le titre bloqué. */
.page .tete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--noir), transparent);
  pointer-events: none;
}

.page h1 {
  margin: 0 0 0.4rem;
  font-weight: 100;
  font-size: clamp(2.2rem, 6vw, 3.75rem);
  letter-spacing: 0.07em;
}

.page .tete h1.mail {
  font-size: clamp(1.8rem, 6vw, 4rem);
  overflow-wrap: break-word;
}

.page .sous-titre {
  margin: 0;
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  color: var(--gris);
}

.page .texte {
  padding-top: clamp(2rem, 6vw, 4rem);
  text-align: justify;
  hyphens: auto;
}

.page .texte p {
  margin: 0 0 2rem;
  font-size: var(--corps);
  line-height: 1.6;
}

/* Le site ne charge que Thin 100 et Light 300 : il n'existe pas de gras.
   Un titre de section se distingue donc par la taille et l'espacement des
   lettres, jamais par la graisse, qui serait un faux gras fabriqué par le
   navigateur et visible sur du Montserrat fin. */
.page .texte h2 {
  margin: clamp(2.5rem, 7vw, 4rem) 0 clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 100;
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  letter-spacing: 0.06em;
  text-align: left;
}

/* Une liste justifiée étire ses lignes courtes n'importe comment. */
.page .texte ul {
  margin: 0 0 2rem;
  padding-left: 1.2rem;
  text-align: left;
}

.page .texte li {
  margin-bottom: 0.8rem;
  font-size: var(--corps);
  line-height: 1.6;
}

.page .texte li::marker { color: var(--gris); }

/* --- Page contact : l'adresse seule, centrée dans l'écran --- */
/* Pas de signature, rien à faire défiler : la page ne montre qu'une chose.
   S'active par `classe = "contact"` dans le front matter. */
body.contact main {
  min-height: 100dvh;
  padding-top: 0;
  /* Réserve en bas : elle remonte l'adresse au centre optique, un peu au-dessus
     du centre géométrique, et dégage la ligne de bas de page. */
  padding-bottom: clamp(2rem, 9vh, 7rem);
  display: grid;
  place-items: center;
}

body.contact .page {
  max-width: none;
  margin: 0;
  padding: clamp(1.5rem, 5vh, 3rem);
}

/* Rien ne défile ici : le titre n'a plus à se bloquer ni à fondre le texte. */
body.contact .page .tete {
  position: static;
  padding: 0;
}

body.contact .page .tete::after { content: none; }
body.contact .page .texte { padding: 0; }

/* La note est ancrée au bas de l'écran, hors du centrage de l'adresse. */
body.contact .cle {
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(1.2rem, 4vh, 2.5rem);
  margin: 0;
  padding: 0 1.5rem;
  text-align: center;
  color: var(--gris);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

body.contact .cle a { border-bottom: 1px solid rgb(255 255 255 / 0.3); }
body.contact .cle a:hover { border-bottom-color: var(--gris); }

/* Un point sépare le lien de l'empreinte, sans ponctuation lourde. */
body.contact .cle .empreinte::before {
  content: "·";
  margin: 0 0.5em;
}

/* --- Portrait dans le corps d'une page ------------------- */
.portrait {
  margin: 0 0 clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}

.portrait img {
  width: min(100%, 33rem);
  height: auto;
  margin: 0 auto;
}

.portrait figcaption {
  margin-top: 0.8rem;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--gris);
}

/* --- Clôture d'un chapitre + accès à la galerie ---------- */
.fin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  padding: 0 1.5rem clamp(5rem, 14vw, 9rem);
  text-align: center;
}

.fin .phrase {
  max-width: 45ch;
  margin: 0;
  font-size: var(--corps);
  line-height: 1.6;
  color: var(--gris);
}

/* Étiquette encadrée : même police que le reste, lettres espacées. */
.bouton-galerie {
  display: inline-block;
  padding: 0.75rem 2.2rem;
  border: 1px solid var(--blanc);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
}

.bouton-galerie:hover { border-color: var(--gris); }

/* --- Collection : l'index des séries --------------------- */
/* Deux chapitres par ligne. `auto-fit` avec une largeur plancher fait retomber
   la liste sur une seule colonne quand l'écran ne peut plus en tenir deux. */
.series {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(5rem, 14vw, 9rem);
  list-style: none;
}

.serie {
  display: grid;
  grid-template-columns: clamp(5rem, 20vw, 8rem) 1fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(1rem, 3vw, 1.8rem);
  align-items: center;
}

/* La vignette occupe les trois lignes de texte, à gauche. */
.serie .vignette {
  grid-row: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.serie .titre {
  align-self: end;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.serie .sous-titre { color: var(--gris); }

.serie .date {
  align-self: start;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--gris);
}

/* --- Galerie : une œuvre par écran ----------------------- */
/* Le calage vertical n'est armé que sur les pages de galerie. */
html:has(body.galerie) { scroll-snap-type: y mandatory; }

/* En galerie, la signature passe en bas : le haut de chaque œuvre est libéré. */
body.galerie header {
  top: auto;
  bottom: 0;
  padding: var(--entete-bas) 1rem var(--entete-bas);
  background: none;
}

body.galerie main { padding-top: 0; }

.oeuvre {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  /* Réserve en bas la place de la signature, en proportion de l'écran,
     comme l'œuvre elle-même : leur écart reste constant à toute taille. */
  padding: 2dvh 1rem 14dvh;
}

/* Boîte à la taille exacte de l'image : repère de position pour la réf. */
.cadre {
  position: relative;
  display: inline-flex;
  margin: 0;
  max-height: 100%;
}

.oeuvre img {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 84dvh;
  /* L'œuvre entière sur le noir, jamais recadrée. */
  object-fit: contain;
}

/* Réf. en vertical, à l'extérieur du bord gauche, alignée en bas. */
.cadre figcaption {
  position: absolute;
  right: 100%;
  bottom: 0;
  margin-right: 0.4rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--gris);
}