/* ==================================================================
   Météo Berck-sur-Mer — feuille de style (mobile first)
   ================================================================== */

:root {
  /* Couleurs */
  --bleu-900: #072030;
  --bleu-profond: #08293c;
  --bleu-700: #0b6e99;   /* aplats : fond de pastille, avec du texte blanc dessus */
  --lien: #0b6e99;       /* textes, icônes et filets bleus — s'éclaircit en thème sombre */
  --bleu-500: #2e86ab;
  --bleu-200: #bfdfef;
  --bleu-050: #eaf4fa;
  --sable: #f2a65a;
  --corail: #e8724c;
  --vert: #5f9e57;
  --alerte: #c2410c;
  --alerte-texte: #9a3412;
  --alerte-fond: #fef8f3;
  --alerte-bandeau: #fdeee2;
  --fond: #f2f7fa;
  --surface: #ffffff;
  --surface-2: #f7fafc;
  --bord: #e1ebf2;
  --texte: #0f2233;
  --texte-doux: #4d6981;
  --texte-faible: #526d85;

  /* Rayons et ombres */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --ombre-1: 0 1px 2px rgba(15, 34, 51, .05), 0 4px 12px rgba(15, 34, 51, .06);
  --ombre-2: 0 2px 4px rgba(15, 34, 51, .06), 0 14px 32px rgba(15, 34, 51, .10);

  /* Espacement (échelle 4/8) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;

  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --barre-h: 58px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barre-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--lien); }

.ic { width: 22px; height: 22px; flex: 0 0 auto; }

/* Accessibilité : anneau de focus visible au clavier */
:focus-visible {
  outline: 3px solid var(--lien);
  outline-offset: 2px;
  border-radius: 6px;
}
.tuile:focus-visible, .nav-bas a:focus-visible { outline-offset: -3px; }

/* Lien d'évitement */
.evitement {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  z-index: 500;
  background: var(--surface);
  color: var(--lien);
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  padding: 10px 18px;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ombre-2);
  transition: transform .2s;
}
.evitement:focus { transform: translate(-50%, 0); }

/* ---------------------------- Barre d'app --------------------------- */

.barre {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bord);
  padding-top: env(safe-area-inset-top);
}
.barre-contenu {
  max-width: 1180px;
  margin: 0 auto;
  height: var(--barre-h);
  padding: 0 var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e4);
}
/* Emblème : le phare de Berck. Sa lanterne reprend la signature réelle du
   feu — un éclat blanc toutes les 5 secondes (Fl W 5s). */
.logo-phare { width: 30px; height: 42px; flex: 0 0 auto; display: block; }

/* Info-bulle : la signature du feu telle qu'elle figure au Livre des feux.
   Au survol seulement, donc sans effet sur écran tactile. */
.phare-bloc { position: relative; display: flex; flex: 0 0 auto; }
.phare-bulle {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 300;
  transform: translate(-50%, -4px);
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--bord);
  background: var(--bleu-profond);
  color: #eaf4fa;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--ombre-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Pointe dirigée vers le phare */
.phare-bulle::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--bleu-profond);
}

@media (hover: hover) {
  .phare-bloc:hover .phare-bulle {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}
.phare-eclat, .phare-halo { animation: eclatPhare 5s linear infinite; }
.phare-halo { opacity: 0; filter: blur(2px); }

@keyframes eclatPhare {
  0%   { opacity: .18; }
  3%   { opacity: 1; }
  11%  { opacity: 1; }
  16%  { opacity: .18; }
  100% { opacity: .18; }
}

.barre-titre h1 { font-size: 1.12rem; }
.barre-titre p { font-size: .75rem; color: var(--texte-faible); }

/* Titre long de l'accueil (« Météo, marées et activités à Berck-sur-Mer ») :
   la barre s'agrandit au lieu de déborder, et le titre passe proprement sur
   deux lignes équilibrées quand la place manque (mobile, ou 900 px avec la
   navigation haute). */
.barre-contenu { height: auto; min-height: var(--barre-h); padding-top: 6px; padding-bottom: 6px; }
.barre-titre { min-width: 0; }
.barre-titre h1.titre-long { line-height: 1.2; text-wrap: balance; }
@media (max-width: 559px) {
  .barre-titre h1.titre-long { font-size: .95rem; }
}
.nav-haut { display: none; margin-left: auto; gap: var(--e1); }
.nav-haut a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 550;
  color: var(--texte-doux);
  text-decoration: none;
}
.nav-haut a:hover { background: var(--bleu-050); color: var(--lien); }

.btn-icone {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background: var(--surface);
  color: var(--lien);
  cursor: pointer;
  transition: background .15s, transform .4s;
}
.nav-haut ~ .btn-icone { margin-left: 0; }
.btn-icone:hover { background: var(--bleu-050); }
.btn-icone.tourne { transform: rotate(360deg); }

/* ----------------------------- Sections ---------------------------- */

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--e5) var(--e4) 0;
}
.section-titre {
  font-size: 1.32rem;
  margin-bottom: var(--e3);
}
.section-intro {
  color: var(--texte-doux);
  font-size: .875rem;
  margin-bottom: var(--e4);
  max-width: 68ch;
}
.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  padding: var(--e4);
  box-shadow: var(--ombre-1);
  margin-bottom: var(--e4);
}
.carte-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e3);
}
.carte-entete h3 { font-size: 1rem; }
.etiquette {
  font-size: .72rem;
  color: var(--texte-faible);
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.sous-titre-bloc { font-size: .9rem; margin: var(--e5) 0 var(--e3); }
.note { font-size: .78rem; color: var(--texte-faible); margin-top: var(--e3); }

/* ------------------------------- Hero ------------------------------ */

.hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 244px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--ombre-2);
  margin-bottom: var(--e4);
}
.hero-fond {
  position: absolute;
  inset: 0;
  background-image: url('images/hero-jour.svg');
  background-size: cover;
  background-position: center 60%;
}
.hero-fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 32, 48, .92) 8%, rgba(6, 32, 48, .55) 46%, rgba(6, 32, 48, .12) 100%);
}
.hero-corps {
  position: relative;
  padding: var(--e5) var(--e4) var(--e4);
  color: #fff;
  width: 100%;
}
/* Le bloc « eau » passe à la ligne suivante plutôt que d'écraser la
   température de l'air (cas des valeurs négatives, plus larges). */
.hero-haut { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.hero-icone { width: 64px; height: 64px; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.hero-air { min-width: max-content; }
.hero-temp { font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.hero-temp .deg { font-weight: 400; opacity: .8; }

/* Température de l'eau, à droite et un cran plus petite que celle de l'air */
.hero-eau {
  margin-left: auto;
  padding-left: var(--e3);
  border-left: 1px solid rgba(255, 255, 255, .28);
  text-align: right;
  flex: 0 0 auto;
}
.hero-eau-lib {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .85;
  margin-bottom: 2px;
}
.hero-eau-temp { font-size: 2.6rem; font-weight: 650; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
/* Libellé court sur petit écran, pour tenir sur une seule ligne */
.hero-eau-lib .lib-long { display: none; }
.hero-eau-temp .deg { font-weight: 400; opacity: .8; }
.hero-cond { font-size: 1.05rem; opacity: .95; margin-top: var(--e3); }
.hero-lieu { font-size: .8rem; opacity: .8; margin-top: 2px; }
.hero-faits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}
.hero-faits li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: .8rem;
  backdrop-filter: blur(4px);
}
.hero-faits .ic { width: 15px; height: 15px; opacity: .9; }

/* -------------------------- Duo plage/ville ------------------------ */

.duo { display: grid; gap: var(--e3); margin-bottom: var(--e4); }
.mini {
  display: flex;
  align-items: stretch;
  gap: var(--e3);
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--ombre-1);
}
.mini-img { width: 108px; object-fit: cover; flex: 0 0 auto; align-self: stretch; }
.mini-corps {
  padding: var(--e3) var(--e3) var(--e3) 0;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e2);
}
.mini h3 { font-size: .95rem; }
.mini-detail { font-size: .72rem; color: var(--texte-faible); }
.mini-valeurs { min-width: 0; }
.mini-temp { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.mini-faits { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); font-size: .76rem; color: var(--texte-doux); }
.mini-faits li { display: inline-flex; align-items: center; gap: 4px; }
.mini-faits .ic { width: 14px; height: 14px; color: var(--bleu-500); }

/* --------------------------- Tuiles image -------------------------- */

.tuiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
}
.tuile {
  position: relative;
  min-height: 148px;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--e3);
  text-decoration: none;
  color: #fff;
  box-shadow: var(--ombre-1);
  isolation: isolate;
}
.tuile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
.tuile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5, 28, 43, .92) 6%, rgba(5, 28, 43, .58) 48%, rgba(5, 28, 43, .08) 100%);
}
.tuile-texte { min-width: 0; }
.tuile-sur { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; opacity: .82; }
.tuile-valeur { font-size: 1.5rem; font-weight: 680; line-height: 1.15; margin-top: 2px; }
.tuile-sous { font-size: .78rem; opacity: .9; margin-top: 2px; }
.tuile-fleche { position: absolute; right: 12px; bottom: 14px; width: 18px; height: 18px; opacity: .7; }

/* ----------------------------- Marées ------------------------------ */

.courbe { width: 100%; overflow: hidden; margin-bottom: var(--e4); }
.courbe svg { display: block; width: 100%; height: auto; }

/* Couleurs des graphiques SVG, pilotées par le thème */
.courbe .t-card, .rose .t-card { fill: var(--texte-faible); }
.rose .t-nord { fill: var(--texte-doux); }
.rose .t-valeur { fill: var(--texte); }
.rose .g-principale { stroke: var(--texte-faible); }
.rose .g-secondaire { stroke: var(--bord); }
.rose .aiguille { fill: var(--lien); }
.rose .aiguille-queue { fill: var(--bord); }
.rose .centre { fill: var(--surface); stroke: var(--bord); }
.courbe .g-repere { stroke: var(--bord); }
.courbe .point-maree { stroke: var(--surface); stroke-width: 2; }
.courbe .t-pm { fill: var(--lien); }
.courbe .t-bm { fill: #b06d14; }
.marees-jours { display: grid; gap: var(--e4); }
.maree-jour h4 { font-size: .85rem; color: var(--texte-doux); margin-bottom: var(--e2); }
.maree-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
.maree-item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--bord);
}
.maree-item.pleine { background: #eaf4fa; border-color: #cfe6f3; }
.maree-fleche {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem; font-weight: 700;
  background: var(--bleu-700); color: #fff;
  flex: 0 0 auto;
}
.maree-item.basse .maree-fleche { background: var(--sable); color: #3a2408; }
.maree-type { font-size: .72rem; color: var(--texte-faible); }
.maree-heure { font-size: 1.15rem; font-weight: 660; letter-spacing: -.01em; }
.maree-hauteur { font-size: .74rem; color: var(--texte-doux); }
.avertissement {
  margin-top: var(--e4);
  font-size: .78rem;
  color: #8a5a12;
  background: #fdf3e2;
  border: 1px solid #f4dfbb;
  border-radius: var(--r-sm);
  padding: var(--e3);
}

/* ---------------------- Encadré de vigilance ----------------------- */

.marees-grille { display: grid; gap: var(--e4); align-items: start; }

.vigilance {
  border-left: 5px solid var(--alerte);
  background: var(--alerte-fond);
}
.vigilance-entete {
  display: flex;
  align-items: center;
  gap: var(--e2);
  color: var(--alerte-texte);
  margin-bottom: var(--e3);
}
.vigilance-entete h3 { font-size: 1rem; color: inherit; }
.vigilance-entete .ic { width: 24px; height: 24px; }

.vigilance-etat {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3);
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--bord);
  margin-bottom: var(--e4);
  font-size: .84rem;
  color: var(--texte-doux);
}
.vigilance-etat .ic { width: 20px; height: 20px; color: var(--lien); margin-top: 1px; }
.vigilance-etat-titre { display: block; font-weight: 650; color: var(--texte); font-size: .92rem; }

.vigilance-liste { display: grid; gap: var(--e3); }
.vigilance-liste li {
  position: relative;
  padding-left: var(--e4);
  font-size: .84rem;
  color: var(--texte-doux);
  line-height: 1.5;
}
.vigilance-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alerte);
}
.vigilance-liste strong { color: var(--texte); font-weight: 650; }

.vigilance-urgence {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: var(--e3);
  border-radius: var(--r-sm);
  background: var(--alerte-bandeau);
  color: var(--alerte-texte);
  font-size: .82rem;
  font-weight: 500;
}
.vigilance-urgence .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.vigilance-urgence strong { font-weight: 700; }

/* ------------------------ Prévisions horaires ---------------------- */

.horaire-defile {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--e2);
  margin: 0 calc(var(--e4) * -1);
  padding-left: var(--e4);
  padding-right: var(--e4);
  -webkit-overflow-scrolling: touch;
}
.heure {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 74px;
  text-align: center;
  padding: var(--e3) var(--e2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--bord);
}
.heure.maintenant { background: var(--bleu-050); border-color: var(--bleu-200); }
.heure-h { font-size: .74rem; color: var(--texte-faible); }
.heure-ic { width: 34px; height: 34px; margin: 4px auto 2px; display: block; }
.heure-t { font-size: 1.05rem; font-weight: 660; }
.heure-pluie { font-size: .74rem; color: var(--bleu-500); min-height: 1em; }
.heure-vent { font-size: .74rem; color: var(--texte-faible); margin-top: 2px; }
.heure-fleche { display: inline-block; font-size: 1.35rem; line-height: 1.1; color: var(--lien); }
.compact .heure { width: 66px; }

/* --------------------------- 7 jours ------------------------------- */

.jours { display: grid; gap: var(--e1); }
.jour {
  display: grid;
  grid-template-columns: 3.9rem 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e2);
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--bord);
}
.jour:last-child { border-bottom: 0; }
.jour.aujourdhui { background: var(--bleu-050); }
.jour-nom { font-size: .84rem; font-weight: 600; text-transform: capitalize; }
.jour-nom small { display: block; font-weight: 400; color: var(--texte-faible); font-size: .72rem; text-transform: none; }
.jour-ic { width: 36px; height: 36px; }
.jour-milieu { min-width: 0; }
.jour-cond { font-size: .78rem; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jour-details { display: flex; flex-wrap: wrap; gap: 2px var(--e2); font-size: .74rem; color: var(--texte-faible); margin-top: 2px; }
.jour-details span { display: inline-flex; align-items: center; gap: 3px; }
.jour-details .ic { width: 13px; height: 13px; }
.jour-temp { text-align: right; font-size: .92rem; white-space: nowrap; }
.jour-temp b { font-size: 1.05rem; }
.jour-temp span { color: var(--texte-faible); }

/* ---------------------------- Vent / mer --------------------------- */

.vent-bloc { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.rose { width: 132px; height: 132px; flex: 0 0 auto; }
.rose svg { width: 100%; height: 100%; }
.donnees {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e2) var(--e4);
  margin: 0;
  flex: 1 1 220px;
  font-size: .86rem;
}
.donnees dt { color: var(--texte-doux); display: flex; align-items: center; gap: 6px; }
.donnees dt .ic { width: 16px; height: 16px; color: var(--bleu-500); }
.donnees dd { margin: 0; text-align: right; font-weight: 600; }
.donnees dd small { font-weight: 400; color: var(--texte-faible); }

/* ------------------------- Qualité de l'air ------------------------ */

.air-entete { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e4); }
.air-pastille {
  width: 88px; height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background: #cfd9e6;
  color: #08293c;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35);
}
.air-pastille span { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.air-pastille small { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.air-etiquette { font-size: 1.1rem; font-weight: 650; }
.air-conseil { font-size: .84rem; color: var(--texte-doux); margin-top: 4px; }
.polluants { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--e2); }
.polluant {
  padding: var(--e3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--bord);
}
.polluant-nom { font-size: .74rem; color: var(--texte-doux); display: flex; justify-content: space-between; gap: 6px; }
.polluant-nom b { color: var(--texte-faible); font-weight: 500; }
.polluant-val { font-size: 1.2rem; font-weight: 660; margin-top: 2px; }
.polluant-val small { font-size: .74rem; font-weight: 400; color: var(--texte-faible); margin-left: 3px; }
.jauge { height: 6px; border-radius: 999px; background: #e3ebf1; margin-top: var(--e2); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 999px; }
.polluant-etat { font-size: .74rem; color: var(--texte-doux); margin-top: 4px; }

/* ---------------------------- Activités ---------------------------- */

.activites { display: grid; gap: var(--e3); }
.activite {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--ombre-1);
  display: flex;
  flex-direction: column;
}
.activite-img { width: 100%; height: 132px; object-fit: cover; display: block; background: var(--bleu-050); }

/* ------------- Relief au survol (tuiles et fiches activité) -------- */

.tuile, .activite {
  transform: perspective(800px) translate3d(0, 0, 0);
  transition: transform .22s ease, box-shadow .22s ease;
}

/* La carte entière bouge, jamais l'illustration seule : animer l'image la
   promeut sur son propre calque de composition, et le rognage arrondi de la
   carte cesse alors d'être appliqué pendant la transition — les coins
   apparaissent carrés le temps de l'animation. */
@media (hover: hover) {
  .tuile:hover, .activite:hover {
    /* Translation sur l'axe Z : la carte avance vers le lecteur */
    transform: perspective(800px) translate3d(0, -4px, 14px);
    box-shadow: var(--ombre-2);
  }
}

.tuile:active, .activite:active {
  transform: perspective(800px) translate3d(0, -1px, 2px);
  transition-duration: .1s;
}
.activite-corps { padding: var(--e3) var(--e4) var(--e4); flex: 1; display: flex; flex-direction: column; }
.activite-haut { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.activite h3 { font-size: 1rem; }
.score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.score i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.activite-texte { font-size: .84rem; color: var(--texte-doux); margin-top: var(--e2); }
/* Récapitulatif des marchés : une ligne par rendez-vous */
.activite-texte b { color: var(--texte); font-weight: 650; }
.activite-texte br + b { display: inline-block; margin-top: 4px; }
.activite-info { font-size: .76rem; color: var(--texte-faible); margin-top: var(--e2); display: flex; align-items: center; gap: 6px; }
.activite-info .ic { width: 14px; height: 14px; }

/* --------------------- Fiche activité cliquable -------------------- */

.activite-cliquable { cursor: pointer; }
.activite-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--e3);
  font-size: .82rem;
  font-weight: 600;
  color: var(--lien);
}
.activite-action .ic { width: 16px; height: 16px; }
.activite-cliquable:hover .activite-action { text-decoration: underline; }

/* -------------------------- Lightbox ------------------------------- */

.lightbox {
  width: min(760px, calc(100vw - 2rem));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--texte);
  box-shadow: 0 24px 70px rgba(4, 18, 30, .45);
  overflow: hidden;
}
.lightbox::backdrop {
  background: rgba(5, 20, 32, .62);
  backdrop-filter: blur(3px);
}
.lightbox[open] { display: flex; flex-direction: column; }

.lightbox-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4);
  border-bottom: 1px solid var(--bord);
  background: linear-gradient(115deg, var(--bleu-050), var(--surface) 70%);
}
.lightbox-entete h2 { font-size: 1.15rem; }
.lightbox-sous { font-size: .78rem; color: var(--texte-faible); margin-top: 2px; }
.lightbox-fermer {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background: var(--surface);
  color: var(--texte-doux);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lightbox-fermer:hover { background: var(--surface-2); color: var(--texte); }

.lightbox-corps { padding: var(--e4); overflow-y: auto; flex: 1; }

.cine-jour + .cine-jour { margin-top: var(--e5); }
.cine-jour-titre {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: .95rem;
  font-weight: 650;
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--bleu-200);
  margin-bottom: var(--e3);
}
.cine-jour-titre span { font-size: .78rem; font-weight: 400; color: var(--texte-faible); }

.cine-film {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--bord);
}
.cine-film:last-child { border-bottom: 0; }
.cine-titre { font-size: .92rem; font-weight: 620; }
.cine-genre { font-size: .76rem; color: var(--texte-faible); }
.cine-horaires { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cine-h {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bleu-050);
  border: 1px solid var(--bleu-200);
  font-size: .84rem;
  font-weight: 620;
  color: var(--lien);
}
.cine-h small { font-size: .68rem; font-weight: 500; opacity: .8; }
/* Séance déjà commencée */
.cine-h.passe { background: var(--surface-2); border-color: var(--bord); color: var(--texte-faible); }
.piscine-etat { font-size: .78rem; color: var(--texte-faible); margin-top: 3px; }
.piscine-etat.ouvert { color: #2f7a3a; font-weight: 600; }
.piscine-alerte {
  margin-top: var(--e4);
  font-size: .8rem;
  color: var(--alerte-texte);
  background: var(--alerte-bandeau);
  border: 1px solid var(--alerte);
  border-radius: var(--r-sm);
  padding: var(--e3);
}
.cine-vide {
  font-size: .84rem;
  color: var(--texte-doux);
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  padding: var(--e3);
}

.lightbox-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--bord);
  background: var(--surface-2);
}
.lightbox-pied p { font-size: .72rem; color: var(--texte-faible); max-width: 46ch; }
.lightbox-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--lien);
  text-decoration: none;
  white-space: nowrap;
}
.lightbox-lien:hover { text-decoration: underline; }
.lightbox-lien .ic { width: 15px; height: 15px; }

@media (min-width: 560px) {
  .cine-film { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
  .cine-horaires { justify-content: flex-end; }
}

/* ---------------------- Renvoi office de tourisme ------------------ */

.office {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: linear-gradient(115deg, var(--bleu-050) 0%, var(--surface) 62%);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--ombre-1);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Rappel discret du motif marin du site */
.office::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -14px;
  width: 260px;
  height: 90px;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='30' viewBox='0 0 130 30'%3E%3Cpath d='M0 15c16 0 16-11 32-11s16 11 32 11 16-11 32-11 16 11 32 11' fill='none' stroke='%233f9dc4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.office-icone {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bleu-700);
  color: #fff;
}
.office-icone .ic { width: 24px; height: 24px; }
.office-texte { position: relative; z-index: 1; min-width: 0; display: block; }
.office-texte strong { display: block; font-size: .95rem; font-weight: 650; color: var(--texte); }
.office-texte > span { display: block; font-size: .82rem; color: var(--texte-doux); margin-top: 3px; max-width: 62ch; }
.office-fleche {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-left: auto;
  width: 20px;
  height: 20px;
  color: var(--lien);
  transition: transform .2s ease;
}

@media (hover: hover) {
  .office:hover { border-color: var(--lien); box-shadow: var(--ombre-2); }
  .office:hover .office-fleche { transform: translate(2px, -2px); }
}

/* ------------------------------- Pied ------------------------------ */

.pied {
  margin-top: var(--e6);
  background: var(--bleu-profond);
  color: #c8dae6;
  padding: var(--e6) var(--e4) var(--e7);
}
.pied-contenu { max-width: 1180px; margin: 0 auto; }
.pied h2 { font-size: 1.05rem; color: #fff; margin-bottom: var(--e4); }
.pied h3 { font-size: .84rem; color: #7fc4e8; text-transform: uppercase; letter-spacing: .07em; margin: var(--e5) 0 var(--e2); }
.pied p { font-size: .82rem; margin-bottom: var(--e3); max-width: 78ch; }
.pied strong { color: #eaf4fa; }
.pied a { color: #9fd6f0; }
.sources { display: grid; gap: var(--e3); }
.sources li { font-size: .8rem; max-width: 78ch; }
.sources strong { display: block; color: #eaf4fa; }
.pied-note { font-size: .75rem !important; color: #90adbf; margin-top: var(--e5); }

/* -------------------------- Navigation bas ------------------------- */

.nav-bas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-bas a {
  flex: 1;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--texte-faible);
  font-size: .72rem;
  font-weight: 550;
  padding: 6px 2px;
  transition: color .15s;
}
.nav-bas a .ic { width: 21px; height: 21px; }
.nav-bas a.actif { color: var(--lien); }
.nav-bas a:active { background: var(--bleu-050); }

/* --------------------------- Chargement ---------------------------- */

.etat-chargement {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 300;
  background: var(--bleu-profond);
  color: #fff;
  font-size: .8rem;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--ombre-2);
  transition: opacity .25s, transform .25s;
}
.etat-chargement[hidden] { display: block !important; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); }
.etat-chargement.erreur { background: #9b2c2c; }

/* ============================ Écrans larges ======================== */

@media (min-width: 560px) {
  .jour { grid-template-columns: 4.6rem 40px minmax(0, 1fr) auto; gap: var(--e3); }
  .jour-ic { width: 40px; height: 40px; }
  .hero-eau-lib .lib-court { display: none; }
  .hero-eau-lib .lib-long { display: inline; }
  /* La carte Berck-Ville est seule : identité à gauche, valeurs à droite. */
  .mini-corps { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e4); padding-right: var(--e4); }
  .mini-valeurs { text-align: right; }
  .mini-faits { justify-content: flex-end; }
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .activites { grid-template-columns: 1fr 1fr; }
  .maree-liste { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  body { padding-bottom: var(--e6); }
  .nav-bas { display: none; }
  .nav-haut { display: flex; }
  .section { padding-top: var(--e6); }
  .section-titre { font-size: 1.5rem; }
  .hero { min-height: 300px; }
  .hero-temp { font-size: 4.2rem; }
  .hero-eau-temp { font-size: 3.2rem; }
  .hero-eau { padding-left: var(--e5); }
  .hero-eau-lib { font-size: .74rem; }
  .hero-icone { width: 84px; height: 84px; }
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .tuile { min-height: 158px; }
  .activites { grid-template-columns: repeat(3, 1fr); }
  .carte { padding: var(--e5); }
  .marees-grille { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: var(--e4); }
  .marees-grille .carte { margin-bottom: 0; }
  .horaire-defile { margin: 0 calc(var(--e5) * -1); padding-left: var(--e5); padding-right: var(--e5); }
  .etat-chargement { bottom: 24px; }
}

@media (min-width: 1100px) {
  .maree-liste { grid-template-columns: repeat(4, 1fr); }
}

/* ============ Pied en deux colonnes et pages légales =============== */

/* Mentions et sources à gauche, pages légales en vis-à-vis à droite */
.pied-grille { display: grid; gap: var(--e5); align-items: start; }
.pied-colonne { min-width: 0; }

.pied-legal h3 { margin-top: 0; }
.pied-legal ul { display: grid; gap: var(--e2); }
.pied-legal a {
  display: inline-block;
  color: #9fd6f0;
  font-size: .88rem;
  font-weight: 550;
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 214, 240, .32);
  transition: color .15s, border-color .15s;
}
.pied-legal a:hover { color: #d3ecf9; border-bottom-color: #d3ecf9; }
.pied-legal .pied-legal-note {
  font-size: .74rem;
  color: #7f9bad;
  margin-top: var(--e4);
  line-height: 1.6;
}

@media (min-width: 900px) {
  .pied-grille { grid-template-columns: minmax(0, 1fr) minmax(190px, auto); gap: var(--e7); }
  /* L'alignement à droite n'a de sens qu'en vis-à-vis : en mobile, la colonne
     passe dessous et reprend l'alignement à gauche du reste du pied. */
  .pied-legal { text-align: right; }
  .pied-legal ul { justify-items: end; }
}

/* Contenu des pages légales */
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.legal-nav .puce { text-decoration: none; color: var(--texte-doux); }
.legal-nav .puce:hover { border-color: var(--lien); color: var(--lien); }
.legal-nav .puce.actuel {
  background: var(--bleu-050);
  border-color: var(--bleu-200);
  color: var(--lien);
  font-weight: 600;
}

.texte-legal { max-width: 84ch; }
.texte-legal h3 { font-size: 1.02rem; color: var(--texte); margin: var(--e5) 0 var(--e2); }
.texte-legal h3:first-child { margin-top: 0; }
.texte-legal h4 { font-size: .92rem; color: var(--texte-doux); margin: var(--e4) 0 var(--e2); }
.texte-legal p, .texte-legal li { font-size: .88rem; color: var(--texte-doux); line-height: 1.65; }
.texte-legal p { margin-bottom: var(--e3); }
.texte-legal ul, .texte-legal ol { display: grid; gap: var(--e2); margin: 0 0 var(--e4) var(--e5); }
.texte-legal ul { list-style: disc; }
.texte-legal ol { list-style: decimal; }
.texte-legal strong { color: var(--texte); }
.texte-legal a { color: var(--lien); }
.texte-legal .a-completer {
  display: inline-block;
  background: var(--alerte-bandeau);
  border: 1px dashed var(--alerte);
  color: var(--alerte-texte);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: .82rem;
  font-weight: 600;
}

.btn-retour { margin-left: auto; text-decoration: none; }

/* ============================== Mode sombre ======================== */

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0a1420;
    --surface: #101f2e;
    --surface-2: #16283a;
    --bord: #22384c;
    --texte: #e8f1f7;
    --texte-doux: #a4bccd;
    --texte-faible: #8ba6bb;
    --bleu-050: #17324a;
    --bleu-200: #2b5773;
    --lien: #6cc0e6;
    --alerte: #f97316;
    --alerte-texte: #fbb078;
    --alerte-fond: #16232f;
    --alerte-bandeau: #33210f;
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --ombre-2: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 36px rgba(0, 0, 0, .35);
  }
  .barre { background: rgba(10, 20, 32, .9); }
  .nav-bas { background: rgba(10, 20, 32, .95); }
  .btn-icone { background: var(--surface); }
  .maree-item.pleine { background: #14304a; border-color: #24506e; }
  .avertissement { background: #33271a; border-color: #574326; color: #f0cf9a; }
  .jauge { background: #22384c; }
  .pied { background: #06131e; }
  /* .rose .aiguille, .heure-fleche et .courbe .t-pm suivent --lien */
  .piscine-etat.ouvert { color: #6ee7a5; }
  .courbe .t-bm { fill: #e5b169; }
  .heure.maintenant { border-color: var(--bleu-200); }
}

/* ========================= Mouvement réduit ======================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  /* La règle ci-dessus accélérerait la pulsation du phare au point d'en faire
     un stroboscope : le feu est ici simplement figé allumé. */
  .phare-eclat { animation: none !important; opacity: 1; }
  .phare-halo { animation: none !important; opacity: .35; }
}