/* ============================================================================
   Jeunes IHEMI — V3 « Le Phare » (accueil)
   Concept : la veille de nuit. Page navy profond, un faisceau balaie le hero ;
   la « graduation » (cadran des quatre signes) rythme les sections ; les
   comités s'éclairent de leur couleur d'entité au survol.
   Jetons : copie de Cordouan, le design system (LucaTmt/cordouan), alignée le 07/10/2026 sur
   Cordouan 1.0.3.
   ========================================================================== */

:root {
  /* ---- Brand core (copie de Cordouan ; la sonde de /entretien la compare à ses jetons) */
  --ji-navy: #0F3A65;
  --ji-blue: #4287F7;
  --ji-coral: #FF5757;
  --ji-white: #FFFFFF;
  --ji-ink: #243240;
  --ji-muted: #5a6b7a;
  --ji-faint: #9aa7b3;          /* désactivé uniquement */
  --ji-bg: #eef0f3;
  --ji-surface: #ffffff;
  --ji-surface-sunken: #f4f6f8;
  --ji-border: #E5E8EC;
  --ji-border-strong: #d3d9e0;

  /* Les sept couleurs de comité de Cordouan : une seule valeur par comité, sur fond clair
     comme sur fond sombre (cordouan/README.md § Couleurs, Les sept comités). */
  --ji-comite-influence: #E8407D;
  --ji-comite-securite: #6C879D;
  --ji-comite-intelligence: #289B65;
  --ji-comite-crise: #B87D2D;
  --ji-comite-innovation: #BB5BFB;
  --ji-comite-cyber: #33989B;
  --ji-comite-citoyennete: #849139;

  /* Slot d'accent (DS-02, 24/07/2026) : bleu vif par défaut = accent courant
     (filets, faisceau, liens, secondaires). Réécrit en contexte comité. Le CTA
     reste corail — il ne suit jamais cette surcharge. Les pôles n'ont plus de
     couleur : barre navy. */
  --ji-accent: var(--ji-blue);

  --ji-gradient-hero: linear-gradient(135deg, #0F3A65 0%, #2F6FE0 55%, #FF5757 130%);
  /* Énergie numérique sobre (navy → bleu, sans corail), copiée de Cordouan. */
  --ji-gradient-blue: linear-gradient(135deg, #0F3A65 0%, #2F6FE0 100%);

  --ji-text-strong: var(--ji-navy);
  --ji-text-body: var(--ji-ink);
  --ji-text-muted: var(--ji-muted);
  --ji-on-dark: #ffffff;
  --ji-on-dark-muted: rgba(255, 255, 255, 0.82);
  --ji-on-dark-faint: rgba(255, 255, 255, 0.55);
  --ji-on-dark-border: rgba(255, 255, 255, 0.5);
  --ji-action: var(--ji-coral);
  --ji-action-hover: #F55454;
  --ji-action-pressed: #ED5151;
  --ji-error: #B3261E;
  --ji-focus-ring: var(--ji-blue);
  --ji-link: #2A66C9;

  /* Interlignes de Cordouan (jetons de 1-primitives.css) : le titre Anton en capitales accentuées, le petit titre,
     et la prose pleine largeur. */
  --ji-leading-display: 1.2;
  --ji-leading-tight: 1.2;
  --ji-leading-aere: 1.8;

  /* ---- Teintes de nuit (dérivées site du navy — candidates à canonisation DS) */
  --ji-navy-deep: #0B2C4E;
  --ji-navy-night: #071F38;

  /* ---- Système V3 */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --z-nav: 100;
  --z-menu: 200;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ji-navy-night);
  color: var(--ji-on-dark-muted);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: var(--ji-leading-display);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
/* Les petits titres en IBM Plex (étape, carte de tarif, événement) lisent le « tight » de Cordouan ; les titres Anton en capitales lisent le « display », 1,2 depuis Cordouan 1.0.16 (plancher mesuré pour les capitales accentuées). */
.step h3, .tarif-card h3, .ev-body h3 { line-height: var(--ji-leading-tight); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
:focus-visible { outline: 3px solid var(--ji-focus-ring); outline-offset: 2px; border-radius: 2px; }
/* Sur un fond sombre ou un dégradé, l'anneau bleu se confond avec le fond (1,25 à 1,9:1 sur le dégradé) : un liseré bleu au contact,
   puis un anneau blanc qui tient 4,3:1 au pire sur n'importe quel point du fond (seuil de 3:1, critère 1.4.11). */
.site-header :focus-visible, .phare :focus-visible, .page-hero :focus-visible, .veille :focus-visible,
.appel :focus-visible, .appel-ev :focus-visible, .section-dark :focus-visible, .stats-band :focus-visible, .site-footer :focus-visible {
  outline: 3px solid var(--ji-on-dark); outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ji-focus-ring);
}
/* Le bouton fantôme porte déjà son contour en box-shadow : on le garde et on y ajoute le liseré. */
.btn-ghost:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ji-on-dark), 0 0 0 3px var(--ji-focus-ring); }
::selection { background: var(--ji-blue); color: var(--ji-white); }

/* ---- Lien d'évitement : premier arrêt au clavier, visible seulement quand il a le focus ----- */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: calc(var(--z-menu) + 100);
  padding: 12px 20px; border-radius: 9px;
  background: var(--ji-white); color: var(--ji-navy);
  font-weight: 600; text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus { transform: none; }
/* La cible du lien reçoit le focus par programme : pas de cadre autour de toute la page. */
main:focus, main:focus-visible { outline: none; }

/* ---- La graduation — dispositif de section (cadran des signes) ------------ */
.grad {
  display: flex; align-items: flex-end; gap: 2px; height: 18px;
  margin-bottom: 18px;
}
.grad i {
  width: 2px; height: 9px; background: currentColor; opacity: 0.45;
  border-radius: 1px;
}
.grad i:first-child { height: 18px; opacity: 1; background: var(--ji-coral); }
.grad i:nth-child(5n+1):not(:first-child) { height: 14px; opacity: 0.8; }
.section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); }
/* Le texte courant des pages occupe toute la largeur de son conteneur (décision de Luca, 12/10/2026) : chapôs,
   introductions, prose, pages légales. Sur écran large, il prend l'interligne aéré que Cordouan réserve à la prose
   pleine largeur, jamais à une colonne étroite : sur téléphone il garde celui du corps (règle @media plus bas, après
   .legal). Le texte des articles garde sa colonne (.analyse-texte), fait pour une lecture longue. */
.section-intro { margin-top: 16px; font-size: 1rem; }

/* ---- Header ---------------------------------------------------------------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: var(--z-nav);
  padding-top: 14px;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo img { height: 42px; width: auto; }
.nav-desktop { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.navlink {
  color: var(--ji-on-dark-muted); text-decoration: none; font-size: 0.9375rem;
  padding: 10px 2px; position: relative; cursor: pointer;
}
.navlink::after {
  content: ''; position: absolute; left: 2px; right: 100%; bottom: 4px; height: 2px;
  background: var(--ji-on-dark); transition: right 0.25s var(--ease-out-quart);
}
.navlink:hover::after, .navlink[aria-current]::after { right: 2px; }
.navlink:hover, .navlink[aria-current] { color: var(--ji-on-dark); }
.nav-adherer {
  font-weight: 600; color: var(--ji-on-dark); text-decoration: underline;
  text-underline-offset: 6px; text-decoration-thickness: 2px;
  text-decoration-color: var(--ji-coral);
}
.nav-adherer:hover { text-decoration-thickness: 3px; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--ji-on-dark);
  margin: 5px 0; border-radius: 1px;
}
.mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  background: var(--ji-navy-deep); margin: 10px var(--gutter) 0;
  border: 1px solid var(--ji-on-dark-border); border-radius: 12px; padding: 10px;
  position: relative; z-index: var(--z-menu);
}
.mobile-menu a {
  color: var(--ji-on-dark-muted); text-decoration: none; padding: 12px 14px;
  border-radius: 8px; font-size: 1rem;
}
.mobile-menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--ji-on-dark); }
.mobile-menu .m-adherer { color: var(--ji-on-dark); font-weight: 600; }
/* Page courante : le fond et la graisse, pas la seule couleur ; la rubrique qui la contient (aria-current="true") en gras. */
.mobile-menu a[aria-current] { color: var(--ji-on-dark); font-weight: 600; }
.mobile-menu a[aria-current="page"] { background: rgba(255, 255, 255, 0.08); }

/* Sous-menus (arborescence du 21/10) : Qui sommes-nous et Nous rejoindre ont des sous-pages. L'entrée reste un lien
   vers la page de rubrique ; le bouton à côté ouvre la liste (clavier, toucher), le survol à la souris aussi : les deux
   passent par js/main.js, qui tient un seul état (aria-expanded et la classe « ouvert »), jamais par :hover. Le panneau
   est sur le fond sombre du haut de page : un aplat marine, pas de verre. Le dernier panneau s'ancre à droite de son
   entrée : à gauche, il sortait de l'écran de 901 à 1270 px. Sur téléphone, les sous-pages sont listées sous leur
   entrée, sans bouton. */
.nav-item { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-sous-bouton {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 44px;
  background: none; border: 0; padding: 0 4px; cursor: pointer; color: var(--ji-on-dark-muted);
}
.nav-sous-bouton span {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease-out-quart);
}
.nav-sous-bouton:hover, .nav-sous-bouton[aria-expanded="true"] { color: var(--ji-on-dark); }
.nav-sous-bouton[aria-expanded="true"] span { transform: translateY(2px) rotate(-135deg); }
.nav-sous {
  display: none; position: absolute; top: 100%; left: -12px; z-index: var(--z-menu);
  min-width: 230px; margin: 0; padding: 8px; list-style: none;
  background: var(--ji-navy-deep); border: 1px solid var(--ji-on-dark-border); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(7, 31, 56, 0.45);
}
.nav-item.ouvert .nav-sous { display: block; }
/* Sans script (la marque « js » absente de <html>), le survol et le focus clavier ouvrent encore la liste. */
html:not(.js) .nav-item:hover .nav-sous, html:not(.js) .nav-item:focus-within .nav-sous { display: block; }
.nav-desktop > .nav-item:last-child .nav-sous { left: auto; right: -12px; }
.nav-sous a {
  display: block; padding: 10px 12px; border-radius: 8px; white-space: nowrap;
  color: var(--ji-on-dark-muted); text-decoration: none; font-size: 0.9375rem;
}
.nav-sous a:hover, .nav-sous a[aria-current] { background: rgba(255, 255, 255, 0.08); color: var(--ji-on-dark); }
.mobile-menu .m-sous {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 6px 14px; padding-left: 8px; border-left: 1px solid var(--ji-on-dark-border);
}
.mobile-menu .m-sous a { font-size: 0.9375rem; padding: 10px 14px; }
@media (prefers-reduced-motion: reduce) { .nav-sous-bouton span { transition: none; } }

/* ---- Hero : le faisceau ----------------------------------------------------- */
.phare {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  /* --sx/--sy : l'origine du faisceau. Décision Luca 21/07 : pas de point de source
     visible — le faisceau vient simplement du coin haut-droite. Cadran retiré (gate 21/07). */
  --sx: 100%; --sy: 0%;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--ji-navy) 0%, var(--ji-navy-deep) 45%, var(--ji-navy-night) 100%);
}
/* Le faisceau : un cône de lumière NÉ D'UN POINT EN CHAMP (la source --sx/--sy),
   qui balaie le hero. Origine, masque et pivot tous ancrés sur ce même point :
   la lumière tourne autour de la source, qui reste fixe. inset:0 = repère hero
   (les % de --sx/--sy désignent le même point pour le faisceau et pour .source). */
.beam {
  position: absolute; inset: 0; pointer-events: none;
  /* Cœur de rayon étroit et lumineux, flancs fondus sur une longue plage d'angle :
     la transition claire→sombre n'est jamais une ligne. */
  background: conic-gradient(from 202deg at var(--sx) var(--sy),
    transparent 0deg,
    rgba(205, 225, 255, 0.02) 9deg,
    rgba(219, 234, 255, 0.18) 17deg,
    rgba(236, 244, 255, 0.56) 22deg,
    rgba(219, 234, 255, 0.18) 27deg,
    rgba(205, 225, 255, 0.02) 35deg,
    transparent 46deg);
  /* Atténuation avec la distance : opaque près de la source, dissous plus loin. */
  -webkit-mask-image: radial-gradient(125% 125% at var(--sx) var(--sy), #000 5%, rgba(0,0,0,0.5) 42%, transparent 80%);
          mask-image: radial-gradient(125% 125% at var(--sx) var(--sy), #000 5%, rgba(0,0,0,0.5) 42%, transparent 80%);
  filter: blur(15px);
  transform-origin: var(--sx) var(--sy);
  animation: balayage 18s ease-in-out infinite alternate;
  will-change: transform;
}
/* Cœur chaud du faisceau : un liseré blanc plus net, même origine/pivot. */
.beam-2 {
  position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 210deg at var(--sx) var(--sy),
    transparent 0deg, rgba(255, 255, 255, 0.20) 6deg, rgba(255, 255, 255, 0.05) 12deg, transparent 20deg);
  -webkit-mask-image: radial-gradient(120% 120% at var(--sx) var(--sy), #000 4%, transparent 72%);
          mask-image: radial-gradient(120% 120% at var(--sx) var(--sy), #000 4%, transparent 72%);
  filter: blur(13px);
  transform-origin: var(--sx) var(--sy);
  animation: balayage-2 18s ease-in-out infinite alternate;
  will-change: transform;
}
/* La constellation (réseau) : une bande fine sur TOUTE la largeur, en haut,
   au-dessus du texte. Le SVG est GÉNÉRÉ par main.js (moteur grainé, codes du
   corpus) — pas un motif figé. Fondue en haut (sous la nav) et en bas (avant le
   texte). Fragment de soutien discret ; le faisceau reste le seul dispositif. */
.constel {
  position: absolute; top: 0; left: 0; right: 0; height: 200px; pointer-events: none; z-index: 0; opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 62%, transparent 100%);
}
.constel .constel-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.constel .cn { position: absolute; border-radius: 50%; background: #FFFFFF; opacity: 0.9; transform: translate(-50%, -50%); }
.constel .cn-tw { box-shadow: 0 0 6px 1px rgba(214, 232, 255, 0.7); }
@keyframes balayage {
  from { transform: rotate(-20deg); }
  to   { transform: rotate(30deg); }
}
@keyframes balayage-2 {
  from { transform: rotate(-16deg); }
  to   { transform: rotate(34deg); }
}
@media (prefers-reduced-motion: reduce) {
  .beam { animation: none; transform: rotate(6deg); }
  .beam-2 { animation: none; transform: rotate(9deg); }
  html { scroll-behavior: auto; }
  /* Tout le reste d'un coup, plutôt qu'une liste qui oublie le suivant (soulignements du menu, cartes, boutons) : les
     transitions et animations finissent aussitôt sur leur état final. */
  *, *::before, *::after {
    transition-duration: 0.01ms !important; transition-delay: 0s !important;
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  }
}
/* Cadran de veille retiré (gate 21/07 : la géométrie graduée est réservée à la
   rose des vents). Son rôle d'origine du faisceau est repris par .source. */

.phare-content { position: relative; z-index: 2; padding-top: 140px; }
.phare h1 {
  font-size: clamp(2.7rem, 7.4vw, 5.6rem);
  color: var(--ji-on-dark);
  max-width: 14ch;
}
.phare h1 .lit { text-shadow: 0 0 34px rgba(140, 185, 255, 0.4); }
.phare-lead {
  max-width: 56ch; margin-top: 22px;
  font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.75;
}
.phare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }

/* Le journal de veille : la ligne de signal en pied de hero. */
.signal {
  position: relative; margin-top: clamp(48px, 8vh, 90px);
  border-top: 1px solid var(--ji-on-dark-border);
}
.signal-inner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding-block: 18px 22px; font-size: 0.9375rem;
}
.signal-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ji-coral);
  align-self: center; flex: none;
}
/* Il ne clignote que lorsqu'un événement est annoncé (classe posée à la main avec « Prochain événement », vérifiée par
   tools/controle-doublons.mjs) : un voyant qui pulse pour dire qu'il n'y a rien ment (audit du 07/10, P-23). */
.signal-inner.evenement-annonce .signal-dot { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .signal-dot, .signal-inner.evenement-annonce .signal-dot { animation: none; } }
.glass-eyebrow {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ji-on-dark-faint);
}
.hero-ev-title { color: var(--ji-on-dark); font-weight: 600; }
.hero-ev-meta { color: var(--ji-on-dark-faint); }
.signal-link { color: var(--ji-on-dark-muted); margin-left: auto; text-decoration: none; }
.signal-link:hover { color: var(--ji-on-dark); }

/* ---- Boutons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: 9px; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s var(--ease-out-quart);
}
.btn:active { transform: translateY(1px); }
/* Libellé en texte grand au sens WCAG (au moins 18,67 px en gras) : le blanc sur le corail (3,11:1) tient alors le seuil de 3:1.
   La couleur ne bouge pas (Cordouan, README § Couleurs). Le padding vertical baisse de 2 px pour garder la hauteur des autres boutons. */
.btn-coral { background: var(--ji-action); color: #fff; font-size: 1.1875rem; font-weight: 700; padding-block: 12px; }
.btn-coral:hover { background: var(--ji-action-hover); }
.btn-coral:active { background: var(--ji-action-pressed); }
.btn-light { background: var(--ji-white); color: var(--ji-navy); }
.btn-light:hover { background: #eef3fa; }
.btn-ghost {
  background: transparent; color: var(--ji-on-dark);
  box-shadow: inset 0 0 0 1.5px var(--ji-on-dark-border);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ji-on-dark); }

/* ---- Comités : la liste-balayage --------------------------------------------- */
.veille { background: var(--ji-navy-night); padding: clamp(70px, 11vh, 130px) 0; color: var(--ji-on-dark-muted); }
.veille .grad { color: var(--ji-on-dark-faint); }
.veille .section-title { color: var(--ji-on-dark); }
.watch-list { margin-top: clamp(30px, 5vh, 54px); border-top: 1px solid var(--ji-on-dark-border); }
.watch-row {
  position: relative; display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr auto;
  gap: 10px 34px; align-items: center;
  padding: 22px 10px;
  border-bottom: 1px solid var(--ji-on-dark-border);
  text-decoration: none; color: inherit;
  isolation: isolate;
}
.watch-row::before {
  /* le balayage : la couleur d'entité traverse la ligne au survol */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--e) 26%, transparent), transparent 72%);
  opacity: 0; transform: translateX(-3%);
  transition: opacity 0.3s ease, transform 0.45s var(--ease-out-expo);
}
.watch-row:hover::before, .watch-row:focus-visible::before { opacity: 1; transform: translateX(0); }
.watch-row p { font-size: 0.9375rem; max-width: 62ch; color: var(--ji-on-dark-muted); }
.watch-arrow {
  font-size: 1.25rem; color: var(--ji-on-dark-faint);
  transition: transform 0.3s var(--ease-out-expo), color 0.2s ease;
}
.watch-row:hover .watch-arrow { transform: translateX(6px); color: var(--ji-on-dark); }
.watch-foot { margin-top: 26px; font-size: 0.9375rem; color: var(--ji-on-dark-faint); }
.watch-foot a { color: var(--ji-on-dark-muted); }
.watch-foot a:hover { color: var(--ji-on-dark); }

/* Logo de comité (dispositif d'identité de Cordouan) */
/* Recette de Cordouan (components.css, .ji-lockup ; composant LogoComite) : barre à 40 % de la hauteur, sans arrondi, collée au
   nom à 4 px ; mot COMITÉ en Anton 11 px, espacement 1 px, capitales saisies dans le HTML ; un nom long s'écrit sur deux lignes
   (saut de ligne dans le HTML et data-multi="1"), les autres sur une seule (fitLockup de js/main.js, même calcul que le composant). */
.lockup { display: flex; align-items: stretch; gap: 4px; height: 46px; min-width: 0; }
.lockup-bar {
  width: 18px; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lockup-bar span {
  font-family: var(--font-display); font-weight: 400; font-size: 11px;
  letter-spacing: 1px; color: #fff; white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
/* Le nom est coupé en largeur, jamais en hauteur : en interligne 0,8 (fitLockup), l'accent d'une capitale haute
   (le circonflexe de « SÛRETÉ ») dépasse le cadre par le haut. overflow: hidden reste le repli des navigateurs
   qui ignorent clip. */
.lockup-name { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; overflow: clip visible; }
/* Sans script, le nom passe à la ligne au lieu d'être coupé ; fitLockup (js/main.js) impose sa taille et son interligne. */
.lockup-name span {
  font-family: var(--font-display); text-transform: uppercase;
  color: var(--ji-on-dark); line-height: 1.04; white-space: normal;
}

/* ---- La preuve : frise d'événements réels (fond jour) -------------------------- */
.preuve { background: var(--ji-surface); color: var(--ji-text-body); padding: clamp(70px, 11vh, 130px) 0; }
.preuve .grad { color: var(--ji-muted); }
.preuve .section-title { color: var(--ji-text-strong); }
.preuve .section-intro { color: var(--ji-text-muted); }
.frise-scroller {
  margin-top: clamp(36px, 6vh, 60px);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--ji-border-strong) transparent;
}
.frise {
  display: flex; min-width: max-content;
  position: relative; padding-top: 18px;
}
.frise::before {
  /* la ligne continue de la frise (recette DS « frise chronologique ») */
  content: ''; position: absolute; top: 4px; left: 8px; right: 8px; height: 2px;
  background: var(--ji-border-strong);
}
.frise-item {
  position: relative; scroll-snap-align: start;
  width: 250px; flex: none; padding: 16px 26px 0 8px;
}
.frise-item::before {
  content: ''; position: absolute; top: 0; left: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ji-navy); border: 2px solid var(--ji-surface);
  box-shadow: 0 0 0 2px var(--ji-navy);
}
.frise-item:last-child::before { background: var(--ji-coral); box-shadow: 0 0 0 2px var(--ji-coral); }
.f-date {
  font-family: var(--font-display); font-size: 1.375rem; color: var(--ji-navy);
  text-transform: uppercase; line-height: 1;
}
.f-date span { font-size: 0.8125rem; letter-spacing: 0.06em; margin-left: 5px; }
.frise-item h3 {
  font-family: var(--font-body); font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: 1rem; line-height: 1.4; color: var(--ji-ink);
  margin-top: 10px;
}
.f-meta { font-size: 0.875rem; color: var(--ji-text-muted); margin-top: 5px; }
.preuve-foot { margin-top: 18px; font-size: 0.9375rem; }
.preuve-foot a { color: var(--ji-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- La mission : trois verbes -------------------------------------------------- */
.mission { background: var(--ji-surface-sunken); padding: clamp(70px, 11vh, 130px) 0; color: var(--ji-text-body); }
.mission .grad { color: var(--ji-muted); }
.mission .section-title { color: var(--ji-text-strong); }
.verbes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(28px, 4vw, 56px); margin-top: clamp(36px, 6vh, 60px);
}
.verbe h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--ji-navy); }
.verbe .tick { display: block; width: 34px; height: 4px; background: var(--ji-coral); border-radius: 2px; margin-bottom: 14px; }
.verbe p { font-size: 0.9375rem; color: var(--ji-text-muted); margin-top: 12px; max-width: 44ch; }
.mission-foot { margin-top: 40px; font-size: 0.9375rem; color: var(--ji-text-muted); }
.mission-foot a { color: var(--ji-link); }

/* ---- L'appel : la relève s'engage ------------------------------------------------ */
.appel { background: var(--ji-gradient-hero); padding: clamp(80px, 13vh, 150px) 0; color: var(--ji-on-dark); }
.appel-inner { max-width: 760px; }
.appel .grad { color: rgba(255, 255, 255, 0.65); }
.appel h2 { font-size: clamp(2.4rem, 5.4vw, 4rem); color: #fff; }
.appel-lead { margin-top: 18px; font-size: 1.0625rem; color: var(--ji-on-dark); max-width: 54ch; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; }

/* ---- Footer ------------------------------------------------------------------------ */
.site-footer { background: var(--ji-navy-night); color: var(--ji-on-dark-muted); padding: clamp(50px, 8vh, 80px) 0 34px; }
.footer-cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(28px, 5vw, 70px);
  padding-bottom: 40px; border-bottom: 1px solid var(--ji-on-dark-border);
}
.footer-brand img { height: 40px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 0.9375rem; max-width: 40ch; }
/* Titres des colonnes du pied : des h2, le niveau qui suit le contenu de toute page (un h5 sautait deux niveaux). Leur
   aspect est celui d'une étiquette, pas d'un titre de section : la règle h1-h4 est écrasée, interligne compris. */
.footer-col h2 {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; line-height: inherit;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ji-on-dark-faint);
  margin: 0 0 14px;
}
.footlink { display: block; color: var(--ji-on-dark-muted); text-decoration: none; padding: 5px 0; font-size: 0.9375rem; }
.footlink:hover { color: var(--ji-on-dark); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding-top: 22px; font-size: 0.8125rem; color: var(--ji-on-dark-faint);
}
.footer-bottom a { color: var(--ji-on-dark-faint); }
.footer-bottom a:hover { color: var(--ji-on-dark); }

/* ============================================================================
   PAGES INTÉRIEURES — même langage que l'accueil, hero allégé (pas le grand
   cadran animé, réservé à l'accueil). Le faisceau reste, discret et statique.
   ========================================================================== */

/* ---- Hero de page : bandeau navy, faisceau doux, graduation + titre --------- */
.page-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(130% 120% at 100% 0%, var(--ji-navy) 0%, var(--ji-navy-deep) 48%, var(--ji-navy-night) 100%);
  color: var(--ji-on-dark);
  padding: clamp(130px, 20vh, 200px) 0 clamp(48px, 8vh, 84px);
}
.page-hero .beam-soft {
  position: absolute; inset: -30% -20% -30% -20%; pointer-events: none;
  background: conic-gradient(from 206deg at 100% 0%,
    transparent 0deg, rgba(205,225,255,0.03) 12deg, rgba(232,242,255,0.28) 24deg,
    rgba(205,225,255,0.03) 36deg, transparent 52deg);
  -webkit-mask-image: radial-gradient(135% 130% at 100% 0%, #000 14%, transparent 82%);
          mask-image: radial-gradient(135% 130% at 100% 0%, #000 14%, transparent 82%);
  filter: blur(14px);
}
.page-hero .wrap { position: relative; }
.page-hero .grad { color: var(--ji-on-dark-faint); }
.eyebrow {
  display: inline-block; font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ji-on-dark-muted); margin-bottom: 12px;
}
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); color: var(--ji-on-dark); max-width: 16ch; }
.page-hero .lead { margin-top: 20px; font-size: clamp(1rem, 1.5vw, 1.1875rem); color: var(--ji-on-dark-muted); }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }

/* ---- Sections génériques (fond clair / enfoncé / sombre) -------------------- */
.section { padding: clamp(60px, 10vh, 120px) 0; }
/* Une section resserrée (le lien « La suite » qui clôt une sous-page) ; posée après une section du même fond, elle n'ajoute
   pas de marge haute : celle du bas de la précédente sépare déjà, et deux marges empilées laissaient le lien seul dans le vide. */
/* flow-root : sans marge haute, la marge du premier paragraphe traversait la section et laissait voir 16 px du fond sombre
   de la page entre deux sections blanches (vu sur les captures de la recette, mesuré : 2617 puis 2633 px). */
.section-tight { padding: clamp(36px, 6vh, 64px) 0; display: flow-root; }
.section-light + .section-tight.section-light, .section-sunken + .section-tight.section-sunken { padding-top: 0; }
.section-light  { background: var(--ji-surface); color: var(--ji-text-body); }
.section-sunken { background: var(--ji-surface-sunken); color: var(--ji-text-body); }
.section-dark   { background: var(--ji-navy-night); color: var(--ji-on-dark-muted); }
.section-light .section-title, .section-sunken .section-title { color: var(--ji-text-strong); }
.section-dark .section-title { color: var(--ji-on-dark); }
.section-light .grad, .section-sunken .grad { color: var(--ji-muted); }
.section-dark .grad { color: var(--ji-on-dark-faint); }
.section-light .section-intro, .section-sunken .section-intro { color: var(--ji-text-muted); }
.section-dark .section-intro { color: var(--ji-on-dark-muted); }

/* ---- Prose ------------------------------------------------------------------ */
.prose > * + * { margin-top: 1.1em; }
/* La graduation garde, dans un .prose, la même distance au titre qu'ailleurs (sa marge basse, 18 px), pas 1,1 em de titre. */
.prose > .grad + * { margin-top: 0; }
.section-light .prose p, .section-sunken .prose p { color: var(--ji-text-muted); }
.section-light .prose strong, .section-sunken .prose strong { color: var(--ji-text-strong); }
.section-dark .prose p { color: var(--ji-on-dark-muted); }
.prose a { color: var(--ji-link); text-underline-offset: 3px; }
.section-dark .prose a { color: var(--ji-on-dark); }
.two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

/* ---- Cartes génériques ------------------------------------------------------ */
.card { border-radius: 12px; padding: clamp(22px, 2.4vw, 30px); }
.section-light .card, .section-sunken .card { background: var(--ji-surface); border: 1px solid var(--ji-border); box-shadow: 0 10px 30px rgba(15,58,101,0.06); }
.section-sunken .card { background: var(--ji-white); }
.section-dark .card { background: var(--ji-navy-deep); border: 1px solid var(--ji-on-dark-border); }
.card h3 { font-family: var(--font-display); font-size: 1.375rem; text-transform: uppercase; margin-bottom: 8px; }
/* Une carte d'une grille d'étapes qui finit sur un lien (« Dans cette rubrique ») : le lien se cale en bas, à la même
   hauteur sur toute la rangée. Une carte sans lien garde son texte sous son titre. */
.steps > .card:has(> p > .ev-go:only-child) { display: flex; flex-direction: column; }
.steps > .card > p:has(> .ev-go:only-child) { margin-top: auto; }
.section-light .card h3, .section-sunken .card h3 { color: var(--ji-navy); }
.section-dark .card h3 { color: var(--ji-on-dark); }
.card p { font-size: 0.9375rem; }
.section-light .card p, .section-sunken .card p { color: var(--ji-text-muted); }
.section-dark .card p { color: var(--ji-on-dark-muted); }

/* ---- Étapes numérotées (recette chiffre-clé) -------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(34px, 5vh, 56px); }
/* Cinq étapes (adhérer) : 3 puis 2 centrées dès 640 px, plutôt que 4 et une seule en dessous. */
@media (min-width: 640px) {
  .steps.steps-cinq { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps.steps-cinq > .step { grid-column: span 2; }
  .steps.steps-cinq > .step:nth-child(4) { grid-column: 2 / span 2; }
}
/* Exactement quatre éléments (cartes de rubrique, étapes, membres du bureau) : 2 puis 2 tant que les quatre ne tiennent
   pas sur une ligne, plutôt que 3 et un seul en dessous. La borne est celle où les quatre colonnes tiennent, propre à
   chaque grille (mesurée : .steps dès 1157 px, .members dès 1188 px). La règle suit le nombre réel d'éléments : un
   cinquième membre du conseil, et la grille reprend sa répartition automatique. */
@media (min-width: 640px) and (max-width: 1156px) {
  .steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1187px) {
  .members:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.step .num { font-family: var(--font-display); font-size: 2.6rem; color: var(--ji-coral); line-height: 1; }
.step h3 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; margin: 10px 0 6px; }
.section-light .step h3, .section-sunken .step h3 { color: var(--ji-text-strong); }
.section-dark .step h3 { color: var(--ji-on-dark); }
.step p { font-size: 0.9375rem; }
.section-light .step p, .section-sunken .step p { color: var(--ji-text-muted); }
.section-dark .step p { color: var(--ji-on-dark-muted); }
.step p a { color: var(--ji-link); text-underline-offset: 3px; }
.section-dark .step p a { color: var(--ji-on-dark); }

/* ---- Parcours en étapes (« Proposer un texte », Publications) : pastilles numérotées reliées par un trait,
   à la verticale sur téléphone, à l'horizontale à partir de 900 px. Le numéro est écrit dans la page ; la liste
   numérotée porte l'ordre pour les lecteurs d'écran, la pastille leur est cachée. Fond clair : ni dégradé ni halo. */
.process { list-style: none; margin: clamp(34px, 5vh, 56px) 0 0; padding: 0; display: grid; gap: 28px; }
.process li { position: relative; padding-left: 68px; min-height: 48px; }
.process-num {
  position: absolute; left: 0; top: 0; z-index: 1; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ji-navy); color: #fff; font-family: var(--font-display); font-size: 1.25rem; line-height: 1;
}
.process li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 48px; bottom: -28px; width: 2px; background: var(--ji-blue); }
.process h3 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; line-height: var(--ji-leading-tight); color: var(--ji-text-strong); margin: 12px 0 6px; }
.process p { font-size: 0.9375rem; color: var(--ji-text-muted); }
.process p a { color: var(--ji-link); text-underline-offset: 3px; }
@media (min-width: 900px) {
  .process { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
  .process li { padding-left: 0; padding-top: 64px; }
  .process li:not(:last-child)::after { left: 48px; right: -24px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .process h3 { margin-top: 0; }
}

/* ---- Bureau : cartes membres avec bio -------------------------------------- */
.members { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(20px, 2.6vw, 32px); margin-top: clamp(34px, 5vh, 56px); }
.member { display: flex; flex-direction: column; }
.member .avatar {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.03em;
  background: var(--ji-navy); color: #fff; margin-bottom: 16px;
}
.member img.avatar { display: block; object-fit: cover; }
.member .m-name { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; color: var(--ji-navy); line-height: var(--ji-leading-display); }
.member .m-role { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ji-coral); margin-top: 4px; }
.member .m-bio { font-size: 0.9375rem; color: var(--ji-text-muted); margin-top: 12px; }
/* Le bureau posé sur une section de nuit (Qui sommes-nous) : la carte est écrite pour un fond clair, on la relit avec les rôles « sur fond sombre ».
   Le rôle (corail, 5,35:1) passait déjà : il ne bouge pas. */
.section-dark .member .avatar { box-shadow: inset 0 0 0 1.5px var(--ji-on-dark-border); }
.section-dark .member .m-name { color: var(--ji-on-dark); }
.section-dark .member .m-bio { color: var(--ji-on-dark-muted); }

/* ---- Tarifs d'adhésion ------------------------------------------------------ */
.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(30px, 4vh, 48px); }
.tarif-card { border-radius: 14px; padding: clamp(24px, 2.6vw, 32px); background: var(--ji-white); border: 1px solid var(--ji-border); }
.tarif-price { font-family: var(--font-display); font-size: 2.4rem; color: var(--ji-navy); line-height: 1; }
.tarif-price span { font-size: 1rem; color: var(--ji-text-muted); margin-left: 4px; }
.tarif-card h3 { font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; color: var(--ji-text-strong); margin: 12px 0 6px; }
.tarif-card p { font-size: 0.875rem; color: var(--ji-text-muted); }

/* ---- Formulaire (contact) --------------------------------------------------- */
.field { display: block; margin-top: 18px; }
.field label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ji-text-strong); margin-bottom: 6px; }
.form-note { margin-top: 16px; font-size: 0.875rem; color: var(--ji-text-muted); }
/* Bordure en --ji-muted (5,5:1 contre le blanc) : le critère 1.4.11 demande 3:1, que --ji-border-strong
   (1,42:1) ne tient pas. Au focus, l'anneau de :focus-visible (3 px) reste visible : on ne le retire plus. */
.input, .textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 12px 14px; border-radius: 9px; border: 1px solid var(--ji-muted);
  background: var(--ji-white); color: var(--ji-ink);
}
.input:focus-visible, .textarea:focus-visible { border-color: var(--ji-navy); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--ji-error); box-shadow: inset 0 0 0 1px var(--ji-error); }
.field-error { margin-top: 6px; font-size: 0.875rem; font-weight: 600; color: var(--ji-error); }
.field-error:empty { display: none; }
.textarea { min-height: 150px; resize: vertical; }
/* Champ piège contre les robots : hors écran (pas display:none, que certains robots repèrent). */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: 16px; padding: 12px 16px; border-radius: 9px; font-size: 0.9375rem; display: none; }
.form-msg.show { display: block; }
#form-error, .form-msg[role="alert"] { background: rgba(179,38,30,0.1); color: var(--ji-error); border: 1px solid rgba(179,38,30,0.3); }
#form-success, .form-msg[role="status"] { background: rgba(38,115,60,0.1); color: #1d5c3a; border: 1px solid rgba(38,115,60,0.3); }

/* ---- Liens de contact / plateformes ---------------------------------------- */
.contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.contact-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 12px 18px; border-radius: 9px; font-weight: 600; font-size: 0.9375rem;
  border: 1px solid var(--ji-on-dark-border); color: var(--ji-on-dark);
}
.contact-link:hover { background: rgba(255,255,255,0.08); }

/* ---- Contenu légal ---------------------------------------------------------- */
.legal h2 { font-size: 1.375rem; color: var(--ji-navy); margin-top: 2em; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 0.9375rem; color: var(--ji-text-muted); }
.legal p, .legal ul { margin-top: 0.8em; }
.legal ul { padding-left: 1.2em; } .legal li { margin-top: 0.3em; }
.legal a { color: var(--ji-link); }
@media (min-width: 900px) {
  .section-intro, .page-hero .lead, .prose p, .legal p, .legal li { line-height: var(--ji-leading-aere); }
}

/* ---- Notice / encart -------------------------------------------------------- */
.notice { border-radius: 12px; padding: 20px 24px; margin-top: 28px; }
.section-light .notice, .section-sunken .notice { background: var(--ji-surface-sunken); border: 1px solid var(--ji-border); }
.section-dark .notice { background: var(--ji-navy-deep); border: 1px solid var(--ji-on-dark-border); }
.notice p { font-size: 0.9375rem; }
.notice a { color: var(--ji-link); }
.section-dark .notice a { color: var(--ji-on-dark); }

/* ---- Comités : spectre de couleurs + grille de cartes colorées -------------- */
/* Le hero décline les sept signatures d'entité : la page se reconnaît d'emblée. */
.spectre { display: flex; gap: 5px; margin-top: 26px; max-width: 460px; }
.spectre i { flex: 1; height: 8px; border-radius: 3px; background: var(--c); }
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(34px, 5vh, 56px); }
.ccard {
  position: relative; overflow: hidden;
  background: var(--ji-surface); border: 1px solid var(--ji-border); border-radius: 14px;
  padding: 26px 26px 24px; display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s ease, border-color 0.25s ease;
}
.ccard::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--e);
}
.ccard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,58,101,0.12); border-color: color-mix(in srgb, var(--e) 40%, var(--ji-border)); }
.ccard .lockup { height: 44px; margin-bottom: 14px; }
.ccard .lockup-name span { color: var(--ji-navy); }
.ccard p { font-size: 0.9375rem; color: var(--ji-text-muted); flex: 1; }
.ccard-join {
  margin-top: 18px; align-self: flex-start; font-weight: 600; font-size: 0.9375rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  /* Petit texte : --ji-link (5,47:1 sur blanc). La couleur du comité reste sur la barre de la carte (.ccard::before et le logo de comité),
     où elle sert d'aplat : Cordouan la refuse au petit texte (3,44 à 3,85:1). */
  color: var(--ji-link);
}
.ccard-join span { transition: transform 0.25s var(--ease-out-expo); }
.ccard:hover .ccard-join span { transform: translateX(5px); }

/* ---- Bandeau chiffres-clés (Qui sommes-nous) : recette DS « chiffre-clé » ---- */
.stats-band { background: var(--ji-navy-night); color: var(--ji-on-dark); padding: clamp(48px, 8vh, 88px) 0; }
.stats-band .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.stat-key .n { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 0.9; color: var(--ji-on-dark); }
.stat-key .n span { color: var(--ji-coral); }
.stat-key .l { font-size: 0.9375rem; color: var(--ji-on-dark-muted); margin-top: 8px; }

/* ---- Hero compact (Contact) ------------------------------------------------- */
.hero-compact { padding: clamp(120px, 16vh, 160px) 0 clamp(30px, 5vh, 50px); }

/* ---- Agenda : liste verticale d'événements --------------------------------- */
.ev-group-title { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; color: var(--ji-navy); margin-bottom: 18px; }
.evlist { display: flex; flex-direction: column; }
.ev-item {
  display: grid; grid-template-columns: 88px 1fr; gap: 8px 24px;
  padding: 24px 0; border-top: 1px solid var(--ji-border);
}
.evlist .ev-item:first-child { border-top: 0; }
.ev-date { display: flex; flex-direction: column; align-items: flex-start; }
.ev-top { font-family: var(--font-display); font-size: 2.2rem; color: var(--ji-navy); line-height: 0.9; }
.ev-bot { font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--ji-text-muted); text-transform: uppercase; margin-top: 4px; }
.ev-body h3 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.1875rem; color: var(--ji-text-strong); }
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.ev-meta span { font-size: 0.8125rem; color: var(--ji-text-muted); }
.ev-meta span + span::before { content: '· '; }
.ev-body p { font-size: 0.9375rem; color: var(--ji-text-muted); margin-top: 8px; max-width: 66ch; }
.ev-go { display: inline-block; margin-top: 10px; color: var(--ji-link); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.ev-go:hover { text-decoration: underline; }

/* ---- Adhésion : encadré des tarifs en verre dépoli, posé sur une section sombre ---- */
.hero-glass {
  position: relative; margin-top: 34px;
  display: inline-flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
  padding: 18px 26px; border-radius: 16px;
  /* Voile nuit et non plus voile blanc : un texte posé sur du verre se juge sur ce qui passe dessous (Cordouan, README § Verre dépoli). */
  background: color-mix(in srgb, var(--ji-navy-night) 22%, transparent); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.22);
}
.hero-glass .g-price { font-family: var(--font-display); font-size: 1.75rem; color: #fff; }
.hero-glass .g-note { font-size: 0.9375rem; color: var(--ji-on-dark); }
/* Carte tarif « mise en avant » */
.tarif-card.featured { border: 2px solid var(--ji-coral); box-shadow: 0 18px 44px rgba(255,87,87,0.16); }
.tarif-card .tag { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ji-coral); font-weight: 700; margin-bottom: 8px; }

/* ---- Événements : timeline verticale (colonne vertébrale) ------------------- */
.timeline-v { position: relative; margin-top: clamp(20px, 3vh, 32px); padding-left: 0; }
.timeline-v::before {
  content: ''; position: absolute; left: 96px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--ji-border-strong), var(--ji-border));
}
.timeline-v .ev-item { position: relative; border-top: 0; padding: 18px 0 18px 0; grid-template-columns: 84px 1fr; gap: 8px 40px; }
.timeline-v .ev-item::before {
  content: ''; position: absolute; left: 90px; top: 26px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--ji-navy); border: 3px solid var(--ji-surface);
  box-shadow: 0 0 0 2px var(--ji-navy);
}
.timeline-v .ev-item:first-child::before { background: var(--ji-coral); box-shadow: 0 0 0 2px var(--ji-coral); }
.timeline-v .ev-date { align-items: flex-end; text-align: right; }

/* ==== Événements, version 2 (proposition du pôle Événementiel, adaptée au gabarit) =====================================
   Page pages/evenements.html et fiches evenements/<slug>.html. Les cartes gardent les classes que lit
   tools/controle-doublons.mjs (.ev-item, .ev-top, .ev-bot, .ev-meta, h3, groupes « À venir » / « Retour sur nos événements »).
   Verre et dégradés : sur fond sombre seulement (le hero, le panneau d'abonnement, l'appel final). */

/* Titre de section numéroté (01 À venir) : le numéro est hors du titre, le titre reste lisible tel quel. */
.sec-titre { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--ji-navy); margin-bottom: 28px; }
.sec-num { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--ji-navy); }
.sec-titre h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); text-transform: uppercase; color: var(--ji-navy); margin: 0; }
.sec-titre .ev-group-title { margin: 0; }
.section-dark .sec-titre { border-bottom-color: var(--ji-on-dark-border); }
.section-dark .sec-num, .section-dark .sec-titre h2 { color: var(--ji-on-dark); }

/* Hero : la carte « Prochain rendez-vous », en verre sur le fond nuit. */
.ev-hero-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.ev-prochain {
  position: relative; padding: 24px; border-radius: 16px; color: var(--ji-on-dark);
  background: color-mix(in srgb, var(--ji-navy-night) 30%, transparent); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.22);
}
.ev-prochain-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
/* Le corail en contour, le texte en blanc sur le fond nuit : un texte blanc de 12 px sur le corail plein ne tient que 3,11:1. */
.ev-prochain .ev-etiquette { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px var(--ji-coral); }
.ev-prochain-format { font-size: 0.8125rem; color: var(--ji-on-dark-muted); }
.ev-prochain-titre { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; }
.ev-prochain .ev-date .ev-top { color: var(--ji-coral); font-size: 2.6rem; }
.ev-prochain .ev-date .ev-bot { color: var(--ji-on-dark-muted); }
.ev-prochain h2 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; line-height: var(--ji-leading-display); color: var(--ji-on-dark); margin: 0; }
.ev-prochain .ev-meta span { color: var(--ji-on-dark-muted); }
.ev-prochain p { font-size: 0.9375rem; color: var(--ji-on-dark-muted); margin-top: 12px; }
.ev-prochain a:not(.btn) { color: var(--ji-on-dark); }
.ev-prochain .ev-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ji-on-dark-border); }
@media (max-width: 900px) { .ev-hero-grille { grid-template-columns: 1fr; } }

/* Étiquettes (type, format) */
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-etiquette { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px; background: #E6EEFB; color: var(--ji-navy); }

/* Barre de tri : onglets et filtres. Cachée sans JavaScript (attribut hidden) : sans script, tout est visible. */
.ev-filtres { background: var(--ji-surface); border-bottom: 1px solid var(--ji-border); padding: 18px 0; }
.ev-filtres .wrap { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; }
.ev-onglets { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ji-surface-sunken); border: 1px solid var(--ji-border); }
.ev-onglets button { font: 600 0.875rem/1 var(--font-body); padding: 10px 18px; border-radius: 999px; border: 0; background: transparent; color: var(--ji-navy); cursor: pointer; min-height: 40px; }
.ev-onglets button[aria-pressed="true"] { background: var(--ji-navy); color: #fff; }
.ev-selecteurs { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ev-selecteurs label { display: flex; flex-direction: column; gap: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ji-text-muted); }
.ev-selecteurs select { font: 400 0.9375rem var(--font-body); color: var(--ji-ink); padding: 10px 12px; min-height: 44px; min-width: 160px; border: 1px solid var(--ji-border-strong); border-radius: 8px; background: var(--ji-white); }
.ev-vue { font: 600 0.9375rem var(--font-body); color: var(--ji-link); background: none; border: 0; padding: 10px 4px; cursor: pointer; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.ev-vide { font-size: 0.9375rem; color: var(--ji-text-muted); margin-top: 8px; }
.ev-filtres .ev-aucun { flex-basis: 100%; margin: 0; }

/* Cartes d'événement : une grille, l'ancienne liste en colonne ne vaut plus pour elles. */
.evlist.ev-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(18px, 2vw, 24px); }
/* L'état vide de « À venir » : l'avis tient la place des cartes, à côté du panneau d'inscription. */
.ev-cartes > .notice { margin-top: 0; align-self: start; }
@media (min-width: 900px) { .ev-cartes > .notice { grid-column: span 2; } }
.ev-item.ev-carte { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--ji-border); border-radius: 14px; overflow: hidden; background: var(--ji-white); box-shadow: 0 10px 30px rgba(15,58,101,0.06); }
.evlist .ev-item.ev-carte:first-child { border-top: 1px solid var(--ji-border); }
.ev-carte-visuel { position: relative; min-height: 150px; padding: 18px; display: flex; align-items: flex-end; background: radial-gradient(120% 120% at 100% 0%, var(--ji-navy) 0%, var(--ji-navy-night) 100%); }
.ev-carte-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-carte-visuel .ev-date { position: relative; padding: 8px 12px; border-radius: 10px; background: var(--ji-white); align-items: center; }
.ev-carte-visuel .ev-top { font-size: 1.75rem; }
.ev-carte-visuel .ev-bot { margin-top: 2px; font-size: 0.6875rem; }
.ev-carte-corps { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; min-width: 0; }
.ev-carte-corps h3 { font-family: var(--font-display); font-size: 1.375rem; text-transform: uppercase; line-height: var(--ji-leading-display); color: var(--ji-navy); overflow-wrap: break-word; hyphens: auto; }
.ev-carte-corps .ev-meta { margin-top: 0; }
.ev-carte-corps p { font-size: 0.9375rem; color: var(--ji-text-muted); }
.ev-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: auto; padding-top: 12px; }
.ev-actions .btn { font-size: 1rem; padding: 10px 18px; }
.ev-actions .btn-coral { font-size: 1.1875rem; padding-block: 8px; }
.ev-lien { font-weight: 600; font-size: 0.9375rem; color: var(--ji-link); text-underline-offset: 3px; }

/* Le dernier événement, mis en avant : la carte prend toute la largeur, visuel à gauche. */
.ev-item.ev-carte.ev-une { grid-column: 1 / -1; flex-direction: row; }
.ev-une .ev-carte-visuel { flex: 0 0 42%; min-height: 260px; }
.ev-une .ev-carte-corps { padding: 28px 30px; }
.ev-une .ev-carte-corps h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
@media (max-width: 760px) { .ev-item.ev-carte.ev-une { flex-direction: column; } .ev-une .ev-carte-visuel { flex: none; min-height: 180px; } }
/* Les événements passés, comme sur la maquette du pôle : deux par rang dès 900 px ; la carte ne se met en largeur,
   visuel à gauche, qu'à partir de 1200 px : en dessous, le texte n'aurait plus que 200 px. */
@media (min-width: 900px) {
  .evlist.ev-cartes-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ev-cartes-large .ev-item.ev-carte:not(.ev-une) { flex-direction: row; }
  .ev-cartes-large .ev-carte:not(.ev-une) .ev-carte-visuel { flex: 0 0 34%; min-height: 0; }
}

/* Panneau « Recevez nos prochains rendez-vous » : fond bleu, donc dégradé permis. */
.abonnement { border-radius: 14px; padding: 26px; color: var(--ji-on-dark); background: var(--ji-gradient-hero); display: flex; flex-direction: column; gap: 12px; }
.abonnement .eyebrow { margin-bottom: 0; color: var(--ji-on-dark); }
.abonnement h3 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; line-height: var(--ji-leading-display); color: var(--ji-on-dark); }
.abonnement p, .abonnement .form-note { font-size: 0.9375rem; color: var(--ji-on-dark); }
.abonnement label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ji-on-dark); }
.abonnement .input { width: 100%; background: var(--ji-navy-night); color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 8px; padding: 12px; min-height: 44px; font: 400 1rem var(--font-body); }
.abonnement .input::placeholder { color: rgba(255,255,255,0.7); }
.abonnement .field { margin-top: 0; }
.abonnement .field-error { color: #fff; }
.abonnement .form-msg[role="alert"], .abonnement .form-msg[role="status"] { background: rgba(7,31,56,0.6); border: 1px solid rgba(255,255,255,0.5); color: #fff; }
.abonnement .input[aria-invalid="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.abonnement .form-note { margin-top: 0; }
.abonnement .form-note a { color: #fff; }
.abonnement .consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.abonnement .consentement input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.abonnement .btn-light { justify-content: center; }
.abonnement-liens { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.abonnement-liens a { color: #fff; font-size: 0.9375rem; text-underline-offset: 3px; }

/* Frise des mois (« Retour sur nos événements ») : des repères qui mènent aux cartes. */
.ev-frise { list-style: none; margin: 28px 0 32px; padding: 0; display: flex; justify-content: space-between; gap: 12px; position: relative; overflow-x: auto; }
.ev-frise::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: var(--ji-border-strong); }
/* Un repère prend la largeur de son contenu, jamais moins que son mot le plus long : la frise défile si la place manque. */
.ev-frise li { position: relative; padding-top: 22px; }
.ev-frise li::before { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ji-blue); }
.ev-frise li:last-child::before { background: var(--ji-coral); }
.ev-frise a { text-decoration: none; color: var(--ji-navy); font-weight: 600; font-size: 0.875rem; display: block; }
.ev-frise span { display: block; font-size: 0.8125rem; color: var(--ji-text-muted); }
.ev-frise a:hover { text-decoration: underline; }

/* Vue calendrier, construite par js/main.js à partir des cartes : un bloc par mois. */
.ev-calendrier { display: grid; gap: 22px; }
.ev-mois h3 { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; color: var(--ji-navy); border-bottom: 1px solid var(--ji-border-strong); padding-bottom: 8px; margin-bottom: 8px; }
.ev-mois ul { list-style: none; margin: 0; padding: 0; }
.ev-mois li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; font-size: 0.9375rem; }
.ev-mois li span { color: var(--ji-text-muted); }
.ev-mois a { color: var(--ji-link); font-weight: 600; text-underline-offset: 3px; }

/* Celles et ceux qui font vivre nos événements */

/* Appel final « Un événement à proposer ? » : fond bleu, comme .appel. */
.appel-ev { border-radius: 16px; padding: clamp(28px, 4vw, 44px); background: var(--ji-gradient-hero); color: var(--ji-on-dark); }
.appel-ev h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform: uppercase; color: var(--ji-on-dark); }
.appel-ev p { margin-top: 10px; color: var(--ji-on-dark); max-width: 60ch; }
.appel-ev .appel-actions { margin-top: 22px; }

/* ---- Fiche d'un événement (evenements/<slug>.html) ---- */
.fil-ariane { font-size: 0.8125rem; color: var(--ji-on-dark-muted); margin-bottom: 18px; }
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.fil-ariane li + li::before { content: '›'; content: '›' / ''; margin-right: 6px; }
.fil-ariane a { color: var(--ji-on-dark); text-underline-offset: 3px; }
/* Le titre d'un événement est long : il prend la largeur, un cran plus petit qu'un titre de page (16 signes). */
.page-hero.fiche-hero h1 { max-width: none; font-size: clamp(2rem, 4.2vw, 3.4rem); }
.fiche-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 0.9375rem; color: var(--ji-on-dark-muted); }
.fiche-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.fiche-hero-tags .statut { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ji-on-dark-muted); }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.fiche-main > section + section { margin-top: clamp(40px, 6vh, 64px); }
.fiche-main .sec-titre { margin-bottom: 20px; }
.fiche-main p { color: var(--ji-text-body); }
.fiche-main p + p { margin-top: 1em; }
.fiche-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.fiche-aside .card { padding: 20px 22px; }
.fiche-aside h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ji-link); font-family: var(--font-body); margin-bottom: 10px; }
.fiche-aside dl { margin: 0; display: grid; gap: 10px; }
.fiche-aside dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ji-text-muted); }
.fiche-aside dd { margin: 2px 0 0; font-size: 0.9375rem; color: var(--ji-ink); }
.fiche-aside .partage { display: flex; flex-wrap: wrap; gap: 12px; }
.fiche-aside .partage a, .fiche-aside .partage button { font: 600 0.9375rem var(--font-body); color: var(--ji-link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }
.fiche-aside .ressources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fiche-aside .ressources a { color: var(--ji-link); font-weight: 600; font-size: 0.9375rem; }
.programme { list-style: none; margin: 0; padding: 0; }
.programme li { display: grid; grid-template-columns: 84px 1fr; gap: 6px 20px; padding: 16px 0; border-top: 1px solid var(--ji-border); }
.programme li:first-child { border-top: 0; }
.programme.sans-heure li { grid-template-columns: 1fr; }
.programme .heure { font-family: var(--font-display); font-size: 1.25rem; color: var(--ji-navy); }
.programme h3 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; color: var(--ji-text-strong); }
.fiche-main .programme p { font-size: 0.9375rem; color: var(--ji-text-muted); margin-top: 4px; }
.tr-question { border-radius: 14px; padding: 24px 26px; background: var(--ji-gradient-hero); color: var(--ji-on-dark); }
.tr-question .eyebrow { color: var(--ji-on-dark); margin-bottom: 8px; }
.fiche-main .tr-question p { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.75rem); text-transform: uppercase; line-height: var(--ji-leading-display); color: var(--ji-on-dark); }
.intervenants { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.intervenants .card { padding: 18px 20px; }
.intervenants h3 { font-family: var(--font-display); font-size: 1.125rem; text-transform: uppercase; color: var(--ji-navy); margin: 8px 0 2px; }
.fiche-main .intervenants p { font-size: 0.875rem; color: var(--ji-text-muted); }
.retenir { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.retenir li { border: 1px solid var(--ji-border); border-radius: 12px; padding: 18px 20px; background: var(--ji-white); }
.retenir .n { font-family: var(--font-display); font-size: 2rem; color: var(--ji-coral); line-height: 1; }
.retenir p { margin-top: 8px; font-size: 0.9375rem; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.galerie figcaption, .credit { font-size: 0.8125rem; color: var(--ji-text-muted); margin-top: 6px; }
.equipe-fiche { margin: 0; display: grid; gap: 0; }
.equipe-fiche > div { display: grid; grid-template-columns: 180px 1fr; gap: 8px 20px; padding: 14px 0; border-top: 1px solid var(--ji-border); }
.equipe-fiche > div:first-child { border-top: 0; }
.equipe-fiche dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ji-link); padding-top: 3px; }
.equipe-fiche dd { margin: 0; font-size: 0.9375rem; color: var(--ji-ink); }
.ev-voisins { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; margin-top: clamp(40px, 6vh, 64px); padding: 20px 24px; border: 1px solid var(--ji-border); border-radius: 14px; background: var(--ji-white); }
.ev-voisins a { color: var(--ji-navy); text-decoration: none; }
.ev-voisins .eyebrow { color: var(--ji-text-muted); margin-bottom: 4px; display: block; }
.ev-voisins strong { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; display: block; }
@media (max-width: 900px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche-aside { position: static; }
  .equipe-fiche > div { grid-template-columns: 1fr; }
  .programme li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ev-prochain, .abonnement { backdrop-filter: none; } }
/* Ce que le script cache reste caché, même là où une règle donne un display (cartes en flex, libellés des filtres). */
.ev-carte[hidden], .ev-selecteurs label[hidden], .ev-filtres[hidden], .ev-vide[hidden] { display: none; }
.ev-prochain-tete + h2 { margin-top: 14px; }
.abonnement form { display: flex; flex-direction: column; gap: 12px; }
.abonnement .field { display: flex; flex-direction: column; gap: 6px; }

/* ---- Widget HelloAsso ------------------------------------------------------- */
.ha-widget { width: 100%; height: 760px; border: none; border-radius: 14px; background: var(--ji-white); }
.ha-direct { margin-top: 24px; }

@media (max-width: 760px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---- Publications : liste et page de lecture --------------------------------------
   Une publication est signée : la couleur de son comité tient sur un filet, jamais dans le
   texte (Cordouan : le petit texte coloré prend --ji-link). Ici data-comite ne pose que
   --e ; --ji-action reste neutre et la page de lecture n'a aucun corail à côté de la
   couleur du comité (une seule couleur non bleue par visuel). Sans data-comite, le
   filet est corail : c'est l'association qui signe. */
.alist-item, .analyse { --e: var(--ji-coral); }
[data-comite="influence"]    { --e: var(--ji-comite-influence); }
[data-comite="securite"]     { --e: var(--ji-comite-securite); }
[data-comite="intelligence"] { --e: var(--ji-comite-intelligence); }
[data-comite="crise"]        { --e: var(--ji-comite-crise); }
[data-comite="innovation"]   { --e: var(--ji-comite-innovation); }
[data-comite="cyber"]        { --e: var(--ji-comite-cyber); }
[data-comite="citoyennete"]  { --e: var(--ji-comite-citoyennete); }

/* La liste : une ligne par publication, la plus récente en haut. Elle tient avec une seule. */
.alist-wrap { max-width: 840px; }
.alist { list-style: none; margin: 0; padding: 0; }
.alist > li + li { margin-top: clamp(28px, 4vh, 44px); }
.alist-item { display: grid; grid-template-columns: 88px 1fr; gap: 8px 24px; }
.alist-date { margin: 0; }
.alist-date time { display: flex; flex-direction: column; align-items: flex-start; }
.alist-jour { font-family: var(--font-display); font-size: 2.2rem; line-height: 0.9; color: var(--ji-navy); }
.alist-mois { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ji-text-muted); margin-top: 4px; }
.alist-corps { border-left: 4px solid var(--e); padding-left: 20px; }
.alist-meta { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ji-text-muted); }
.alist-corps h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--ji-navy); margin-top: 8px; }
.alist-corps h2 a { color: inherit; text-decoration: none; }
.alist-corps h2 a::after { content: ' →'; content: ' →' / ''; }
.alist-corps h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.alist-chapo { margin-top: 12px; max-width: 62ch; color: var(--ji-text-body); }
.alist-vide { max-width: 62ch; }
.alist-vide h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--ji-navy); }
.alist-vide p { margin-top: 14px; color: var(--ji-text-muted); }
.alist-vide a { color: var(--ji-link); }

/* La page de lecture : colonne étroite, texte en encre, sources et mention en pied. */
.analyse-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 26ch; }
.analyse-hero .lead { max-width: 64ch; }
.analyse-hero .grad i:first-child { background: var(--e); }
.analyse-retour {
  display: block; width: fit-content; margin-bottom: 18px; font-size: 0.9375rem;
  color: var(--ji-on-dark-muted); text-decoration: none;
}
.analyse-retour:hover { color: var(--ji-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.analyse-wrap { max-width: 760px; }
.analyse-signature { border-left: 4px solid var(--e); padding: 2px 0 2px 18px; }
.analyse-signature p { margin: 0; }
.analyse-auteur { font-weight: 600; font-size: 1.0625rem; color: var(--ji-text-strong); }
.analyse-comite, .analyse-date { font-size: 0.9375rem; color: var(--ji-text-muted); }
.analyse-texte { margin-top: clamp(32px, 5vh, 52px); }
.analyse-texte > * + * { margin-top: 1.25em; }
.analyse-texte p, .analyse-texte li { max-width: 68ch; font-size: 1.0625rem; line-height: 1.8; color: var(--ji-text-body); }
.analyse-texte h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--ji-navy); margin-top: 2em; }
.analyse-texte h3 {
  font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0;
  font-size: 1.1875rem; color: var(--ji-text-strong); margin-top: 1.8em;
}
.analyse-texte ul, .analyse-texte ol { padding-left: 1.3em; }
.analyse-texte li + li { margin-top: 0.4em; }
.analyse-texte blockquote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--ji-border-strong); }
.analyse-texte blockquote p { font-size: 1.125rem; font-style: italic; color: var(--ji-text-strong); }
.analyse-texte a { color: var(--ji-link); text-underline-offset: 3px; overflow-wrap: anywhere; }
.analyse-texte sup { font-size: 0.75em; line-height: 0; }
.analyse-texte sup a { padding: 0 2px; font-weight: 600; text-decoration: none; }
.analyse-texte sup a:hover { text-decoration: underline; }
.analyse-sources { margin-top: clamp(40px, 6vh, 64px); padding-top: 28px; border-top: 1px solid var(--ji-border-strong); }
.analyse-sources h2 { font-size: 1.375rem; color: var(--ji-navy); }
.analyse-sources ol { margin: 16px 0 0; padding-left: 1.6em; }
.analyse-sources li { font-size: 0.9375rem; line-height: 1.6; color: var(--ji-text-muted); overflow-wrap: anywhere; }
.analyse-sources p { margin-top: 16px; font-size: 0.9375rem; line-height: 1.6; color: var(--ji-text-muted); overflow-wrap: anywhere; }
.analyse-sources li + li { margin-top: 0.6em; }
.analyse-sources li:target { background: var(--ji-surface-sunken); }
.analyse-sources a { color: var(--ji-link); }
.analyse-mention {
  margin-top: 32px; padding: 16px 20px; border-radius: 10px;
  background: var(--ji-surface-sunken); border: 1px solid var(--ji-border);
  font-size: 0.9375rem; color: var(--ji-text-strong);
}

@media (max-width: 560px) {
  .alist-item { grid-template-columns: 1fr; }
  .alist-date time { flex-direction: row; align-items: baseline; gap: 8px; }
  .alist-mois { margin-top: 0; }
}

/* ---- Révélations au défilement (progressives, jamais bloquantes) ------------------- */
html.rv .rv-t { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.7s var(--ease-out-quart); transition-delay: var(--rv-d, 0ms); }
html.rv .rv-t.rv-in { opacity: 1; transform: none; }

/* ---- Retour en haut ----------------------------------------------------------------- */
#back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: var(--z-nav);
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ji-navy); color: #fff; font-size: 1.125rem;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s;
  box-shadow: 0 12px 34px rgba(15, 58, 101, 0.35);
}
/* Caché, il sort aussi de l'ordre de tabulation (visibility) : à opacity 0 seul, le focus tombait sur un bouton invisible. */
#back-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; }

/* ---- Responsive ----------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu.open { display: flex; }
  .watch-row { grid-template-columns: 1fr auto; padding: 20px 6px; }
  .watch-row .lockup { grid-column: 1 / -1; }
  .footer-cols { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .phare-content { padding-top: 118px; }
  .phare h1 { font-size: clamp(2.4rem, 12.5vw, 3.1rem); }
  .dial { right: -220px; top: -150px; width: 460px; height: 460px; }
  .signal-link { margin-left: 0; flex-basis: 100%; }
}