/* Gabarit A — page pilier enrichie (charte-graphique.md §7 à §9, direction
   « v2 audacieuse » validée sur mockups le 20/08/2026).

   Tout est scopé sous body.pilier : une fiche sans le drapeau `pilier: true`
   en front-matter garde exactement le rendu d'avant. C'est ce qui permet de
   valider le gabarit sur une seule fiche (Cathédrale Sainte-Croix) avant de
   généraliser — il suffira d'ajouter le drapeau aux autres fiches piliers.

   Les surfaces sombres sont PEINTES EN DUR (§7.2) : ce n'est pas un dark
   mode, elles n'écoutent jamais prefers-color-scheme.

   Règle dure de contraste (§7.2) : sur fond sombre, le rouge #CE1126 ne
   sert JAMAIS de texte (ratio ~3,2:1, sous le seuil AA). Sur sombre il est
   uniquement aplat (jauge, filet, puce), avec du clair par-dessus. */

body.pilier {
  /* Mesure de lecture partagée par le flux et les bandes pleine largeur. */
  --mesure-pilier: 40rem;
  --gouttiere-pilier: 1.25rem;

  font-size: var(--taille-corps-pilier);
  line-height: var(--interligne-pilier);
  background: var(--fond);
  color: var(--texte);
}

/* La boîte reprend la pleine largeur. Ces trois déclarations portaient sur
   le <body> jusqu'au 29/08/2026, où la colonne de lecture (.page-contenu)
   est descendue sur un <main> pour laisser passer le pied de page — elles
   ont suivi la classe qu'elles annulent, pas le body.
   `padding-bottom` sur le main et non sur le body : sinon les 4rem
   tomberaient SOUS le pied de page, et non entre le contenu et lui. */
body.pilier > main {
  max-width: none;
  margin: 0;
  padding: 0 0 4rem;
}

/* Colonne de lecture. Les enfants directs du corps de page et du corps
   markdown partagent la même mesure ; seules les bandes sombres s'en
   échappent. */
body.pilier > main > *,
body.pilier .description > * {
  max-width: var(--mesure-pilier);
  margin-inline: auto;
  padding-inline: var(--gouttiere-pilier);
}

/* .description reste pleine largeur et ne contraint QUE ses enfants (règle
   ci-dessus) : si on la bornait elle-même à la mesure, aucune bande sombre
   ne pourrait s'échapper, elles seraient plafonnées par leur bloc conteneur
   au lieu de filer d'un bord à l'autre. */
body.pilier > main > .description {
  max-width: none;
  padding-inline: 0;
}

/* ————— En-tête ————— */

body.pilier .back {
  display: inline-block;
  margin: var(--espace-xl) auto 1.75rem;
  font-family: var(--pile-lecture);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-petite);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-secondaire);
  text-decoration: none;
  transition: color var(--transition-etat);
}
body.pilier .back:hover { color: var(--rouge-orleans); }

body.pilier h1 {
  font-family: var(--pile-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.92;
  /* clamp impératif (§7.1) : sans lui le titre déborde sur petit écran. */
  font-size: var(--taille-display-hero);
  margin: 0 auto var(--espace-m);
  text-wrap: balance;
}
/* Mot-clé du titre en rouge. Texte rouge sur fond clair : ~4,9:1, conforme. */
body.pilier .h1-accent { color: var(--rouge-orleans); }

body.pilier .lieu,
body.pilier .adresse {
  font-size: var(--taille-texte);
  color: var(--texte-secondaire);
  margin: 0.15rem auto;
}

body.pilier .meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
  margin: 1.25rem auto var(--espace-l);
}

/* ————— Boutons d'action (§7.4) ————— */

body.pilier .actions-fiche {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 auto 1.25rem;
}
body.pilier .action-fiche {
  font-family: var(--pile-display);
  font-weight: 800;
  text-transform: uppercase;
  /* Interlettrage positif ici, contrairement aux gros titres : aux petites
     tailles en capitales, un espacement négatif nuit à la lisibilité. */
  letter-spacing: 0.03em;
  font-size: var(--taille-bouton-display);
  color: var(--texte);
  background: var(--fond);
  border: 1.5px solid var(--texte);
  border-radius: var(--rayon-standard);
  min-height: 48px;
  padding: var(--espace-s) 1.1rem;
  transition:
    color var(--transition-etat),
    border-color var(--transition-etat),
    background-color var(--transition-etat);
}
body.pilier .action-fiche:hover,
body.pilier .action-fiche:focus-visible {
  color: var(--rouge-orleans);
  border-color: var(--rouge-orleans);
}
body.pilier .autre-agenda { margin: -0.25rem auto var(--espace-l); }

/* ————— Titres de section, colonne vertébrale numérotée (§7.3) ————— */

body.pilier .description { counter-reset: pilier-section; }

body.pilier .description h2 {
  font-family: var(--pile-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: var(--taille-display-section);
  color: var(--texte);
  margin: 3.25rem auto 1.1rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--rouge-orleans);
  counter-increment: pilier-section;
  text-wrap: balance;
}
/* La charte écrit ce repère « 01 — ». Le tiret cadratin est remplacé par une
   gouttière : le chantier du 20/08/2026 a purgé les cadratins du contenu ET
   des textes d'interface, un content: "—" en CSS retomberait dedans. Le
   repère chiffré rouge joue le même rôle sans le caractère. */
body.pilier .description h2::before {
  content: counter(pilier-section, decimal-leading-zero);
  display: block;
  font-size: var(--taille-petite);
  letter-spacing: 0.08em;
  color: var(--rouge-orleans);
  margin-bottom: 0.4rem;
}

body.pilier .description h3 {
  font-family: var(--pile-lecture);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-soustitre-pilier);
  line-height: 1.3;
  margin: 1.75rem auto var(--espace-s);
  color: var(--texte);
}

body.pilier .description p { margin: 0 auto 1.15rem; }
/* Les liens de contenu héritent simplement de la règle `a` de theme.css
   (rouge, hover rouge foncé) : plus de surcharge locale ici. */
body.pilier .description ul { margin: 0 auto 1.15rem; padding-left: 1.2rem; }
body.pilier .description li { margin-bottom: 0.35rem; }

/* ————— Bandes sombres pleine largeur (§7.3) ————— */

body.pilier .description > .pilier-bande {
  max-width: none;
  padding-inline: 0;
  margin: 2.25rem 0;
  padding-block: 2.25rem;
  background: var(--charbon);
  color: var(--clair);
}
body.pilier .pilier-bande-contenu {
  max-width: var(--mesure-pilier);
  margin-inline: auto;
  padding-inline: var(--gouttiere-pilier);
}
body.pilier .pilier-bande-titre {
  font-family: var(--pile-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--taille-petite);
  color: var(--clair-2);
  margin: 0 0 1.25rem;
}
/* Filet rouge en aplat : usage autorisé du rouge sur sombre (jamais en texte). */
body.pilier .pilier-bande-titre::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--rouge-orleans);
  margin-top: 0.6rem;
}

/* ————— Frise chronologique (§7.4), sur bande sombre ————— */

body.pilier .pilier-frise-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: var(--espace-m) 0;
  border-top: 1px solid var(--bordure-sombre);
}
body.pilier .pilier-frise-item:last-child { border-bottom: 1px solid var(--bordure-sombre); }
body.pilier .pilier-frise-annee {
  font-family: var(--pile-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 8vw, var(--taille-display-chiffre));
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--clair);
  font-variant-numeric: tabular-nums;
}
body.pilier .pilier-frise-fait {
  font-size: var(--taille-texte);
  line-height: 1.5;
  color: var(--clair-2);
}
@media (min-width: 34rem) {
  body.pilier .pilier-frise-item {
    grid-template-columns: 7rem 1fr;
    gap: var(--espace-l);
    align-items: baseline;
  }
}

/* ————— Barres de données (§7.4), sur bande sombre ————— */

body.pilier .pilier-donnees {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
body.pilier .pilier-donnee-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-m);
  margin-bottom: 0.45rem;
}
body.pilier .pilier-donnee-label {
  font-family: var(--pile-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--taille-petite);
  color: var(--clair-2);
}
body.pilier .pilier-donnee-valeur {
  font-family: var(--pile-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 8vw, var(--taille-display-chiffre));
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--clair);
  font-variant-numeric: tabular-nums;
}
body.pilier .pilier-donnee-piste {
  background: var(--bordure-sombre);
  border-radius: var(--rayon-standard);
  height: 0.55rem;
  overflow: hidden;
}
body.pilier .pilier-donnee-jauge {
  background: var(--rouge-orleans);
  height: 100%;
}
body.pilier .pilier-donnee-note {
  font-size: var(--taille-normale);
  color: var(--clair-2);
  margin: var(--espace-xs) 0 0;
}

/* ————— Repère éditorial (bloc clair) ————— */

body.pilier .pilier-repere {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-standard);
  padding: 1.35rem var(--espace-l);
  margin: var(--espace-xl) auto;
}
body.pilier .pilier-repere-titre {
  font-size: var(--taille-texte);
  margin: 0 0 var(--espace-m);
}
/* Rouge en texte : autorisé, on est sur fond clair. */
body.pilier .pilier-repere-date {
  color: var(--rouge-orleans);
  font-weight: var(--graisse-forte);
}
body.pilier .pilier-repere-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--bordure);
}
body.pilier .pilier-repere-annee {
  font-family: var(--pile-display);
  font-weight: 800;
  font-size: var(--taille-texte);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
body.pilier .pilier-repere-fait {
  font-size: var(--taille-texte);
  color: var(--texte-secondaire);
  line-height: 1.5;
}
@media (min-width: 34rem) {
  body.pilier .pilier-repere-item {
    grid-template-columns: 7rem 1fr;
    gap: 1.25rem;
    align-items: baseline;
  }
}

/* ————— Cartes de statut (bloc clair) ————— */

body.pilier .pilier-statut {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-m);
  margin: var(--espace-xl) auto;
}
body.pilier .pilier-statut-item {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-standard);
  padding: 1.1rem 1.2rem;
}
body.pilier .pilier-statut-label {
  font-family: var(--pile-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--taille-petite);
  color: var(--texte-secondaire);
  margin: 0 0 var(--espace-s);
}
body.pilier .pilier-statut-annee {
  font-family: var(--pile-display);
  font-weight: 900;
  font-size: var(--taille-display-chiffre-petit);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.35rem;
}
body.pilier .pilier-statut-fait {
  font-size: var(--taille-normale);
  color: var(--texte-secondaire);
  margin: 0;
}
@media (min-width: 34rem) {
  body.pilier .pilier-statut { grid-template-columns: 1fr 1fr; }
}

/* ————— Appareil de fin : sources, auteur (non numérotés) ————— */

body.pilier .pilier-apparat > h2 {
  font-family: var(--pile-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--taille-petite);
  color: var(--texte-secondaire);
  border-top: 1px solid var(--bordure);
  padding-top: 1.1rem;
  margin: 2.75rem auto 0.9rem;
  counter-increment: none;
}
body.pilier .pilier-apparat > h2::before { content: none; }
body.pilier .pilier-apparat {
  font-size: var(--taille-texte);
  color: var(--texte-secondaire);
}

/* ————— Blocs de pied de fiche ————— */

body.pilier .note {
  font-size: var(--taille-texte);
  color: var(--texte-secondaire);
  border-left: 3px solid var(--rouge-orleans);
  padding-left: 0.9rem;
  margin: var(--espace-xl) auto;
}
body.pilier .source {
  font-size: var(--taille-normale);
  color: var(--texte-secondaire);
  margin: var(--espace-l) auto;
}
body.pilier .pratiques h2 {
  font-family: var(--pile-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--taille-petite);
  color: var(--texte-secondaire);
  margin: 0 0 var(--espace-s);
}

body.pilier #recommandations,
body.pilier #programmation-lieu {
  margin-top: 3rem;
  padding-top: var(--espace-l);
  border-top: 1px solid var(--bordure);
}
body.pilier #recommandations h2,
body.pilier #programmation-lieu h2 {
  font-family: var(--pile-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--taille-titre-section);
  color: var(--texte);
  margin: 0 0 0.9rem;
}
body.pilier .liste-recommandations a { transition: color var(--transition-etat); }

/* ————— Garde-fou : liens dans une bande sombre ————— */

/* Depuis le 20/08/2026, `a` vaut --rouge-orleans globalement (theme.css).
   Sur le charbon ce rouge tombe à 3,2:1, sous le seuil AA texte : la
   charte §7.2 l'interdit formellement en texte sur sombre. Aucune bande
   sombre ne contient de lien aujourd'hui, mais la règle est posée
   d'avance pour qu'en ajouter un ne puisse jamais créer la violation
   silencieusement. --clair sur charbon donne 14:1. */
body.pilier .pilier-bande a {
  color: var(--clair);
}
body.pilier .pilier-bande a:hover {
  color: var(--fond);
}

/* ————— Focus visible (WCAG 2.4.7) ————— */

body.pilier a:focus-visible,
body.pilier button:focus-visible {
  outline: 2px solid var(--rouge-orleans);
  outline-offset: 2px;
}
/* Dans une bande sombre, le rouge tombe à ~3,2:1 sur le charbon : on passe
   l'indicateur en clair pour rester lisible. */
body.pilier .pilier-bande a:focus-visible,
body.pilier .pilier-bande button:focus-visible {
  outline-color: var(--clair);
}