/* =========================================================================
   sauvonslesdauphins.com
   Habillage « relevé de rivage » : lexique de classes amr- (amer, balise,
   sonde, estran, laisse, houle, ourlet, quai, bordée, flanc, lest).
   Polices système uniquement, aucune requête réseau, aucune image distante.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. JEU DE VARIABLES
   ------------------------------------------------------------------------- */
:root {
  /* Couleurs : lilas cendré, encre nuit violacée, violet abyssal */
  --eau: #e9e6f1;            /* fond de page */
  --carte: #fdfcff;          /* fond des fiches et des blocs */
  --haut-fond: #ddd8ea;      /* aplats secondaires */
  --encre: #1a1826;          /* texte principal */
  --encre-pale: #56506c;     /* texte secondaire */
  --trait: #c6bfd8;          /* filets et bordures */
  --marque: #5a2f7d;         /* identité */
  --marque-fonce: #45205f;   /* liens, survol */
  --marque-voile: #ece3f5;   /* fond des étiquettes */
  --relais: #8a1f4c;         /* seconde teinte de rubrique */
  --bronze: #7a5a17;         /* troisième teinte de rubrique */

  /* Polices */
  --face-titre: "Lucida Bright", "Lucida Fax", "Bookman Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --face-texte: Optima, Candara, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --face-chiffre: Monaco, "PT Mono", "DejaVu Sans Mono", "Courier New", monospace;

  /* Mesures : travée large, colonne de lecture étroite */
  --quai: 70rem;
  --lecture: 35rem;
  --pas-banc: 16rem;
  --cadence: 1.45rem;
  --galet: 10px;
  --galet-petit: 4px;
  --filet: 1px solid var(--trait);
  --teinte: var(--marque);
  --vigie-fond: #1a1826;   /* bandeau d'en-tete, toujours sombre */

  --ourlet-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='12' viewBox='0 0 96 12'%3E%3Cpath d='M0 8c8-8 16-8 24 0s16 8 24 0 16-8 24 0 16 8 24 0' fill='none' stroke='%235a2f7d' stroke-width='2.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --eau: #171523;
    --carte: #201d2e;
    --haut-fond: #2a2640;
    --encre: #ece9f4;
    --encre-pale: #a9a3bd;
    --trait: #3b3552;
    --marque: #b48ce0;
    --marque-fonce: #cdb3ef;
    --marque-voile: #2e2547;
    --relais: #e2839f;
    --bronze: #cba75f;
    --vigie-fond: #100e1a;
    --ourlet-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='12' viewBox='0 0 96 12'%3E%3Cpath d='M0 8c8-8 16-8 24 0s16 8 24 0 16-8 24 0 16 8 24 0' fill='none' stroke='%23b48ce0' stroke-width='2.5'/%3E%3C/svg%3E");
  }
}

/* -------------------------------------------------------------------------
   2. SOCLE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--eau);
  color: var(--encre);
  font-family: var(--face-texte);
  font-size: clamp(1rem, .95rem + .26vw, 1.125rem);
  line-height: 1.68;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--face-titre);
  line-height: 1.18;
  margin: 0 0 .55em;
  font-weight: 600;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2.1vw, 2.85rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.35rem, 1.18rem + .8vw, 1.8rem); }
h3 { font-size: 1.12rem; }
p, ul, ol, dl, table { margin: 0 0 var(--cadence); }

a { color: var(--marque-fonce); text-decoration-thickness: 1px; text-underline-offset: .17em; }
a:hover { color: var(--encre); }

:focus-visible {
  outline: 2px solid var(--marque);
  outline-offset: 2px;
  border-radius: var(--galet-petit);
}

.amr-quai { width: min(100% - 2.25rem, var(--quai)); margin-inline: auto; }

.amr-saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--marque); color: #ffffff;
  padding: .6rem 1rem; z-index: 20;
}
.amr-saut:focus { left: .5rem; top: .5rem; }

.amr-hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   3. VIGIE (en-tête sombre) + OURLET (frise d'ondes)
   ------------------------------------------------------------------------- */
.amr-vigie { background: var(--vigie-fond); color: #f4f1fa; }
.amr-vigie__pont {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .35rem 1.6rem; padding: 1.15rem 0 1.2rem;
}
.amr-amer {
  font-family: var(--face-titre); font-size: 1.42rem; font-weight: 600;
  color: #ffffff; text-decoration: none; letter-spacing: .005em;
}
.amr-amer:hover { color: #d9c4f0; }
.amr-cap {
  margin: 0; color: #b8b0cd; font-size: .84rem;
  letter-spacing: .02em;
}
.amr-bordee { margin-left: auto; }
.amr-bordee ul { display: flex; flex-wrap: wrap; gap: .2rem 1.15rem; list-style: none; margin: 0; padding: 0; }
.amr-bordee__lien {
  color: #cfc7e2; text-decoration: none;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: .18rem;
}
.amr-bordee__lien:hover { color: #ffffff; }
.amr-bordee__lien[aria-current] { color: #ffffff; box-shadow: inset 0 -2px 0 #b48ce0; }
.amr-vigie :focus-visible { outline-color: #d9c4f0; }

.amr-ourlet {
  height: 12px;
  background-image: var(--ourlet-image);
  background-repeat: repeat-x;
  background-position: center top;
}

@media (max-width: 44rem) {
  .amr-cap { flex-basis: 100%; }
  .amr-bordee { margin-left: 0; flex-basis: 100%; padding-top: .5rem; }
}

/* -------------------------------------------------------------------------
   4. MOUILLAGE (préambule) + JAUGES (chiffres de repérage)
   ------------------------------------------------------------------------- */
.amr-mouillage { padding: calc(var(--cadence) * 2.2) 0 var(--cadence); }
.amr-mouillage h1 { max-width: 23ch; }
.amr-mouillage p { max-width: 44rem; color: var(--encre-pale); }
.amr-mouillage p strong { color: var(--encre); font-weight: 600; }

.amr-jauges {
  display: grid; gap: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: calc(var(--cadence) * 1.2) 0 0; padding: 0;
  border: var(--filet); border-radius: var(--galet); background: var(--carte);
  overflow: hidden;
}
.amr-jauge { padding: .95rem 1.1rem; border-right: var(--filet); }
.amr-jauge:last-child { border-right: 0; }
.amr-jauge__chiffre {
  display: block; font-family: var(--face-chiffre);
  font-size: 1.5rem; line-height: 1.2; color: var(--marque-fonce);
}
.amr-jauge__libelle {
  display: block; margin-top: .2rem; font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--encre-pale);
}
@media (max-width: 46rem) {
  .amr-jauges { grid-template-columns: 1fr; }
  .amr-jauge { border-right: 0; border-bottom: var(--filet); }
  .amr-jauge:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   5. QUARTS (onglets de rubrique)
   ------------------------------------------------------------------------- */
.amr-quarts {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: calc(var(--cadence) * 1.3) 0 calc(var(--cadence) * .7);
  border-bottom: var(--filet);
}
.amr-quart {
  font: inherit; font-size: .82rem; letter-spacing: .015em;
  display: inline-block; padding: .42rem .9rem;
  border: var(--filet); border-radius: var(--galet-petit);
  background: var(--carte); color: var(--encre-pale);
  text-decoration: none; cursor: pointer;
}
.amr-quart:hover { border-color: var(--marque); color: var(--marque-fonce); }
.amr-quart--courant, .amr-quart[aria-current="true"] {
  background: var(--marque); border-color: var(--marque);
  color: #ffffff; font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .amr-quart--courant, .amr-quart[aria-current="true"] { color: #191527; }
}

/* -------------------------------------------------------------------------
   6. HOULE (section) + BANC (grille de sondes)
   ------------------------------------------------------------------------- */
.amr-houle { padding: calc(var(--cadence) * 1.8) 0; }
.amr-houle__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem 1rem; margin-bottom: var(--cadence);
}
.amr-houle__tete h2 { margin: 0; }
.amr-houle__decompte { font-family: var(--face-chiffre); font-size: .78rem; color: var(--encre-pale); }
.amr-houle__tete .amr-suite { margin-left: auto; }
.amr-houle__chapeau { max-width: 44rem; color: var(--encre-pale); }

.amr-banc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--pas-banc), 1fr));
  gap: 1.1rem;
}

.amr-sonde {
  display: flex; flex-direction: column;
  background: var(--carte);
  border: var(--filet);
  border-bottom: 3px solid var(--teinte);
  border-radius: var(--galet);
  padding: 1rem 1.05rem 1.05rem;
}
.amr-sonde:hover { border-color: var(--teinte); }
.amr-sonde[data-rubrique="peche"]   { --teinte: var(--marque); }
.amr-sonde[data-rubrique="especes"] { --teinte: var(--relais); }
.amr-sonde[data-rubrique="droit"]   { --teinte: var(--bronze); }

.amr-sonde__cote {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .55rem;
}
.amr-cote {
  font-family: var(--face-chiffre); font-size: .72rem;
  letter-spacing: .05em; color: var(--encre-pale);
  border: 1px solid var(--trait); border-radius: 999px;
  padding: .1rem .5rem;
}
.amr-balise {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  background: var(--marque-voile); color: var(--marque-fonce);
  padding: .16rem .5rem; border-radius: var(--galet-petit);
}
.amr-sonde__date {
  margin-left: auto; font-family: var(--face-chiffre); font-size: .72rem;
  color: var(--encre-pale);
}
.amr-sonde__intitule { margin: 0 0 .4rem; font-size: 1.06rem; line-height: 1.28; }
.amr-sonde__intitule a { color: var(--encre); text-decoration: none; }
.amr-sonde__intitule a:hover { color: var(--marque-fonce); text-decoration: underline; }
.amr-sonde__abrege { font-size: .9rem; color: var(--encre-pale); margin: 0 0 .8rem; }

.amr-sonde__attributs {
  margin: 0 0 .85rem; padding: .6rem 0 0;
  border-top: var(--filet); font-size: .8rem;
}
.amr-mesure { display: flex; gap: .5rem; justify-content: space-between; padding: .12rem 0; }
.amr-mesure dt { color: var(--encre-pale); }
.amr-mesure dd { margin: 0; font-family: var(--face-chiffre); font-size: .76rem; text-align: right; }

.amr-sonde__renvoi { margin: auto 0 0; }
.amr-suite {
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--marque-fonce);
}
.amr-suite:hover { text-decoration: underline; }
.amr-suite span { margin-left: .25rem; }

/* -------------------------------------------------------------------------
   7. FANAL (encart éditorial)
   ------------------------------------------------------------------------- */
.amr-fanal {
  background: var(--carte); border: var(--filet);
  border-top: 3px solid var(--marque);
  border-radius: var(--galet);
  padding: 1.2rem 1.35rem;
}
.amr-fanal h2 { font-size: 1.18rem; }
.amr-fanal p:last-child, .amr-fanal ul:last-child, .amr-fanal ol:last-child { margin-bottom: 0; }
.amr-fanal ul, .amr-fanal ol { padding-left: 1.15rem; }
.amr-fanal li { margin-bottom: .4rem; }
.amr-fanal__kicker {
  font-family: var(--face-chiffre); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--marque-fonce); margin: 0 0 .4rem;
}

/* -------------------------------------------------------------------------
   8. ESTRAN (liste dense des pages de rubrique)
   ------------------------------------------------------------------------- */
.amr-estran { list-style: none; margin: 0 0 var(--cadence); padding: 0; border-top: var(--filet); }
.amr-laisse {
  display: grid; gap: .3rem 1.2rem;
  grid-template-columns: 1fr;
  padding: 1.05rem 0;
  border-bottom: var(--filet);
}
.amr-laisse__cote { font-family: var(--face-chiffre); font-size: .72rem; color: var(--encre-pale); }
.amr-laisse__intitule { margin: 0 0 .2rem; font-size: 1.1rem; }
.amr-laisse__intitule a { color: var(--encre); text-decoration: none; }
.amr-laisse__intitule a:hover { color: var(--marque-fonce); text-decoration: underline; }
.amr-laisse__abrege { margin: 0; font-size: .92rem; color: var(--encre-pale); max-width: 42rem; }
.amr-laisse__attributs { margin: .25rem 0 0; font-size: .8rem; display: grid; gap: .1rem; }

@media (min-width: 54rem) {
  .amr-laisse { grid-template-columns: 5.5rem minmax(0, 1fr) 13rem; align-items: start; }
  .amr-laisse__cote { grid-row: span 2; padding-top: .3rem; }
  .amr-laisse__attributs { grid-column: 3; grid-row: 1 / span 2; }
}

/* -------------------------------------------------------------------------
   9. FICHE : remontée, entête, bordage (rail à gauche)
   ------------------------------------------------------------------------- */
.amr-remonte { padding: var(--cadence) 0 0; font-size: .8rem; color: var(--encre-pale); }
.amr-remonte ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.amr-remonte li::after { content: "\203A"; margin-left: .35rem; color: var(--trait); }
.amr-remonte li:last-child::after { content: ""; }

.amr-entete { padding: var(--cadence) 0 calc(var(--cadence) * .8); border-bottom: var(--filet); }
.amr-entete h1 { margin-bottom: .45rem; }
.amr-chapeau { font-size: 1.1rem; color: var(--encre-pale); max-width: 42rem; }
.amr-datation { font-family: var(--face-chiffre); font-size: .73rem; color: var(--encre-pale); margin: 0; }

.amr-bordage {
  display: grid; gap: calc(var(--cadence) * 1.7);
  grid-template-columns: minmax(0, 1fr);
  padding: calc(var(--cadence) * 1.6) 0;
}
.amr-corps, .amr-flanc { min-width: 0; }
@media (min-width: 62rem) {
  .amr-bordage { grid-template-columns: 18.5rem minmax(0, 1fr); align-items: start; }
  .amr-flanc { grid-column: 1; grid-row: 1; position: sticky; top: 1rem; }
  .amr-corps { grid-column: 2; grid-row: 1; }
}

.amr-corps > * { max-width: var(--lecture); }
.amr-corps > figure, .amr-corps > .amr-ressac, .amr-corps > .amr-fanal { max-width: 100%; }
.amr-corps h2 {
  margin-top: calc(var(--cadence) * 2);
  padding-left: 1.15rem; position: relative;
}
.amr-corps h2::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .55rem; height: .55rem; background: var(--marque);
  transform: rotate(45deg);
}
.amr-corps h3 { margin-top: calc(var(--cadence) * 1.2); }
.amr-corps ul, .amr-corps ol { padding-left: 1.25rem; }
.amr-corps li { margin-bottom: .4rem; }
.amr-corps figure { margin: calc(var(--cadence) * 1.4) 0; }
.amr-corps figcaption { font-size: .8rem; color: var(--encre-pale); padding-top: .45rem; }
.amr-corps figure img { border-radius: var(--galet); border: var(--filet); }

/* Définitions extractables */
.amr-defs {
  border: var(--filet); border-left: 4px solid var(--marque);
  border-radius: var(--galet); background: var(--carte);
  padding: 1rem 1.2rem; margin-bottom: var(--cadence);
}
.amr-defs dl { margin: 0; }
.amr-defs dt { font-family: var(--face-titre); font-weight: 600; margin-top: .85rem; }
.amr-defs dt:first-of-type { margin-top: 0; }
.amr-defs dd { margin: .1rem 0 0; color: var(--encre-pale); font-size: .95rem; }

/* Suite de manoeuvres numérotées */
.amr-manoeuvre { list-style: none; counter-reset: pas; padding: 0 !important; }
.amr-manoeuvre li {
  counter-increment: pas; position: relative;
  padding-left: 2.9rem; margin-bottom: .85rem; min-height: 2rem;
}
.amr-manoeuvre li::before {
  content: counter(pas, decimal-leading-zero);
  position: absolute; left: 0; top: .05rem;
  font-family: var(--face-chiffre); font-size: .78rem; color: var(--marque-fonce);
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: 999px; background: var(--carte);
}

/* Relevé de caractéristiques (rail) */
.amr-releve {
  background: var(--carte); border: var(--filet); border-radius: var(--galet);
  padding: .4rem 1.1rem 1.1rem;
}
.amr-releve h2 { font-size: 1.02rem; margin: .85rem 0 .5rem; }
.amr-releve table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 0; }
.amr-releve th, .amr-releve td { text-align: left; padding: .45rem 0; border-bottom: var(--filet); vertical-align: top; }
.amr-releve tr:last-child th, .amr-releve tr:last-child td { border-bottom: 0; }
.amr-releve th { font-weight: 500; color: var(--encre-pale); width: 46%; }
.amr-releve td { font-family: var(--face-chiffre); font-size: .8rem; }

/* Route : sommaire interne */
.amr-route { margin-top: var(--cadence); }
.amr-route h2 {
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--encre-pale); font-family: var(--face-texte);
}
.amr-route ol { list-style: none; margin: 0; padding: 0; }
.amr-route li { border-top: var(--filet); }
.amr-route__lien { display: block; padding: .48rem 0; font-size: .87rem; text-decoration: none; color: var(--encre); }
.amr-route__lien::before { content: "\2022\00a0"; color: var(--marque); }
.amr-route__lien:hover { color: var(--marque-fonce); }

/* Ressac : tableau large à défilement */
.amr-ressac {
  overflow-x: auto; border: var(--filet); border-radius: var(--galet);
  background: var(--carte); max-width: 100%; margin-bottom: var(--cadence);
}
.amr-ressac table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .87rem; margin: 0; }
.amr-ressac caption { text-align: left; padding: .75rem 1rem; font-size: .8rem; color: var(--encre-pale); }
.amr-ressac th, .amr-ressac td { padding: .58rem 1rem; border-bottom: var(--filet); text-align: left; }
.amr-ressac thead th { background: var(--haut-fond); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.amr-ressac tbody tr:last-child th, .amr-ressac tbody tr:last-child td { border-bottom: 0; }
.amr-ressac td { font-family: var(--face-chiffre); font-size: .8rem; }
.amr-ressac th[scope="row"] { font-family: var(--face-texte); font-weight: 600; font-size: .87rem; }
.amr-ressac:focus-visible { outline: 2px solid var(--marque); }

/* Dérive : fiches voisines */
.amr-derive { border-top: var(--filet); padding: calc(var(--cadence) * 1.6) 0; }
.amr-derive .amr-banc { --pas-banc: 14rem; }

/* -------------------------------------------------------------------------
   10. PAGE SIMPLE (contact, mentions)
   ------------------------------------------------------------------------- */
.amr-feuille { padding: calc(var(--cadence) * 1.4) 0 calc(var(--cadence) * 2); }
.amr-feuille > * { max-width: 42rem; }
.amr-feuille h2 { margin-top: calc(var(--cadence) * 1.8); }
.amr-feuille ul, .amr-feuille ol { padding-left: 1.25rem; }
.amr-feuille li { margin-bottom: .4rem; }

/* -------------------------------------------------------------------------
   11. LEST (pied)
   ------------------------------------------------------------------------- */
.amr-lest {
  background: var(--carte); border-top: var(--filet);
  padding: calc(var(--cadence) * 1.7) 0; margin-top: var(--cadence);
}
.amr-lest__colonnes { display: grid; gap: var(--cadence); grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.amr-lest h2 {
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--encre-pale); font-family: var(--face-texte);
}
.amr-lest ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.amr-lest li { margin-bottom: .35rem; }
.amr-lest__mention {
  border-top: var(--filet); margin-top: var(--cadence); padding-top: .95rem;
  font-size: .8rem; color: var(--encre-pale); max-width: 52rem;
}