/* AAPPMA L'Anguille Machecoulaise : charte graphique (section 5 du cahier des charges) */

@font-face { font-family: 'IM Fell English'; src: url(/fonts/im-fell-english/im-fell-english-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'IM Fell English'; font-style: italic; src: url(/fonts/im-fell-english/im-fell-english-latin-400-italic.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; src: url(/fonts/lato/lato-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; font-style: italic; src: url(/fonts/lato/lato-latin-400-italic.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; font-weight: 700; src: url(/fonts/lato/lato-latin-700-normal.woff2) format('woff2'); font-display: swap; }

:root {
  --color-vert: #8DB600;
  --color-vert-fonce: #6A8A00;
  --color-vert-pale: #EBF0C2;
  --color-vert-clair: #C5D96A;
  --color-texte: #1A1A1A;
  --color-blanc: #FFFFFF;
  /* Teintes dérivées de la charte, pour les textes secondaires et les fonds légers */
  --color-texte-doux: color-mix(in oklab, var(--color-texte) 78%, var(--color-vert-fonce));
  --color-vert-voile: color-mix(in oklab, var(--color-vert-pale) 45%, var(--color-blanc));

  --font-titre: 'IM Fell English', Georgia, serif;
  --font-texte: 'Lato', Arial, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 72px; --space-8: 104px;
  --wrap: 1180px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-4); }
body {
  margin: 0; background: var(--color-blanc); color: var(--color-texte);
  font: 400 1.0625rem/1.65 var(--font-texte);
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* les photos agrandies avant leur révélation ne doivent pas élargir la page */
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--color-vert); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--color-vert-fonce); }
:focus-visible { outline: 3px solid var(--color-texte); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--font-titre); font-weight: 400; line-height: 1.15; margin: 0 0 var(--space-3); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 2rem + 2.6vw, 4rem); color: var(--color-vert-fonce); }
h2 { font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem); color: var(--color-vert-fonce); }
h3 { font-size: 1.45rem; color: var(--color-texte); }
p { margin: 0 0 var(--space-3); text-wrap: pretty; }

.wrap { width: min(100% - 2 * var(--space-3), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--space-3); top: -100px; z-index: 10; background: var(--color-texte); color: var(--color-blanc); padding: var(--space-2) var(--space-3); }
.skip:focus { top: var(--space-3); }

/* Contenu manquant à fournir par le bureau */
.todo {
  display: inline-block; padding: 2px var(--space-2); border: 1px dashed var(--color-vert-fonce); border-radius: 3px;
  background: var(--color-vert-pale); color: var(--color-texte); font-size: .9em;
}

/* Le filet de la charte : une ligne d'eau */
.ligne { display: block; width: 120px; height: auto; aspect-ratio: 15; margin: calc(-1 * var(--space-2)) 0 var(--space-4); overflow: visible; }
.ligne path { fill: none; stroke: var(--color-vert); stroke-width: 5; stroke-linecap: round; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-2) var(--space-4);
  background: var(--color-vert); color: var(--color-texte); border: 2px solid var(--color-vert); border-radius: 6px;
  font: 700 1rem/1.2 var(--font-texte); text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.btn:hover { background: var(--color-vert-fonce); border-color: var(--color-vert-fonce); color: var(--color-blanc); }
.btn:active { transform: translateY(1px); }
.btn--contour { background: transparent; border-color: var(--color-vert-fonce); }
.btn--petit { min-height: 40px; padding: var(--space-1) var(--space-3); font-size: .9rem; }
.btn--danger { background: transparent; border-color: currentColor; }
.btn--danger:hover { background: var(--color-texte); border-color: var(--color-texte); }
.btn:disabled { opacity: .6; cursor: wait; }

/* En-tête */
.site-header { background: var(--color-blanc); border-bottom: 3px solid var(--color-vert); position: relative; z-index: 5; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 104px; }
/* Zone de protection de la charte : marge ≥ hauteur du « A » (~1/7 du logo) */
.brand { padding-block: var(--space-3); }
.brand img { height: 80px; width: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.nav a { display: block; padding: var(--space-2) 0; font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--color-vert-pale); }
.nav a[aria-current] { border-bottom-color: var(--color-vert); }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .header-inner { min-height: 72px; }
  .brand { padding-block: var(--space-2); }
  .brand img { height: 56px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-3);
    background: none; border: 2px solid var(--color-vert-fonce); border-radius: 6px; font: 700 1rem var(--font-texte); color: var(--color-texte); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s var(--ease-out); }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .menu-ouvert .nav-toggle-bars { background: transparent; }
  .menu-ouvert .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-ouvert .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--color-blanc); border-bottom: 3px solid var(--color-vert);
    display: none; padding: var(--space-2) 0 var(--space-4);
  }
  .menu-ouvert .nav { display: block; }
  .nav ul { flex-direction: column; width: min(100% - 2 * var(--space-3), var(--wrap)); margin-inline: auto; gap: 0; }
  .nav a { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-vert-pale); font-size: 1.125rem; }
  .nav a[aria-current] { border-bottom: 1px solid var(--color-vert-pale); box-shadow: inset 4px 0 0 var(--color-vert); padding-left: var(--space-3); }
}

/* Hero */
.hero { position: relative; min-height: min(78svh, 760px); display: flex; align-items: flex-end; color: var(--color-blanc); background: var(--color-vert-fonce); overflow: hidden; }
.hero-img, .hero-eau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-eau { display: block; cursor: crosshair; }
/* Voile sombre côté texte pour que le titre blanc reste lisible quelle que soit la photo */
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(26 26 26 / .62) 0%, rgb(26 26 26 / .35) 42%, rgb(26 26 26 / 0) 72%), linear-gradient(to bottom, rgb(26 26 26 / 0) 45%, rgb(26 26 26 / .55) 100%); }
@media (max-width: 600px) { .hero::after { background: linear-gradient(to bottom, rgb(26 26 26 / .3) 0%, rgb(26 26 26 / .7) 100%); } }
.hero-content { position: relative; z-index: 1; padding-block: var(--space-8) var(--space-7); }
.hero h1 { color: var(--color-blanc); font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.4rem); line-height: 1.02; max-width: 14ch; margin-bottom: var(--space-3); text-shadow: 0 1px 12px rgb(26 26 26 / .35); }
.ligne--hero { width: min(420px, 80%); margin: 0 0 var(--space-4); }
.ligne--hero path { stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracer 1.6s .25s var(--ease-out) forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
.hero-sub { font-family: var(--font-titre); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-bottom: var(--space-5); }

/* Sections */
.section { padding-block: var(--space-7); }
.section--filet { border-top: 1px solid var(--color-vert-pale); }
.section-cta { margin: var(--space-5) 0 0; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); color: var(--color-texte-doux); font-size: .9375rem; }
.tag { background: var(--color-vert-pale); color: var(--color-texte); border-radius: 999px; padding: 0 var(--space-3); font-size: .875rem; font-weight: 700; }

/* Lien qui rend tout le bloc cliquable */
.une, .ligne-actu, .conseil, .secteur { position: relative; }
.lien-bloc { text-decoration: none; }
.lien-bloc::after { content: ''; position: absolute; inset: 0; }
.une:hover .lien-bloc, .ligne-actu:hover .lien-bloc, .conseil:hover .lien-bloc, .secteur:hover .lien-bloc { text-decoration: underline; text-decoration-color: var(--color-vert); }
.lien-bloc:focus-visible { outline: none; }
.lien-bloc:focus-visible::after { outline: 3px solid var(--color-texte); outline-offset: 4px; border-radius: 4px; }

/* Actus : une à la une, deux en liste */
.actus-une { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--space-6); align-items: start; }
.une img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-bottom: var(--space-3); background: var(--color-vert-pale); }
.une h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.actus-suite { display: grid; gap: var(--space-5); }
.ligne-actu { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-vert-pale); }
.ligne-actu:last-child { border-bottom: 0; padding-bottom: 0; }
.ligne-actu img { width: 140px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: var(--color-vert-pale); }
.ligne-actu h3 { font-size: 1.3rem; margin-bottom: var(--space-2); }
.ligne-actu p:last-child { font-size: .9375rem; color: var(--color-texte-doux); margin: 0; }

/* Accès rapides */
.acces { background: var(--color-vert-pale); padding-block: var(--space-6); }
.acces-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.acces-btn {
  display: flex; align-items: center; gap: var(--space-3); height: 100%; min-height: 96px; padding: var(--space-4);
  background: var(--color-blanc); border: 2px solid var(--color-vert); border-radius: 10px; text-decoration: none;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.acces-btn:hover { background: var(--color-vert); }
.acces-btn strong { display: block; font-family: var(--font-titre); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.acces-btn small { display: block; font-size: .9375rem; margin-top: var(--space-1); }
.icon { width: 36px; height: 36px; flex: none; fill: none; stroke: var(--color-vert-fonce); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.acces-btn:hover .icon { stroke: var(--color-texte); }

/* Domaine */
.secteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
.secteur img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin-bottom: var(--space-3); background: var(--color-vert-pale); }
.secteur:nth-of-type(even) { margin-top: var(--space-6); }
.secteur h3 { margin-bottom: var(--space-2); }
.video { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 6px; overflow: hidden; background: var(--color-vert-voile); }
.video--vide { display: grid; place-items: center; border: 2px dashed var(--color-vert); }
.video--vide p { margin: 0; padding: var(--space-4); }

/* Conseils : liste de lecture */
.conseils { display: grid; gap: 0; max-width: 900px; }
.conseil { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-5); padding-block: var(--space-5); border-bottom: 1px solid var(--color-vert-pale); }
.conseil:first-child { padding-top: 0; }
.conseil:last-child { border-bottom: 0; }
.conseil img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; background: var(--color-vert-pale); }
.conseil-txt p:last-child { margin: 0; }

/* Actions */
.actions { background: var(--color-vert-voile); }
.actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.action .icon { width: 44px; height: 44px; margin-bottom: var(--space-3); }
.action h3 { font-size: 1.5rem; }
.action p { margin: 0; }

/* Mot du président */
.president-grid { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: var(--space-7); align-items: center; }
.president-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--color-vert-pale); }
.president blockquote { margin: 0 0 var(--space-5); max-width: 34em; }
.president blockquote p { font-family: var(--font-titre); font-style: italic; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); line-height: 1.45; margin-bottom: var(--space-4); }
.president blockquote p::before { content: '« '; color: var(--color-vert-fonce); }
.president blockquote p::after { content: ' »'; color: var(--color-vert-fonce); }
.president blockquote footer { font-weight: 700; padding-top: var(--space-3); border-top: 3px solid var(--color-vert); display: inline-block; }

/* FAQ */
.faq details { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--color-vert-pale); }
.faq summary { text-wrap: balance; cursor: pointer; padding: var(--space-4) 0; font-weight: 700; font-size: 1.125rem; list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.75rem/1 var(--font-titre); color: var(--color-vert-fonce); transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--space-4); margin: 0; max-width: 65ch; }

/* Pages intérieures */
.page-head { background: var(--color-vert-voile); padding-block: var(--space-6) var(--space-5); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-vert-pale); }
.page-head .ligne { margin-bottom: var(--space-3); }
.intro { font-size: 1.1875rem; max-width: 62ch; margin: 0; }
.prose { padding-bottom: var(--space-7); }
.prose > * { max-width: 62ch; }
.prose > .table-wrap, .prose > .article-img, .prose > .galerie, .prose > .rich { max-width: 760px; }
.rich > :not(.table-wrap) { max-width: 62ch; }
.prose h2 { margin-top: var(--space-6); }
.prose ul { padding-left: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.encadre { background: var(--color-vert-pale); border: 2px solid var(--color-vert); padding: var(--space-4); border-radius: 6px; }
.note { color: var(--color-texte-doux); font-size: .9375rem; }
.fil { font-weight: 700; margin-bottom: var(--space-3); }
.chapo { font-size: 1.25rem; line-height: 1.55; }
.article-img { width: 100%; border-radius: 4px; margin-bottom: var(--space-5); aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-vert-pale); }

.table-wrap { overflow-x: auto; margin-bottom: var(--space-4); }
table { width: 100%; border-collapse: collapse; font-size: .9875rem; }
th, td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-vert-pale); vertical-align: top; }
thead th { border-bottom: 3px solid var(--color-vert); font-weight: 700; }
tbody th { font-weight: 700; }

.bloc-action { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-4); margin-top: var(--space-6); }
.bloc-action .icon { width: 44px; height: 44px; grid-row: span 2; }
.bloc-action h2 { margin: 0 0 var(--space-2); font-size: 1.75rem; }
.bloc-action p { margin: 0; }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.galerie figure { margin: 0; }
.galerie figcaption { margin-top: var(--space-2); font-size: .9375rem; color: var(--color-texte-doux); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: var(--color-vert-pale); }

.cartes { display: grid; gap: 0; margin: 0; }
.cartes div { padding-block: var(--space-3); border-bottom: 1px solid var(--color-vert-pale); }
.cartes dt { font-weight: 700; font-size: 1.125rem; }
.cartes dd { margin: 0; }
.liens-eau { list-style: none; padding: 0 !important; }
.liens-eau li { padding: var(--space-4); background: var(--color-vert-voile); border: 2px solid var(--color-vert-pale); border-radius: 6px; margin-bottom: var(--space-3); }

/* Où pêcher : carte encadrée, avec la liste des secteurs à côté */
.carte-cadre {
  display: grid; grid-template-columns: 1fr 280px; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-3);
  background: var(--color-blanc); border: 1px solid var(--color-vert-pale); border-radius: 24px;
  box-shadow: 0 24px 50px -28px rgb(26 26 26 / .35);
}
.carte { height: clamp(340px, 58vh, 540px); border-radius: 16px; overflow: hidden; background: #f7f8f1; z-index: 0; isolation: isolate; }
/* Communes de repère : discrètes, sous les secteurs */
/* Noms des cours d'eau */
.riv { background: none; border: 0; pointer-events: none; }
.riv span { display: block; white-space: nowrap; font: italic 700 .8125rem var(--font-texte); color: #1F6A9C; letter-spacing: .02em;
  text-shadow: 0 0 3px #f7f8f1, 0 0 3px #f7f8f1, 0 0 6px #f7f8f1; }
.riv--n1 span { font-size: .875rem; }
.riv--n3 span { font-weight: 400; font-size: .75rem; }
.riv--lac span { transform: translate(-50%, -50%); font: italic 400 1rem var(--font-titre); }
/* Selon le zoom : grandes rivières d'abord, puis canaux et rivières moyennes, puis ruisseaux et étiers */
.carte[data-zoom="0"] .riv, .carte[data-zoom="1"] .riv--n2, .carte[data-zoom="1"] .riv--n3, .carte[data-zoom="2"] .riv--n3 { display: none; }
.carte-repli { padding: var(--space-4); }
.carte-liste { padding: var(--space-3) var(--space-2); }
.carte-liste-titre { font-size: 1.6rem; margin-bottom: var(--space-3); }
.carte-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.carte-liste li { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: 12px; background: var(--color-vert-voile); }
.carte-liste button { all: unset; cursor: pointer; font: 400 1.3rem/1.2 var(--font-titre); color: var(--color-texte); }
.carte-liste button:focus-visible { outline: 3px solid var(--color-texte); outline-offset: 3px; }
.carte-liste li:has(button[aria-pressed="true"]) { background: var(--color-vert-pale); outline: 2px solid var(--color-vert); }
.carte-liste a { font-size: .9375rem; font-weight: 700; }
.repere { background: none; border: 0; }
.repere-contenu { display: flex; align-items: center; gap: 6px; transform: translate(-9px, -9px); white-space: nowrap; }
.repere-contenu--gauche { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -9px); }
.repere-point { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--color-vert); border: 3px solid var(--color-blanc); box-shadow: 0 0 0 2px var(--color-vert-fonce); }
.repere-nom { font: 700 .875rem var(--font-texte); color: var(--color-texte); background: var(--color-blanc); padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgb(26 26 26 / .18); }
.carte .leaflet-control-zoom { border: 0; box-shadow: 0 4px 14px rgb(26 26 26 / .18); border-radius: 12px; overflow: hidden; }
.carte .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; color: var(--color-texte); }
.carte .leaflet-control-attribution { background: rgb(255 255 255 / .8); border-radius: 0 8px 0 0; font-size: 11px; }
/* Légende des tracés (couleurs des types : lib/carte.js) */
.carte-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: .9375rem; }
.carte-legende li { display: flex; align-items: center; gap: var(--space-2); }
.carte-legende-titre { margin-top: var(--space-5); font-size: 1.3rem; }
.legende-trait { flex: none; width: 28px; height: 6px; border-radius: 3px; background: var(--color-vert-fonce); }
.legende-no-kill { background: repeating-linear-gradient(90deg, #2E86C1 0 12px, transparent 12px 18px); }
.legende-nuit { background: #E67E22; }
.legende-reserve { background: repeating-linear-gradient(90deg, #E74C3C 0 4px, transparent 4px 9px); }
.legende-pmr { width: 14px; height: 14px; border-radius: 50%; background: var(--color-texte); }
@media (max-width: 860px) { .carte-cadre { grid-template-columns: 1fr; border-radius: 18px; } }
.fiches { display: grid; gap: var(--space-7); padding-block: var(--space-6) var(--space-7); }
.fiche { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-6); align-items: start; }
.fiche:nth-child(even) { grid-template-columns: 1.2fr 1fr; }
.fiche:nth-child(even) .fiche-img { order: 2; }
.fiche-img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 4px; background: var(--color-vert-pale); }
.fiche-infos { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.fiche-infos dt { font-weight: 700; }
.fiche-infos dd { margin: 0; }

/* Actus (liste) */
.filtres ul { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filtres a { display: inline-block; padding: var(--space-2) var(--space-3); border: 2px solid var(--color-vert-pale); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .9375rem; }
.filtres a:hover { border-color: var(--color-vert); }
.filtres a[aria-current] { background: var(--color-vert); border-color: var(--color-vert); }
.actus-grille { margin-bottom: var(--space-7); display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6) var(--space-5); }
.actus-grille .une h2 { font-size: 1.6rem; color: var(--color-texte); }
.vide { padding: var(--space-6); background: var(--color-vert-voile); border-radius: 6px; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: calc(-1 * var(--space-4)); padding-bottom: var(--space-7); font-weight: 700; }

/* Formulaires */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-7); padding-bottom: var(--space-7); }
.contact-infos address { font-style: normal; }
.contact-infos h2:not(:first-child) { margin-top: var(--space-6); }
.contact-infos h2, .form h2 { font-size: 1.9rem; }
.form { display: grid; gap: var(--space-2); max-width: 640px; }
.form--etroit { max-width: 420px; padding-bottom: var(--space-7); }
.form label { font-weight: 700; margin-top: var(--space-3); }
.form input:not([type=checkbox]):not([type=radio]), .form textarea, .form select {
  width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--color-texte); background: var(--color-blanc);
  border: 2px solid color-mix(in oklab, var(--color-vert-fonce) 55%, var(--color-blanc)); border-radius: 6px;
}
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: 3px solid var(--color-texte); outline-offset: 1px; border-color: var(--color-vert-fonce); }
.form textarea { resize: vertical; }
.form .btn { justify-self: start; margin-top: var(--space-4); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; margin-top: var(--space-3); }
.consent input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--color-vert-fonce); }
.consent label { font-weight: 400; margin: 0; }
.hp { position: absolute; left: -9999px; }
.form-ok, .form-err { padding: var(--space-3) var(--space-4); border-radius: 6px; font-weight: 700; }
.form-ok { background: var(--color-vert-pale); border: 2px solid var(--color-vert); }
.form-err { background: var(--color-blanc); border: 2px solid var(--color-texte); }
.aide { margin: 0; font-size: .9375rem; color: var(--color-texte-doux); }

/* Tableau de bord du bureau */
.db { display: grid; gap: var(--space-5); padding-bottom: var(--space-7); }
.db-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--space-3); align-items: stretch; }
.db-stat { display: grid; gap: 2px; padding: var(--space-4); border-radius: 14px; background: var(--color-vert-voile); border: 1px solid var(--color-vert-pale); }
.db-stat strong { font: 700 2.4rem/1 var(--font-texte); color: var(--color-vert-fonce); letter-spacing: -.02em; }
.db-stat span { font-weight: 700; font-size: .9375rem; }
.db-raccourcis { display: grid; gap: var(--space-2); align-content: center; }
.db-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-vert-pale); }
.db-barre h2 { margin: 0 auto 0 0; }
.db-filtres { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--color-vert-voile); border: 1px solid var(--color-vert-pale); }
.db-filtres button { border: 0; background: none; font: 700 .875rem var(--font-texte); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.db-filtres button[aria-pressed="true"] { background: var(--color-vert); }
.db-cherche { min-height: 44px; padding: 0 var(--space-3); border: 2px solid var(--color-vert-pale); border-radius: 999px; font: inherit; width: min(280px, 100%); }
.db-statut { min-height: 1.4em; margin: 0; font-weight: 700; }
.db-statut--err { color: #9b2f25; }
.db-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.db-carte { display: grid; grid-template-rows: auto 1fr; border-radius: 14px; overflow: hidden; background: var(--color-blanc); border: 1px solid var(--color-vert-pale); box-shadow: 0 10px 24px -18px rgb(26 26 26 / .35); }
.db-carte[hidden] { display: none; }
.db-carte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-vert-pale); }
.db-carte-txt { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3) var(--space-3) var(--space-4); }
.db-carte h3 { margin: 0; font-size: 1.3rem; }
.db-extrait { margin: 0; font-size: .9375rem; color: var(--color-texte-doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.db-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.db-lien { all: unset; cursor: pointer; font-weight: 700; font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--color-vert); text-underline-offset: 3px; }
.db-lien:focus-visible { outline: 3px solid var(--color-texte); outline-offset: 2px; }
.db-lien--danger { color: #9b2f25; text-decoration-color: currentColor; }
.db-vide { padding: var(--space-5); text-align: center; border: 2px dashed var(--color-vert-pale); border-radius: 12px; }
.db-quitter { justify-self: start; }
@media (max-width: 860px) { .db-stats { grid-template-columns: 1fr 1fr; } .db-raccourcis { grid-column: 1 / -1; grid-auto-flow: column; } }

/* Pied de page */
/* Blanc sur vert foncé = 4,0:1 : tout le pied de page est en gras ≥ 19 px (« grand texte » WCAG, seuil 3:1). */
.site-footer { background: var(--color-vert-fonce); color: var(--color-blanc); padding-top: var(--space-7); font-size: 1.1875rem; font-weight: 700; }
.site-footer a { color: var(--color-blanc); text-decoration-color: var(--color-vert-pale); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-6); }
/* Version inversée de la charte (logo blanc sur fond vert) */
.footer-logo { display: inline-block; margin-bottom: var(--space-4); }
.footer-logo img { height: 90px; width: auto; }
.footer-id p { font-weight: 700; max-width: 26ch; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-menu a { font-weight: 700; text-decoration: none; }
.footer-menu a:hover, .footer-menu a[aria-current] { text-decoration: underline; }
.footer-contact { font-style: normal; display: grid; gap: var(--space-2); align-content: start; font-weight: 700; }
.footer-legal { font-size: 1.1875rem; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-block: var(--space-4); border-top: 1px solid color-mix(in oklab, var(--color-blanc) 35%, var(--color-vert-fonce)); }
.site-footer :focus-visible { outline-color: var(--color-blanc); }

/* Tablette */
@media (max-width: 960px) {
  .actus-une, .president-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .secteurs { grid-template-columns: 1fr 1fr; }
  .secteur:nth-of-type(even) { margin-top: 0; }
  .actions-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .action { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-4); }
  .action .icon { grid-row: span 2; margin: 0; }
  .president-photo { max-width: 280px; }
  .fiche, .fiche:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-4); }
  .fiche:nth-child(even) .fiche-img { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-id { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .section { padding-block: var(--space-6); }
  .hero { min-height: 70svh; }
  .hero-content { padding-block: var(--space-7) var(--space-6); }
  .secteurs { grid-template-columns: 1fr; gap: var(--space-5); }
  .secteurs-riviere { display: none; }
  .secteur img { aspect-ratio: 16 / 9; }
  .president-photo { max-width: 200px; }
  .ligne-actu { grid-template-columns: 96px 1fr; }
  .ligne-actu img { width: 96px; }
  .conseil { grid-template-columns: 1fr; gap: var(--space-3); }
  .galerie { grid-template-columns: 1fr 1fr; }
  .fiche-infos { grid-template-columns: 1fr; }
  .fiche-infos dd { margin-bottom: var(--space-2); }
  /* Tableaux : une fiche par ligne (espèce en titre, puis chaque colonne avec son nom) au lieu de colonnes tassées */
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-wrap tr { padding-block: var(--space-3); border-bottom: 1px solid var(--color-vert-pale); }
  .table-wrap th[scope="row"] { padding: 0 0 var(--space-2); border: 0; font: 400 1.3rem/1.2 var(--font-titre); }
  .table-wrap td { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-2); align-items: start; padding: var(--space-1) 0; border: 0; }
  .table-wrap td::before { content: attr(data-label); font-weight: 700; }
  /* Où pêcher : cadre plus fin, carte un peu plus haute, secteurs sur deux colonnes */
  .carte-cadre { padding: var(--space-2); border-radius: 16px; }
  .carte { height: 62svh; border-radius: 12px; }
  .carte-liste { padding: var(--space-2) 0 0; }
  .carte-liste ul { grid-template-columns: 1fr 1fr; }
  .carte-liste button { font-size: 1.15rem; }
  .repere-nom { font-size: .8125rem; padding: 1px 6px; }
  .footer-grid { grid-template-columns: 1fr; }
  .pagination { flex-direction: column; }
  .acces-btn strong { font-size: 1.35rem; }
}

/* Aujourd'hui au bord de l'eau (accueil) */
.bord-eau { padding-block: var(--space-6); border-bottom: 1px solid var(--color-vert-pale); }
.bord-eau h2 { margin-bottom: var(--space-4); }
.be-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.be-carte { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4); border-radius: 18px; border: 1px solid var(--color-vert-pale); background: var(--color-blanc); }
.be-carte .icon, .be-carte .lune { width: 34px; height: 34px; margin-bottom: var(--space-1); }
.be-carte h3 { margin: 0; font: 700 .9375rem var(--font-texte); color: var(--color-texte-doux); }
.be-grand { margin: 0; font: 700 clamp(1.5rem, 1.3rem + .8vw, 1.9rem)/1.15 var(--font-texte); letter-spacing: -.01em; }
.be-grand span { font-size: .6em; color: var(--color-texte-doux); }
.be-detail { margin: 0; font-size: .9375rem; line-height: 1.45; }
.be-heures { background: var(--color-vert); border-color: var(--color-vert); }
.be-heures h3, .be-heures .be-grand span { color: var(--color-texte); }
.be-heures .icon { stroke: var(--color-texte); }
.be-fleche { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--color-vert-fonce); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.be-tendance { font-weight: 700; white-space: nowrap; }
.be-tendance::before { display: inline-block; margin-right: 3px; }
.be-monte::before { content: '↗'; }
.be-baisse::before { content: '↘'; }
.be-stable::before { content: '→'; }
.be-niveaux ul { list-style: none; margin: var(--space-1) 0; padding: 0; display: grid; gap: var(--space-2); }
.be-niveaux li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-2); font-size: .9375rem; }
.be-niveaux li small { color: var(--color-texte-doux); }
.be-niveaux li strong { font-size: 1.125rem; }
.be-niveaux li .be-tendance { grid-column: 1 / -1; font-size: .8125rem; color: var(--color-texte-doux); }
.lune-ombre { fill: color-mix(in oklab, var(--color-texte) 85%, var(--color-vert-fonce)); }
.lune-clair { fill: var(--color-vert-pale); }
.be-sources { margin: var(--space-3) 0 0; font-size: .8125rem; color: var(--color-texte-doux); }

/* Niveaux en direct (page Débits d'eau) */
.stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.prose > .stations { max-width: 760px; }
.station { padding: var(--space-4); border-radius: 18px; border: 1px solid var(--color-vert-pale); background: var(--color-vert-voile); }
.station h3 { margin: 0 0 var(--space-2); font-size: 1.35rem; }
.station h3 small { font: 400 .9375rem var(--font-texte); color: var(--color-texte-doux); }
.station-valeurs { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-2); }
.station-valeurs p { margin: 0; display: grid; }
.station-valeurs span { font-size: .8125rem; color: var(--color-texte-doux); }
.station-valeurs strong { font: 700 1.375rem var(--font-texte); }
.station-valeurs .be-tendance { font: 700 1rem var(--font-texte); }
.courbe { display: block; width: 100%; height: 56px; }
.courbe-fond { fill: color-mix(in oklab, #2E86C1 18%, transparent); stroke: none; }
.courbe-trait { fill: none; stroke: #2E86C1; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.station-pied { margin: var(--space-2) 0 0; font-size: .8125rem; }

/* ---------- L'eau : surfaces, rivière, anguille ---------- */
/* Bord supérieur des bandeaux colorés en surface d'eau ; il glisse doucement avec le défilement. */
.acces, .actions, .site-footer { position: relative; }
.acces::before, .actions::before, .site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -17px; height: 18px; background: inherit; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cpath d='M0 9Q20 0 40 9T80 9T120 9T160 9V18H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 160px 18px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cpath d='M0 9Q20 0 40 9T80 9T120 9T160 9V18H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 160px 18px;
  -webkit-mask-position-x: calc(var(--defilement, 0) * -.25px);
  mask-position: calc(var(--defilement, 0) * -.25px) 0;
}
.actions::before { -webkit-mask-position-x: calc(var(--defilement, 0) * .2px); mask-position: calc(var(--defilement, 0) * .2px) 0; }

/* Les secteurs reliés par une rivière */
.secteurs { position: relative; }
.secteur { z-index: 1; }
.secteurs-riviere { position: absolute; left: -4%; top: -6%; width: 108%; height: 112%; z-index: 0; overflow: visible; pointer-events: none; }
.secteurs-riviere path { fill: none; stroke: var(--color-vert-clair); stroke-width: 14; stroke-linecap: round; }
.secteurs-riviere .secteurs-tige { stroke-width: 6; }
.secteurs-bourgeon { fill: var(--color-vert); stroke: var(--color-blanc); stroke-width: 4; }

/* Bancs de poissons en 3D (voir js/poissons.js) */
.hero-poissons, .section-poissons { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* Sous l eau : contours légèrement flous et couleurs atténuées */
.hero-poissons { filter: blur(.6px) saturate(.75) contrast(.92); }
.actions > .wrap { position: relative; z-index: 1; }
.page-head, .site-footer { position: relative; overflow: hidden; }
.page-head > .wrap, .site-footer > .wrap { position: relative; z-index: 1; }

/* L'anguille qui suit la lecture (voir js/anguille.js) */
.riviere { position: fixed; z-index: 40; pointer-events: none; right: 10px; top: 140px; bottom: 32px; width: 48px; }
.riviere-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.riviere-lit, .riviere-eau { fill: none; stroke-width: 3; stroke-linecap: round; }
.riviere-lit { stroke: var(--color-vert-pale); }
.riviere-eau { stroke: var(--color-vert); stroke-dasharray: 1; }
.anguille { fill: var(--color-texte); stroke: var(--color-blanc); stroke-width: 1.2; paint-order: stroke; }
.anguille-oeil { fill: var(--color-blanc); }
/* Petits écrans : la rivière devient une bande en bas, qui ne recouvre jamais le texte */
@media (max-width: 1279px) {
  .riviere { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 34px; background: color-mix(in oklab, var(--color-blanc) 94%, transparent); border-top: 1px solid var(--color-vert-pale); }
  body { padding-bottom: 34px; }
}
@media print { .riviere { display: none; } }

/* Icônes des accès rapides : un petit coup de nageoire au survol */
.acces-btn .icon { transition: transform .22s var(--ease-out); }
.acces-btn:hover .icon, .acces-btn:focus-visible .icon { transform: translateX(4px) rotate(-8deg); }

@keyframes tracer-vue { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes profondeur { from { transform: scale(1.08) translateY(0); } to { transform: scale(1.08) translateY(7%); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Profondeur de la photo d'accueil, liée au défilement */
    .hero-img, .hero-eau, .hero-poissons { animation: profondeur linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    /* Les filets et la rivière des secteurs se tracent quand ils arrivent à l'écran */
    .ligne:not(.ligne--hero) path { stroke-dasharray: 1; animation: tracer-vue linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .ligne--hero path { stroke-dashoffset: 0; }
}
.carte.leaflet-container { background: #f7f8f1; }
.fond-plan { filter: saturate(.25) contrast(.8) brightness(1.08); opacity: .62; }