/* ============================================================
   Feuille de style unique — site personnel de Jérôme Martin (Hugo)
   Regroupe toutes les règles du site (accueil, à propos, ce qui
   m'anime, billets), y compris ce qui vivait auparavant dans des
   <style> locaux à chaque page HTML statique. Fichier servi tel quel
   depuis static/style.css ; les polices sont dans static/fonts/,
   copie autonome, sans dépendance externe au dépôt.
   ============================================================ */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/bodoni-moda-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/bodoni-moda-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
}

/* --- système de couleurs : un rôle par teinte, pas une palette libre.
   Union des variables utilisées par une ou plusieurs pages ; une page qui
   n'en utilise pas certaines les ignore simplement. --vert reste déclarée
   sans usage réel, affectation à venir. --- */
:root {
  --papier: #ffffff;         /* fond, sans exception */
  --encre: #0f1c33;          /* texte courant, sans exception */
  --bleu-crepuscule: #2b3a5c; /* fond sombre de .entete (en-tête compact, toutes pages sauf accueil et billets) */
  --ambre: #d97b2f;          /* signature uniquement (logo, monogramme). Ne pas réutiliser ailleurs. */
  --ambre-texte: #b16120;    /* variante contrastée de l'ambre, pour un texte de quelques mots (liens) ; lien actif de la nav */
  --ambre-vif: #e8a33d;      /* survol/focus de la nav (distinct de l'actif, en --ambre-texte) */
  --vert: #6a8f42;           /* réservée, sans usage réel à ce jour (décision du 2026-08-23 de la conserver) */
  --terre: #4a3b2a;          /* logo Horizon en miniature */
  --gris: #5c6b7a;           /* libellés secondaires, légendes */
  --photographie: #4a3b2a;   /* couleur du sujet Photographie : trait vertical et puce sur les billets et sur la carte de ce-qui-m-anime.html */
  --architecture: #5c6b7a;   /* couleur du sujet Architecture : trait vertical et puce sur les billets et sur la carte de ce-qui-m-anime.html */
  --trait: rgba(15,28,51,0.14);
  --texte-secondaire: rgba(15,28,51,0.75);
  --texte-tertiaire: rgba(15,28,51,0.55);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.6;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* --- mouvement : une entrée en fondu légère et séquencée à l'ouverture de
   page, posée sur les blocs qui suivent (hero, en-tête, sections). Un seul
   jeu de classes réutilisable, pas une animation par page. Neutralisée
   d'un bloc si l'utilisateur préfère moins de mouvement. --- */
@keyframes entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.entree {
  opacity: 0;
  animation: entree 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.entree-1 { animation-delay: 0.05s; }
.entree-2 { animation-delay: 0.15s; }
.entree-3 { animation-delay: 0.28s; }
.entree-4 { animation-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- en-tête : bandeau compact, logo + nav sur une seule ligne, responsive
   JM / nom complet à 600px (JM réservé aux très petites largeurs). Utilisé
   par toutes les pages sauf l'accueil, qui garde son hero pleine largeur
   d'origine (règles propres à site/index.html). --- */
.entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  padding: 0.75rem 2rem;
  background: var(--bleu-crepuscule);
  color: var(--papier);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* .dev sur <body> (site.Params.logoVillage) : le logo à 180×61 (au lieu de
   64×22) épaissit la bande d'en-tête par simple effet de sa hauteur ; on
   resserre le padding vertical pour compenser, sans toucher au logo ni au
   texte. */
.dev .entete { padding-top: 0.35rem; padding-bottom: 0.35rem; }
/* Ligne d'horizon détachée de logo.html (voir son commentaire) :
   .horizon-ligne va bord à bord de la page en position: absolute, en
   ignorant le padding horizontal de .entete/.bandeau (tous deux position:
   sticky, qui sert aussi de conteneur aux éléments en position: absolute,
   .entete plus haut, .bandeau plus bas).
   Sa position verticale et l'épaisseur du trait reprennent la géométrie
   exacte de l'icône plutôt qu'une valeur choisie à l'oeil : viewBox 100×24
   affiché à 43.2px de haut, échelle 43.2/24 = 1.8. La ligne y vivait à
   y=22 (stroke-width 2.4), soit 22-12=10 unités sous le centre vertical de
   l'icône (12, moitié de 24), donc 10×1.8 = 18px, d'où calc(50% + 18px) ;
   épaisseur 2.4×1.8 = 4.32px. */
.dev .horizon-ligne {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 18px);
  height: 4.32px;
  background: #ffffff;
}
/* Menu hamburger, actif quand .dev est sur <body> (layouts/partials/
   header.html) : la nav est rendue deux fois, une dans .menu-dev
   (<details>, repliable, pour écran étroit) et une dans .menu-large (nav
   telle quelle, pour écran large) ; une seule des deux est affichée selon
   la largeur — on évite ainsi de forcer l'affichage du contenu d'un
   <details> fermé en CSS, non fiable d'un navigateur à l'autre. */
.dev .menu-dev { margin-left: auto; }
.dev .menu-large { margin-left: auto; }
.dev .menu-dev summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.15rem; /* réduit de 1.4rem, à l'échelle du nom réduit ci-dessus */
  line-height: 1;
  color: var(--papier);
  padding: 0.3rem 0.5rem;
}
.dev .menu-dev summary::-webkit-details-marker { display: none; }
.dev .menu-dev[open] summary { color: var(--ambre); }
.dev .menu-dev nav {
  position: absolute;
  top: 100%;
  right: 2rem;
  left: auto;
  margin-top: 0.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  background: var(--bleu-crepuscule);
  padding: 1rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 20;
}
@media (min-width: 768px) {
  .dev .menu-dev { display: none; }
  .dev .menu-large { display: block; }
}
@media (max-width: 767px) {
  .dev .menu-large { display: none; }
}
/* nav dans l'en-tête sombre : bandeau compact (.entete, toutes pages sauf
   accueil) et hero de l'accueil (.entete-accueil + nav, où nav suit le
   header en frère plutôt qu'imbriquée) partagent exactement le même
   habillage — un seul jeu de règles pour les deux sélecteurs plutôt que
   deux blocs dupliqués. */
.entete nav a,
.entete nav a:visited,
.entete-accueil + nav a,
.entete-accueil + nav a:visited {
  color: var(--papier);
}
.entete nav a::after,
.entete-accueil + nav a::after {
  background: var(--ambre);
}
/* Bug : la règle générale nav a:hover::after (plus bas dans ce fichier) pose
   background: var(--ambre-vif) au survol, à spécificité égale avec la règle
   ci-dessus — elle gagnait par ordre de déclaration et faisait changer la
   couleur du soulignement au survol dans l'en-tête sombre, y compris dans le
   menu hamburger déroulé. Contraire au principe posé plus bas dans ce
   fichier (survol sans changement de couleur, seule la largeur du trait
   bouge) : on la repasse explicitement à l'ambre d'origine. */
.entete nav a:hover::after,
.entete nav a:focus-visible::after,
.entete-accueil + nav a:hover::after,
.entete-accueil + nav a:focus-visible::after {
  background: var(--ambre);
}
.entete nav a.actif,
.entete nav a.actif:visited,
.entete nav a:hover,
.entete nav a:active,
.entete nav a:focus-visible,
.entete-accueil + nav a.actif,
.entete-accueil + nav a.actif:visited,
.entete-accueil + nav a:hover,
.entete-accueil + nav a:active,
.entete-accueil + nav a:focus-visible {
  color: var(--ambre);
}
.entete nav a:focus-visible,
.entete-accueil + nav a:focus-visible {
  outline: 1px solid var(--ambre);
}
/* .dev (site.Params.logoVillage) : au survol, le lien prenait la même
   couleur ambre que le lien actif (seul le soulignement, via la règle
   ::after ci-dessus, aurait dû les distinguer). Repéré dans le menu
   hamburger, où
   actif et survolé peuvent se retrouver l'un à côté de l'autre dans une
   liste verticale, rendant la confusion plus visible que dans la nav
   horizontale. Repasse hover/active en blanc, .actif et :focus-visible
   gardent l'ambre — :not(.actif) nécessaire : sans lui, cette règle est
   plus spécifique que .actif et gagne quand même, donc le lien de la page
   affichée changeait de couleur (texte blanc, trait resté ambre) dès qu'on
   le survolait. */
.dev .entete nav a:hover:not(.actif),
.dev .entete nav a:active:not(.actif),
.dev .entete-accueil + nav a:hover:not(.actif),
.dev .entete-accueil + nav a:active:not(.actif) {
  color: var(--papier);
}
/* nav de l'accueil : même habillage que .entete ci-dessus, mais nav.html y
   est appelé seul (pas de conteneur .entete), en frère du header — ciblé
   par adjacence, avec son propre fond puisqu'elle n'hérite d'aucun
   conteneur. */
.entete-accueil + nav {
  background: var(--bleu-crepuscule);
  color: var(--papier);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 40;
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  flex-shrink: 0;
}
.marque a.marque-lien {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}
.marque .logo-mini { flex-shrink: 0; }
.marque .mono-marque,
.marque .nom-complet-marque {
  font-family: 'Bodoni Moda', serif;
  font-weight: 700;
  line-height: 1;
}
.marque .mono-marque {
  font-size: 1rem;
  letter-spacing: -0.1em;
}
.marque .nom-complet-marque {
  display: none;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marque .m { color: var(--ambre); }
/* .dev sur <body> (site.Params.logoVillage, voir layouts/_default/
   baseof.html) : « Jérôme Martin » agrandi en en-tête, pour rester à
   l'échelle du logo passé à 180×43.2. Réduit de 1.7/1.6rem à 1.15/1.1rem :
   à côté du petit logo compact (village + soleil), le nom à sa taille
   d'origine écrasait visuellement l'icône. Le monogramme JM (affiché
   <600px, en alternance avec le nom complet) garde la même proportion que
   le nom complet (ratio d'environ 1.045, comme l'original 1rem/0.95rem),
   pour que les deux variantes gardent la même taille perçue de part et
   d'autre du seuil responsive. */
.dev .marque .mono-marque { font-size: 1.15rem; }
.dev .marque .nom-complet-marque { font-size: 1.1rem; }
@media (min-width: 600px) {
  .marque .mono-marque { display: none; }
  .marque .nom-complet-marque { display: inline; }
}

/* --- navigation interne ---
   Règle de base : nav autonome, centrée, avec sa propre bordure (utilisée
   telle quelle par site/index.html, où <nav> suit le header sans y être
   imbriquée). Dans le bandeau compact, <nav> est imbriquée dans .entete :
   elle perd bordure et padding propres (déjà portés par .entete) et se
   pousse à droite via margin-left auto. */
nav {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--trait);
  flex-wrap: wrap;
}
.entete nav {
  gap: 1.6rem;
  padding: 0;
  border-bottom: none;
  margin-left: auto;
}
nav a {
  position: relative;
  color: var(--gris);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 3px;
}
/* .dev sur <body> : menu réduit (accueil via .entete-accueil + nav, autres
   pages via .entete nav), même raison que la réduction du nom ci-dessus,
   .dev couvrant les deux contextes en une seule règle. */
.dev nav a { font-size: 0.65rem; }
/* soulignement qui se dessine au survol plutôt qu'un simple changement de
   couleur ; permanent sur la page active, pour qu'elle se distingue au repos.
   Deux couleurs distinctes plutôt qu'une seule pour les deux états : ambre-
   texte pour la page active (état stable), ambre vif pour le survol/focus
   (état transitoire) — y compris quand on survole la page déjà active, qui
   ne redescend pas à l'ambre-texte pendant le survol.
   Base/repli seulement : toute nav réelle du site vit aujourd'hui dans
   .entete ou .entete-accueil + nav (en-tête sombre), qui remplacent color et
   surchargent explicitement le ::after de survol/focus pour revenir à
   l'ambre unique — là, le survol ne change pas la couleur, seule la largeur
   du trait bouge (voir leurs commentaires). Cette règle ne s'appliquerait
   donc, telle quelle, qu'à une future nav sur fond clair, hors .entete. */
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--ambre-texte);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}
nav a.actif { color: var(--ambre-texte); }
nav a.actif::after { width: 100%; }
nav a:visited { color: var(--gris); } /* neutralise le violet par défaut : ce sont des liens de rubrique, pas des destinations externes */
nav a.actif:visited { color: var(--ambre-texte); }
nav a:hover,
nav a:active { color: var(--ambre-vif); }
nav a:hover::after,
nav a:focus-visible::after { width: 100%; background: var(--ambre-vif); }
nav a:focus-visible {
  color: var(--ambre-vif);
  outline: 1px solid var(--ambre-vif);
  outline-offset: 3px;
}

/* --- corps de page (pages À propos / Ce qui m'anime / Ailleurs / Billets) --- */
main {
  max-width: 760px; /* ligne de lecture resserrée, ~65 signes */
  margin: 0 auto;
  padding: 1.875rem 2rem 5rem;
}
/* .corps et .chapo remplissent main : la ligne de lecture s'élargit avec
   lui, jusqu'aux paliers ci-dessous (1100px max, au-delà de 1500px). */
@media (min-width: 1100px) {
  main { max-width: 960px; }
}
@media (min-width: 1500px) {
  main { max-width: 1100px; }
}
h1 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  font-size: 2.1rem;
  margin: 0 0 0.6rem;
}
/* Pages sans chapo (a-propos, ce-qui-m-anime) : le h1 précède directement le
   contenu, resserré par rapport au gabarit avec chapo. La ligne grise que
   .corps porte déjà (border-top, page suivante) doit être ajoutée à la main
   pour .grille-cartes, qui n'a pas cette bordure par défaut. */
.page-resserree h1 { margin-bottom: 0.3rem; }
.page-resserree .corps { padding-top: 0.75rem; }
.page-resserree .grille-cartes {
  border-top: 1px solid var(--trait);
  padding-top: 0.75rem;
}
.chapo {
  color: var(--texte-secondaire);
  font-size: 1rem;
  max-width: 100%;
  margin: 0 0 3rem;
}
.chapo a { color: var(--ambre-texte); text-decoration: underline; }
.chapo a:hover,
.chapo a:focus-visible { color: var(--encre); }

/* --- corps de texte long (À propos, et gabarit/billets via .page) --- */
.corps {
  border-top: 1px solid var(--trait);
  padding-top: 2rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--texte-secondaire);
}
main .corps { max-width: 100%; }
.corps p { margin: 0 0 1.1rem; }
.corps p:last-child { margin-bottom: 0; }
.corps h2 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--encre);
  margin: 2.2rem 0 1rem;
}
.corps h2:first-child { margin-top: 0; }
.corps strong { font-weight: 600; color: var(--encre); }
.corps em { font-style: italic; color: rgba(15,28,51,0.85); }
.corps ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.corps li { margin: 0 0 0.7rem; }
.corps li:last-child { margin-bottom: 0; }
/* figure éventuelle dans le corps de texte (billet-article) : l'image
   porte le contenu, pas un décor autour du texte */
.corps figure { margin: 0 0 1.5rem; }
.corps figure img {
  display: block;
  width: 100%;
  height: auto;
}
.corps figcaption {
  font-size: 0.82rem;
  color: var(--texte-tertiaire);
  margin-top: 0.6rem;
  font-style: italic;
  font-family: 'Bodoni Moda', serif;
}
/* Mention d'abonnement en fin de billet (layouts/billets/single.html) :
   note de bas de page, en retrait par rapport au corps du billet (et au
   "Pour aller plus loin" qu'il porte parfois, qui reste lui en paragraphe
   de contenu normal) : gris atténué, taille réduite, séparée par un filet
   plutôt qu'empilée comme un paragraphe de contenu de plus. */
.abonnement-invite {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  font-size: 0.82rem;
  color: var(--texte-tertiaire);
}
.abonnement-invite a { color: var(--ambre-texte); }
.abonnement-invite a:hover,
.abonnement-invite a:focus-visible { color: var(--encre); }
/* enluminure : photo nue en tête de corps (a-propos), le texte s'enroule
   autour. Empilée au-dessus du texte sous 600px, faute de place pour
   l'habillage. */
.corps figure.enluminure {
  margin: 0 0 1rem;
  width: 140px;
}
@media (min-width: 600px) {
  .corps figure.enluminure {
    float: left;
    margin: 0.2rem 1.5rem 1rem 0;
  }
}
/* billet-photo : l'image en tête de page, le texte (date, titre, chapô,
   tags, corps éventuel) en dessous, jamais l'inverse */
.photo-page {
  margin: 0 0 2rem;
  max-width: 760px; /* 1er palier de .page : la photo ne suit pas .page au-
     delà, contrairement au texte qui reste pleine largeur. L'écart devient
     visible dès que .page dépasse 760px (≥1100px, 2e palier). */
}
.photo-page img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* une photo en portrait tient dans l'écran et reste plus petite que
     l'agrandissement (.lightbox img, 92vh) */
  max-height: 80vh;
}
.photo-page figcaption {
  font-size: 0.82rem;
  color: var(--texte-tertiaire);
  margin-top: 0.6rem;
  font-style: italic;
  font-family: 'Bodoni Moda', serif;
}
/* billet-photo : titre et tags les plus compacts possibles avant la photo,
   pour qu'elle s'exprime tout de suite plutôt qu'après un bloc de texte */
.page-photo h1 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.page-photo .meta-date { margin-bottom: 0.5rem; }
.page-photo .tags { margin-bottom: 1.2rem; }
.page-photo .photo-page { margin: 0 0 1.6rem; }

/* Agrandissement de la photo d'un billet, en CSS pur (:target) : pas de JS,
   l'ancre #photo-agrandie affiche l'overlay, le cliquer le referme (lien
   vers #). */
.photo-page a { display: block; cursor: zoom-in; }
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(15, 28, 51, 0.92);
  cursor: zoom-out;
  z-index: 100;
}
.lightbox:target { display: flex; }
.lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 92vh;
  object-fit: contain;
}

/* --- gabarit de billet (bandeau logo + retour, page aux mêmes paliers
   responsive que main) --- Utilisé par billets/_gabarit-billet.html et
   chaque billet dupliqué. */
.bandeau {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem 2rem 1.2rem;
  background: var(--bleu-crepuscule);
  color: var(--papier);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* .dev sur <body>, même raison qu'en .entete ci-dessus. Le logo agrandi
   (180×61) est à l'étroit dans le padding d'origine : la bande passe en
   padding vertical resserré. flex-wrap: wrap pour que « ← Billets » passe à
   la ligne sur petit écran plutôt que de forcer le retour+nom à se
   comprimer contre lui. */
.dev .bandeau { padding-top: 0.6rem; padding-bottom: 0.5rem; flex-wrap: wrap; }
.bandeau .logo { flex-shrink: 0; }
.bandeau a.retour {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: 'Bodoni Moda', serif;
  font-weight: 700;
  color: var(--papier);
  text-decoration: none;
}
.bandeau a.retour .mono-bandeau,
.bandeau a.retour .nom-complet-bandeau {
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bandeau a.retour .mono-bandeau { font-size: 0.85rem; }
.bandeau a.retour .nom-complet-bandeau { font-size: 0.85rem; display: none; }
.bandeau a.retour .m { color: var(--ambre); }
/* .dev sur <body>, même raison qu'en .marque ci-dessus : réduit de
   1.45rem à 1rem, pour la même cause (le nom écrasait le petit logo
   compact). Le monogramme JM garde la même taille que le nom complet, à
   l'origine tous deux à 0.85rem. */
.dev .bandeau a.retour .mono-bandeau { font-size: 1rem; }
.dev .bandeau a.retour .nom-complet-bandeau { font-size: 1rem; }
@media (min-width: 600px) {
  .bandeau a.retour .mono-bandeau { display: none; }
  .bandeau a.retour .nom-complet-bandeau { display: inline; }
}
.bandeau a.billets {
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papier);
  text-decoration: none;
}
.bandeau a.billets:hover,
.bandeau a.billets:focus-visible { color: var(--ambre); }

.page {
  max-width: 760px; /* même palier que main : billets/single.html utilise <main class="page">, pas de balise main générique en plus */
  margin: 0 auto;
  padding: 0.5rem 2rem 5rem;
}
@media (min-width: 1100px) {
  .page { max-width: 960px; }
}
@media (min-width: 1500px) {
  .page { max-width: 1100px; }
}
.meta-date {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-tertiaire);
  margin: 0 0 1rem;
}
/* dans .page, le h1 gagne un interligne resserré (titre parfois sur 2 lignes) */
.page h1 { line-height: 1.25; }
/* dans .page, le chapô est plus compact et sans colonne resserrée propre
   (déjà porté par .page) */
.page .chapo {
  font-size: 0.95rem;
  max-width: none;
  margin: 0 0 1.6rem;
  line-height: 1.6;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.4rem;
}
.tags span {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--gris);
}
/* .tags span.type : bordure neutre, comme tout .tags span (règle de charte,
   ambre réservé à la signature), seul et unique endroit désormais (style.css,
   un fichier, plus de bloc <style> par page). inline-flex : alignement de
   l'icône Photo (logo Horizon miniature) et du texte, sans incidence sur les
   badges texte seul (Article). */
.tags span.type { display: inline-flex; align-items: center; }

/* --- liste des billets (billets/index.html) : réutilise la présentation
   de l'accueil (.liste-recente, voir plus bas) pour une seule et même
   grammaire visuelle, vignette comprise --- */
/* type Photo : une puce de couleur (terre), plutôt qu'un mot répété à
   côté d'une photo qui le dit déjà. Utilisée dans le tags des pages de
   billet individuelles (badge-photo.html) */
.puce-photo {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--photographie);
  flex-shrink: 0;
}
/* même principe pour le format Architecture, en gris d'orage (accent de
   la carte Architecture sur ce-qui-m-anime.html) */
.puce-architecture {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--architecture);
  flex-shrink: 0;
}
/* liste des sujets (/sujets/, page technique non liée depuis le site) :
   simple lien + décompte, pas une prévisualisation de billet */
.liste-sujets { list-style: none; margin: 0; padding: 0; }
.liste-sujets li {
  padding: 1.2rem 0;
  border-top: 1px solid var(--trait);
}
.liste-sujets li:last-child { border-bottom: 1px solid var(--trait); }
.liste-sujets h2 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 0.3rem;
}
.liste-sujets h2 a {
  color: var(--encre);
  text-decoration: none;
  transition: color 0.3s ease;
}
.liste-sujets h2 a:hover,
.liste-sujets h2 a:focus-visible { color: var(--ambre-texte); }
.liste-sujets p {
  color: var(--texte-tertiaire);
  font-size: 0.85rem;
  margin: 0;
}
.etat-vide {
  font-style: italic;
  font-family: 'Bodoni Moda', serif;
  color: var(--texte-tertiaire);
  font-size: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: 2.5rem 2rem 3.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--texte-tertiaire);
  text-transform: uppercase;
  border-top: 1px solid var(--trait);
}

.liens-footer {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.lien-footer {
  display: inline-flex;
  color: var(--encre);
  transition: transform 0.15s ease, color 0.15s ease;
}

.lien-footer:hover,
.lien-footer:focus-visible {
  color: var(--ambre-vif);
}

.lien-footer:focus-visible {
  outline: 1px solid var(--ambre-vif);
  outline-offset: 3px;
}

.lien-footer:active {
  transform: scale(0.85);
}

.lien-footer svg {
  width: 16px;
  height: 16px;
}

footer .copyright {
  margin: 0;
}

/* ============================================================
   Accueil (layouts/index.html) — hero, signature, section
   « derniers billets ». Auparavant un <style> local à index.html ;
   regroupé ici depuis la migration Hugo (layouts/_default/single.html
   sert d'autres pages, un bloc <style> par page n'a plus de sens).
   ============================================================ */
.entete-accueil { padding-bottom: 0.75rem; }
/* hero : bande décorative courte (ligne d'horizon + point), plus jamais
   porteuse de texte. Avant le 2026-08-14, la signature vivait dedans en
   position absolue à 82% de la hauteur : en réduisant cette hauteur pour
   resserrer l'espace mort, le monogramme (4rem) a débordé sous le hero et
   chevauché le texte d'accroche suivant sur mobile. La signature vit
   maintenant en flux normal, juste après, insensible à la hauteur du hero. */
.hero {
  position: relative;
  width: 100%;
  height: clamp(56px, 6vw, 90px);
  overflow: hidden;
}
.ligne-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
  height: 4px;
  background: var(--encre);
}
/* lever du soleil : part de sous la ligne d'horizon (masqué par overflow:
   hidden sur .hero) et remonte à sa position de repos. Se joue pendant que
   .hero lui-même apparaît en fondu (.entree-1), pas avant ni après. */
@keyframes lever-soleil {
  from { transform: translate(-50%, -50%) translateY(28px); opacity: 0; }
  to   { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
}
.soleil {
  position: absolute;
  left: 66%;
  top: 24%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ambre);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: lever-soleil 1.1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Horizon (village + arbre + soleil, site.Params.logoVillage) — voir
   layouts/index.html. SVG à largeur fixe (n'occupe jamais toute la
   largeur du hero, sinon le motif s'étire sur écran large comme avec
   l'ancienne .skyline en divs). Ancré en bottom: 40%, exactement la
   référence déjà utilisée par .ligne-horizon (top: 60%) : le viewBox est
   cadré 0 0 100 22 pour que y=22 (le sol) tombe pile sur le bord bas du
   SVG, posé sur la ligne sans recalculer de décalage. .ligne-horizon reste
   continue sur toute la largeur de la page, sur les trois étages
   (development, staging, production) ; seul ce petit groupe ne s'étire pas.
   Largeur de référence (130px, celle des vignettes « format réduit » de
   l'essai logo village) : le logo d'en-tête/bandeau (partials/logo.html,
   viewBox 0 0 100 34) reprend
   la même largeur pour rendre village, arbre et soleil à la même taille
   physique ici et là, voir partials/header.html et partials/bandeau.html. */
/* bottom: calc(40% - 1px) plutôt que 40% pile : les deux valeurs sont
   mathématiquement le même point (sol du motif = bord haut de la ligne),
   mais le navigateur arrondit indépendamment chaque pourcentage à son
   propre pixel, laissant parfois un filet de papier visible entre les
   deux. Le 1px de chevauchement force le sol du motif à mordre sur la
   ligne — invisible, les deux sont en encre. */
.horizon-motif { position: absolute; left: 24px; bottom: calc(40% - 1px); width: 180px; height: auto; aspect-ratio: 100 / 22; }
/* Même effet de lever que .soleil (translateY + fondu), porté sur le cercle
   SVG du motif dev. On anime la propriété géométrique cy plutôt qu'un
   transform: translateY(...) : sur un élément SVG, les longueurs passées à
   translateY() se résolvent dans l'espace utilisateur du viewBox, pas en
   px CSS comme sur un div — animer cy évite l'ambiguïté, l'unité est déjà
   celle du viewBox (22 = sur la ligne d'horizon, 12 = position de repos). */
.soleil-motif { opacity: 0; animation: lever-soleil-motif 1.1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes lever-soleil-motif {
  from { cy: 22; opacity: 0; }
  to   { cy: 12; opacity: 1; }
}
/* rapproche la signature de la ligne d'horizon par un décalage fixe, pas
   par un pourcentage de la hauteur du hero (fragile, cause du bug ci-dessus) */
.bloc-signature {
  margin-top: -18px;
  text-align: center;
}
.signature {
  display: inline-grid;
  grid-template-areas: "pile";
  height: 4rem; /* ajouter cette ligne : aligne la hauteur sur .mono, visible par défaut */
  margin: 0; /* neutralise la marge par défaut du navigateur sur un titre h1
                (0.67em), pour ne pas décaler le calage vertical fait par
                .bloc-signature. */
}
.signature > * { grid-area: pile; }
/* teaser : phrase d'accroche sous la signature, aperçu de À propos. Reprend
   le premier paragraphe déjà retenu sur content/a-propos.md, pas un texte
   à part : un seul endroit à réécrire plus tard, pas deux versions à
   synchroniser. */
.teaser-accueil {
  text-align: center;
  /* fluide, traité comme un élément du hero et non comme le corps d'un
     article : la colonne s'élargit avec la fenêtre entre ~710px et ~1480px
     de large, puis plafonne à 960px, bien au-delà de la colonne de lecture
     standard du site (main, 760px). */
  max-width: clamp(460px, 65vw, 960px);
  margin: -0.4rem auto 0;
  padding: 0 2rem;
  color: var(--texte-secondaire);
  font-size: 0.92rem;
}
@media (min-width: 700px) {
  /* le padding ne sert qu'à protéger le texte sur petit écran ; au-delà de
     700px, max-width + margin auto centrent déjà la colonne, le padding ne
     fait plus que la resserrer inutilement. */
  .teaser-accueil { padding: 0; }
}
.teaser-accueil a {
  color: var(--ambre-texte);
  text-decoration: underline;
}
.teaser-accueil a:hover,
.teaser-accueil a:focus-visible { color: var(--encre); }
.mono, .nom-complet {
  font-family: 'Bodoni Moda', serif;
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mono {
  font-size: 4rem;
  letter-spacing: -0.14em;
  opacity: 1;
  transform: scale(1);
}
.mono .m { color: var(--ambre); }
.nom-complet {
  /* visible dès 600px (voir media query ci-dessous), à taille fixe 2,3rem
     jusqu'à ce que 3vw dépasse ce plancher (~1225px) ; grandit ensuite avec
     la fenêtre au lieu de rester bloqué. Plafonne à 4rem, la taille du
     monogramme, pour ne jamais dépasser sa propre version mobile. */
  font-size: clamp(2.3rem, 3vw, 4rem);
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}
.nom-complet .m-initiale { color: var(--ambre); }
/* déploiement JM → Jérôme Martin : J et M restent fixes, « érôme » puis
   « artin » se révèlent par largeur (overflow masqué, max-width animée de 0
   à une valeur large jamais atteinte par le texte réel). Au repos (avant
   l'animation), max-width: 0 les masque déjà : on démarre bien sur « JM ». */
.deploiement {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  will-change: max-width;
  animation: deploiement 0.8s ease-out forwards;
}
.deploiement-1 { animation-delay: 0.9s; }
.deploiement-2 { animation-delay: 1.15s; }
@keyframes deploiement {
  /* cible proche de la largeur réelle du texte (pas de grande marge
     inutile) : toute la durée de l'animation correspond à un mouvement
     visible, plutôt qu'un sursaut suivi d'un temps mort. */
  to { max-width: 6em; }
}
@media (min-width: 600px) {
  .mono { opacity: 0; transform: scale(1.08); pointer-events: none; }
  .nom-complet { opacity: 1; transform: scale(1); pointer-events: auto; }
  .signature { height: 2.3rem; } /* ajouter cette ligne : aligne sur .nom-complet, visible ici */
}
/* --- section « derniers billets », propre à l'accueil --- */
section { margin-bottom: 3.75rem; } /* 60px = 2 × 30px */
section:last-child { margin-bottom: 0; }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1rem;
}
/* --- derniers billets + traceur de cadence ---
   Grille séquentielle des jours du mois (1 à N dans l'ordre), pas un vrai
   calendrier aligné sur les jours de semaine : ça éviterait un calcul de
   décalage à refaire à la main chaque mois. Depuis la migration Hugo, ce
   calcul (jours du mois, jours publiés) est fait au build par
   partials/cadence.html, plus de mise à jour manuelle. */
.bloc-billets {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 1.5rem;
}
.apercu-billets { flex: 1 1 320px; }
.liste-recente {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.liste-recente li {
  display: flex;
  gap: 1.1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--trait);
}
.liste-recente li:first-child { border-top: none; padding-top: 0; }
/* vignette : aplat franc, sans contour ni ombre, même règle que les photos
   de billet (charte, section Usages interdits — vaut pour le logo, pas
   pour une photographie réelle, mais on ne rajoute pas de décor pour autant).
   L'indicateur de type Photo (.trait-photo) vit donc à côté du cadre, pas
   dessus : un repère hors image plutôt qu'un contour sur l'image. */
.vignette-photo { display: flex; align-items: stretch; gap: 0.5rem; flex-shrink: 0; }
.trait-photo { width: 3px; background: var(--photographie); flex-shrink: 0; }
.trait-architecture { width: 3px; background: var(--architecture); flex-shrink: 0; }
.apercu-photo {
  flex-shrink: 0;
  width: 180px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.apercu-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contenu-billet { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .liste-recente li { flex-direction: column; }
  .vignette-photo { width: 100%; }
  .apercu-photo { flex: 1 1 auto; width: auto; aspect-ratio: 3 / 2; }
}
.meta-billet {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.3rem;
}
.meta-billet time {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-tertiaire);
}
.meta-billet .type-billet {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--gris);
}
/* type Photo : une puce de couleur (terre, registre « Art et artisanat »
   où la photographie se range dans Ce qui m'anime), plutôt qu'un mot
   répété à côté d'une photo qui le dit déjà */
.meta-billet .type-photo {
  display: inline-flex;
  align-items: center;
}
.liste-recente h3 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
}
.liste-recente h3 a {
  display: inline-block;
  color: var(--encre);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.liste-recente h3 a:hover,
.liste-recente h3 a:focus-visible { color: var(--ambre-texte); transform: translateX(5px); }
.liste-recente p {
  color: var(--texte-secondaire);
  font-size: 0.9rem;
  margin: 0;
}
.lien-tous-billets { font-size: 0.78rem; letter-spacing: 0.06em; }
.lien-tous-billets a { color: var(--gris); text-decoration: none; }
.lien-tous-billets a:hover,
.lien-tous-billets a:focus-visible { color: var(--ambre-texte); }

.cadence { flex: 0 0 200px; }
.cadence-titre {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 0.7rem;
}
.grille-jours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}
.grille-jours span {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: var(--texte-tertiaire);
  background: rgba(15,28,51,0.045);
  border-radius: 3px;
}
.grille-jours span {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.grille-jours span.publie {
  background: var(--photographie);
  color: var(--papier);
  font-weight: 600;
}
.grille-jours span.publie-architecture {
  background: var(--architecture);
}
/* jour publié : petit relief au survol, cohérent avec le fait que c'est
   déjà la seule case visuellement « active » de la grille */
.grille-jours span.publie:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 10px -3px rgba(74,59,42,0.6);
}
.cadence-compte {
  font-size: 0.72rem;
  color: var(--texte-tertiaire);
  margin: 0.7rem 0 0;
}

/* ============================================================
   Ce qui m'anime (content/ce-qui-m-anime.md, layouts/_default/single.html)
   — grille de cartes de sujet. Auparavant un <style> local à
   ce-qui-m-anime.html ; regroupé ici pour la même raison que ci-dessus.
   ============================================================ */
/* grille déterministe : 1 colonne ou 3, jamais 2, pour que les centres
   d'intérêt restent solidaires plutôt que de se scinder au hasard d'auto-fit.
   Un seul sujet aujourd'hui (Art et artisanat) ; les deux autres (Informatique
   personnelle, Jeux vidéo) rejoindront la grille dès qu'ils auront des
   billets à filtrer, pas avant — voir le commentaire dans content/ce-qui-m-anime.md. */
.grille-cartes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .grille-cartes { grid-template-columns: repeat(3, 1fr); }
}
.carte {
  display: flex;
  align-items: stretch;
  gap: 1.2rem;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.carte:hover,
.carte:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -16px rgba(15,28,51,0.22);
}
.carte:hover h2,
.carte:focus-visible h2 { color: var(--ambre-texte); }
.carte:focus-visible {
  outline: 1px solid var(--ambre-texte);
  outline-offset: 4px;
}
/* Sujet identifié par le même trait de couleur que dans la liste des billets
   (.trait-photo / .trait-architecture, définis plus haut pour vignette-billet.
   html) plutôt qu'un pictogramme propre à la carte : une seule source pour
   l'association sujet → couleur. À gauche, comme sur la vignette d'un billet
   (l'ordre des enfants dans le markup, pas cette règle) ; un peu plus épais
   qu'en vignette (5px contre 3px), une carte portant plus de poids visuel
   qu'une miniature de billet. */
.carte .trait-photo,
.carte .trait-architecture { width: 5px; }
.carte-texte { flex: 1 1 auto; padding-top: 1.6rem; min-width: 0; }
.carte h2 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  white-space: nowrap;
}
.carte p {
  font-size: 0.92rem;
  color: var(--texte-secondaire);
  margin: 0 0 0.6rem;
}
.carte .voir-billets {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gris);
}
.carte:hover .voir-billets,
.carte:focus-visible .voir-billets { color: var(--ambre-texte); }

/* Sélecteur de langue (FR / EN) : dernier élément de <nav> (voir
   partials/nav.html), donc affiché à droite des trois liens de menu sur une
   nav horizontale (accueil, .entete), et en dernière ligne, séparée par un
   filet, sur le menu déroulant mobile (colonne verticale, .menu-dev nav).
   Mêmes couleurs que la nav (papier / ambre), en plus petit et en
   majuscules, pour rester secondaire face au menu principal. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.dev .menu-dev nav .lang-switch {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.lang-switch a,
.lang-switch a:visited {
  color: var(--papier);
  text-decoration: none;
  opacity: 0.75;
}
.lang-switch a:hover,
.lang-switch a:focus-visible {
  opacity: 1;
  color: var(--ambre);
}
/* "nav .lang-switch a" (et non ".lang-switch a" seul) : même spécificité que
   ".dev nav a" plus haut (une classe, deux éléments), qui sinon impose sa
   propre taille de police au lien EN quand le sélecteur vit dans <nav>
   (accueil, .entete), sans toucher au FR (un <span>, pas un <a>) — d'où un
   FR et un EN de tailles visiblement différentes. À spécificité égale, la
   règle déclarée en dernier l'emporte : celle-ci, tout en bas du fichier,
   gagne. La règle générale ".lang-switch a" au-dessus reste nécessaire pour
   le bandeau des pages de billet, où le sélecteur n'est pas dans un <nav>.
   Taille répétée sur .lang-actif pour que les deux lettres soient toujours
   identiques, plutôt que de compter sur un héritage qu'une règle plus
   spécifique peut casser ailleurs. */
nav .lang-switch a {
  font-size: 0.72rem;
}
.lang-switch .lang-actif {
  font-size: 0.72rem;
  color: var(--ambre);
  font-weight: 500;
}