/* v2.css — feuille unique du site (présentation mise en ligne en septembre
   2026, d'abord servie sous /v2/), d'après la maquette « Redesign homepage interface française »
   (Claude Design, septembre 2026).

   Chargée par includes/header.php sur toutes les pages, APRÈS la feuille
   propre à la page ($page_css) : la page Chronologie charge chronologie.css,
   que les variables ci-dessous recolorent.

   Dessin : papier crème, filets fins, serif EB Garamond pour le texte,
   capitales espacées en Helvetica pour les étiquettes, un seul rouge. */

/* EB Garamond servie par le site (fonts/, licence OFL : fonts/OFL.txt) et non
   par Google Fonts, qui recevrait l'adresse IP de chaque visiteur. Police
   variable : un fichier couvre les graisses 400 à 600 ; latin-ext pour les
   caractères plus rares. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/eb-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/eb-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb-garamond-italique-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb-garamond-italique-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #1A1814;
  --encre-douce: #2E2B25;
  --texte-doux: #4A463F;
  --gris: #6B655A;
  /* 4,8:1 sur --fond et 4,5:1 sur --fond-carte (WCAG AA, texte courant) ; la
     maquette donnait #9A9184, à 2,9:1. */
  --gris-clair: #736D62;
  --filet: #E3DED3;
  --filet-fort: #DCD7CC;
  --filet-bouton: #C9C2B4;
  --fond: #FAF8F4;
  --fond-carte: #F3F0EA;
  --fond-survol: #EDE9E0;
  --accent: #8C1D24;
  --or: #A08A5E;
  --nuit-filet: #34302A;
  --nuit-texte: #CFC9BC;
  --nuit-gris: #8A8276;

  --serif: "EB Garamond", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bord: clamp(16px, 4vw, 32px);
}

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

html { -webkit-text-size-adjust: 100%; }

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

a { color: var(--encre); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: #E4DCC9; }
img { max-width: 100%; height: auto; }

.vide { color: var(--gris); font-style: italic; }

/* ------------------------------------------------------------------ */
/* Page, trame et conteneur                                            */
/* ------------------------------------------------------------------ */

/* `clip` et non `hidden` : `overflow: hidden` ferait de ce bloc un conteneur
   de défilement, et la barre de navigation ne collerait plus. */
.v2-page {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

/* Trame de six colonnes, derrière tout le contenu : visible sur le papier,
   masquée par les sections à fond propre. */
.v2-trame {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.v2-trame div {
  width: calc(100% - 64px);
  max-width: 1216px;
  background-image: repeating-linear-gradient(to right, rgba(26, 24, 20, .045) 0 1px, transparent 1px calc(100% / 6));
}

.v2-conteneur {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--bord);
}

/* Pages intérieures : titre et texte commencent à la deuxième colonne de la
   trame ; les pages larges (galerie, carte) prennent toute la largeur. */
.v2-decale {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.v2-decale > * { grid-column: 2 / -1; min-width: 0; }
.v2-large > * { grid-column: 1 / -1; }

.v2-corps { padding-block: clamp(28px, 3.5vw, 48px) clamp(48px, 7vw, 88px); }

/* ------------------------------------------------------------------ */
/* Étiquettes, boutons                                                 */
/* ------------------------------------------------------------------ */

.v2-surtitre {
  margin: 0;
  font: 10px/1.4 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

.v2-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.v2-bouton {
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid var(--filet-bouton);
  color: var(--encre);
  font: 11px/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background-color .2s, border-color .2s, color .2s;
}

.v2-bouton:hover { border-color: var(--encre); color: var(--encre); }

.v2-bouton-plein {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--fond);
}

.v2-bouton-plein:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fond);
}

.v2-lien-souligne {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--filet-bouton);
  font: 10.5px/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.v2-legende {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  font: 10px/1.6 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}

.v2-legende-annee { color: var(--gris-clair); }

/* ------------------------------------------------------------------ */
/* Barre supérieure et en-tête                                         */
/* ------------------------------------------------------------------ */

.v2-barre-utile {
  border-bottom: 1px solid var(--filet);
  background: var(--fond-carte);
  font: 10.5px/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}

.v2-barre-utile .v2-conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 40px;
  padding-block: 8px;
}

.v2-barre-utile-liens { display: flex; align-items: center; gap: 22px; }
.v2-barre-utile a { color: var(--gris); }
.v2-barre-utile a:hover,
.v2-barre-utile a.v2-rouge { color: var(--accent); }
.v2-sep { width: 1px; height: 12px; background: #D8D2C5; }

.v2-entete .v2-conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: clamp(22px, 4vw, 34px);
  padding-bottom: clamp(18px, 3vw, 26px);
}

.v2-marque { display: flex; align-items: center; gap: 22px; color: var(--encre); }
.v2-marque:hover { color: var(--encre); }
.v2-marque img { flex: none; width: 62px; height: 62px; }
.v2-marque-filet { width: 1px; height: 52px; background: var(--filet-fort); }

.v2-marque-titre {
  display: block;
  font-family: var(--sans);
  font-size: clamp(14px, 3.2vw, 22px);
  letter-spacing: clamp(.14em, .9vw, .34em);
  line-height: 1.2;
  text-transform: uppercase;
}

.v2-marque-sous {
  display: block;
  margin-top: 8px;
  font: 10px/1.2 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gris);
}

.v2-annonce {
  margin: 0;
  text-align: right;
  font: 10.5px/2 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.v2-annonce strong { display: block; font-weight: 400; color: var(--encre); }

/* ------------------------------------------------------------------ */
/* Navigation                                                          */
/* ------------------------------------------------------------------ */

/* Les deux rangées collent ensemble en haut de la fenêtre. La barre reste dans
   le flux et ne change jamais de taille au défilement : la hauteur du document
   ne dépend donc pas de la position de défilement. */
.v2-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--encre);
}

.v2-nav ul { list-style: none; margin: 0; padding: 0; }

.v2-nav-principal {
  display: flex;
  flex-wrap: wrap;
  font: 11px/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.v2-nav-principal > li { position: relative; }

.v2-nav-principal > li > a {
  display: block;
  padding: 15px 26px;
  color: var(--texte-doux);
  border-bottom: 2px solid transparent;
}

.v2-nav-principal > li:first-child > a { padding-left: 0; }

.v2-nav-principal > li > a:hover {
  color: var(--encre);
  border-bottom-color: var(--encre);
}

.v2-nav-principal > li > a.actif {
  color: var(--encre);
  border-bottom-color: var(--accent);
}

/* Menu déroulant : collé sous son entrée (top: 100%), sans écart que la souris
   aurait à franchir. Au survol sur les appareils à souris, au clavier partout. */
.v2-nav-sous {
  display: none;
  position: absolute;
  top: 100%;
  left: 14px;
  z-index: 1;
  min-width: 12rem;
  padding: 8px 0 !important;
  background: var(--fond);
  border: 1px solid var(--encre);
}

.v2-nav-sous a {
  display: block;
  padding: 9px 18px;
  color: var(--texte-doux);
  font-size: 10.5px;
  letter-spacing: .16em;
}

.v2-nav-sous a:hover { background: var(--fond-carte); color: var(--accent); }
.v2-nav-sous a.actif { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .v2-nav-principal > li:hover > .v2-nav-sous { display: block; }
}

.v2-nav-principal > li:focus-within > .v2-nav-sous { display: block; }

.v2-nav-secondaire {
  border-top: 1px solid var(--filet);
  background: var(--fond-carte);
}

.v2-nav-secondaire ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  font: 10.5px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.v2-nav-secondaire a {
  display: block;
  padding: 11px 0;
  color: var(--gris);
  border-bottom: 1px solid transparent;
}

.v2-nav-secondaire a:hover { color: var(--encre); }
.v2-nav-secondaire a.actif { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* En-tête des pages intérieures                                       */
/* ------------------------------------------------------------------ */

.v2-tete-page { border-bottom: 1px solid var(--filet); }

.v2-tete-page .v2-conteneur {
  padding-top: clamp(22px, 3vw, 36px);
  padding-bottom: clamp(18px, 2.5vw, 28px);
}

.v2-tete-page h1 {
  margin: 8px 0 0;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.v2-tete-page h1::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 14px;
  background: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Texte rédigé (Markdown du CMS)                                      */
/* ------------------------------------------------------------------ */

.v2-texte {
  display: flow-root;
  max-width: 44rem;
  color: var(--encre-douce);
}

.v2-texte p { margin: 0 0 18px; text-wrap: pretty; }
.v2-texte > :last-child { margin-bottom: 0; }
.v2-texte strong { font-weight: 600; color: var(--encre); }

.v2-texte h2 {
  display: flow-root;
  margin: 40px 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--encre);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--encre);
}

.v2-texte h2:first-child { margin-top: 0; }

.v2-texte h3 {
  margin: 28px 0 8px;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  color: var(--encre);
}

.v2-texte ul,
.v2-texte ol { margin: 0 0 18px; padding-left: 1.2em; }
.v2-texte li { margin-bottom: 8px; }

.v2-texte a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.v2-texte a:hover { border-bottom-color: var(--accent); }
.v2-texte a:has(img) { border-bottom: 0; }

.v2-texte blockquote {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 1px solid var(--accent);
  color: var(--texte-doux);
  font-style: italic;
}

.v2-texte blockquote p:last-child { margin-bottom: 0; }

/* Illustrations posées dans le Markdown : <figure class="illustration">. */
.illustration { margin: 32px 0; }

.illustration img {
  display: block;
  padding: 14px;
  border: 1px solid var(--filet-fort);
  background: var(--fond-carte);
}

.illustration figcaption {
  margin-top: 14px;
  font: 10px/1.8 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

/* À placer AVANT le texte qu'elle accompagne : un flottant repousse ce qui le
   suit, jamais ce qui le précède. */
.illustration.droite {
  float: right;
  width: 15rem;
  margin: 6px 0 20px 40px;
}

.illustration.droite img { width: 100%; }

.avertissement {
  margin: 0 0 32px;
  padding: 18px 22px;
  border-top: 1px solid var(--encre);
  background: var(--fond-carte);
  font-size: 16.5px;
}

.avertissement p:last-child { margin-bottom: 0; }

.logo-societe {
  float: right;
  width: 14rem;
  max-width: 45%;
  margin: 4px 0 20px 40px;
}

/* Dates liées à la chronologie (includes/chronologie_liens.php). */
.v2-page a.lien-date {
  color: inherit;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
}

.v2-page a.lien-date:hover,
.v2-page a.lien-date:focus-visible {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* ------------------------------------------------------------------ */
/* Accueil : bandeau                                                   */
/* ------------------------------------------------------------------ */

.v2-hero { border-bottom: 1px solid var(--filet); }

.v2-hero-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.v2-hero-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 84px) clamp(0px, 5vw, 64px) clamp(44px, 6vw, 72px) 0;
  animation: v2-monte .8s ease both;
}

@keyframes v2-monte {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.v2-filet-titre {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 10.5px/1.4 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}

.v2-filet-titre::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.v2-hero h1 {
  margin: 26px 0 0;
  font-weight: 400;
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.v2-hero-chapeau {
  max-width: 42ch;
  margin: 28px 0 0;
  font-size: 21px;
  line-height: 1.55;
  color: var(--texte-doux);
  text-wrap: pretty;
}

.v2-hero-infos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 22px;
  margin-top: 36px;
  font: 11px/1.6 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.v2-hero-infos .v2-libelle { color: var(--gris-clair); }
.v2-hero-infos .v2-pleine { grid-column: 1 / -1; }

.v2-hero-visuel {
  display: flex;
  align-items: center;
  padding: clamp(8px, 4vw, 48px) 0 clamp(40px, 5vw, 48px) clamp(0px, 5vw, 64px);
  border-left: 1px solid var(--filet);
}

.v2-hero-visuel figure { width: 100%; margin: 0; }

.v2-cadre {
  padding: 14px;
  border: 1px solid var(--filet-fort);
  background: var(--fond-carte);
}

.v2-cadre img { display: block; width: 100%; }

/* ------------------------------------------------------------------ */
/* Accueil : chiffres                                                  */
/* ------------------------------------------------------------------ */

.v2-chiffres {
  border-bottom: 1px solid var(--encre);
  background: var(--fond-carte);
}

.v2-chiffres dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
  border-left: 1px solid var(--filet);
}

.v2-chiffres dl > div {
  padding: 20px;
  border-right: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

.v2-chiffres dt {
  font: 9.5px/1.4 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

.v2-chiffres dd {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.v2-chiffres dd span { font-size: 15px; color: var(--gris); }

/* ------------------------------------------------------------------ */
/* Accueil : sections                                                  */
/* ------------------------------------------------------------------ */

.v2-section {
  border-bottom: 1px solid var(--filet);
  scroll-margin-top: 60px;
}

.v2-section-claire { background: var(--fond-carte); }

.v2-section > .v2-conteneur { padding-block: clamp(56px, 8vw, 96px); }

.v2-section h2 {
  margin: 18px 0 0;
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 40px);
  line-height: 1.12;
  text-wrap: balance;
}

.v2-section-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: 44px;
}

.v2-section-intro {
  max-width: 34ch;
  margin: 0;
  font-size: 17px;
  color: var(--texte-doux);
  text-wrap: pretty;
}

/* La Société */
.v2-societe { display: flex; flex-wrap: wrap; gap: 40px 64px; }

.v2-societe-titre { flex: 0 0 220px; }
.v2-section .v2-societe-titre h2 { font-size: 34px; line-height: 1.15; }

.v2-societe-titre::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 24px;
  background: var(--accent);
}

.v2-texte.v2-societe-texte {
  flex: 1 1 420px;
  min-width: 0;
  max-width: none;
  column-width: 330px;
  column-gap: 48px;
}

.v2-texte .v2-societe-liens {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
  font: 10.5px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.v2-texte .v2-societe-liens a {
  padding-bottom: 3px;
  color: var(--encre);
  border-bottom: 1px solid var(--filet-bouton);
}

.v2-texte .v2-societe-liens a:hover { color: var(--accent); }

/* Volets du bicentenaire */
.v2-volets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  border-top: 1px solid var(--encre);
  border-left: 1px solid var(--filet-fort);
}

.v2-volets article {
  padding: 32px 26px 36px;
  border-right: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet-fort);
  transition: background-color .2s;
}

.v2-volets article:hover { background: var(--fond-survol); }

.v2-volet-numero {
  margin: 0;
  font: 10px/1.4 var(--sans);
  letter-spacing: .24em;
  color: var(--accent);
}

.v2-volets h3 {
  margin: 14px 0 12px;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
}

.v2-volets p { margin: 0; font-size: 16.5px; color: var(--texte-doux); text-wrap: pretty; }

.v2-volets .v2-mention {
  margin-top: 20px;
  font: 10px/1.6 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris-clair);
  font-variant-numeric: tabular-nums;
}

/* Agenda (accueil et page Événements) */
.v2-agenda { border-top: 1px solid var(--encre); }

.v2-agenda-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 28px;
  padding: 26px 12px 26px 0;
  border-bottom: 1px solid var(--filet);
}

.v2-agenda-date {
  flex: 0 0 150px;
  margin: 0;
  font: 11px/1.6 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.v2-agenda-corps { flex: 1 1 300px; min-width: 0; }

.v2-agenda h3 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
}

.v2-agenda-corps p {
  max-width: 62ch;
  margin: 0 0 8px;
  font-size: 16.5px;
  color: var(--texte-doux);
  text-wrap: pretty;
}

.v2-agenda-corps p:last-child { margin-bottom: 0; }
.v2-agenda-corps a { color: var(--accent); }

.v2-agenda-passe .v2-agenda-date { color: var(--gris-clair); }
.v2-agenda-passe h3 { font-size: 21px; color: var(--texte-doux); }

.v2-evenements { max-width: 52rem; }

.v2-titre-liste {
  margin: 72px 0 24px;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
}

/* Biographie, sur fond sombre */
.v2-nuit {
  background: var(--encre);
  color: var(--fond-survol);
}

.v2-section.v2-nuit > .v2-conteneur { padding-block: 0; }

.v2-bio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}

.v2-bio-visuel {
  display: flex;
  align-items: center;
  padding: clamp(52px, 7vw, 88px) clamp(0px, 4vw, 56px) clamp(40px, 6vw, 88px) 0;
  border-right: 1px solid var(--nuit-filet);
}

.v2-bio-visuel figure { width: 100%; margin: 0; }
.v2-bio-visuel img { display: block; width: 100%; }
.v2-nuit .v2-legende { color: var(--nuit-gris); }

.v2-bio-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 88px) 0 clamp(52px, 7vw, 88px) clamp(0px, 4vw, 56px);
}

.v2-nuit .v2-surtitre { color: var(--or); }

.v2-section .v2-bio h2 {
  margin-top: 20px;
  font-size: clamp(34px, 3.4vw, 48px);
}

.v2-bio-chapeau {
  max-width: 58ch;
  margin: 24px 0 0;
  font-size: 19px;
  color: var(--nuit-texte);
  text-wrap: pretty;
}

.v2-bio-complement {
  max-width: 58ch;
  margin: 18px 0 0;
  font-size: 17px;
  color: #9C9486;
  text-wrap: pretty;
}

.v2-reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--nuit-filet);
  border-left: 1px solid var(--nuit-filet);
}

.v2-reperes li {
  padding: 20px 16px 22px;
  border-right: 1px solid var(--nuit-filet);
  border-bottom: 1px solid var(--nuit-filet);
}

.v2-reperes li::before {
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  background: var(--or);
}

.v2-repere-annee {
  display: block;
  margin-top: 12px;
  font-size: 22px;
  line-height: 1.3;
  color: var(--fond-survol);
  font-variant-numeric: tabular-nums;
}

a.v2-repere-annee:hover { color: var(--or); }

.v2-repere-libelle {
  display: block;
  margin-top: 6px;
  font: 10px/1.7 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nuit-gris);
}

.v2-bouton.v2-bouton-nuit { border-color: #4A443B; color: var(--fond-survol); }
.v2-bouton.v2-bouton-nuit:hover { border-color: var(--or); color: var(--fond); }

/* Pièces */
.v2-pieces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 32px;
}

.v2-pieces figure { margin: 0; }

.v2-piece-cadre {
  display: block;
  aspect-ratio: 4 / 5;
  padding: 24px;
  border: 1px solid var(--filet);
  background: var(--fond-carte);
  transition: border-color .2s;
}

.v2-piece-cadre:hover { border-color: var(--filet-bouton); }

.v2-piece-cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Adhésion : dernier bloc, son filet de pied est celui du pied de page. */
#adhesion { border-bottom: 0; }

.v2-section > .v2-adhesion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 64px;
  align-items: start;
  padding-block: clamp(52px, 7vw, 88px);
}

.v2-adhesion-texte {
  max-width: 44ch;
  margin: 20px 0 30px;
  color: var(--texte-doux);
}

.v2-cotisations { margin: 0; border-top: 1px solid var(--encre); }

.v2-cotisations > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--filet-fort);
}

.v2-cotisations > div:last-child { border-bottom: 0; }

.v2-cotisations dt { font-size: 23px; line-height: 1.3; }

.v2-cotisations dt span {
  display: block;
  margin-top: 6px;
  font: 10.5px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}

.v2-cotisations dd {
  margin: 0;
  font-size: 26px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Galerie, carte, chronologie                                         */
/* ------------------------------------------------------------------ */

.galerie { columns: 3 17rem; column-gap: 32px; }

.galerie figure { margin: 0 0 32px; break-inside: avoid; }

.galerie img {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--filet-fort);
  background: var(--fond-carte);
  cursor: zoom-in;
}

.galerie figcaption {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre-douce);
}

.galerie figcaption small {
  display: block;
  margin-top: 8px;
  font: 10px/1.8 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

.galerie figcaption small a { color: var(--accent); }

/* Loupe créée par site.js au clic sur une image de la galerie. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: rgba(26, 24, 20, .94);
}

.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; }

.lightbox-fermer {
  position: absolute;
  top: .8rem;
  right: 1rem;
  padding: .3rem .7rem;
  border: 0;
  background: none;
  color: var(--fond);
  font: 2.2rem/1 var(--sans);
  cursor: pointer;
}

body.lightbox-ouvert { overflow: hidden; }

.lieux-carte-frame {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 28rem;
  border: 1px solid var(--filet-fort);
}

/* Chronologie : chronologie.css porte la mise en page et les filtres ; la
   frise elle-même est dessinée ici. */
.chrono-filtres { font-family: var(--sans); }

ol.chronologie {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--filet-bouton);
}

ol.chronologie li {
  position: relative;
  padding: 0 0 1.6rem 1.6rem;
}

ol.chronologie li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: .5rem;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

ol.chronologie .chrono-date {
  display: block;
  margin-bottom: .15rem;
  font: 11px/1.6 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Pied de page                                                        */
/* ------------------------------------------------------------------ */

.v2-pied { border-top: 1px solid var(--encre); }

.v2-pied-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 48px;
  padding-top: clamp(44px, 6vw, 64px);
  padding-bottom: 28px;
}

.v2-pied img { display: block; width: 52px; height: 52px; }

.v2-pied-adresse {
  margin: 20px 0 0;
  font: 10.5px/2.1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}

.v2-pied-titre {
  margin: 0 0 14px;
  font: 10px/1.4 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

.v2-pied ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16.5px;
  line-height: 1.4;
}

.v2-pied ul a { color: var(--encre-douce); }
.v2-pied ul a:hover { color: var(--accent); }

.v2-pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 40px;
  border-top: 1px solid var(--filet);
  font: 10px/1.6 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

.v2-pied-bas a { color: var(--gris-clair); }
.v2-pied-bas-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.v2-pied-bas button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris-clair);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.v2-pied-bas button:hover { color: var(--accent); }
.v2-pied-bas a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Écrans moyens et petits                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 64rem) {
  .v2-decale > * { grid-column: 1 / -1; }
}

/* Colonnes empilées : les filets verticaux entre elles n'ont plus de sens. */
@media (max-width: 50rem) {
  .v2-hero-visuel { padding-left: 0; border-left: 0; }
  .v2-bio-visuel { padding-right: 0; border-right: 0; }
  .v2-bio-texte { padding-left: 0; }
}

/* Même seuil que chronologie.css, où la barre de filtres cesse de coller :
   sur un téléphone, la navigation défile avec la page. */
@media (max-width: 34rem) {
  .v2-nav { position: static; }
  .v2-nav-principal > li > a { padding: 12px 18px 12px 0; }
  .v2-annonce { text-align: left; }

  .illustration.droite,
  .logo-societe {
    float: none;
    display: block;
    width: auto;
    max-width: 15rem;
    margin: 28px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hero-texte { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Accessibilité, consentement                                         */
/* ------------------------------------------------------------------ */

/* Invisible à l'écran, lu par les lecteurs d'écran et les moteurs : le <h1> de
   l'accueil quand le bandeau est masqué (index.php). */
.v2-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement (includes/header.php) : premier arrêt de la touche Tab,
   hors de l'écran tant qu'il n'a pas le focus ; il mène à <main id="contenu">,
   qui s'arrête sous la navigation collante. */
.lien-evitement {
  position: absolute;
  left: var(--bord);
  top: -10rem;
  z-index: 200;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font: 12px/1.6 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lien-evitement:focus {
  top: 12px;
  outline: 2px solid var(--encre);
  outline-offset: 2px;
}

#contenu { scroll-margin-top: var(--hauteur-nav, 60px); }

/* Bouton « Modifier mon choix » de la page Confidentialité. */
button.v2-bouton { background: transparent; cursor: pointer; }

/* Bandeau de consentement (consentement.js) : petite carte en bas à gauche,
   sans voile ni blocage ; au-dessus de la navigation (z-index 20), sous la
   loupe de la galerie (z-index 100). */
.consentement {
  position: fixed;
  left: var(--bord);
  bottom: var(--bord);
  z-index: 50;
  max-width: 360px;
  padding: 14px 16px;
  background: var(--fond);
  border: 1px solid var(--filet-fort);
  box-shadow: 0 6px 24px rgba(26, 24, 20, .08);
  font: 13px/1.5 var(--sans);
  color: var(--encre-douce);
}

.consentement p { margin: 0 0 12px; }

.consentement a {
  color: var(--gris);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consentement-boutons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.consentement button {
  padding: 7px 14px;
  border: 1px solid var(--filet-bouton);
  background: transparent;
  color: var(--encre);
  font: 10px/1.6 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.consentement button:hover,
.consentement button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 34rem) {
  .consentement { right: var(--bord); max-width: none; }
}

/* ------------------------------------------------------------------ */
/* Impression                                                          */
/* ------------------------------------------------------------------ */

/* Sur papier, le texte seul, en noir sur blanc (les sections sombres aussi) :
   trame, barre utile, navigation, filtres de la chronologie, carte, bandeau de
   consentement et boutons disparaissent, et l'adresse d'un lien externe
   s'écrit après lui. */
@media print {
  *,
  *::before,
  *::after {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .v2-trame,
  .v2-barre-utile,
  .v2-nav,
  .lien-evitement,
  .consentement,
  .v2-pied button,
  .chrono-filtres,
  .chrono-rien,
  iframe { display: none !important; }

  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }

  figure,
  .v2-agenda-ligne,
  li.chrono-evt { break-inside: avoid; }

  h2,
  h3 { break-after: avoid; }
}