/* ============================================================
   tirage.ch — theme.css
   Composants + fonds de sections + layouts du page_builder.
   Porté de design_reference/styles.css, enrichi des styles
   précédemment inline dans les .jsx. Chargé après Bootstrap.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'ss03', 'cv11';
  letter-spacing: -0.005em;
}

/* Typo helpers */
.serif { font-family: var(--serif); }
.sans  { font-family: var(--sans); }
.mono  { font-family: var(--mono); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #595959; /* assombri vs --ink-muted pour passer WCAG AA à 11px (≈6:1) */
  font-weight: 500;
  margin: 0;
}
.eyebrow-accent { color: var(--accent); }

.hairline { border: 0; border-top: var(--hairline); margin: 0; }
.hairline-strong { border: 0; border-top: var(--hairline-strong); margin: 0; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms cubic-bezier(.16,.84,.32,1), transform 900ms cubic-bezier(.16,.84,.32,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lift { transition: none; }
  * { scroll-behavior: auto !important; }
}
/* À l'impression : ne jamais masquer le contenu d'apparition. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Hover lift */
.lift { transition: transform 360ms cubic-bezier(.16,.84,.32,1); }
.lift:hover { transform: translateY(-4px); }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--paper); }

img { max-width: 100%; height: auto; }

/* ============================================================
   Logo wordmark
   ============================================================ */
.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.logo-mark .word { font-size: 22px; }
.logo-mark .word .dot { color: var(--accent); }
/* Footer bordeaux : wordmark en blanc (lisibilité). */
.site-footer .logo-mark { color: var(--paper); }
.site-footer .logo-mark .word .dot { color: var(--paper); }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 246, 246, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--hairline);
}
.site-header > .inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 18px var(--content-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav > li { margin: 0; padding: 0; }
.site-nav a {
  font-family: var(--sans);
  font-size: 14px;
  white-space: nowrap;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color 240ms;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); }
.site-nav a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
}
.site-nav .has-sub { position: relative; }
.site-nav .has-sub > a { cursor: default; }
/* Pont invisible sur l'espace entre le lien et le sous-menu (sinon il se ferme au survol du vide) */
.site-nav .has-sub::after { content: ''; position: absolute; left: 0; right: -20px; top: 100%; height: 16px; }
.site-nav .has-sub:hover .submenu,
.site-nav .has-sub:focus-within .submenu,
.site-nav .has-sub.open .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  min-width: 240px;
  background: var(--paper);
  border: var(--hairline);
  padding: 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 220ms cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 18px 40px -20px rgba(51,51,51,0.18);
}
.submenu li { margin: 0; }
.submenu a {
  display: block;
  padding: 10px 22px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.submenu a:hover { background: var(--paper-soft); color: var(--ink); }
.submenu a::after { display: none; }

.lang-switch {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.lang-switch .active { color: var(--ink); }
.lang-switch span { opacity: 0.4; }

.cta-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--ink); background: transparent;
  cursor: pointer;
  transition: all 280ms cubic-bezier(.2,.7,.3,1);
}
.cta-pill:hover { background: var(--ink); color: var(--paper); }
.cta-pill .arrow { transition: transform 280ms; }
.cta-pill:hover .arrow { transform: translateX(4px); }

/* Burger (mobile) */
.nav-toggle {
  display: none;
  background: transparent; border: 0; padding: 8px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 24px; height: 1.5px; background: currentColor; margin-bottom: 6px;
}
.nav-toggle span:last-child { margin-bottom: 0; }

/* Offcanvas mobile */
.tirage-offcanvas { background: var(--paper); --bs-offcanvas-width: min(86vw, 380px); }
.tirage-offcanvas .offcanvas-header { padding: 22px 24px; border-bottom: var(--hairline); }
.tirage-offcanvas .offcanvas-body { padding: 24px; }
.mobile-nav, .mobile-sub { list-style: none; margin: 0; padding: 0; }
.mobile-nav > li { padding: 14px 0; border-bottom: var(--hairline); }
.mobile-nav > li > a,
.mobile-nav > li > .mobile-parent { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.mobile-nav > li > .mobile-parent { color: var(--bs-heading-color); } /* parent = en-tête de groupe, non cliquable */
.mobile-sub { margin-top: 10px; }
.mobile-sub li { padding: 7px 0; }
.mobile-sub a { font-size: 15px; color: var(--ink-muted); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer;
  transition: all 280ms cubic-bezier(.2,.7,.3,1);
  letter-spacing: 0.01em;
  border-radius: 0;
  text-align: left;
  width: auto;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-block { display: inline-flex; width: 100%; justify-content: space-between; }
.btn .arrow { transition: transform 280ms; }
.btn:hover .arrow { transform: translateX(4px); }
/* Icônes non-flèches (enveloppe header, cible hero) : pas de glissement. */
.header-cta:hover .arrow,
.btn:hover .arrow.is-static { transform: none; }
/* Paire de boutons des layouts media_text (cta + cta_2). */
.mt-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }

/* Lien texte (mono majuscules) */
.link-mono {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink);
}
.link-mono.accent { color: var(--accent); }
.link-mono.underline { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--accent);
  color: var(--paper);
  padding: 80px var(--content-pad) 36px;
}
.site-footer .inner { max-width: var(--content-max); margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(246,246,246,0.22);
}
.footer-grid h4 {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(246,246,246,0.95);
  margin: 0 0 18px; font-weight: 500;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { font-size: 13.5px; color: rgba(246,246,246,0.82); transition: color 240ms; }
.footer-grid a:hover { color: var(--paper); }
.footer-intro { color: rgba(246,246,246,0.7); font-size: 14px; line-height: 1.6; margin: 22px 0 0; max-width: 320px; }
.footer-bottom {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-top: 28px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: rgba(246,246,246,0.65);
}
.footer-bottom span:nth-child(2) { text-align: center; }
.footer-bottom span:nth-child(3) { text-align: right; }
.footer-credit {
  text-align: center; margin-top: 28px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(246,246,246,0.5);
}
.footer-credit a { color: rgba(246,246,246,0.5); }
.footer-credit a:hover { color: var(--paper); }

/* ============================================================
   Cards
   ============================================================ */
.event-card { display: block; position: relative; cursor: pointer; background: var(--paper); }
.event-card .cover { aspect-ratio: 4/5; overflow: hidden; position: relative; background: var(--paper-deep); }
.event-card .cover img,
.event-card .cover .ph-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms cubic-bezier(.2,.7,.3,1); }
.event-card:hover .cover img,
.event-card:hover .cover .ph-img { transform: scale(1.04); }
.event-card .meta { padding: 18px 0 0; }
.event-card h3 {
  font-family: var(--serif); font-size: 30px; margin: 8px 0 8px;
  font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
}
.event-card p { margin: 0; }
.event-card .meta p { color: var(--ink-muted); font-size: 15.5px; line-height: 1.55; }

.news-card {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px;
  padding: 28px 0; border-top: var(--hairline);
  cursor: pointer; transition: background 320ms;
}
.news-card:hover { background: rgba(153, 1, 0, 0.04); }
.news-card .cover { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-deep); }
.news-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.news-card h3 {
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  letter-spacing: -0.015em; margin: 4px 0 10px; color: var(--ink);
}
.news-card p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.news-card .news-meta { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.news-card .news-meta .sep { width: 16px; height: 1px; background: var(--ink-muted); }

/* Portrait card (Conseil) */
.portrait-card .cover { aspect-ratio: 4/5; margin-bottom: 16px; background: var(--paper-deep); }
.portrait-card h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 8px 0 6px; letter-spacing: -0.01em; }
.portrait-card p { color: var(--ink-muted); font-size: 14px; line-height: 1.5; margin: 0; }

/* Tile (image cliquable seule) */
.tile-card { display: block; position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--paper-deep); }
.tile-card img { width: 100%; height: 100%; object-fit: cover; }

/* Galerie : carte blanche */
.gal-card { border: var(--hairline); }
.gal-card .meta { padding: 18px 22px 24px; }

/* Galerie : cartes-index (Samedi / Dimanche / Cortège & cérémonie).
   Cover paysage 3/2 + libellé « Voir la galerie » en mono accent, comme la maquette. */
.page-galerie .card-grid .event-card .cover { aspect-ratio: 3/2; }
.page-galerie .card-grid .event-card p {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-top: 6px !important;
}

/* ============================================================
   Placeholder image
   ============================================================ */
.ph-img {
  width: 100%; height: 100%; min-height: 100%;
  background:
    repeating-linear-gradient(135deg,
      rgba(51,51,51,0.04) 0, rgba(51,51,51,0.04) 1px, transparent 1px, transparent 9px),
    linear-gradient(160deg, #E8E8E8, #F6F6F6);
  display: flex; align-items: flex-end; padding: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ph-img.dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(246,246,246,0.04) 0, rgba(246,246,246,0.04) 1px, transparent 1px, transparent 9px),
    linear-gradient(160deg, #333333, #4a4a4a);
  color: rgba(246,246,246,0.6);
}
.ph-img.archive { filter: grayscale(1) contrast(0.95); }

/* Cadres image */
.media-frame { position: relative; overflow: hidden; background: var(--paper-deep); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ratio-4-3 { aspect-ratio: 4/3; }
.ratio-4-5 { aspect-ratio: 4/5; }
.ratio-16-9 { aspect-ratio: 16/9; }
.ratio-16-7 { aspect-ratio: 16/7; }
.ratio-21-9 { aspect-ratio: 21/9; }

/* media_text · variante pleine largeur (ex. hero d'Histoire) */
.media-full .media-frame { width: 100%; }
.media-full .mf-caption { max-width: 760px; margin: 24px auto 0; }
.ratio-21-9 { aspect-ratio: 21/9; }
.img-warm img { filter: saturate(0.85) contrast(1.02); }
.img-archive img { filter: grayscale(1) contrast(0.96) brightness(0.98); }

/* ============================================================
   Quote / pullquote
   ============================================================ */
.pullquote {
  font-family: var(--serif); font-size: 38px; line-height: 1.2; font-weight: 400;
  letter-spacing: -0.015em; color: var(--ink); font-style: normal;
  border-left: 2px solid var(--accent); padding: 8px 0 8px 32px; margin: 0 auto;
  max-width: 760px;
}
.pullquote.no-rule { border-left: none; padding: 0; }
.pullquote cite {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 24px;
}

/* Accent inline (mot d'accent) — JAMAIS d'italique */
.accent { color: var(--accent); font-style: normal; }

/* ============================================================
   Corps de texte toujours en Inter, même si var(--serif) est demandé
   ============================================================ */
.tirage-page p,
.tirage-page li,
.tirage-page blockquote,
.tirage-page cite,
.site-footer p { font-family: var(--sans) !important; }
/* Exception : la citation (pullquote) s'affiche en Ultra ; son cite reste en Inter. */
.tirage-page blockquote.pullquote { font-family: var(--serif) !important; }

/* Line-height serré sur les grands titres */
.tirage-page h1,
.tirage-page h2 { line-height: 1; }

.tirage-page { background: var(--paper); font-family: var(--sans); color: var(--ink); }

/* Prose éditoriale (sous-titres en Ultra, corps en Inter) */
.prose-serif { font-family: var(--serif); font-size: 21px; line-height: 1.55; color: var(--ink-soft); }
.prose-serif p { font-size: inherit; line-height: inherit; margin: 0 0 28px; }
.prose-serif p:last-child { margin-bottom: 0; }

/* ============================================================
   Landing rows (pages d'atterrissage / list_rows link)
   ============================================================ */
.landing-row {
  transition: background 320ms cubic-bezier(.2,.7,.3,1), padding-left 320ms cubic-bezier(.2,.7,.3,1);
}
.landing-row:hover {
  background: rgba(153, 1, 0, 0.04);
  padding-left: 16px; padding-right: 16px;
  margin-left: -16px; margin-right: -16px;
}
.landing-row .landing-arrow { transition: transform 320ms cubic-bezier(.2,.7,.3,1); }
.landing-row:hover .landing-arrow { transform: translateX(6px); }

/* ============================================================
   Anchor rail (Programme)
   ============================================================ */
.anchor-rail {
  position: sticky; top: 73px; z-index: 40;
  background: rgba(246, 246, 246, 0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--hairline);
}
.anchor-rail .inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad);
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.anchor-rail .inner::-webkit-scrollbar { display: none; }
.anchor-rail a {
  white-space: nowrap; padding: 18px 0; margin-right: 32px;
  font-size: 14px; font-weight: 500; color: var(--ink-muted);
  border-bottom: 2px solid transparent; transition: color 220ms;
}
.anchor-rail a:hover { color: var(--ink); }
.anchor-rail a.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ============================================================
   Honor / list rows
   ============================================================ */
.honor-row {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 32px;
  align-items: baseline; padding: 22px 0; border-bottom: var(--hairline);
}

/* ============================================================
   FONDS DE SECTIONS — système réutilisable
   ============================================================ */
.cible { position: relative; --cx: 100%; --cy: 118%; --ring: rgba(51, 51, 51, 0.06); }
.cible::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at var(--cx) var(--cy),
    transparent 0 78px, var(--ring) 78px 80px, transparent 80px 80px);
}
.cible > * { position: relative; z-index: 1; }

.cor-hg { --cx: 0%;   --cy: -18%; }
.cor-hd { --cx: 100%; --cy: -18%; }
.cor-bg { --cx: 0%;   --cy: 118%; }
.cor-bd { --cx: 100%; --cy: 118%; }

.on-dark   { --ring: rgba(246, 246, 246, 0.06); }
.on-accent { --ring: rgba(246, 246, 246, 0.085); }

.fond-anthracite { background: var(--ink) !important; }
.fond-bordeaux   { background: var(--accent) !important; }
.fond-gris       { background: var(--paper-deep) !important; }

.fond-anthracite, .fond-bordeaux,
.fond-anthracite h1, .fond-anthracite h2, .fond-anthracite h3, .fond-anthracite h4,
.fond-anthracite p,  .fond-anthracite li, .fond-anthracite cite, .fond-anthracite blockquote,
.fond-anthracite span, .fond-anthracite a, .fond-anthracite strong, .fond-anthracite em,
.fond-bordeaux h1, .fond-bordeaux h2, .fond-bordeaux h3, .fond-bordeaux h4,
.fond-bordeaux p,  .fond-bordeaux li, .fond-bordeaux cite, .fond-bordeaux blockquote,
.fond-bordeaux span, .fond-bordeaux a, .fond-bordeaux strong, .fond-bordeaux em {
  color: var(--paper) !important;
}
.fond-anthracite .eyebrow, .fond-bordeaux .eyebrow,
.fond-anthracite .eyebrow-accent, .fond-bordeaux .eyebrow-accent {
  color: rgba(246, 246, 246, 0.72) !important;
}
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.on-dark p, .on-dark li, .on-dark cite, .on-dark blockquote,
.on-dark span, .on-dark a, .on-dark strong, .on-dark em, .on-dark div {
  color: var(--paper) !important;
}
.on-dark .eyebrow, .on-dark .eyebrow-accent,
.fond-anthracite .eyebrow, .fond-anthracite .eyebrow-accent { color: rgba(246, 246, 246, 0.92) !important; }

/* L'accent inline doit rester bordeaux SAUF sur fond sombre (où tout passe en clair) */
.tirage-page .accent { color: var(--accent); }
.fond-anthracite .accent, .fond-bordeaux .accent, .on-dark .accent { color: var(--paper) !important; }

/* Boutons sur fonds sombres (bordeaux/anthracite/on-dark) : bouton clair,
   texte accent. !important + sélecteur enfant pour battre la règle globale
   « .fond-bordeaux a/span { color: paper !important } » (sinon texte invisible). */
.fond-bordeaux .btn, .fond-anthracite .btn, .on-dark .btn {
  background: var(--paper) !important; border-color: var(--paper) !important;
}
.fond-bordeaux .btn, .fond-bordeaux .btn *,
.fond-anthracite .btn, .fond-anthracite .btn *,
.on-dark .btn, .on-dark .btn * { color: var(--accent) !important; }

.fond-bordeaux .btn:hover, .fond-anthracite .btn:hover, .on-dark .btn:hover {
  background: transparent !important; border-color: var(--paper) !important;
}
.fond-bordeaux .btn:hover, .fond-bordeaux .btn:hover *,
.fond-anthracite .btn:hover, .fond-anthracite .btn:hover *,
.on-dark .btn:hover, .on-dark .btn:hover * { color: var(--paper) !important; }

/* ============================================================
   HEADER ROUGE — bordeaux, contenu blanc
   ============================================================ */
.site-header.header-red { background: var(--accent); border-bottom: 1px solid rgba(246, 246, 246, 0.18); }
.header-red .logo-mark { color: var(--paper); }
.header-red .logo-mark .word .dot { color: var(--paper); }
/* Liens de 1er niveau seulement (pas les liens du sous-menu) */
.header-red .site-nav > li > a { color: var(--paper); }
.header-red .site-nav > li > a:hover { color: var(--paper); }
.header-red .site-nav > li > a.active { color: var(--paper); }
.header-red .site-nav > li > a.active::after { background: var(--paper); }
/* Sous-menu (fond clair) : texte sombre lisible, hover en rouge #990100 */
.header-red .submenu a { color: var(--ink-soft); }
.header-red .submenu a:hover { color: var(--accent); background: rgba(153, 1, 0, 0.06); }
.header-red .nav-toggle { color: var(--paper); }
.header-red .btn { background: var(--paper); color: var(--accent); border-color: var(--paper); }
.header-red .btn:hover { background: transparent; color: var(--paper); border-color: var(--paper); }

/* ============================================================
   WRAPPER DE SECTION + ESPACEMENTS (page_builder)
   ============================================================ */
.flex-section { position: relative; }
.flex-section > .inner {
  max-width: var(--content-max); margin: 0 auto;
  padding-inline: var(--content-pad);
}
/* Pleine largeur (hero fullbleed) : pas de gouttières */
.flex-section.is-fullbleed > .inner { max-width: none; padding-inline: 0; }

.sec-pt-none { padding-top: var(--sec-none); }
.sec-pt-s    { padding-top: var(--sec-s); }
.sec-pt-m    { padding-top: var(--sec-m); }
.sec-pt-l    { padding-top: var(--sec-l); }
.sec-pt-xl   { padding-top: var(--sec-xl); }
.sec-pb-none { padding-bottom: var(--sec-none); }
.sec-pb-s    { padding-bottom: var(--sec-s); }
.sec-pb-m    { padding-bottom: var(--sec-m); }
.sec-pb-l    { padding-bottom: var(--sec-l); }
.sec-pb-xl   { padding-bottom: var(--sec-xl); }

/* En-tête de section partagé (eyebrow + heading) */
.sec-head { margin-bottom: 48px; }
.sec-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1; letter-spacing: -0.02em; font-weight: 400;
  margin: 18px 0 0; text-wrap: balance;
}
.sec-head .eyebrow { display: block; }

/* En-tête "split" : titre à gauche, intro à droite */
.sec-head-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
  margin-bottom: 48px;
}
.sec-head-split .intro { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-muted); margin: 0; }

/* ============================================================
   LAYOUT : hero
   ============================================================ */
.hero-rail {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px;
  padding-bottom: 32px; border-bottom: var(--hairline);
}
.hero-rail .e-center { text-align: center; }
.hero-rail .e-right { text-align: right; }
.hero-rail.single { display: block; }

/* page_header : surtitre + filet, grand titre, filet de bas (cf. design réf.) */
.hero-pageheader { padding-bottom: 40px; border-bottom: var(--hairline); }
/* Espace uniforme sous l'en-tête de page, quel que soit l'espacement de la 1re section */
.has-pageheader + .flex-section { padding-top: 64px !important; }
.hero-pageheader .hero-title {
  font-family: var(--serif);
  font-size: clamp(38px, 5.5vw, 82px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 400;
  margin: 40px 0 0; text-wrap: balance;
}
.hero-pageheader .hero-intro { font-family: var(--serif); font-size: 21px; line-height: 1.55; color: var(--ink-soft); margin: 32px 0 0; max-width: 60ch; }

/* fullbleed */
.hero-fullbleed { position: relative; min-height: 92vh; overflow: hidden; background: var(--ink); display: flex; flex-direction: column; }
.hero-fullbleed .hero-bg { position: absolute; inset: 0; }
/* le cadre .media-frame produit par tirage_image doit remplir tout le hero */
.hero-fullbleed .hero-bg .media-frame { position: absolute; inset: 0; background: transparent; }
.hero-fullbleed .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.02); }
.hero-fullbleed .hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(51,51,51,0.55) 0%, rgba(51,51,51,0.25) 40%, rgba(51,51,51,0.85) 100%);
}
.hero-fullbleed .hero-content {
  /* En flux (plus d'absolu) : la section grandit avec le contenu sur les
     écrans peu hauts au lieu de couper le texte (overflow hidden). */
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: 100%; padding: 56px var(--content-pad); max-width: var(--content-max); margin: 0 auto;
}
.hero-fullbleed .hero-eyebrow { color: rgba(246,246,246,0.85); font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 24px; }
.hero-fullbleed .hero-title {
  font-family: var(--serif); font-size: clamp(50px, 9vw, 144px);
  line-height: 0.94; letter-spacing: -0.035em; font-weight: 400; color: var(--paper);
  margin: 0; max-width: 14ch;
}
.hero-fullbleed .hero-intro { color: rgba(246,246,246,0.8); font-size: 18px; max-width: 520px; margin: 36px 0 18px; line-height: 1.55; }
.hero-fullbleed .hero-intro.no-cta { margin-bottom: 0; }
.hero-fullbleed .hero-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
/* Bouton du hero accueil : blanc (sur la photo), texte sombre ; hover en contour blanc */
.hero-fullbleed .hero-ctas .btn { background: #fff; color: var(--ink); border-color: #fff; }
.hero-fullbleed .hero-ctas .btn:hover { background: transparent; color: #fff; border-color: #fff; }
.hero-fullbleed .hero-ctas .btn:hover * { color: #fff; }
.hero-fullbleed .hero-ctas .btn.is-secondary { background: transparent; color: #fff; }
.hero-fullbleed .hero-ctas .btn.is-secondary:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-fullbleed .hero-ctas .btn.is-secondary:hover * { color: var(--ink); }
.hero-band {
  position: relative; padding: 28px 0;
  border-bottom: 1px solid rgba(51,51,51,0.10); background: var(--paper);
}
/* contenu du bandeau dans .container (aligné sur la grille du site) */
.hero-band .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hero-band .band-label { font-family: var(--serif); font-size: 22px; color: var(--accent); }

/* emblem */
.hero-emblem { text-align: center; }
.hero-emblem .hero-eyebrow { display: block; margin-bottom: 60px; }
.hero-emblem .emblem-svg { display: flex; justify-content: center; margin-bottom: 40px; }
.hero-emblem .hero-title { font-family: var(--serif); font-size: clamp(64px, 11vw, 168px); line-height: 0.86; letter-spacing: -0.035em; font-weight: 400; margin: 0; }
.hero-emblem .hero-foot { display: block; margin-top: 36px; }

/* typo */
.hero-typo .hero-title { font-family: var(--serif); font-size: clamp(120px, 22vw, 360px); line-height: 0.82; letter-spacing: -0.05em; font-weight: 400; margin: 48px 0 0; color: var(--ink); }
.hero-typo .typo-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding: 60px 0 0; border-top: var(--hairline); margin-top: 48px; }
.hero-typo .typo-grid h3 { font-family: var(--serif); font-size: 32px; font-weight: 400; margin: 12px 0 16px; letter-spacing: -0.01em; }
.hero-typo .typo-note { font-family: var(--serif); font-size: 22px; line-height: 1.35; margin: 14px 0 0; color: var(--ink-soft); text-wrap: pretty; }

/* Countdown */
.countdown { display: flex; gap: 48px; align-items: flex-start; }
.countdown .cd-cell { display: flex; flex-direction: column; gap: 6px; }
.countdown .cd-num { font-family: var(--serif); font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.countdown.light { gap: 32px; align-items: baseline; }
.countdown.light .cd-num { font-size: 36px; color: var(--accent); }

/* Stats (hero typo / text_section) */
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 56px; padding: 32px 0; border-top: var(--hairline); border-bottom: var(--hairline);
}
.stats-band .stat-num { font-family: var(--serif); font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.stats-band .stat-label { margin-top: 10px; }

/* ============================================================
   LAYOUT : text_section
   ============================================================ */
.ts-eyebrow { display: block; margin-bottom: 16px; }
.text-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.text-split .ts-head .sec-title { margin-top: 0; }
.text-centered { max-width: 900px; margin: 0 auto; text-align: center; }
/* colonne de lecture étroite et centrée (long-read type Histoire) */
.text-single { max-width: 760px; margin: 0 auto; }
/* Largeur du contenu réglable (champ ACF « content_width » du layout single) */
.text-single.tw-narrow { max-width: 620px; }
.text-single.tw-normal { max-width: 760px; }
.text-single.tw-wide   { max-width: 960px; }
.text-single.tw-full   { max-width: 100%; }
.text-body { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.text-body p { margin: 0 0 24px; }
.text-body p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT : media_text
   ============================================================ */
.media-text { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.media-text.img-right { grid-template-columns: 1fr 1.2fr; }
.media-text.img-right .mt-media { order: 1; }
.media-text .mt-body { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.media-text .mt-body p { margin: 0 0 20px; }
.media-text .mt-data { border-top: var(--hairline-strong); padding-top: 22px; margin-top: 28px; }
/* Mini-grille de données : une seule ligne (les entrées ne s'empilent pas) */
.mt-data-grid { display: flex; flex-wrap: nowrap; gap: 28px; align-items: baseline; }
.mt-data-grid > div { flex: 0 1 auto; min-width: 0; }
.mt-data-grid .dv { font-family: var(--serif); font-size: 18px; margin-top: 8px; }
@media (max-width: 720px) { .mt-data-grid { flex-wrap: wrap; gap: 18px 28px; } }

/* feature_dark (encart Banneret) */
.media-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; background: var(--ink); color: var(--paper); }
.media-feature .mf-text { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; }
.media-feature .mf-media { position: relative; min-height: 460px; }
/* La vraie image est enveloppée dans .media-frame (sans ratio ici) : sans cette
 * règle, le cadre s'effondre à 0px et l'image absolute disparaît (cf. même fix
 * que .hero-fullbleed .media-frame). On le force à remplir .mf-media. */
.media-feature .mf-media .media-frame { position: absolute; inset: 0; background: transparent; }
.media-feature .mf-media .ph-img,
.media-feature .mf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-feature.img-right .mf-text { order: 1; }

/* ============================================================
   LAYOUT : card_grid
   ============================================================ */
.card-grid { display: grid; gap: 28px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid.style-news { display: block; }
.card-grid.style-news .news-card:first-child { border-top: var(--hairline); }
.card-grid-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; margin-bottom: 60px; }
.card-grid-head .sec-title { max-width: 100%; }
.card-grid-head .btn, .card-grid-head .btn-ghost { justify-self: end; }
@media (max-width: 720px) { .card-grid-head { grid-template-columns: 1fr; } .card-grid-head .btn, .card-grid-head .btn-ghost { justify-self: start; } }

/* ============================================================
   LAYOUT : list_rows
   ============================================================ */
.list-rows { border-top: var(--hairline-strong); }
/* link */
.row-link {
  display: grid; grid-template-columns: 64px 1.1fr 1.3fr 44px; gap: 32px; align-items: center;
  padding: 34px 0; border-bottom: var(--hairline); cursor: pointer;
}
.row-link .r-num { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); letter-spacing: 0.06em; }
.row-link h3 { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; margin: 0; letter-spacing: -0.015em; }
.row-link p { color: var(--ink-muted); font-size: 15px; line-height: 1.55; margin: 0; text-wrap: pretty; }
.row-link .r-arrow { font-size: 24px; text-align: right; color: var(--accent); }
.list-rows.no-num .row-link { grid-template-columns: 1.1fr 1.3fr 44px; }
/* data */
.row-data { display: grid; grid-template-columns: 150px 90px 1fr auto; gap: 32px; align-items: baseline; padding: 22px 0; border-bottom: var(--hairline); }
.row-data .d-when { color: var(--ink-muted); }
.row-data .d-time { font-family: var(--serif); font-size: 30px; color: var(--accent); font-variant-numeric: tabular-nums; }
.row-data .d-title { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); font-weight: 500; }
.row-data .d-place { color: var(--ink-muted); font-size: 14px; text-align: right; }
.row-data.is-accent .d-title { color: var(--accent); }
/* Variante sans 1re colonne (ex. palmarès « Les derniers Rois ») → table type Résultats */
.row-data.no-when { grid-template-columns: 90px 1fr auto; }
.row-data.no-when .d-place { font-family: var(--serif); font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* register (commissions) */
.row-register { display: grid; grid-template-columns: 1.1fr 1.5fr; gap: 48px; align-items: start; padding: 40px 0; border-bottom: var(--hairline); }
.row-register h3 { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
.row-register .reg-meta { display: flex; gap: 16px; align-items: baseline; margin-top: 12px; flex-wrap: wrap; }
.row-register .reg-body { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 0; text-wrap: pretty; }
.row-register .reg-members { color: var(--ink-muted); font-size: 13.5px; line-height: 1.7; margin: 16px 0 0; }
.row-register .reg-members .eyebrow { margin-right: 8px; }
/* Bordures uniformes : le trait d'ouverture de la liste (par défaut --hairline-strong)
 * est aligné sur les séparateurs des lignes (--hairline) → toutes les bordures identiques. */
.list-rows:has(.row-register) { border-top: var(--hairline); }
/* two_col (abbés-présidents) */
.list-rows.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px; }
.row-twocol { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: var(--hairline); }
.row-twocol .tc-a { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.row-twocol .tc-b { font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }

/* Quand un en-tête précède une grille étapes/colonnes, on resserre l'espace */
.sec-head:has(+ .list-rows.style-steps),
.sec-head:has(+ .list-rows.style-cols) { margin-bottom: 24px; }

/* steps (ex. La démarche) : colonnes horizontales à gros chiffres rouges */
.list-rows.style-steps { border-top: var(--hairline); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 48px; padding-top: 28px; }
.row-step .step-num { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--accent); display: block; letter-spacing: -0.02em; }
.row-step h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 16px 0 10px; letter-spacing: -0.01em; }
.row-step p { color: var(--ink-muted); font-size: 16px; line-height: 1.6; margin: 0; text-wrap: pretty; }

/* cols (ex. Trois rendez-vous) : colonnes horizontales surtitre + titre + desc */
.list-rows.style-cols { border-top: var(--hairline); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 48px; padding-top: 28px; }
.row-col h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 10px 0 12px; letter-spacing: -0.01em; }
.row-col p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; margin: 0; text-wrap: pretty; }

/* ============================================================
   LAYOUT : statuts (sommaire collant + chapitres / articles)
   ============================================================ */
.statuts { display: grid; grid-template-columns: 300px 1fr; gap: 80px; align-items: start; }
.statuts-toc { position: sticky; top: 96px; }
.statuts-toc > .eyebrow { display: block; margin-bottom: 20px; }
.statuts-nav { border-top: var(--hairline); }
.statuts-nav a { display: block; padding: 14px 0; border-bottom: var(--hairline); }
.statuts-nav .toc-ch { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); display: block; }
.statuts-nav .toc-title { font-family: var(--serif); font-size: 17px; color: var(--ink-soft); }
.statuts-nav a:hover .toc-title { color: var(--accent); }
.statuts-pdf { margin-top: 32px; width: 100%; justify-content: space-between; }
.statuts-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-muted); margin: 20px 0 0; line-height: 1.7; }
.statuts-body { max-width: 820px; }
.statuts-ch { margin-bottom: 64px; scroll-margin-top: 96px; }
/* Ancres de section (#reservation, etc.) : décalage sous le header sticky. */
.tirage-page section[id] { scroll-margin-top: 96px; }
.statuts-ch-head { padding-bottom: 24px; border-bottom: var(--hairline-strong); margin-bottom: 8px; }
.statuts-ch-head h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); font-weight: 400; margin: 12px 0 0; letter-spacing: -0.02em; }
.statuts-art { padding: 32px 0; border-bottom: var(--hairline); }
.statuts-art .art-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.statuts-art .art-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); white-space: nowrap; }
.statuts-art h3 { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; margin: 0; letter-spacing: -0.015em; }
.statuts-art p { font-size: 17px; line-height: 1.62; color: var(--ink-soft); margin: 16px 0 0; text-wrap: pretty; }
@media (max-width: 900px) { .statuts { grid-template-columns: 1fr; gap: 32px; } .statuts-toc { position: static; } }
@media (max-width: 720px) {
  .list-rows.style-steps, .list-rows.style-cols { grid-template-columns: 1fr; gap: 32px; }
}

/* Sur fond sombre (anthracite) ET fond rouge : filets clairs très légers */
.on-dark [class*="row-"], .fond-anthracite [class*="row-"], .fond-bordeaux [class*="row-"],
.on-dark .list-rows, .fond-anthracite .list-rows, .fond-bordeaux .list-rows,
.on-dark .honor-row, .fond-anthracite .honor-row, .fond-bordeaux .honor-row,
.on-dark .mt-data, .fond-anthracite .mt-data, .fond-bordeaux .mt-data {
  border-color: rgba(246,246,246,0.18) !important;
}
.on-dark .list-rows, .fond-anthracite .list-rows, .fond-bordeaux .list-rows {
  border-top-color: rgba(246,246,246,0.24) !important;
}

/* ============================================================
   LAYOUT : gallery (bento + grid)
   Lightbox fournie par le plugin « Lightbox with PhotoSwipe ».
   ============================================================ */
.gallery-grid { display: grid; gap: 14px; }
.gallery-grid.mode-grid { grid-template-columns: repeat(3, 1fr); }
.gallery-grid.mode-bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; }
.gallery-grid .g-item { display: block; position: relative; overflow: hidden; background: var(--paper-deep); }
.gallery-grid a.g-item { cursor: zoom-in; }
.gallery-grid .g-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid.mode-grid .g-item { aspect-ratio: 3/2; }
/* Patron bento : 6 premières tuiles */
.gallery-grid.mode-bento .g-item:nth-child(6n+1) { grid-column: span 6; grid-row: span 2; }
.gallery-grid.mode-bento .g-item:nth-child(6n+2) { grid-column: span 6; grid-row: span 1; }
.gallery-grid.mode-bento .g-item:nth-child(6n+3) { grid-column: span 6; grid-row: span 1; }
.gallery-grid.mode-bento .g-item:nth-child(6n+4) { grid-column: span 4; grid-row: span 1; }
.gallery-grid.mode-bento .g-item:nth-child(6n+5) { grid-column: span 4; grid-row: span 1; }
.gallery-grid.mode-bento .g-item:nth-child(6n+6) { grid-column: span 4; grid-row: span 1; }

/* Index galeries (CPT) : filtre par année + grille de cartes */
.gallery-index .gi-years { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 28px; border-bottom: var(--hairline); margin-bottom: 40px; }
.gallery-index .gi-years .eyebrow { margin-right: 12px; }
.gallery-index .gi-year { font-family: var(--serif); font-size: 16px; padding: 8px 0; width: 72px; text-align: center; cursor: pointer; background: transparent; border: 1px solid rgba(51,51,51,0.18); color: var(--ink-soft); transition: all 220ms; font-variant-numeric: tabular-nums; }
.gallery-index .gi-year.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gallery-index .gi-grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gallery-index .gi-grid.is-active { display: grid; }
.gallery-index .gi-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; }
.album-back { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); display: inline-flex; gap: 8px; align-items: center; }
.album-back:hover { color: var(--accent); }
@media (max-width: 900px) { .gallery-index .gi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gallery-index .gi-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LAYOUT : cta_band
   ============================================================ */
.cta-band { text-align: center; }
.cta-band .cta-body { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 20px); line-height: 1.5; max-width: 60ch; margin: 20px auto 32px; }
.cta-band .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   LAYOUT : timeline (Programme jour par jour)
   ============================================================ */
.timeline-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: var(--hairline); margin-bottom: 60px; }
.timeline-tabs .day-abbr { display: none; } /* abréviation servie en mobile */
.timeline-tabs button {
  background: transparent; border: 0; padding: 14px 0; margin-right: 36px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; color: var(--ink-muted); position: relative; font-weight: 500;
}
.timeline-tabs button.active { color: var(--ink); }
.timeline-tabs button.active::after { content: ''; position: absolute; left: 0; right: 36px; bottom: -1px; height: 2px; background: var(--accent); }
.timeline-day { display: none; }
.timeline-day.active { display: block; }
.timeline-day-head { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; margin-bottom: 60px; }
.timeline-day-head h2 { font-family: var(--serif); font-size: clamp(40px, 5.5vw, 68px); font-weight: 400; letter-spacing: -0.03em; margin: 14px 0; }
.timeline-events { border-top: var(--hairline); }
.timeline-event { display: grid; grid-template-columns: 120px 60px 1fr 1fr; gap: 32px; align-items: center; padding: 28px 0; border-bottom: var(--hairline); }
.timeline-event .te-time { font-family: var(--serif); font-size: 32px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); }
.timeline-event .te-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.timeline-event h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0; letter-spacing: -0.01em; color: var(--ink); }
.timeline-event .te-place { color: var(--ink-muted); font-size: 14px; text-align: right; }
.timeline-event.is-highlight .te-time,
.timeline-event.is-highlight h3,
.timeline-event.is-highlight .te-place { color: var(--accent); }

/* ============================================================
   LAYOUT : results_explorer
   ============================================================ */
.results-explorer .eyebrow { display: block; margin-bottom: 16px; }
/* …sauf dans le tableau, où l'eyebrow est une cellule (centrage vertical). */
.results-explorer .re-thead .eyebrow,
.results-explorer .re-row .eyebrow,
.results-explorer .ca-thead .eyebrow,
.results-explorer .ca-row .eyebrow { display: inline-block; margin-bottom: 0; }
.re-years { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 56px; }
.re-years button {
  background: transparent; color: var(--ink-soft);
  border: 1px solid rgba(51,51,51,0.18);
  font-family: var(--serif); font-size: 18px; font-weight: 400; padding: 10px 0; width: 72px; text-align: center;
  cursor: pointer; font-variant-numeric: tabular-nums; transition: all 220ms; letter-spacing: -0.01em;
}
.re-years button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.re-header {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; align-items: baseline;
  padding-bottom: 40px; border-bottom: var(--hairline-strong); margin-bottom: 40px;
}
.re-header .re-year-big { font-family: var(--serif); font-size: clamp(64px, 9vw, 120px); font-weight: 400; line-height: 0.9; letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.re-header .re-roi { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.15; margin-top: 8px; letter-spacing: -0.01em; }
.re-header .re-count-big { font-family: var(--serif); font-size: 56px; font-weight: 400; line-height: 1; margin-top: 8px; }
.re-badge { display: inline-block; margin-left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 3px 8px; vertical-align: middle; }
.re-cats { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 32px; }
.re-cats button {
  background: transparent; color: var(--ink-soft);
  border: 1px solid rgba(51,51,51,0.18);
  font-family: var(--sans); font-size: 13px; padding: 10px 18px; cursor: pointer; transition: all 220ms;
}
.re-cats button.active { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.re-search { display: flex; align-items: center; gap: 14px; background: transparent; border: 0; border-top: var(--hairline-strong); border-bottom: var(--hairline-strong); padding: 12px 14px; margin-bottom: 8px; }
.re-search i { color: var(--ink-muted); font-size: 15px; }
.re-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--sans); font-size: 18px; color: var(--ink); }
.re-search .re-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.re-thead, .re-row { display: grid; grid-template-columns: 70px 1fr 1fr 110px; gap: 24px; }
.re-thead { padding: 16px 0; border-bottom: var(--hairline); }
.re-row { padding: 18px 0; border-bottom: var(--hairline); align-items: center; font-variant-numeric: tabular-nums; }
/* Centrage vertical réel de chaque cellule (polices aux métriques différentes). */
.re-row > div, .ca-row > span { display: flex; align-items: center; }
.re-row .c-points, .ca-row .c-points, .ca-row .c-num { justify-content: flex-end; }
.re-row .c-rang { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); }
.re-row .c-tireur { font-family: var(--mono); font-size: 21px; font-weight: 400; letter-spacing: -0.01em; }
.re-row .c-points { text-align: right; font-family: var(--serif); font-size: 24px; font-weight: 400; white-space: nowrap; }
.re-thead .eyebrow:last-child { text-align: right; }
/* Channe : la colonne « résultat » porte les 3 coups « 100 · 90 · 82 ».
   On l'élargit et on réduit un peu la taille pour tenir sur une seule ligne. */
.results-explorer.is-channe .re-thead,
.results-explorer.is-channe .re-row { grid-template-columns: 70px 1fr 1fr 230px; }
.results-explorer.is-channe .re-row .c-points { font-size: 20px; }
.re-empty { padding: 60px 0; text-align: center; color: var(--ink-muted); font-family: var(--serif); font-size: 20px; }
.re-pdf { margin-top: 28px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.re-pdf .re-maj { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-muted); margin-left: 14px; }

/* ============================================================
   LAYOUT : contact_form / admission / locations (formulaires éditoriaux)
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 40px; }
.chip {
  background: transparent; color: var(--ink-soft);
  border: 1px solid rgba(51,51,51,0.18);
  font-family: var(--sans); font-size: 13px; padding: 10px 16px; cursor: pointer; transition: all 220ms;
}
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.field-editorial { display: block; border-bottom: var(--hairline-strong); padding: 24px 0 16px; }
.field-editorial .eyebrow { margin-bottom: 12px; display: block; }
.field-editorial input,
.field-editorial textarea,
.field-editorial select {
  width: 100%; border: 0; background: transparent; resize: vertical;
  font-family: var(--serif); font-size: 24px; color: var(--ink); padding: 0; outline: none;
}
.field-editorial textarea { font-size: 22px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 24px; flex-wrap: wrap; }
.contact-side { position: sticky; top: 120px; }
.contact-side .side-frame { aspect-ratio: 4/5; margin-bottom: 32px; }
.contact-side .side-list { border-top: var(--hairline-strong); }
.contact-side .side-item { padding: 24px 0; border-bottom: var(--hairline); }
.contact-side .side-item .val { font-family: var(--serif); font-size: 19px; line-height: 1.5; margin-top: 10px; white-space: pre-line; }
.form-sent { padding: 80px 0; text-align: center; border-top: var(--hairline-strong); border-bottom: var(--hairline-strong); }
.form-sent h2 { font-family: var(--serif); font-size: clamp(30px,3.4vw,56px); font-weight: 400; margin: 16px 0 12px; letter-spacing: -0.02em; }

/* ============================================================
   GRAVITY FORMS — habillage éditorial (champs soulignés, chips, .btn)
   ============================================================ */
.tirage-page .gform_wrapper .gform_fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
/* La grille 12-colonnes de Gravity Forms (gouttière 2% / 16px vertical) prime ;
 * on resserre uniquement l'espacement vertical entre les rangées de champs. */
.tirage-page .gform_wrapper.gravity-theme .gform_fields { row-gap: 6px; }
.tirage-page .gform_wrapper .gfield { grid-column: 1 / -1; margin: 0; }
.tirage-page .gform_wrapper .gfield--width-half { grid-column: span 1; }
/* Libellés de champ : petit surtitre mono gris, IDENTIQUE pour les <label> (texte)
 * et les <legend> (radio/checkbox). `.gravity-theme` ajouté pour battre la règle
 * `gform-shared.css` qui sinon force les <label> à 15px/600/foncé (incohérence). */
.tirage-page .gform_wrapper.gravity-theme .gfield_label,
.tirage-page .gform_wrapper.gravity-theme legend.gfield_label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #595959; font-weight: 500; margin: 0 0 6px;
}
.tirage-page .gform_wrapper .gfield_required { color: var(--accent); }
/* Resserrer le vertical : GF impose un padding-bottom de 8px sur chaque champ. */
.tirage-page .gform_wrapper.gravity-theme .gfield { padding-bottom: 2px; }
/* Plus d'air au-dessus des titres de section (Responsable, Tireur·euse 1/2/3). */
.tirage-page .gform_wrapper .gsection { margin-top: 40px; }
.tirage-page .gform_wrapper input[type=text],
.tirage-page .gform_wrapper input[type=email],
.tirage-page .gform_wrapper input[type=tel],
.tirage-page .gform_wrapper input[type=url],
.tirage-page .gform_wrapper input[type=number],
.tirage-page .gform_wrapper input[type=date],
.tirage-page .gform_wrapper input[type=password],
.tirage-page .gform_wrapper input[type=search],
.tirage-page .gform_wrapper input[type=time],
.tirage-page .gform_wrapper input[type=month],
.tirage-page .gform_wrapper input[type=week],
.tirage-page .gform_wrapper input[type=datetime-local],
.tirage-page .gform_wrapper input[type=color],
.tirage-page .gform_wrapper textarea,
.tirage-page .gform_wrapper select {
  width: 100%; border: var(--hairline); border-bottom: var(--hairline-strong); border-radius: 0 !important;
  background: #fff; padding: 10px 14px; outline: none; -webkit-appearance: none; appearance: none;
  font-family: var(--sans); font-size: 22px; color: var(--ink); box-shadow: none;
}
.tirage-page .gform_wrapper textarea { font-size: 18px; line-height: 1.5; }
/* Champ date (datepicker) : pleine largeur comme les autres champs (GF le bride à ~260px via sa taille « medium »). */
.tirage-page .gform_wrapper .ginput_container_date input { width: 100% !important; }
body .gform_wrapper.gravity-theme h3 { font-weight: normal; }
.tirage-page .gform_wrapper input:focus,
.tirage-page .gform_wrapper textarea:focus,
.tirage-page .gform_wrapper select:focus { border-bottom-color: var(--accent); }
.tirage-page .gform_wrapper .gfield { padding: 14px 0; }

/* Radios / cases en chips : grille calée sur les champs (gouttière 2% identique,
 * hauteur = champ 44px). 2 colonnes par défaut, 3 colonnes dès 3 options (comme
 * la rangée Prénom/Nom/Année). */
.tirage-page .gform_wrapper .gfield_radio,
.tirage-page .gform_wrapper .gfield_checkbox { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px 2% !important; margin-left: 0 !important; margin-right: 0 !important; }
.tirage-page .gform_wrapper .gfield_radio:has(.gchoice:nth-child(3)),
.tirage-page .gform_wrapper .gfield_checkbox:has(.gchoice:nth-child(3)) { grid-template-columns: repeat(3, 1fr) !important; }
/* ≥4 options → 4 colonnes (ex. « Lien avec Payerne »). */
.tirage-page .gform_wrapper .gfield_radio:has(.gchoice:nth-child(4)),
.tirage-page .gform_wrapper .gfield_checkbox:has(.gchoice:nth-child(4)) { grid-template-columns: repeat(4, 1fr) !important; }
/* Mobile (<768px) : chips repassent en 2 colonnes (3-4 colonnes = trop serré).
 * On cible les variantes :has() pour égaler leur spécificité (sinon elles gagnent). */
@media (max-width: 767.98px) {
  .tirage-page .gform_wrapper .gfield_radio:has(.gchoice:nth-child(3)),
  .tirage-page .gform_wrapper .gfield_radio:has(.gchoice:nth-child(4)),
  .tirage-page .gform_wrapper .gfield_checkbox:has(.gchoice:nth-child(3)),
  .tirage-page .gform_wrapper .gfield_checkbox:has(.gchoice:nth-child(4)) { grid-template-columns: repeat(2, 1fr) !important; }
}
.tirage-page .gform_wrapper .gchoice { margin: 0; padding: 0 !important; position: relative; width: 100% !important; justify-self: stretch; }
.tirage-page .gform_wrapper .gchoice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tirage-page .gform_wrapper .gchoice label {
  display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 44px; height: 100%; box-sizing: border-box;
  margin: 0; border: 1px solid rgba(51,51,51,0.18); border-radius: 0 !important; padding: 6px 14px; text-align: center; line-height: 1.2;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft); cursor: pointer; transition: all 200ms;
}
.tirage-page .gform_wrapper .gchoice input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tirage-page .gform_wrapper .gchoice input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Bouton submit = .btn du thème — aligné à DROITE (comme le bouton « Suivant »). */
.tirage-page .gform_wrapper .gform_footer { margin-top: 28px; padding: 0; display: flex; justify-content: flex-end; }
.tirage-page .gform_wrapper .gform_button {
  display: inline-flex; align-items: center; gap: 10px; width: auto; margin-top: 0;
  padding: 14px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 14px; font-weight: 500; border-radius: 0; cursor: pointer;
  transition: all 280ms cubic-bezier(.2,.7,.3,1);
}
.tirage-page .gform_wrapper .gform_button:hover { background: var(--accent); border-color: var(--accent); }

/* Multi-pages : boutons Suivant / Précédent (mêmes que le submit, Précédent en secondaire) */
.tirage-page .gform_wrapper .gform_next_button,
.tirage-page .gform_wrapper .gform_previous_button {
  display: inline-flex; align-items: center; gap: 10px; width: auto;
  padding: 14px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 14px; font-weight: 500; border-radius: 0; cursor: pointer;
  transition: all 280ms cubic-bezier(.2,.7,.3,1);
}
/* Site public : Suivant ET Précédent restent FONCÉS (le CSS partagé les met en rouge
 * en !important → on monte à .gravity-theme (4 classes) pour gagner sur le site public). */
.tirage-page .gform_wrapper.gravity-theme .gform_next_button,
.tirage-page .gform_wrapper.gravity-theme .gform_previous_button { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important; }
.tirage-page .gform_wrapper.gravity-theme .gform_next_button:hover,
.tirage-page .gform_wrapper.gravity-theme .gform_previous_button:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--paper) !important; }
.tirage-page .gform_wrapper .gform_page_footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* GF réinitialise la marge du pied à 6px → on la rétablit avec + de spécificité.
 * Pied multi-pages (Suivant/Précédent) : 40px. Pied simple (Envoyer) : 24px (sinon
 * cumul footer 40 + bouton 16 = 56px → trop d'air au-dessus du bouton). */
.tirage-page .gform_wrapper.gravity-theme .gform_page_footer { margin-top: 40px; }
.tirage-page .gform_wrapper.gravity-theme .gform_footer { margin-top: 24px; }
.tirage-page .gform_wrapper .gform_page_footer .gform_previous_button { margin-right: auto; }
.tirage-page .gform_wrapper .gform_page_footer .gform_next_button,
.tirage-page .gform_wrapper .gform_page_footer .gform_button { margin-left: auto; }

/* Multi-pages : barre d'étapes — on GARDE le layout table-cell (horizontal) de GF,
 * on ne restyle que police / couleurs / taille des pastilles. */
.tirage-page .gform_wrapper .gf_page_steps { border-bottom: var(--hairline); padding-bottom: 16px; margin-bottom: 32px; }
.tirage-page .gform_wrapper .gf_step { margin: 4px 40px 4px 0; }
.tirage-page .gform_wrapper .gf_step_label {
  font-family: var(--sans) !important; font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em; color: var(--ink-muted); padding-left: 12px;
}
.tirage-page .gform_wrapper .gf_step_number {
  font-family: var(--sans) !important; font-size: 14px; font-weight: 500;
  border: 1px solid rgba(51,51,51,0.28) !important; color: var(--ink-muted) !important; background: transparent !important;
}
.tirage-page .gform_wrapper .gf_step_active .gf_step_label { color: var(--ink); }
.tirage-page .gform_wrapper .gf_step_active .gf_step_number { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
.tirage-page .gform_wrapper .gf_step_completed .gf_step_label { color: var(--ink-soft); }
/* étape validée : cercle encre + coche blanche (GF). On recolore son cercle (::before). */
.tirage-page .gform_wrapper .gf_step_completed .gf_step_number::before { background: var(--ink) !important; border-color: var(--ink) !important; }

/* Messages de validation / erreurs */
.tirage-page .gform_wrapper .gfield_validation_message,
.tirage-page .gform_wrapper .validation_message,
.tirage-page .gform_wrapper .gform_validation_errors { color: var(--accent); font-family: var(--sans); font-size: 13px; }
.tirage-page .gform_confirmation_message {
  font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--ink-soft);
  border-top: var(--hairline-strong); border-bottom: var(--hairline-strong); padding: 48px 0; text-align: center;
}
@media (max-width: 768px) {
  .tirage-page .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
  .tirage-page .gform_wrapper .gfield--width-half { grid-column: 1 / -1; }
  /* chips : 2 colonnes sur mobile (3 serait trop serré) */
  .tirage-page .gform_wrapper .gfield_radio,
  .tirage-page .gform_wrapper .gfield_checkbox,
  .tirage-page .gform_wrapper .gfield_radio:has(.gchoice:nth-child(3)),
  .tirage-page .gform_wrapper .gfield_checkbox:has(.gchoice:nth-child(3)) { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   LAYOUT : wysiwyg (prose longue)
   ============================================================ */
.wysiwyg { max-width: 820px; }
.wysiwyg.narrow { max-width: 760px; margin: 0 auto; }
.wysiwyg p { font-family: var(--sans); font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 24px; }
.wysiwyg h2 { font-family: var(--serif); font-size: clamp(28px,3vw,44px); font-weight: 400; letter-spacing: -0.02em; margin: 48px 0 16px; }
.wysiwyg h3 { font-family: var(--serif); font-size: clamp(22px,2.2vw,28px); font-weight: 500; letter-spacing: -0.015em; margin: 32px 0 12px; }
.wysiwyg ul, .wysiwyg ol { margin: 0 0 24px; padding-left: 22px; }
.wysiwyg li { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 8px; }
.wysiwyg a { color: var(--accent); border-bottom: 1px solid currentColor; }
.wysiwyg blockquote { margin: 40px 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .text-split { grid-template-columns: 1fr; gap: 40px; }
  .media-text, .media-text.img-right { grid-template-columns: 1fr; gap: 32px; }
  .media-text.img-right .mt-media { order: 0; }
  .media-feature, .media-feature.img-right { grid-template-columns: 1fr; }
  .media-feature .mf-text { order: 0; padding: 48px 32px; }
  .media-feature .mf-media { min-height: 320px; }
  .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-typo .typo-grid { grid-template-columns: 1fr; gap: 40px; }
  .sec-head-split { grid-template-columns: 1fr; gap: 24px; }
  .timeline-day-head { grid-template-columns: 1fr; gap: 24px; }
  .re-header { grid-template-columns: 1fr; gap: 24px; }
  .list-rows.two-col { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 768px) {
  :root { --content-pad: 24px; }
  .site-nav-wrap { display: none; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .hero-rail { grid-template-columns: 1fr; gap: 8px; }
  .hero-rail .e-center, .hero-rail .e-right { text-align: left; }
  .news-card { grid-template-columns: 1fr; gap: 16px; }
  .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .footer-bottom span:nth-child(2), .footer-bottom span:nth-child(3) { text-align: left; }
  .honor-row { grid-template-columns: 1fr auto; gap: 16px; }
  .row-link { grid-template-columns: 40px 1fr 32px; gap: 16px; }
  .row-link p { display: none; }
  .list-rows.no-num .row-link { grid-template-columns: 1fr 32px; }
  .row-data { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .row-data .d-place { text-align: left; }
  .row-register { grid-template-columns: 1fr; gap: 16px; }
  /* Événement : heure et titre empilés en pleine largeur. */
  .timeline-event { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .timeline-event > div:nth-child(2), .timeline-event .te-place { display: none; }
  .timeline-event .te-time { font-size: 26px; }
  .re-thead, .re-row { grid-template-columns: 44px 1fr 70px; }
  .re-thead .eyebrow:nth-child(3) { display: none; }
  .re-row .c-distinction { display: none; }
  /* Channe : colonne « résultat » élargie pour les 3 coups, sur une ligne. */
  .results-explorer.is-channe .re-thead,
  .results-explorer.is-channe .re-row { grid-template-columns: 40px 1fr 128px; }
  .results-explorer.is-channe .re-row .c-points { font-size: 15px; }
  .hero-band .container { flex-direction: column; align-items: flex-start; gap: 16px; }
  .countdown { gap: 24px; }
  .countdown .cd-num { font-size: 40px; }
  /* En-tête de résultats : chaque bloc en pleine largeur, chiffres réduits. */
  .re-header { grid-template-columns: 1fr; gap: 20px; }
  .re-header .re-count-big { font-size: 36px; }
  .re-header .re-roi { font-size: 21px; }
  /* Compteur de recherche : jamais de retour à la ligne. */
  .re-search .re-count { white-space: nowrap; flex: 0 0 auto; }

  /* Cibles tactiles ≥ ~44px (WCAG 2.5.5) sur mobile */
  .mobile-sub li { padding: 11px 0; }
  .mobile-sub a { display: block; }
  .footer-grid li { margin-bottom: 4px; }
  /* Colonnes de menus du footer : redondantes avec le menu mobile → masquées. */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:not(:first-child) { display: none; }
  /* Onglets des jours du programme : une seule ligne, jours abrégés (Ven. 14). */
  .timeline-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .timeline-tabs::-webkit-scrollbar { display: none; }
  .timeline-tabs button { white-space: nowrap; flex: 0 0 auto; }
  .timeline-tabs .day-full { display: none; }
  .timeline-tabs .day-abbr { display: inline; }
  .text-body { font-size: 16px; }
  /* Lignes de classement (résultats + archives) : typo réduite sur mobile. */
  .re-row { padding: 14px 0; }
  .re-row .c-rang { font-size: 18px; }
  .re-row .c-tireur { font-size: 18px; }
  .re-row .c-points { font-size: 19px; }
  .ca-row .c-rang { font-size: 18px; }
  .ca-row .c-tireur { font-size: 18px; }
  .ca-row .c-points { font-size: 19px; }
  /* 16px minimum : en dessous, iOS zoome automatiquement dans le champ. */
  .re-search input { font-size: 16px; }
  .re-search input::placeholder { font-size: 16px; }
  /* Citation : texte réduit (le cite garde sa taille). */
  .pullquote { font-size: 26px; }
  .row-register .reg-body { font-size: 16px; }
  .footer-grid a { display: inline-block; padding: 11px 0; }
}

/* ── Cases à cocher en chips (forms Secrétaires / Cibarres, blog 1) ────────────
   Même habillage que les radios « radio-btn » de gform-shared.css (chips
   blanches, rouge #DC2321 cochée), appliqué aux checkboxes côté thème tirage
   uniquement (l'app garde son rendu natif). */
/* Champs « Je m'inscris … les jours suivants » (forms 7/10) : 1 choix par ligne */
.tirage-page .gform_wrapper #field_7_1 .gfield_checkbox,
.tirage-page .gform_wrapper #field_10_1 .gfield_checkbox { grid-template-columns: 1fr !important; }
.tirage-page .gform_wrapper.gravity-theme #field_7_1 .gfield_checkbox .gchoice label,
.tirage-page .gform_wrapper.gravity-theme #field_10_1 .gfield_checkbox .gchoice label { justify-content: flex-start; text-align: left; }
.tirage-page .gform_wrapper.gravity-theme .gfield_checkbox input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.tirage-page .gform_wrapper.gravity-theme .gfield_checkbox .gchoice { width: 100% !important; }
.tirage-page .gform_wrapper.gravity-theme .gfield_checkbox .gchoice label {
  padding: 8px 1.25em; min-height: 44px; height: 100%; line-height: 1.25;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 400; background: #fff; color: #727272;
  border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0;
  cursor: pointer; max-width: none; transition: all 0.2s ease;
}
.tirage-page .gform_wrapper.gravity-theme .gfield_checkbox .gchoice label:hover { border-color: #aaa; }
.tirage-page .gform_wrapper.gravity-theme .gfield_checkbox input[type="checkbox"]:focus-visible + label { border-color: #aaa; }
.tirage-page .gform_wrapper.gravity-theme .gfield_checkbox input[type="checkbox"]:checked + label {
  background: #dc2321; color: #fff; border-color: #dc2321;
}

/* ── Mises en avant saisonnières (home : phases promo / amitié-live) ───────── */
.home-promo .promo-head { margin-bottom: 48px; }
.home-promo .inner::after { content: ""; display: block; margin-top: var(--sec-l); border-bottom: var(--hairline); }
.promo-grid { display: grid; gap: 40px; }
.promo-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.promo-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.promo-card {
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 150px;
  color: var(--ink); text-decoration: none;
}
.promo-card .promo-card__media {
  display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  margin-bottom: 18px;
}
.promo-card .promo-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 280ms ease;
}
.promo-card:hover .promo-card__media img { transform: scale(1.03); }
.promo-card h3 {
  font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink); margin: 12px 0 0; padding-right: 1.5rem;
  transition: color 220ms ease;
}
.promo-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.promo-card .promo-go {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--accent); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.promo-card .promo-go .arrow { transition: transform 280ms; }
.promo-card:hover h3 { color: var(--accent); }
.promo-card:hover .promo-go .arrow { transform: translateX(4px); }
@media (max-width: 900px) { .promo-grid.cols-3, .promo-grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .promo-grid.cols-3, .promo-grid.cols-4 { grid-template-columns: 1fr; } }

/* ── Classement Tir d'amitié (live, page-classement-amitie.php) ────────────── */
.ca-live-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.ca-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--accent);
}
.ca-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: ca-pulse 1.6s ease-out infinite; }
@keyframes ca-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 35, 33, .45); }
  100% { box-shadow: 0 0 0 9px rgba(220, 35, 33, 0); }
}
@media (prefers-reduced-motion: reduce) { .ca-live-dot { animation: none; } }
.ca-live-updated { font-size: 13px; color: var(--ink-muted); }
.re-pdf { margin-top: 28px; }
/* Point live à la fin du label « Classement par (Mis à jour …) ». */
[data-cats-label] .ca-live-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; vertical-align: baseline; }
.re-table { margin-bottom: 28px; }
.ca-editions a {
  background: transparent; color: var(--ink-soft); text-decoration: none;
  border: 1px solid rgba(51,51,51,0.18);
  font-family: var(--sans); font-size: 13px; padding: 10px 18px; transition: all 220ms;
}
.ca-editions a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ca-editions a:hover:not(.active) { border-color: var(--ink); color: var(--ink); }
.ca-empty { color: var(--ink-muted); font-size: 15px; }
/* État vide (même composant que l'app de gestion, tokens tirage). */
.ca-empty-state { text-align: center; padding: 56px 24px; color: var(--ink-muted); }
.ca-empty-state__icon svg { width: 56px; height: 56px; opacity: 0.45; display: block; margin: 0 auto 14px; }
.ca-empty-state__title { font-family: var(--sans); font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.ca-empty-state__message { font-size: 15px; line-height: 1.5; max-width: 32rem; margin: 0 auto; }
.ca-thead, .ca-row { display: grid; grid-template-columns: 56px 1.4fr 56px 1fr 80px 80px 96px; gap: 16px; }
.ca-thead { padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.ca-row { padding: 14px 0; border-bottom: var(--hairline); align-items: center; font-variant-numeric: tabular-nums; }
.ca-row .c-rang { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); }
.ca-row .c-tireur { font-family: var(--mono); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.ca-row .c-num { text-align: right; }
.ca-row .c-points { text-align: right; font-family: var(--serif); font-size: 21px; font-weight: 500; }
@media (max-width: 760px) {
  .ca-thead, .ca-row { grid-template-columns: 44px 1fr 80px; gap: 12px; }
  .ca-hide-m { display: none; }
}

/* ── Publication des résultats (outil jour J, page-publier-resultats.php) ─── */
.pub-form { max-width: 560px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }
.pub-form > .eyebrow { margin-top: 20px; }
.pub-file { display: block; border: 1px dashed rgba(51,51,51,0.4); padding: 26px 18px; text-align: center; cursor: pointer; background: #fff; }
.pub-file input { display: none; }
.pub-file__label { font-family: var(--sans); color: var(--ink-soft); }
.pub-submit { margin-top: 24px; justify-content: center; }
.pub-feedback { padding: 14px 16px; font-size: 15px; border-left: 3px solid var(--ink-muted); background: #fff; }
.pub-feedback.is-ok { border-left-color: #2e7d32; }
.pub-feedback.is-warn { border-left-color: var(--accent); }
/* Contenu resserré et centré (formulaire + état) ; l'en-tête garde sa largeur. */
.pub-etat { margin: 56px auto 0; max-width: 560px; }
.pub-etat__liste { list-style: none; margin: 16px 0 0; padding: 0; }
.pub-etat__liste li { padding: 10px 0; border-bottom: var(--hairline); font-size: 15px; color: var(--ink-soft); }

/* ── Layout « Inscription tir » (Secrétaires / Cibarres) ───────────────────── */
.tir-intro { margin-bottom: 28px; }
.tir-intro a { color: var(--accent); text-decoration: none; }
.tir-intro a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tir-agenda { list-style: none; margin: 0 0 28px; padding: 0; }
.tir-agenda li { padding: 12px 0; border-top: 1px solid rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 2px; }
.tir-agenda li:first-child { border-top: 0; padding-top: 0; }
.tir-agenda-when { font-weight: 600; }
.tir-agenda-where { font-size: .92em; opacity: .72; }
.tir-resp { margin: 24px 0; }
.tir-resp a { color: var(--accent); text-decoration: none; }
.tir-resp a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tir-inscription-form { margin-top: 28px; }

/* Inscriptions terminées : encart qui remplace le formulaire. */
.tir-inscription-fermee {
  margin-top: 28px;
  padding: 26px 28px;
  background: var(--paper-deep);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
}
.tir-inscription-fermee .eyebrow { display: block; margin-bottom: 10px; }
.tir-inscription-fermee .tir-fermee-msg { color: var(--ink); }
.tir-inscription-fermee .tir-fermee-msg p { margin: 0 0 .6em; }
.tir-inscription-fermee .tir-fermee-msg p:last-child { margin-bottom: 0; }

/* ── Layout « Généreux donateurs » (tuiles uniformes, modèle de l'app) ─────── */
.donateurs-title { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(24px, 2.6vw, 36px); text-align: center; margin: 0 0 36px; }
.donateurs-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.donateurs-grid .donateur-item { width: 180px; aspect-ratio: 2/1; background: #fff; border: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; padding: .5rem; transition: opacity .2s; }
.donateurs-grid .donateur-item img { object-fit: contain; width: 100%; height: 100%; display: block; }
.donateurs-grid a.donateur-item:hover { opacity: .7; }

/* ── Blocs « Salaire » et « Agenda » (layout Inscription · Secrétaires / Cibarres) ── */
.tir-salaire { margin: 26px 0; }
.tir-salaire .eyebrow { display: block; margin-bottom: 4px; }
.tir-salaire-val { font-size: 17px; font-weight: 500; color: var(--ink); }
.tir-agenda-eyebrow { display: block; margin: 26px 0 8px; }

/* ── Discours du payernois du dehors (CPT discours) ───────────────── */
.discours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.discours-card .cover { aspect-ratio: 3/2; }
.discours-card .cover .ph-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: var(--ink-muted);
}
.discours-card__year {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--accent);
    color: #fff;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    padding: 6px 13px;
}
.discours-card .meta h3 { margin-top: 4px; }

/* Page d'un discours */
.discours-single { max-width: 760px; margin: 26px auto 0; }
.discours-photo { margin: 0 0 30px; }
.discours-photo img { width: 100%; height: auto; display: block; }
.discours-texte p { margin: 0 0 1.1em; }
.discours-texte p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
    .discours-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .discours-grid { grid-template-columns: 1fr; }
}

/* Page contact : sujets « Devenir membre (adhésion) » / « Location / mise à
   disposition » → on oriente vers la page dédiée. Encart message + bouton ;
   les champs de saisie (logique GF) et le bouton d'envoi sont masqués. */
.tirage-page .gform_wrapper .cc-redirect { margin: 8px 0 0; padding: 24px 26px; background: var(--paper-deep); border-radius: 0; }
.tirage-page .gform_wrapper .cc-redirect p { margin: 0 0 18px; color: var(--ink); line-height: 1.6; }
.tirage-page .gform_wrapper .cc-redirect .btn { margin: 0 12px 8px 0; }
.tirage-page .gform_wrapper:has(input[type=radio][value="Devenir membre (adhésion)"]:checked) .gform_footer,
.tirage-page .gform_wrapper:has(input[type=radio][value="Location / mise à disposition"]:checked) .gform_footer,
.tirage-page .gform_wrapper:has(input[type=radio][value="Travailler au stand (secrétaire / cibarre)"]:checked) .gform_footer { display: none; }

/* Page contact : sidebar vide → le formulaire prend toute la largeur (plus de
   colonne placeholder à droite qui le coinçait à ~750px). */
.contact-grid--solo { grid-template-columns: 1fr; }

/* Sujet du form contact (#16) : libellés longs → 2 colonnes (chips larges, façon
   la radio de /locations/) au lieu des 4 du thème. Pleine largeur, gap resserré
   (le thème met 2% horizontal, trop large ici). Mobile : 1 colonne. */
.tirage-page #gform_wrapper_16 .gfield_radio { grid-template-columns: repeat(2, 1fr) !important; width: 100% !important; gap: 8px !important; }
/* GF gravity-theme plafonne le label à max-width:calc(100% - 32px) → le bouton ne
   remplit pas sa cellule (32px de vide). On force 100% pour que 2 boutons = 100%. */
.tirage-page #gform_wrapper_16 .gchoice label { max-width: 100% !important; }
@media (max-width: 767.98px) {
    .tirage-page #gform_wrapper_16 .gfield_radio { grid-template-columns: 1fr !important; }
}

/* Description des champs Gravity Forms : en police mono (Inter). */
.tirage-page .gform_wrapper .gfield_description { font-family: var(--mono) !important; }

/* Liens simples dans le corps de texte : rouge bordeaux + soulignement.
   (Les boutons .btn conservent leur style.) */
.text-body a:not(.btn) {
    color: var(--bordeaux);
    text-decoration: none;
    transition: color 200ms;
}
.text-body a:not(.btn):hover,
.text-body a:not(.btn):focus {
    color: var(--bordeaux-deep);
}

/* Rythme vertical des titres dans le corps de texte (pages type politique). */
.text-body h2 {
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 52px 0 14px;
}
.text-body h3 {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--ink);
    margin: 32px 0 8px;
}
/* Pas de marge en haut du tout premier élément, ni juste après un titre. */
.text-body > :first-child { margin-top: 0; }
.text-body h2 + h3 { margin-top: 12px; }
/* Listes et séparateurs cohérents avec les paragraphes. */
.text-body ul,
.text-body ol { margin: 0 0 24px; padding-left: 1.35em; }
.text-body li { margin: 0 0 6px; }
.text-body hr { margin: 52px 0; border: 0; border-top: 1px solid var(--line, rgba(0,0,0,0.12)); }

@media (max-width: 768px) {
    .text-body h2 { font-size: 24px; margin-top: 40px; }
    .text-body h3 { font-size: 19px; margin-top: 26px; }
}