/* ==========================================================================
   CIDEF — Feuille de styles principale
   Direction artistique : Institutional Premium / Editorial Minimalism
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.25;
}

h4 {
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.3;
}

h5 {
  font-size: var(--text-h5);
  font-weight: 600;
  line-height: 1.4;
}

p {
  margin: 0;
  max-width: 68ch;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sur les aplats verts et sur le hero, l'anneau vert se confondrait avec le
   fond : au pied de page le contraste tombait à 1:1, soit un anneau
   strictement invisible. Il passe au blanc sur ces surfaces. */
.topbar,
.hero,
.cta-band,
.footer {
  --color-focus: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. Utilitaires de structure
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.7);
}

.section--surface {
  background: var(--color-surface-light);
}

.section--soft {
  background: var(--color-primary-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-overlay);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: top var(--duration) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Titre de section : surtitre + titre + filet rouge ----------------------- */

.section-head {
  margin-bottom: var(--space-8);
}

.section-head__eyebrow {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.section-head__title {
  position: relative;
  max-width: 22ch;
  padding-bottom: var(--space-4);
}

.section-head__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--color-secondary);
}

.section-head__intro {
  margin-top: var(--space-5);
  font-size: var(--text-lead);
  color: var(--color-muted);
}

.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   3. Boutons et liens d'action
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary-soft);
}

.btn--ghost-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

.btn--light {
  background: var(--color-white);
  color: var(--color-primary);
}

.btn--light:hover {
  background: var(--color-primary-soft);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--color-primary);
}

.link-arrow svg {
  transition: transform var(--duration) var(--ease-out);
}

.link-arrow:hover {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. Topbar
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-caption);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 36px;
}

.topbar__legal {
  margin: 0;
  max-width: none;
  color: rgba(255, 255, 255, 0.92);
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.topbar__links a {
  color: var(--color-white);
  font-weight: 500;
}

@media (max-width: 767px) {
  .topbar__legal {
    font-size: 0.8125rem;
  }
  .topbar__links {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Header et navigation
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 92px;
}

.header__logo {
  display: inline-flex;
}

.header__logo img {
  height: 58px;
  width: auto;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.icon-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: min(84vh, 760px);
  background: var(--color-primary-darker);
  color: var(--color-white);
  overflow: hidden;
  isolation: isolate;
}

/* Fond photographique en fondu enchaîné -------------------------------- */

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Voile dégradé : le texte repose sur du vert quasi opaque à gauche,
   la photographie reste lisible à droite. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(0, 61, 29, 0.95) 0%,
      rgba(0, 61, 29, 0.9) 34%,
      rgba(0, 68, 32, 0.56) 60%,
      rgba(0, 45, 21, 0.26) 100%
    ),
    linear-gradient(to top, rgba(0, 30, 14, 0.55) 0%, rgba(0, 30, 14, 0) 42%);
}

/* Contenu ---------------------------------------------------------------- */

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-9);
  padding-block: var(--space-11) var(--space-8);
}

.hero__body {
  max-width: 34rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

.hero__eyebrow::before {
  content: "";
  width: 36px;
  height: 2px;
  background: var(--color-accent);
}

.hero__title {
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

.hero__intro {
  font-size: var(--text-lead);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Légende et puces ------------------------------------------------------- */

.hero__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero__caption {
  margin: 0;
  max-width: 56ch;
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.82);
}

.hero__dots {
  display: flex;
  gap: var(--space-2);
}

.hero__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.hero__dot::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  transition: background-color var(--duration) var(--ease-out);
}

.hero__dot:hover::before {
  background: rgba(255, 255, 255, 0.6);
}

.hero__dot.is-active::before {
  background: var(--color-accent);
}

@media (max-width: 1023px) {
  .hero {
    min-height: 0;
  }
  .hero__inner {
    padding-block: var(--space-9) var(--space-7);
    gap: var(--space-8);
  }
  .hero__slide img {
    object-position: center 42%;
  }
  .hero__veil {
    background:
      linear-gradient(
        170deg,
        rgba(0, 61, 29, 0.94) 0%,
        rgba(0, 61, 29, 0.88) 50%,
        rgba(0, 55, 26, 0.6) 100%
      );
  }
}

@media (max-width: 600px) {
  .hero__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .hero__actions .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   7. Repères institutionnels
   -------------------------------------------------------------------------- */

.facts {
  border-block: 1px solid var(--color-border);
  background: var(--color-white);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.fact {
  padding: var(--space-8) var(--space-5);
  border-left: 1px solid var(--color-border);
}

.fact:first-child {
  border-left: 0;
  padding-left: 0;
}

.fact__value {
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.fact__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .facts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fact {
    padding: var(--space-6) var(--space-5);
  }
  .fact:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .fact:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }
  .fact__value {
    font-size: 2rem;
  }
}

/* --------------------------------------------------------------------------
   8. Blocs éditoriaux deux colonnes
   -------------------------------------------------------------------------- */

.editorial {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-11);
  align-items: center;
}

.editorial--reverse .editorial__media {
  order: 2;
}

.editorial__media {
  position: relative;
}

/* Filet vert décalé : rappel éditorial discret, sans ombre ni effet. */
.editorial__media::before {
  content: "";
  position: absolute;
  left: calc(var(--space-5) * -1);
  top: var(--space-6);
  bottom: var(--space-6);
  width: 2px;
  background: var(--color-primary);
}

.editorial__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radius-lg);
}

.editorial__body p + p {
  margin-top: var(--space-4);
}

.editorial__body .btn,
.editorial__body .link-arrow {
  margin-top: var(--space-6);
}

.rule-list {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.rule-list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-small);
}

.rule-list dt,
.rule-list__term {
  flex: 0 0 132px;
  font-weight: 600;
  color: var(--color-heading);
}

.rule-list__desc {
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .editorial {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .editorial--reverse .editorial__media {
    order: 0;
  }
  .editorial__media::before {
    display: none;
  }
  .editorial__media img {
    aspect-ratio: 3 / 2;
  }
}

/* --------------------------------------------------------------------------
   9. Missions
   -------------------------------------------------------------------------- */

.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.mission {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease-out);
}

.mission:hover {
  border-color: var(--color-border-strong);
}

.mission__number {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}

.mission h3 {
  font-size: var(--text-h5);
  margin-bottom: var(--space-3);
}

.mission p {
  font-size: var(--text-small);
  color: var(--color-muted);
}

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

@media (max-width: 767px) {
  .mission-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   10. Organisation et commissions
   -------------------------------------------------------------------------- */

.organisation {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-11);
  align-items: start;
}

.organ-list {
  margin-top: var(--space-6);
}

.organ-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.organ-list li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.organ-list__index {
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--color-primary);
  padding-top: 3px;
}

.organ-list :is(h3, h4) {
  margin-bottom: var(--space-1);
}

.organ-list p {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.commissions {
  padding: var(--space-8);
  background: var(--color-surface-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.commissions h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-2);
}

.commissions > p {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: var(--space-6);
}

.commission-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1) var(--space-6);
}

.commission-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-heading);
}

.commission-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

@media (max-width: 1023px) {
  .organisation {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .commissions {
    padding: var(--space-6);
  }
}

@media (max-width: 767px) {
  .commission-list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11. Mot du Président
   -------------------------------------------------------------------------- */

.president {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-9);
  align-items: center;
}

.president__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--radius-lg);
}

.president__quote {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-heading);
  margin: 0 0 var(--space-6);
  max-width: 24ch;
  text-wrap: balance;
}

.president__quote::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--color-secondary);
  margin-bottom: var(--space-5);
}

.president__text {
  color: var(--color-muted);
}

.president__signature {
  margin-top: var(--space-6);
  font-size: var(--text-small);
  font-style: normal;
}

.president__signature strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  color: var(--color-heading);
}

.president__signature span {
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .president {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .president__media {
    max-width: 320px;
  }
  .president__media img {
    aspect-ratio: 3 / 2;
  }
}

/* --------------------------------------------------------------------------
   12. Actualités
   -------------------------------------------------------------------------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}

.card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 32%;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.badge--neutral {
  background: var(--color-surface);
  color: var(--color-text);
}

.card__date {
  font-size: var(--text-caption);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.card__title {
  font-size: var(--text-h5);
  margin-bottom: var(--space-3);
}

.card__title a {
  color: inherit;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card {
  position: relative;
}

.card__excerpt {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.card__footer {
  margin-top: auto;
}

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

@media (max-width: 767px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   13. Rendez-vous statutaires
   -------------------------------------------------------------------------- */

.meetings {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
}

.meetings__intro {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-9) var(--space-8);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.meetings__intro h2 {
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

.meetings__intro p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-7);
}

.meetings__list {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-4) var(--space-8);
}

.meeting {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.meeting:last-child {
  border-bottom: 0;
}

.meeting__when {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.meeting :is(h2, h3, h4) {
  font-size: var(--text-h5);
  margin-bottom: var(--space-2);
}

.meeting p {
  font-size: var(--text-small);
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .meetings {
    grid-template-columns: 1fr;
  }
  .meetings__intro {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-7) var(--space-6);
  }
  .meetings__list {
    border-left: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding-inline: var(--space-6);
  }
}

@media (max-width: 480px) {
  .meeting {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   14. Adhésion
   -------------------------------------------------------------------------- */

.join {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-11);
  align-items: start;
}

.steps {
  counter-reset: step;
  margin-top: var(--space-7);
}

.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 var(--space-7) var(--space-9);
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 700;
}

.steps li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: 8px;
  width: 1px;
  background: var(--color-border);
}

.steps li:last-child::after {
  display: none;
}

.steps h3 {
  font-size: var(--text-h5);
  margin-bottom: var(--space-2);
}

.steps p {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.fees {
  padding: var(--space-8);
  background: var(--color-surface-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.fees h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-6);
}

.fees__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.fees__row:last-of-type {
  border-bottom: 0;
}

.fees__label {
  font-size: var(--text-small);
  color: var(--color-text);
}

.fees__value {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fees__note {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-caption);
  color: var(--color-muted);
}

.fees .btn {
  width: 100%;
  margin-top: var(--space-6);
}

@media (max-width: 1023px) {
  .join {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .fees {
    padding: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   15. Documents
   -------------------------------------------------------------------------- */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.doc {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration) var(--ease-out);
}

.doc:hover {
  border-color: var(--color-primary);
}

.doc__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.doc :is(h2, h3, h4) {
  font-size: var(--text-h5);
  margin-bottom: var(--space-1);
}

.doc :is(h2, h3, h4) a {
  color: inherit;
}

.doc__meta {
  font-size: var(--text-caption);
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .doc-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-9);
  align-items: start;
}

.contact-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-list li:first-child {
  border-top: 1px solid var(--color-border);
}

.contact-list svg {
  color: var(--color-primary);
  margin-top: 3px;
}

.contact-list :is(h2, h3) {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

.contact-list p {
  font-size: var(--text-small);
}

.map-placeholder {
  display: grid;
  place-items: center;
  min-height: 340px;
  height: 100%;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  padding: var(--space-6);
}

.map-placeholder p {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .contact {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   17. Bandeau d'appel final
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--color-primary);
  color: var(--color-white);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-10);
  flex-wrap: wrap;
}

.cta-band h2 {
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.cta-band p {
  color: rgba(255, 255, 255, 0.9);
}

.cta-band__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--color-primary);
  color: var(--color-white);
}

.footer__grid {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 4fr;
  gap: var(--space-8);
  padding-block: var(--space-10) var(--space-8);
}

.footer__logo {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: inline-block;
  margin-bottom: var(--space-5);
}

.footer__logo img {
  height: 88px;
  width: auto;
}

.footer p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-small);
}

.footer :is(h2, h3) {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

.footer__links li {
  margin-bottom: var(--space-3);
}

.footer__links a {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-small);
}

.footer__links a:hover {
  color: var(--color-white);
}

/* Lien vers la page Facebook. Le carré de 44 px est posé ici, avec le
   composant, et non dans la section 32 : ce n'est pas une correction après
   coup, c'est la taille du bouton. L'icône, elle, reste à 26 px — la cible
   est plus grande que le dessin, ce qui est le but.

   La marge haute égale celle de la liste de contact : les deux lignes se
   suivent au même pas. Le retrait négatif à gauche remet le dessin dans
   l'alignement de la colonne, dont le carré déborde de huit pixels. */
.footer__social {
  margin-top: var(--space-3);
  margin-left: calc(var(--space-2) * -1);
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.12);
}

.footer address {
  font-style: normal;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-small);
  line-height: 1.7;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
}

.footer__bottom p,
.footer__bottom a {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.88);
}

.footer__legal {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
}

@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   19. Couche WordPress
   Neutralise les réglages par défaut des blocs pour que les composants
   ci-dessus gardent la main, sans casser la barre d'administration.
   -------------------------------------------------------------------------- */

:where(.wp-site-blocks) > * {
  margin-block: 0;
}

.wp-site-blocks {
  display: flow-root;
}

/* Les blocs Groupe qui portent nos classes de section ne doivent pas hériter
   de la largeur de contenu : ce sont nos conteneurs qui la fixent. */
.wp-block-group.section,
.wp-block-group.hero,
.wp-block-group.facts,
.wp-block-group.cta-band,
.wp-block-group.topbar,
.wp-block-group.header,
.wp-block-group.footer {
  max-width: none;
  margin-inline: 0;
}

/* Images de blocs : nos ratios et nos rayons priment sur ceux de l'éditeur. */
.wp-block-image,
.wp-block-image figure {
  margin: 0;
}

.wp-block-image img {
  display: block;
  height: auto;
}

.hero__slide.wp-block-image,
.editorial__media .wp-block-image,
.president__media .wp-block-image,
.card__media .wp-block-image {
  margin: 0;
}

.hero__slide.wp-block-image img {
  width: 100%;
  height: 100%;
}

/* Listes de blocs réutilisées dans nos composants. */
.wp-block-list.commission-list,
.wp-block-list.rule-list,
.wp-block-list.organ-list,
.wp-block-list.steps,
.wp-block-list.contact-list,
.wp-block-list.footer__links,
.wp-block-list.topbar__links,
.wp-block-list.facts__grid {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Courriel et page Facebook, sous l'adresse de la colonne Contact. La liste
   reprend footer__links pour hériter de sa couleur, de sa taille et de la
   hauteur de cible de la section 32 ; seul l'écart avec le paragraphe
   d'adresse qui la précède lui est propre. La règle est posée ici, et non
   dans la section 18, parce que la remise à zéro ci-dessus porte deux classes
   et l'emporterait sur une règle écrite plus haut. */
.wp-block-list.footer__contact {
  margin-top: var(--space-4);
}

/* Paragraphes de blocs : la largeur de lecture est portée par nos composants. */
.wp-block-group .fact__value,
.wp-block-group .fact__label,
.wp-block-group .hero__caption,
.wp-block-group .doc__meta,
.wp-block-group .card__date {
  max-width: none;
}

/* Boutons natifs stylés comme nos boutons. */
.wp-block-button__link.btn {
  text-decoration: none;
}

/* La barre d'administration ne doit pas recouvrir l'en-tête collant. */
.admin-bar .header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 782px) {
  .admin-bar .header {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   20. Équivalences de balisage entre la maquette et les blocs
   Les sections composées de blocs Groupe reprennent les styles définis plus
   haut pour les éléments de liste.
   -------------------------------------------------------------------------- */

/* Hero : le voile est porté par le fond, et la légende voyage avec la photo. */
.hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(0, 61, 29, 0.95) 0%,
      rgba(0, 61, 29, 0.9) 34%,
      rgba(0, 68, 32, 0.56) 60%,
      rgba(0, 45, 21, 0.26) 100%
    ),
    linear-gradient(to top, rgba(0, 30, 14, 0.55) 0%, rgba(0, 30, 14, 0) 42%);
}

.hero__slide figcaption,
.hero__slide .wp-element-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  max-width: 56ch;
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

.hero__slide.is-active figcaption,
.hero__slide.is-active .wp-element-caption {
  opacity: 1;
}

.hero__footer {
  position: relative;
  min-height: 44px;
  justify-content: flex-end;
}

@media (max-width: 1023px) {
  .hero__backdrop::after {
    background:
      linear-gradient(
        170deg,
        rgba(0, 61, 29, 0.94) 0%,
        rgba(0, 61, 29, 0.88) 50%,
        rgba(0, 55, 26, 0.6) 100%
      );
  }
}

/* Navigation native : reprise des styles de .nav__link. */
.header .wp-block-navigation {
  gap: var(--space-5);
}

.header .wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  padding: var(--space-2) 0;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  color: var(--color-primary);
  font-weight: 600;
}

/* Organes : un bloc Groupe par organe, mêmes règles que .organ-list li. */
.organ-list .organ {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "index title" "index text";
  gap: 0 var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.organ-list .organ:last-child {
  border-bottom: 1px solid var(--color-border);
}

.organ__index {
  grid-area: index;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--color-primary);
  padding-top: 3px;
}

.organ-list .organ :is(h3, h4) {
  grid-area: title;
  margin-bottom: var(--space-1);
}

.organ-list .organ p:not(.organ__index) {
  grid-area: text;
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* Listes terme / description rendues en éléments de liste. */
.rule-list li {
  display: flex;
  gap: var(--space-4);
}

/* Étapes d'adhésion : compteur porté par les blocs Groupe. */
.steps {
  counter-reset: step;
}

.steps .step {
  position: relative;
  counter-increment: step;
  padding: 0 0 var(--space-7) var(--space-9);
}

.steps .step:last-child {
  padding-bottom: 0;
}

.steps .step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 700;
}

.steps .step::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: 8px;
  width: 1px;
  background: var(--color-border);
}

.steps .step:last-child::after {
  display: none;
}

/* Droits et cotisations : chaque ligne est un paragraphe à deux spans. */
p.fees__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: none;
}

/* Coordonnées : un bloc Groupe par entrée. */
.contact-list .contact-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-list .contact-item:first-child {
  border-top: 1px solid var(--color-border);
}

/* Documents : sans pictogramme, le titre porte seul la hiérarchie. */
.doc {
  flex-direction: column;
  gap: var(--space-1);
}

/* Cartes d'actualité : métadonnées en spans dans un paragraphe. */
p.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
}

/* Bannière d'appel : deux colonnes sur grand écran. */
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* Boutons natifs : le bloc porte la classe, le lien porte l'apparence. */
.wp-block-button.btn {
  display: inline-flex;
}

.wp-block-button.btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.wp-block-button.btn--primary > .wp-block-button__link {
  background: var(--color-primary);
  color: var(--color-white);
}

.wp-block-button.btn--primary > .wp-block-button__link:hover {
  background: var(--color-primary-dark);
}

.wp-block-button.btn--secondary > .wp-block-button__link {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wp-block-button.btn--light > .wp-block-button__link {
  background: var(--color-white);
  color: var(--color-primary);
}

.wp-block-button.btn--light > .wp-block-button__link:hover {
  background: var(--color-primary-soft);
}

.wp-block-button.btn--ghost-light > .wp-block-button__link {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.wp-block-button.btn--ghost-light > .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

.hero__actions,
.cta-band__actions,
.header__actions {
  gap: var(--space-4);
}

.fees .wp-block-buttons,
.fees .wp-block-button,
.fees .wp-block-button__link {
  width: 100%;
}

.fees .wp-block-buttons {
  margin-top: var(--space-6);
}

.meetings__intro .wp-block-buttons {
  margin-top: var(--space-7);
}

/* --------------------------------------------------------------------------
   21. Correctifs d'en-tête
   Les règles de bloc par défaut sont ramenées à une spécificité nulle pour
   que les composants gardent la main.
   -------------------------------------------------------------------------- */

:where(.wp-block-image img) {
  display: block;
  height: auto;
}

.header__logo img {
  height: 58px;
  width: auto;
}

.footer__logo img {
  height: 88px;
  width: auto;
}

.header__inner {
  flex-wrap: nowrap;
}

.header .wp-block-navigation,
.header .wp-block-navigation__container {
  flex-wrap: nowrap;
}

.header .wp-block-navigation .wp-block-navigation-item__content {
  white-space: nowrap;
}

.header__actions .wp-block-button__link {
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .header .wp-block-navigation {
    gap: var(--space-4);
  }
}

/* L'image du hero remplit sa couche quelle que soit la règle de bloc. */
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

@media (max-width: 1023px) {
  .hero__slide img {
    object-position: center 42%;
  }
}

/* --------------------------------------------------------------------------
   22. Légendes du hero
   La légende native de chaque bloc Image est relayée dans le bandeau bas par
   le script. Les figcaptions eux-mêmes restent dans le balisage pour rester
   modifiables dans l'éditeur, mais ne s'affichent pas en façade.
   -------------------------------------------------------------------------- */

.hero__slide figcaption,
.hero__slide .wp-element-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero__footer {
  justify-content: space-between;
}

.hero__footer .hero__caption {
  order: -1;
}

/* --------------------------------------------------------------------------
   23. Rendez-vous statutaires
   Le titre et le texte sont des blocs frères : la grille les place par zones
   plutôt que par ordre d'apparition.
   -------------------------------------------------------------------------- */

.meetings__list .meeting {
  grid-template-columns: 112px 1fr;
  grid-template-areas:
    "when title"
    "when text";
  gap: 0 var(--space-5);
}

.meetings__list .meeting__when {
  grid-area: when;
}

.meetings__list .meeting :is(h2, h3, h4) {
  grid-area: title;
}

.meetings__list .meeting p:not(.meeting__when) {
  grid-area: text;
}

@media (max-width: 480px) {
  .meetings__list .meeting {
    grid-template-columns: 1fr;
    grid-template-areas: "when" "title" "text";
    gap: var(--space-2) 0;
  }
}

/* --------------------------------------------------------------------------
   24. Boutons natifs
   -------------------------------------------------------------------------- */

/* Le bloc Bouton n'est qu'un conteneur : l'apparence vit sur le lien. */
.wp-block-button.btn {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.wp-block-button.btn:hover {
  background: none;
}

/* --------------------------------------------------------------------------
   25. Pages intérieures
   Bandeau de titre, article, listes d'opportunités et états vides.
   -------------------------------------------------------------------------- */

.page-banner {
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-10) var(--space-9);
}

.page-banner__eyebrow {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.page-banner__title {
  position: relative;
  max-width: 20ch;
  padding-bottom: var(--space-5);
  font-size: var(--text-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page-banner__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--color-secondary);
}

.page-banner__intro {
  margin-top: var(--space-5);
  font-size: var(--text-lead);
  color: var(--color-muted);
}

.page-banner__trail {
  font-size: var(--text-caption);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}

/* Contenu courant d'une page ou d'un article ----------------------------- */

/* Le contenu éditorial vit dans .entry-content : le rythme vertical s'y
   applique plutôt que sur le conteneur de section. Le conteneur reste pleine
   largeur et c'est le texte courant qui porte la largeur de lecture, pour que
   les tableaux et les blocs composés puissent s'étendre. */
.entry-content {
  max-width: none;
}

/* Chaque chapitre d'une page est un groupe .page-section : un titre de niveau
   deux et ce qui le suit. Le rythme vertical vaut donc au premier niveau du
   contenu comme à l'intérieur d'un chapitre. */
:is(.entry-content, .page-body, .page-section) > p,
:is(.entry-content, .page-body, .page-section) > h2,
:is(.entry-content, .page-body, .page-section) > h3,
:is(.entry-content, .page-body, .page-section) > h4,
:is(.entry-content, .page-body, .page-section) > ul,
:is(.entry-content, .page-body, .page-section) > ol,
:is(.entry-content, .page-body, .page-section) > blockquote {
  max-width: 48rem;
}

:is(.entry-content, .page-body, .page-section) > * + * {
  margin-top: var(--space-4);
}

:is(.entry-content, .page-body, .page-section) > h2 {
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
}

:is(.entry-content, .page-body, .page-section) > h2 + * {
  margin-top: 0;
}

:is(.entry-content, .page-body, .page-section) > h3 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

:is(.entry-content, .page-body, .page-section) > h3 + * {
  margin-top: 0;
}

:is(.entry-content, .page-body, .page-section) > ul:not([class]),
:is(.entry-content, .page-body, .page-section) > ul.wp-block-list:not(.rule-list):not(.commission-list) {
  margin-top: var(--space-5);
  padding-left: var(--space-5);
  list-style: disc;
}

:is(.entry-content, .page-body, .page-section) > ul.wp-block-list:not(.rule-list):not(.commission-list) li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}

:is(.entry-content, .page-body, .page-section) > .wp-block-buttons {
  margin-top: var(--space-8);
}

:is(.entry-content, .page-body, .page-section) > .steps,
:is(.entry-content, .page-body, .page-section) > .fees,
:is(.entry-content, .page-body, .page-section) > .commissions,
:is(.entry-content, .page-body, .page-section) > .contact,
:is(.entry-content, .page-body, .page-section) > .form-wrap {
  margin-top: var(--space-7);
}

.page-section > h2 {
  margin-top: 0;
}

/* Le titre de chapitre reste posé au-dessus de son propre texte : le regard
   descend en ligne droite. La colonne de gauche n'accueille pas les titres,
   mais le sommaire de la page, qui lui donne une raison d'exister. */
:is(.entry-content, .page-body) > .page-section {
  margin-top: var(--space-10);
}

:is(.entry-content, .page-body) > .section-head__intro {
  max-width: 44rem;
  margin-bottom: var(--space-8);
  font-size: var(--text-lead);
  line-height: 1.6;
}

/* Les ancres du sommaire doivent s'arrêter sous l'en-tête collant. */
.page-body :is(h2, h3)[id] {
  scroll-margin-top: 7.5rem;
}

@media (min-width: 1100px) {
  /* Deux colonnes : le sommaire à gauche, le document à droite. La grille ne
     s'applique qu'aux pages qui ont effectivement un sommaire. */
  .entry-content:has(> .page-toc) {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: var(--space-9);
    align-items: start;
  }

  /* Le sommaire suit la lecture. Il est le seul élément de sa colonne, donc
     il peut rester collant sur toute la hauteur du document. */
  .page-toc {
    position: sticky;
    top: 7.5rem;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
  }

  .page-body {
    min-width: 0;
  }

  /* Le texte courant garde sa largeur de lecture ; les blocs composés
     occupent toute la colonne, et c'est eux qui tiennent l'espace restant. */
  .page-body :is(p, h2, h3, h4, ul, ol, blockquote) {
    max-width: 44rem;
  }

  .page-body :is(.table-governance, .steps, .fees, .commissions, .contact, .wp-block-table) {
    max-width: none;
  }
}

/* L'image à la une d'un article occupe toute la largeur de lecture. */
.article__media,
.article .wp-block-post-featured-image {
  max-width: 48rem;
  margin-bottom: var(--space-7);
}

.article__media img,
.article .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* L'article garde la largeur du conteneur commun : ce sont ses blocs de
   texte qui portent la largeur de lecture, pour que tout reste aligné sur le
   même bord gauche que les autres sections. */
.article {
  max-width: none;
}

/* Opportunités ----------------------------------------------------------- */

.opportunity-list {
  border-top: 1px solid var(--color-border);
}

.opportunity {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.opportunity__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.opportunity :is(h2, h3, h4) {
  font-size: var(--text-h4);
  margin-bottom: var(--space-2);
}

.opportunity__org,
.opportunity__deadline {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.opportunity__deadline {
  font-weight: 600;
  color: var(--color-secondary);
}

.meeting__place {
  color: var(--color-primary);
  font-weight: 500;
}

/* État vide -------------------------------------------------------------- */

.empty-state {
  padding: var(--space-8);
  background: var(--color-surface-light);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-muted);
  max-width: none;
  text-align: center;
}

/* Les listes rendues hors du bloc Rendez-vous gardent leur cadre. */
.section .meetings__list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-8);
}

@media (max-width: 1023px) {
  .page-banner {
    padding-block: var(--space-8) var(--space-7);
  }
}

/* Lien « voir tout » dans un en-tête de section. */
.section-head__more {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  font-weight: 600;
}

/* Tableaux de gouvernance : sobres, lisibles, sans zébrures. */
.table-governance table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.table-governance th,
.table-governance td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.table-governance th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
  border-bottom-color: var(--color-border-strong);
}

.table-governance td:first-child {
  font-weight: 500;
  color: var(--color-heading);
}

.wp-block-table.table-governance {
  margin: var(--space-6) 0 0;
  overflow-x: auto;
}

/* Sur la page Adhésion, l'encadré des montants occupe toute la largeur. */
.section .container > .fees {
  margin-top: var(--space-6);
}

/* Le bloc Tableau dessine une grille complète par défaut : on ne garde que
   les filets horizontaux, conformément à la sobriété du design system. */
.wp-block-table.table-governance table th,
.wp-block-table.table-governance table td {
  border: 0;
  border-bottom: 1px solid var(--color-border);
}

.wp-block-table.table-governance table th {
  border-bottom-color: var(--color-border-strong);
}

.wp-block-table.table-governance table tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   26. Formulaire de contact
   ========================================================================== */

.form-wrap {
  margin-top: var(--space-6);
  max-width: 44rem;
  scroll-margin-top: 120px;
}

/* Bandeau d'état après un envoi. Le filet coloré porte l'information, la
   couleur de fond reste neutre : aucune teinte hors palette n'est introduite. */
.form-notice {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  scroll-margin-top: 120px;
}

.form-notice p {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text);
}

.form-notice p + p {
  margin-top: var(--space-2);
}

.form-notice--ok {
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
}

.form-notice--error {
  border-left-color: var(--color-secondary);
}

.form-notice:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form__legend {
  margin: 0 0 var(--space-5);
  font-size: var(--text-caption);
  color: var(--color-muted);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

@media (max-width: 599px) {
  .form__grid {
    grid-template-columns: 1fr;
  }
}

.field {
  margin: 0 0 var(--space-5);
}

.form__grid .field {
  margin-bottom: 0;
}

.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-heading);
}

.field__required {
  color: var(--color-secondary);
}

.field__hint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-muted);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration) var(--ease-out);
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

/* La flèche du select est dessinée en SVG encodé pour rester accordée à la
   palette, les styles natifs variant d'un navigateur à l'autre. */
.field select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333333' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-muted);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-disabled);
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--color-secondary);
}

.field__error {
  display: block;
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-secondary);
}

/* Case d'accord : la case garde sa taille native, la cible cliquable vient du
   libellé, qui occupe la seconde colonne. */
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-items: start;
}

.field--check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-primary);
}

.field--check label {
  margin: 0;
  font-weight: 400;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--color-text);
}

.field--check .field__error {
  grid-column: 2;
}

.field--check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form__actions {
  margin: var(--space-7) 0 0;
}

/* Piège à robots : retiré de l'écran sans display:none, que certains automates
   détectent. Il est aussi retiré du parcours clavier et de l'arbre
   d'accessibilité côté balisage. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .field input,
  .field select,
  .field textarea {
    transition: none;
  }
}

/* ==========================================================================
   27. Sommaire de page
   ========================================================================== */

.page-toc {
  margin-bottom: var(--space-8);
}

.page-toc__label {
  margin: 0 0 var(--space-4);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.page-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  border-left: 1px solid var(--color-border);
}

.page-toc__item {
  margin: 0;
  padding: 0;
}

.page-toc__item::before {
  content: none;
}

.page-toc__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

.page-toc__link:hover {
  color: var(--color-primary);
  border-left-color: var(--color-border-strong);
  text-decoration: none;
}

/* Le chapitre en cours de lecture. Le filet porte l'information autant que la
   couleur, pour ne pas la faire reposer sur elle seule. */
.page-toc__link[aria-current="true"] {
  color: var(--color-primary);
  font-weight: 600;
  border-left-color: var(--color-primary);
}

/* Sous 1100 px, le sommaire devient un encadré en tête de document : même
   service, sans colonne. */
@media (max-width: 1099px) {
  .page-toc {
    padding: var(--space-5) var(--space-5) var(--space-4);
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .page-toc__list {
    border-left: 0;
  }

  .page-toc__link {
    padding-inline: 0;
    margin-left: 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-border);
    min-height: 44px;
  }

  .page-toc__item:last-child .page-toc__link {
    border-bottom: 0;
  }

  .page-toc__link[aria-current="true"] {
    border-left: 0;
  }
}

/* ==========================================================================
   28. Commande d'arrêt du hero
   ========================================================================== */

.hero__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__pause {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

.hero__pause:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--color-white);
}

.hero__pause svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.hero__pause[hidden] {
  display: none;
}

/* ==========================================================================
   29. Carte de localisation
   ========================================================================== */

/* La carte est un cadre Google Maps, en mode « output=embed » : aucune clé
   d'API n'est nécessaire. Le chargement est différé jusqu'au défilement, mais
   dès qu'il a lieu Google dépose ses cookies : un mécanisme de consentement
   reste à prévoir avant la mise en ligne. Les deux liens sous la carte mènent
   à un itinéraire, chez Google ou chez OpenStreetMap. */
.map {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 340px;
  height: 100%;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.map__frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}

.map__note {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-muted);
}

.map__note strong {
  color: var(--color-heading);
  font-weight: 600;
}

.map__note a {
  font-weight: 500;
}

/* Écran de consentement. Il occupe la place de la carte tant que le visiteur
   ne l'a pas demandée : aucune requête ne part vers Google avant son clic. */
.map__consent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-7);
  background: var(--color-surface-light);
}

.map__consent-lead {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: 600;
  color: var(--color-heading);
}

.map__consent-text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--text-small);
  color: var(--color-text);
}

.map__consent-note {
  margin: 0;
  max-width: 44ch;
  font-size: var(--text-caption);
  color: var(--color-muted);
}

.map__consent-btn {
  align-self: flex-start;
}

/* Retrait de l'accord, sur la page Gestion des cookies. */
.consent-reset {
  margin-top: var(--space-5);
}

.consent-reset__state {
  margin: var(--space-3) 0 0;
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* Mention qu'il reste à compléter avant la mise en ligne. Volontairement
   visible : elle doit se voir sur la page, pas seulement dans le code. */
.legal-todo {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-light);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* ==========================================================================
   30. Effets de survol
   Retours discrets : une couleur, un filet, un déplacement d'un ou deux
   pixels. Rien qui bouge assez pour distraire la lecture.
   ========================================================================== */

/* Liens de texte : l'épaisseur du trait répond, pas la couleur. */
a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duration) var(--ease-out);
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Cartes d'actualité : le cadre se renforce, l'image avance à peine, le
   titre prend la couleur de marque. */
.card {
  transition: box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

.card:hover {
  transform: translateY(-2px);
}

.card__media {
  overflow: hidden;
}

.card__media img {
  transition: transform 400ms var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.03);
}

.card__title {
  transition: color var(--duration) var(--ease-out);
}

.card:hover .card__title,
.card:focus-within .card__title {
  color: var(--color-primary);
}

/* Documents : la pastille s'inverse, le bloc se soulève d'un pixel. */
.doc {
  transition: border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

.doc:hover,
.doc:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.doc__icon {
  transition: background-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.doc:hover .doc__icon,
.doc:focus-within .doc__icon {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Lignes de tableau, de liste et de rendez-vous : un fond très léger suffit
   à suivre la ligne des yeux. Le filet de séparation reste en place. */
.table-governance tbody tr,
.rule-list li,
.commission-list li,
.opportunity,
.meeting,
.contact-list .contact-item {
  transition: background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.table-governance tbody tr:hover,
.rule-list li:hover,
.opportunity:hover,
.meeting:hover {
  background: var(--color-primary-soft);
}

/* Le tableau déborde du filet de gauche sans un peu de marge interne. */
.table-governance tbody tr:hover td:first-child {
  box-shadow: -8px 0 0 var(--color-primary-soft);
}

.commission-list li:hover {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.contact-list .contact-item:hover :is(h2, h3) {
  color: var(--color-primary);
}

.contact-list .contact-item :is(h2, h3) {
  transition: color var(--duration) var(--ease-out);
}

/* Fil d'Ariane et liens de pied de page : même logique que le texte courant. */
.page-banner__trail a {
  text-decoration: none;
}

.page-banner__trail a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Le logo d'en-tête s'éclaircit à peine au survol : un signe qu'il est
   cliquable, sans animation. */
.header__logo {
  transition: opacity var(--duration) var(--ease-out);
}

.header__logo:hover {
  opacity: 0.82;
}

/* Les déplacements et les zooms disparaissent quand le système demande moins
   de mouvement : les changements de couleur, eux, restent. */
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .doc:hover,
  .doc:focus-within {
    transform: none;
  }

  .card:hover .card__media img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   31. Menu mobile
   Le bloc Navigation du coeur porte déjà le recouvrement, le piège à focus,
   la fermeture par Échap et le verrouillage du défilement : le thème ne
   touche qu'à l'apparence et au seuil.

   Le seuil, justement, est déplacé à 1199 px. Le coeur bascule en
   recouvrement à 600 px, mais la barre horizontale compte neuf entrées plus
   un bouton : elle ne tient pas sous 1200 px. Entre les deux, le thème
   masquait la liste sans montrer le bouton d'ouverture, et il ne restait
   aucune navigation.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  /* Le coeur masque le bouton d'ouverture au-delà de 600 px. */
  .header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}

/* Pas de display ici : le coeur masque le bouton d’ouverture au-dessus de
   600 px et le bloc ci-dessus le rallume jusqu’à 1199 px. Le poser ici, à
   spécificité égale et plus tard dans la cascade, le ferait réapparaître à
   côté de la barre horizontale. */
.header .wp-block-navigation__responsive-container-open,
.header .wp-block-navigation__responsive-container-close {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.header .wp-block-navigation__responsive-container-open:hover,
.header .wp-block-navigation__responsive-container-close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Le recouvrement est une page pleine, pas une boîte centrée. */
.header .wp-block-navigation__responsive-container.is-menu-open {
  padding: 0;
  background: var(--color-white);
}

.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close {
  width: 100%;
  max-width: none;
  height: 100%;
}

.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow-y: auto;
}

/* Le coeur intercale un conteneur entre le dialogue et la liste, avec son
   propre retrait : sans cela, la liste commence 70 px sous le bandeau. */
.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  display: flex;
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Bandeau de tête, à la hauteur de l'en-tête qu'il recouvre : le menu
   s'ouvre sans décaler ce que l'oeil vient de quitter. Le mot est décoratif,
   le dialogue porte son propre nom accessible. */
.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog::before {
  content: "Menu";
  display: flex;
  align-items: center;
  flex: none;
  min-height: 92px;
  padding-inline: var(--page-gutter);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 24px;
  right: var(--page-gutter);
}

/* Les entrées sont des lignes pleine largeur alignées à gauche : neuf
   intitulés se parcourent le long d'un seul bord, là où le centrage obligeait
   l'oeil à chercher le début de chaque mot. */
.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  flex: 1;
  width: 100%;
  margin: 0;
  gap: 0;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}

/* Le coeur centre la liste, l'entrée et son lien. Trois largeurs à reprendre
   pour que la ligne entière devienne la cible. */
.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  width: 100%;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
}

.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--page-gutter);
  border-left: 3px solid transparent;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover {
  background: var(--color-primary-soft);
  border-left-color: var(--color-border-strong);
  color: var(--color-primary);
}

/* La page en cours porte le même filet vert que le chapitre courant du
   sommaire : un seul signe à apprendre pour tout le site. */
.header .wp-block-navigation__responsive-container.is-menu-open
  .current-menu-item .wp-block-navigation-item__content {
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

/* L'appel à adhérer ferme la liste, collé au bas du recouvrement. Il n'existe
   que dans le menu : la barre d'en-tête porte déjà son propre bouton. */
.header .wp-block-navigation .nav-item--cta {
  display: none;
}

.header .wp-block-navigation__responsive-container.is-menu-open
  .nav-item--cta {
  display: block;
  margin-top: auto;
  padding: var(--space-5) var(--page-gutter) var(--space-6);
  border-bottom: 0;
}

.header .wp-block-navigation__responsive-container.is-menu-open
  .nav-item--cta .wp-block-navigation-item__content {
  justify-content: center;
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-button);
  font-weight: 600;
}

.header .wp-block-navigation__responsive-container.is-menu-open
  .nav-item--cta .wp-block-navigation-item__content:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   32. Cibles tactiles
   --------------------------------------------------------------------------

   Un lien dont le texte fait 19 pixels de haut est un lien de 19 pixels : le
   doigt, lui, en couvre une quarantaine. WCAG 2.2 demande 24 pixels au
   minimum (critère 2.5.8, niveau AA) et 44 pixels au niveau AAA. Le site
   visait déjà 44 pour ses boutons ; ses liens de navigation en restaient à
   19 ou 23.

   La hauteur vient d'un `min-height` posé sur le lien lui-même, passé en
   `inline-flex` pour que le texte reste centré dans la cible. Le remplissage
   aurait fait la même chose, mais il faut alors le recalculer à chaque
   changement de taille de texte ; la hauteur minimale, non.

   Ces règles ferment la section 2 de l'audit. Elles sont regroupées ici
   plutôt que dispersées dans les sections de composants, pour qu'un
   relecteur puisse vérifier le critère d'un seul coup d'œil.
   -------------------------------------------------------------------------- */

/* Barre haute : elle n'était haute que de 36 px, son lien ne pouvait donc pas
   atteindre 44. */
.topbar__inner {
  min-height: 44px;
}

.topbar__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Navigation principale, affichage en ligne seulement. Sous 1200 px la
   navigation passe en recouvrement, où la section 31 donne déjà 56 px à
   chaque entrée : ces règles ne doivent pas s'y appliquer. */
@media (min-width: 1200px) {
  .header .wp-block-navigation .wp-block-navigation-item__content {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
}

/* Fil d'Ariane. Ses liens mènent vers des pages atteignables ailleurs, mais
   c'est le chemin de retour le plus court : il se touche aussi. */
.page-banner__trail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Pied de page. La hauteur de cible remplace l'écart entre les lignes : sans
   cela, la colonne gagnerait deux fois la même place. */
.footer__links li {
  margin-bottom: 0;
}

.footer__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Liens de carte. Ils suivent un retour à la ligne dans le paragraphe
   d'adresse : la ligne qui les porte s'ouvre à 44 px, le reste du paragraphe
   garde son interligne. */
.map__note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Courriel et page Facebook de la fiche Contact, sur l'accueil comme sur la
   page. Même disposition que les liens de carte : chacun occupe sa ligne
   après un retour, la ligne s'ouvre à 44 px, la phrase sur le téléphone
   garde son interligne. */
.contact-item p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Liens des listes « terme / valeur » des pages légales. Ils ne relèvent pas
   de l'exception pour les liens en ligne : chacun occupe seul sa cellule de
   valeur, sa taille ne dépend donc d'aucun texte voisin. Mesurés à 19 px de
   haut avant cette règle. */
.rule-list__desc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Titres cliquables des listes et des cartes. C'est l'action principale de
   chaque élément ; elle doit se toucher aussi franchement qu'un bouton. */
.doc :is(h2, h3, h4) a,
.opportunity :is(h2, h3, h4) a,
.meeting :is(h2, h3, h4) a,
.card__title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Case d'accord du formulaire. Elle passe au minimum de 24 px exigé par le
   critère ; les 44 px viennent du libellé, qui lui est associé par son
   attribut `for` et occupe deux lignes. Une case de 44 px serait aussi plus
   grande que le texte qu'elle accompagne. */
.field--check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 0;
}