/**
 * Feuille de style globale ARLDPR.
 * Layout, header, navigation, footer, éléments communs.
 * Couleurs/typos = tokens theme.json (var(--wp--preset--*)). Aucune valeur de
 * marque en dur ; seuls quelques gris neutres restent littéraux.
 */

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--wp--preset--font-family--body, 'Montserrat', sans-serif);
  color: var(--wp--preset--color--ink, #1a1a1a);
  background: var(--wp--preset--color--background, #fff);
  line-height: 1.6;
}

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

h1, h2, h3, h4 {
  font-family: var(--wp--preset--font-family--heading, 'Montserrat', sans-serif);
  color: var(--wp--preset--color--primary, #1B4965);
  line-height: 1.2;
}
/* Tailles de titres homogènes sur tout le site (calées sur la source).
   Les titres de blocs ayant leur propre classe (hero, page-header…) gardent
   leur taille. */
h2 { font-size: 1.5rem; }   /* 24px */
h3 { font-size: 1.25rem; color: var(--wp--preset--color--secondary-dark, #2E798C); }  /* 20px, bleu pâle (nuance texte, contraste WCAG AA) */
h4 { font-size: 1.125rem; } /* 18px */
/* Les titres de cartes restent en bleu principal (pas bleu pâle). */
.feature-card__title,
.rule-card__title,
.timeline__title { color: var(--wp--preset--color--primary, #1B4965); }

/* Objectifs (page Mission) : espace sous chaque élément. */
.objectives > li { margin-bottom: 1rem; }
.objectives > li:last-child { margin-bottom: 0; }

a { color: var(--wp--preset--color--secondary-dark, #2E798C); }
a:hover { color: var(--wp--preset--color--primary, #1B4965); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section { padding-block: var(--wp--preset--spacing--80, 4rem); }

/* ==========================================================================
   Largeur du contenu (main) — cohérente avec l'en-tête et le pied de page.
   Chaque bloc de premier niveau : 100% de large, centré, max 1200px, padding
   latéral identique. Le hero est la seule exception (pleine largeur).
   ========================================================================== */

#main-content > * {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Rythme vertical homogène entre sections (le titre ne démarre plus trop bas). */
#main-content > * { margin-block: 2.5rem; }
#main-content > *:first-child { margin-top: 1.25rem; }
#main-content > *:last-child { margin-bottom: 3.5rem; }

/* Un titre de section reste collé à son contenu (pas de grand vide titre → liste/texte). */
#main-content > .wp-block-heading + *,
#main-content > h2 + *,
#main-content > h3 + *,
#main-content > h4 + * { margin-top: 0.75rem; }

/* Les conteneurs internes des blocs ne redoublent pas la contrainte. */
#main-content > * .container { max-width: none; margin-inline: 0; padding-inline: 0; width: 100%; }

/* La classe .section (padding vertical propre) devient neutre ici : le rythme
   est déjà géré par les marges ci-dessus. */
#main-content > *.section { padding-block: 0; }

/* Largeur de lecture réduite pour un article seul. */
#main-content > * .container--narrow { max-width: var(--wp--style--global--content-size, 768px); margin-inline: auto; }

/* Hero : pleine largeur, remonte de 60px pour passer SOUS la vague de l'en-tête. */
#main-content > .hero {
  max-width: none;
  width: auto;
  margin: -60px 0 2.5rem;
  padding-inline: 0;
}

/* ==========================================================================
   Longueur de ligne confortable (≤ ~75 caractères) pour les contenus texte.
   Les grilles, cartes et le hero gardent la pleine largeur du conteneur.
   ========================================================================== */

/* Contenus texte : largeur de lecture (≤ ~75ch), alignés sur le bord GAUCHE
   du cadre 1200px (comme les autres blocs) — et non repoussés au bord de
   l'écran. La marge gauche recolle pile sur le gutter interne du cadre. */
#main-content > p,
#main-content > h1,
#main-content > h2,
#main-content > h3,
#main-content > h4,
#main-content > ul,
#main-content > ol,
#main-content > .wp-block-heading,
#main-content > .wp-block-list,
#main-content > .accordion,
#main-content > .membership-form {
  /* width:auto (pas 100% hérité) : laisse la marge gauche fixe + la marge
     droite auto se répartir l'espace normalement. Sans ça, un élément dont
     la police est grande (un titre) ne voit jamais son max-width (75ch)
     entrer en jeu — il garde width:100% de la règle précédente, et la marge
     gauche fixe le pousse hors du conteneur (marge droite résolue en négatif). */
  width: auto;
  max-width: 75ch;
  padding-inline: 0;
  margin-inline: max(1.5rem, calc((100% - var(--wp--style--global--wide-size, 1536px)) / 2 + 1.5rem)) auto;
}

/* Les listes gardent un retrait à gauche : les puces restent DANS le cadre. */
#main-content > ul,
#main-content > ol,
#main-content > .wp-block-list { padding-left: 1.5rem; }

/* ==========================================================================
   Section « Notre impact » : panneau des priorités (colonne de droite)
   ========================================================================== */

.wp-block-column.impact-panel {
  background: var(--wp--preset--color--surface, #F0F7F9);
  border-radius: var(--wp--custom--brand-radius, 8px);
  padding: 2rem;
  box-shadow: var(--wp--custom--card-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .06));
}
.wp-block-column.impact-panel > :first-child { margin-top: 0; }
.wp-block-column.impact-panel h3 { margin: 0 0 1rem; }
.wp-block-column.impact-panel ul { margin: 0; padding-left: 1.25rem; }
.wp-block-column.impact-panel li { margin-bottom: 0.5rem; }

/* ==========================================================================
   Page Navigation : liste numérotée des étapes de lavage + encadré Ressources
   ========================================================================== */

/* Étapes numérotées : marqueurs colorés (accent secondaire), titres et sous-puces. */
.steps-list > li { margin-bottom: 1rem; }
.steps-list > li::marker { color: var(--wp--preset--color--secondary, #62B6CB); font-weight: 700; }
.steps-list > li > strong { color: var(--wp--preset--color--primary, #1B4965); }
.steps-list ul { margin: 0.35rem 0 0; padding-left: 1.5rem; }
.steps-list ul li { margin-bottom: 0.25rem; }

/* Encadré vert « resource-box » : soit une colonne de droite (Navigation,
   Historique), soit n'importe quel bloc utilisé isolément (ex. un
   paragraphe « En résumé » — voir la page « La santé de notre lac »). */
.wp-block-column.resource-box,
.resource-box {
  background: var(--wp--preset--color--surface-green, #F0FDF4);
  border-radius: var(--wp--custom--brand-radius, 8px);
  padding: 2rem;
  box-shadow: var(--wp--custom--card-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .06));
}
.wp-block-column.resource-box {
  /* Hauteur selon le contenu : ne pas s'étirer sur toute la colonne. */
  align-self: flex-start;
}
/* Si resource-box est un paragraphe direct-enfant de #main-content, la règle
   de largeur de lecture (75ch) lui remet padding-inline:0 avec une
   spécificité plus forte que .resource-box seul — on la re-surclasse ici. */
#main-content > .resource-box {
  padding-inline: 2rem;
}
.wp-block-column.resource-box h2,
.wp-block-column.resource-box h3 {
  color: #166534; /* vert accent (#5FA777) trop clair en texte (2.76:1) : même vert accessible que .tag-list--green */
  text-align: center;
  font-size: 1.0625rem; /* ~17px : titre de boîte discret (comme la source) */
  margin: 0 0 0.75rem;
}
.wp-block-column.resource-box hr {
  border: 0;
  height: 1px;
  margin: 0.75rem 0 1rem;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.3), transparent);
}
.wp-block-column.resource-box ul { margin: 0; padding-left: 1.25rem; }
.wp-block-column.resource-box li { margin-bottom: 0.5rem; }

/* ==========================================================================
   Modale de consentement aux témoins (Loi 25)
   ========================================================================== */

.consent-modal {
  width: min(92vw, 520px);
  margin: auto; /* centrage (repli si l'UA ne le fait pas) */
  padding: 0;
  border: none;
  border-radius: var(--wp--custom--brand-radius, 8px);
  background: #fff;
  color: var(--wp--preset--color--ink, #1a1a1a);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.consent-modal::backdrop {
  background: rgba(15, 23, 42, .55);
}
.consent-modal__panel {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consent-modal__title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--wp--preset--color--primary, #1B4965);
}
.consent-modal__text { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.consent-modal__status {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary, #1B4965);
}
.consent-modal__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.consent-btn {
  padding: 0.55rem 1.25rem;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.consent-btn--accept { background: var(--wp--preset--color--primary, #1B4965); color: #fff; }
.consent-btn--accept:hover { background: #143a52; }
.consent-btn--decline { background: #fff; color: var(--wp--preset--color--primary, #1B4965); border-color: #d1d5db; }
.consent-btn--decline:hover { background: var(--wp--preset--color--surface, #F0F7F9); }

/* Liens légaux du pied de page */
.footer-legal { display: flex; flex-direction: column; gap: 0.25rem; }
@media (min-width: 640px) { .footer-legal { flex-direction: row; align-items: center; } }
.footer-legal a { color: rgba(27, 73, 101, .75); text-decoration: none; } /* .7 → .75 : contraste 4.22:1 insuffisant sur fond blanc (min. 4.5:1) */
.footer-legal a:hover { color: var(--wp--preset--color--primary, #1B4965); text-decoration: underline; }
.footer-legal span { margin: 0 0.4rem; color: rgba(27, 73, 101, .4); }
/* Sur mobile (liens en colonne), on masque le séparateur « · ». */
@media (max-width: 639px) { .footer-legal span { display: none; } }

/* Case à cocher de consentement du formulaire d'adhésion */
.mf .mf__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  font-weight: 400;
  color: var(--wp--preset--color--ink, #1a1a1a);
  cursor: pointer;
}
.mf .mf__consent-label input {
  margin-top: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.mf__consent span[aria-hidden] { color: #dc2626; }

/* Bouton d'envoi : plus compact, avec bordure, et espace dessous pour décoller
   le titre « Cotisation annuelle » qui suit le bloc. */
.mf__submit {
  display: inline-block;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  padding: 0.5rem 1.35rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--wp--preset--color--primary, #1B4965);
  border: 2px solid var(--wp--preset--color--primary, #1B4965);
  border-radius: var(--wp--custom--brand-radius, 8px);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.mf__submit:hover { background: #143a52; border-color: #143a52; color: #fff; }

/* ==========================================================================
   Accessibilité
   ========================================================================== */

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: #fff; color: var(--wp--preset--color--primary, #1B4965);
  padding: 0.5rem 1rem; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--secondary, #62B6CB);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  border-radius: var(--wp--custom--brand-radius, 8px);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
  cursor: pointer;
}
.btn--primary { background: var(--wp--preset--color--primary, #1B4965); color: #fff; }
.btn--primary:hover { background: #143a52; color: #fff; }
.btn--light { background: #fff; color: var(--wp--preset--color--primary, #1B4965); }
.btn--light:hover { background: rgba(255,255,255,.85); }
.btn--ghost {
  background: rgba(255,255,255,.1);
  border: 2px solid #fff; color: #fff;
}
.btn--ghost:hover { background: #fff; color: var(--wp--preset--color--primary, #1B4965); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header { display: flex; flex-direction: column; }

.site-header__bar { position: relative; z-index: 20; background: var(--wp--preset--color--primary, #1B4965); }
.site-header__inner {
  display: flex; justify-content: space-between; align-items: center;
  padding-block: 1rem;
}
.site-logo { display: inline-flex; align-items: center; }

/* Logo en-tête : jusqu'à 300px de large ; pied de page : 260px. Hauteur auto
   pour garder les proportions. Couvre le logo de repli (.site-logo img) et le
   logo personnalisé de WordPress (.custom-logo). */
.site-header .site-logo img,
.site-header .custom-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}
.site-footer .site-logo img,
.site-footer .custom-logo {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
}

/* Sur petit écran, on réduit le logo d'en-tête pour laisser la place au menu. */
@media (max-width: 767px) {
  .site-header .site-logo img,
  .site-header .custom-logo { width: 210px; }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.main-nav { display: flex; align-items: center; }

.nav-menu {
  display: flex; align-items: center; gap: 2rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-item { margin: 0; }
.nav-item--submenu { position: relative; }

.nav-link, .nav-cta {
  text-decoration: none; font-weight: 500;
  transition: color .2s ease, background-color .2s ease;
}
.nav-link { color: #fff; }
.nav-link:hover:not(.is-active) { color: rgba(255,255,255,.8); }

.nav-cta {
  background: #fff; color: var(--wp--preset--color--primary, #1B4965);
  padding: 0.5rem 1.5rem; border-radius: var(--wp--custom--brand-radius, 8px);
  white-space: nowrap; font-weight: 600;
}
.nav-cta:hover { background: rgba(255,255,255,.85); color: var(--wp--preset--color--primary, #1B4965); }

.submenu-toggle {
  background: none; border: none; color: #fff; font: inherit; cursor: pointer;
  padding: 0; display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500;
}
.nav-item--submenu:not(.is-active) > .submenu-toggle:hover { color: rgba(255,255,255,.8); }
.submenu-toggle[aria-expanded="true"] .submenu-icon { transform: rotate(180deg); }
.submenu-icon { transition: transform .2s ease; font-size: 0.875rem; }

.submenu {
  list-style: none; margin: 2px 0 0; padding: 0;
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.05);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 1000;
}
.submenu[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li:first-child .submenu-link { border-radius: 8px 8px 0 0; }
.submenu li:last-child .submenu-link { border-radius: 0 0 8px 8px; }

/* Liens de sous-menu : menu déroulant blanc → texte foncé lisible. */
.submenu-link {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--wp--preset--color--primary, #1B4965);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}

/* Survol / focus clavier : remplissage gris doux. */
.submenu-link:hover,
.submenu-link:focus-visible {
  background: var(--wp--preset--color--surface, #F0F7F9);
  color: var(--wp--preset--color--primary, #1B4965);
  outline: none;
}

/* Page courante : état distinct — fond bleuté, barre d'accent, gras. */
.submenu-link.is-active {
  background: rgba(98, 182, 203, .18);
  color: var(--wp--preset--color--primary, #1B4965);
  font-weight: 600;
  border-left-color: var(--wp--preset--color--secondary, #62B6CB);
}
.submenu-link.is-active:hover,
.submenu-link.is-active:focus-visible {
  background: rgba(98, 182, 203, .30);
}

/* Page / section courante (barre foncée) : trait bas CONTINU sous le libellé
   ET le caret. Dessiné en box-shadow → n'occupe aucune place, donc AUCUN
   décalage vertical : tous les items ont le même trait, transparent au repos. */
.nav-link,
.submenu-toggle {
  box-shadow: inset 0 -2px 0 transparent;
}
.nav-link.is-active,
.nav-item--submenu.is-active > .submenu-toggle {
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 #fff;
}

/* Toggle mobile + backdrop */
.nav-toggle {
  display: none; background: none; border: none; color: #fff;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 6px; font-size: 1.5rem; transition: background-color .2s ease;
}
.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(255,255,255,.12); }
.nav-drawer { display: contents; }
.nav-drawer-header { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(15,30,50,.55);
    opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility 0s linear .32s; z-index: 1090;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .32s ease, visibility 0s linear 0s; }
  .nav-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0;
    width: 88vw; max-width: 360px; background: #fff; box-shadow: -8px 0 32px rgba(15,76,92,.18);
    transform: translateX(100%); transition: transform .32s cubic-bezier(.32,.72,0,1);
    z-index: 1100; overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-drawer.is-open { transform: translateX(0); }
  .nav-drawer-header { display: flex; justify-content: flex-end; padding: 0.5rem; border-bottom: 1px solid #E5E7EB; }
  .nav-close {
    background: none; border: none; width: 44px; height: 44px; border-radius: 50%;
    color: var(--wp--preset--color--primary, #1B4965); font-size: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .nav-close:hover, .nav-close:focus-visible { background: var(--wp--preset--color--surface, #F0F7F9); }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 1.5rem; }
  .nav-menu > li { width: 100%; }
  .nav-menu > li > .nav-link,
  .nav-menu > li > .submenu-toggle {
    display: flex; width: 100%; padding: 0.875rem 1.5rem;
    color: var(--wp--preset--color--primary, #1B4965); font-size: 1.0625rem; font-weight: 500;
    align-items: center; justify-content: space-between; text-align: left; line-height: 1.4;
  }
  .nav-menu > li > .nav-link:hover,
  .nav-menu > li > .submenu-toggle:hover { background: var(--wp--preset--color--surface, #F0F7F9); }
  .nav-menu > li > .nav-link.is-active {
    box-shadow: inset 4px 0 0 var(--wp--preset--color--secondary, #62B6CB);
    background: var(--wp--preset--color--surface, #F0F7F9); text-decoration: none;
  }
  .nav-cta {
    align-self: flex-start; width: auto; margin: 1rem 1.5rem 0;
    background: var(--wp--preset--color--primary, #1B4965); color: #fff;
    padding: 0.5rem 1.25rem; font-size: 0.9375rem;
  }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent; max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .submenu[aria-hidden="false"] { max-height: 500px; }
  .nav-menu .submenu .submenu-link { padding: 0.625rem 1.5rem 0.625rem 2.5rem; font-size: 0.9375rem; }
  body.menu-open { overflow: hidden; }
}

/* ==========================================================================
   Wave divider
   ========================================================================== */

.wave-divider {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%235FA777'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%2362B6CB'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%230f4c5c'/%3E%3C/svg%3E");
  height: 60px; width: 100%; background-size: 100% 100%;
  background-position: center top; background-repeat: no-repeat; transform: scaleX(-1);
  position: relative; z-index: 3; /* la vague passe au-dessus du hero qui remonte dessous */
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer__top { position: relative; z-index: 10; background: var(--wp--preset--color--primary, #1B4965); }
.site-footer__top .container { padding-block: 1rem; }
.site-footer__body { background: #fff; padding-block: 3rem; }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-title { font-size: 1.125rem; margin-bottom: 1rem; color: rgba(27,73,101,.8); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: rgba(27,73,101,.8); text-decoration: none; }
.footer-links a:hover { color: var(--wp--preset--color--primary, #1B4965); }
.footer-social { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.footer-social__fb {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wp--preset--color--primary, #1B4965); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.footer-social__fb:hover { background: #143a52; color: #fff; }
.footer-copyright {
  border-top: 1px solid rgba(27,73,101,.2);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  color: rgba(27,73,101,.6);
  font-size: 0.875rem;
  /* Mobile : liens empilés AU-DESSUS du copyright (column-reverse). */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.5rem;
}
/* Bureau : copyright à gauche, liens à droite. */
@media (min-width: 640px) {
  .footer-copyright {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Réductions de mouvement / contraste élevé
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: high) {
  a:focus-visible, button:focus-visible { outline: 3px solid currentColor; }
}

/* ==========================================================================
   Titres de page / gabarits simples (actualités, article, 404)
   ========================================================================== */

.container--narrow { max-width: var(--wp--style--global--content-size, 768px); }

.page-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  margin: 0 0 2rem;
}

/* Archive actualités : liste d'articles (image à gauche, contenu à droite). */
.news-list { display: flex; flex-direction: column; }

.news-item__layout { display: flex; gap: 1.75rem; align-items: flex-start; }
@media (max-width: 639px) { .news-item__layout { flex-direction: column; gap: 1rem; } }

.news-item__media { flex-shrink: 0; }
.news-item__media img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--wp--custom--brand-radius, 8px);
}
@media (max-width: 639px) { .news-item__media img { width: 100%; height: auto; max-height: 220px; } }

.news-item__content { min-width: 0; max-width: 65ch; } /* largeur de lecture (comme max-w-prose de la source) */
.news-item__date { display: block; font-size: 0.875rem; color: var(--wp--preset--color--muted, #4b5563); margin-bottom: 0.35rem; }
.news-item__title { font-size: 1.5rem; color: var(--wp--preset--color--primary, #1B4965); margin: 0 0 0.75rem; }
.news-item__body > * + * { margin-top: 0.75rem; }
.news-item__body p { margin: 0; }
.news-item__body a { text-decoration: underline; }

/* Image seule dans une colonne (ex. Historique) : pleine largeur, coins arrondis. */
.wp-block-column > .wp-block-image { margin: 0; }
.wp-block-column > .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--wp--custom--brand-radius, 8px);
}

/* Trait dégradé entre les articles (comme la source). */
.news-item:not(:last-child)::after {
  content: "";
  display: block;
  height: 1px;
  margin: 3rem 0;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, .25), transparent);
}
.pagination-wrap { margin-top: 3rem; }
.pagination-wrap .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pagination-wrap .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  color: var(--wp--preset--color--primary, #1B4965);
  text-decoration: none;
  font-weight: 500;
}
.pagination-wrap .page-numbers:hover { background: var(--wp--preset--color--surface, #F0F7F9); }
.pagination-wrap .page-numbers.current {
  background: var(--wp--preset--color--primary, #1B4965);
  color: #fff;
  border-color: var(--wp--preset--color--primary, #1B4965);
}
.pagination-wrap .page-numbers.dots { border-color: transparent; }
.pagination-wrap .pagination { margin: 0; }

/* Article seul */
.post__header { margin-bottom: 2rem; }
.post__date { color: var(--wp--preset--color--muted, #4b5563); font-size: 0.875rem; }
.post__media { margin: 0 0 2rem; border-radius: var(--wp--custom--brand-radius, 8px); overflow: hidden; }
.post__content > * + * { margin-top: 1.25rem; }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; }
.post-nav a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }

/* 404 */
.error-404 { text-align: center; }
.error-404__code { font-size: 5rem; font-weight: 700; color: var(--wp--preset--color--secondary, #62B6CB); margin: 0; }
.error-404 .btn { margin-top: 1.5rem; }

/* Graphique en barres (évolution annuelle, ex. phosphore total sur la page
   « La santé de notre lac »). Markup simple collé dans le contenu
   (.chart-wrap > .chart-axis + .chart > .col par année > .bar en hauteur %
   + .yr) — ces règles lui donnent un rendu réel. Le % de .bar a besoin
   d'une hauteur définie sur .col (pas "auto") pour produire un effet
   visuel, d'où le height:100%. L'axe (.chart-axis) suppose une échelle
   0 à 6 (unité affichée dans le texte qui suit le graphique) : les valeurs
   de hauteur en % des .bar doivent rester cohérentes avec cette échelle. */
.chart-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin: 2rem 0;
}
.chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  height: 220px;
  padding-bottom: 1.75rem; /* aligne le "0" sur la ligne de base de .chart */
  font-size: 0.75rem;
  line-height: 1;
  color: var(--wp--preset--color--muted, #4b5563);
  text-align: right;
}
.chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex: 1;
  height: 220px;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e5e7eb;
  /* Lignes de repère horizontales, une par graduation de l'axe (0 à 6). */
  background-image: repeating-linear-gradient(to top, #e5e7eb 0, #e5e7eb 1px, transparent 1px, transparent calc(100% / 6));
  background-origin: content-box;
  background-clip: content-box;
  background-repeat: no-repeat;
  overflow-x: auto;
}
.chart .col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 100%;
  flex: 1 0 28px;
  min-width: 28px;
}
.chart .bar {
  width: 60%;
  max-width: 28px;
  min-height: 2px; /* toujours visible, même pour une valeur très basse */
  background: var(--wp--preset--color--secondary, #62B6CB);
  border-radius: 4px 4px 0 0;
  position: relative;
  z-index: 1; /* au-dessus des lignes de repère */
}
.chart .yr {
  position: absolute;
  bottom: -1.5rem;
  font-size: 0.75rem;
  color: var(--wp--preset--color--muted, #4b5563);
  white-space: nowrap;
}

/* Légende des niveaux trophiques (tableaux de référence, ex. « La santé de
   notre lac ») — mêmes couleurs que le badge du bloc arldpr/lake-simulator,
   dupliquées volontairement ici pour que ce tableau reste autonome sur
   n'importe quelle page, même sans le bloc simulateur. */
.trophic-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.trophic-badge__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: currentColor;
}
.trophic-badge--oligotrophic { color: #166534; }
.trophic-badge--oligo-mesotrophic { color: #6D28D9; }
.trophic-badge--mesotrophic { color: #1D4ED8; }
.trophic-badge--meso-eutrophic { color: #78350F; }
.trophic-badge--eutrophic { color: #B91C1C; }

/* Valeur individuelle (une cellule du tableau annuel) colorée selon SA
   PROPRE catégorie — mêmes couleurs que .trophic-badge, texte seulement
   (pas de fond, pour rester lisible sur les lignes zébrées du tableau). */
.trophic-value { font-weight: 600; }
.trophic-value--oligotrophic { color: #166534; }
.trophic-value--oligo-mesotrophic { color: #6D28D9; }
.trophic-value--mesotrophic { color: #1D4ED8; }
.trophic-value--meso-eutrophic { color: #78350F; }
.trophic-value--eutrophic { color: #B91C1C; }

/* Échelle horizontale des niveaux trophiques (du pire au meilleur), avec
   icônes visage reliées par une ligne dégradée — repère visuel rapide,
   avant le détail du tableau de légende (accordéon) et le tableau annuel. */
.trophic-scale {
  position: relative;
  margin: 2rem 0 2.5rem;
}
.trophic-scale__track {
  position: absolute;
  top: 22px;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(to right, #B91C1C, #78350F, #1D4ED8, #6D28D9, #166534);
}
.trophic-scale__items {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}
.trophic-scale__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.trophic-scale__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid currentColor;
  flex-shrink: 0;
}
.trophic-scale__icon svg { width: 24px; height: 24px; }
.trophic-scale__label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}
.trophic-scale__item--eutrophic { color: #B91C1C; }
.trophic-scale__item--meso-eutrophic { color: #78350F; }
.trophic-scale__item--mesotrophic { color: #1D4ED8; }
.trophic-scale__item--oligo-mesotrophic { color: #6D28D9; }
.trophic-scale__item--oligotrophic { color: #166534; }
@media (max-width: 480px) {
  .trophic-scale__icon { width: 32px; height: 32px; }
  .trophic-scale__icon svg { width: 18px; height: 18px; }
  .trophic-scale__label { font-size: 0.6875rem; }
  .trophic-scale__track { top: 16px; }
}

.trophic-legend__desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--wp--preset--color--muted, #4b5563);
}
.wp-block-table.trophic-legend td:first-child,
.wp-block-table.trophic-legend th:first-child {
  min-width: 160px;
}