/* pierremenoux.ch — le portfolio public. L'image commande.
 *
 * Les tokens, la remise à zéro, le socle typographique et la grille ne vivent plus
 * ici : ils sont dans canon.css, que cette feuille SUIT au lieu de le recopier.
 * Voir l'en-tête de ce fichier — le module de 24, l'échelle de six crans et
 * l'écart de couleur unique y sont expliqués une fois pour toutes.
 *
 * Historique utile : jusqu'au 16.08.2026 le titrage était en TeX Gyre Adventor —
 * un clone d'ITC Avant Garde Gothic, géométrique new-yorkais de 1970, étranger à
 * l'école suisse que ce fichier revendiquait. Le retirer a supprimé 144 Ko
 * téléchargés à chaque visite.
 */

/* ---- En-tête / pied : la grille ouvre et ferme la page ---- */
header.site {
  padding: calc(var(--module) * 2) 0 var(--module);
  border-bottom: 1px solid var(--filet);
  align-items: baseline;
}
header.site .nom {
  font-weight: 700; font-size: var(--t-corps); letter-spacing: 0.02em;
}
header.site .role {
  text-align: right; color: var(--meta); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
}
footer.site {
  padding: calc(var(--module) * 2) 0 var(--module);
  border-top: 1px solid var(--filet);
  margin-top: calc(var(--module) * 4);
  color: var(--meta); font-size: var(--t-micro);
}
footer.site .droits { text-align: right; }
/* Les réseaux occupent le champ central que le pied laissait vide. Ils prennent la
   voix grise du site — micro, capitales, très espacée : ce sont des renvois, pas
   des appels. */
footer.site .reseaux { display: flex; gap: var(--gouttiere); }
footer.site .reseau {
  display: inline-flex; align-items: center; gap: 0.5em;
  letter-spacing: 0.14em; text-transform: uppercase;
}
footer.site .reseau:hover { color: var(--texte); }
/* Le glyphe au trait, calé sur la hauteur du corps micro, dans la couleur du lien :
   il grise et s'éclaire avec le mot. */
footer.site .glyphe {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
footer.site .glyphe .plein { fill: currentColor; stroke: none; }
main { min-height: 60vh; }

/* ---- La voix grise : méta tabulaire, colonnes 1–3 ---- */
.meta {
  font-size: var(--t-micro); color: var(--meta); letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.meta .titre, .meta .chapitre-titre {
  font-weight: 700; font-size: var(--t-corps);
  color: var(--texte); letter-spacing: 0.08em; text-transform: uppercase;
}
.meta .position { margin-top: 2px; }
.meta .date { margin-top: 2px; }
.meta .legende { margin-top: var(--module); max-width: 20em; }

/* ---- Accueil : les séries ---- */
.accueil {
  padding: calc(var(--module) * 2) 0 0;
  display: grid; gap: calc(var(--module) * 3);
}
.carte {
  align-items: start;
  /* Le filet ouvre chaque palier. C'est la seule marque de structure de la page,
     et elle dit quelque chose de vrai : ici commence une autre série. */
  border-top: 1px solid var(--filet);
  padding-top: var(--module);
}
.carte:first-child { border-top: 0; padding-top: 0; }
/* La méta s'aligne sur le haut de l'image, pas 2 px plus bas : les deux colonnes
   partent de la même ligne de base, sinon la grille ne tient qu'à l'œil. */
.carte .meta { padding-top: 0; }
/* LA HAUTEUR COMMUNE. Chaque orientation garde son cadrage naturel, et sa largeur
   est calculee pour que la hauteur tombe identique : n colonnes cadrees au ratio r
   sont hautes de n/r, et ce quotient vaut 6 dans les trois cas (pmx_palier_cols()).
   Sans ces trois lignes, un portrait etait haut de moitie en plus qu'un paysage et
   l'accueil n'avait aucun rythme — c'est pourtant la premiere page du site. */
.carte figure { background: var(--champ); overflow: hidden; }
.carte figure.c4-7  { aspect-ratio: 2 / 3; }   /* 4 col : le 24x36 debout   */
.carte figure.c4-9  { aspect-ratio: 1 / 1; }   /* 6 col : le carre          */
.carte figure.c4-12 { aspect-ratio: 3 / 2; }   /* 9 col : le 24x36 couche   */
/* La carte du Journal garde les sept colonnes que sa spec lui donne (§ 4) : c'est
   ce qui la rend discrete. Son ratio est donc contraint — 7/6 est la seule valeur
   qui la mette a la hauteur des autres. */
.carte figure.c4-10 { aspect-ratio: 7 / 6; }
/* `object-fit: cover` remplace le simple `width: 100%` d'avant : sans lui, une
   variante plus étroite que sa colonne s'affichait à sa taille naturelle et
   laissait voir l'aplat de fond à droite de la photographie. Il remplit désormais
   le cadre dans les deux dimensions, et absorbe l'écart entre le ratio du fichier
   et celui du cadre — c'est ce qui permet de figer la hauteur sans déformer. */
.carte figure img { width: 100%; height: 100%; object-fit: cover; }
.vide { padding: calc(var(--module) * 4) 0; color: var(--meta); }
.contact { padding: calc(var(--module) * 2) 0 0; color: var(--meta); }

/* ---- Série : tête et index ---- */
.serie-tete {
  padding: calc(var(--module) * 3) 0 calc(var(--module) * 2);
  border-bottom: 1px solid var(--filet);
}
.serie-tete h1 {
  font-weight: 700; font-size: var(--t-fort);
  letter-spacing: -0.015em; line-height: calc(var(--module) * 1.5);
}
.serie-tete .desc {
  grid-column: 5 / 10; color: var(--meta); max-width: 38em;
}
.index-serie { padding: var(--module) 0; border-bottom: 1px solid var(--filet); }
.index-serie .bande {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.index-serie .bande::-webkit-scrollbar { display: none; }
.index-serie a { flex: 0 0 auto; }
.index-serie img {
  height: calc(var(--module) * 2.5); width: auto;
  opacity: 0.7; transition: opacity 0.15s;
}
.index-serie a:hover img, .index-serie a.actif img { opacity: 1; }

/* ---- Série : la séquence (parti A) ---- */
.sequence {
  display: grid; gap: calc(var(--module) * 5);
  padding: calc(var(--module) * 3) 0;
}
.palier { align-items: start; }
.palier aside { position: sticky; top: var(--module); align-self: start; }
.palier figure { background: var(--champ); }
.palier figure img { width: 100%; }

/* ---- Le hero : une image porte la galerie ---- */
.hero { padding: calc(var(--module) * 2) 0 0; }
.hero figure {
  grid-column: 1 / 13; background: var(--champ);
  aspect-ratio: 16 / 7; overflow: hidden;
}
.hero figure img { width: 100%; height: 100%; object-fit: cover; }
.hero .titraille { margin-top: var(--module); align-items: baseline; }
.hero h1 {
  grid-column: 1 / 8; font-weight: 700; font-size: var(--t-fort);
  letter-spacing: -0.015em; line-height: calc(var(--module) * 1.5);
}
.hero .compte {
  grid-column: 8 / 13; text-align: right;
  font-size: var(--t-micro); color: var(--meta);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.hero .desc {
  grid-column: 1 / 7; margin-top: var(--module);
  color: var(--meta); max-width: 34em;
}

/* ---- Les highlights : une image par sous-rubrique ---- */
.highlights {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: calc(var(--module) * 2);
  padding: calc(var(--module) * 2) 0;
}
.highlights .rubrique { grid-column: span 4; }
.highlights figure {
  aspect-ratio: 3 / 2; background: var(--champ);
  position: relative; overflow: hidden;
  outline: 2px solid transparent; outline-offset: -2px;
  transition: outline-color 0.15s;
}
.highlights figure img { width: 100%; height: 100%; object-fit: cover; }
.highlights a:hover figure, .highlights a:focus-visible figure {
  outline-color: var(--signal);
}
.highlights .rang {
  position: absolute; top: 8px; left: 8px;
  font-size: var(--t-micro); font-weight: 700; color: var(--meta);
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}
.highlights .ligne {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--filet);
  display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--gouttiere);
}
.highlights h2 { font-size: var(--t-corps); font-weight: 700; letter-spacing: 0.01em; }
.highlights .n {
  font-size: var(--t-micro); color: var(--meta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- Mobile : la grille se replie, la méta passe sous l'image ---- */
/* 551 px et non 767 : le seuil doit tomber sur un PALIER du raster (canon.css),
   sinon la méta passerait sous l'image alors que la grille tient encore six
   colonnes — deux mises en page se croiseraient entre 552 et 767. */
@media (max-width: 551px) {
  header.site .role { text-align: left; margin-top: 2px; }
  .serie-tete .desc { grid-column: 1 / 13; margin-top: 8px; }
  .carte .meta { order: 2; margin-top: 8px; padding-top: 0; }
  .palier aside { position: static; order: 2; margin-top: 8px; }
  .accueil { gap: calc(var(--module) * 2.5); }
  .sequence { gap: calc(var(--module) * 2.5); }
  footer.site .droits { text-align: left; }
  .hero figure { aspect-ratio: 4 / 3; }
  .hero h1, .hero .compte, .hero .desc { grid-column: 1 / 13; }
  .hero .compte { text-align: left; margin-top: 4px; }
  .highlights .rubrique { grid-column: span 6; }
}
@media (max-width: 480px) {
  .highlights .rubrique { grid-column: span 12; }
}

/* ---- Le diaporama d'une série (06.09.2026) ------------------------------------------
   Un clic sur une image de la séquence ou de la planche l'ouvre ici : fond noir, image
   plein cadre, lecture en boucle. Tout est construit par pmx.js ; sans script, rien de
   ceci n'existe et les images restent des images. Même noir que le diaporama de la
   livraison : projeté, le blanc éblouit et écrase les valeurs. */
.sequence .palier figure img, .contact figure img { cursor: zoom-in; }
.en-diaporama { overflow: hidden; }
.diaporama {
  position: fixed; inset: 0; z-index: 50; background: #000; color: #fff;
  display: grid; grid-template-columns: 1fr; place-items: center;
}
.diaporama .cadre { width: 100vw; height: 100vh; display: grid; place-items: center; }
.diaporama img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; display: block; cursor: default; }
.diaporama .fermer, .diaporama .fleche, .diaporama .compteur {
  position: absolute; z-index: 1; color: #fff; background: none; border: 0; cursor: pointer;
  font: inherit; opacity: 0; transition: opacity 0.2s;
}
.diaporama.commandes-visibles .fermer, .diaporama.commandes-visibles .fleche,
.diaporama.commandes-visibles .compteur, .diaporama.en-pause .compteur { opacity: 1; }
.diaporama .fermer { top: 12px; right: 16px; font-size: var(--t-fort); line-height: 1; padding: 4px 8px; }
.diaporama .fleche { top: 50%; transform: translateY(-50%); font-size: var(--t-fort); padding: 24px 16px; }
.diaporama .fleche.prec { left: 8px; }
.diaporama .fleche.suiv { right: 8px; }
.diaporama .compteur {
  left: 16px; bottom: 12px; cursor: default;
  font-family: var(--chiffre); font-size: var(--t-micro); letter-spacing: 0.08em; color: rgba(255,255,255,0.7);
}
.diaporama.en-pause .compteur::after { content: '  ·  pause'; }
@media (max-width: 791px) {
  .diaporama .fleche { display: none; }   /* au doigt : le balayage */
}