/* BlueCast — maquette. Thème « océan Indien » : bleu profond, lagon, corail. */
:root {
  --abysse: #041c29;
  --ocean: #062a3d;
  --ocean-2: #0a3a54;
  --carte: rgba(255, 255, 255, 0.06);
  --carte-bord: rgba(255, 255, 255, 0.12);
  --lagon: #14c9c9;
  --lagon-doux: rgba(20, 201, 201, 0.16);
  --corail: #ff7a59;
  --sable: #f3d9a4;
  --texte: #eaf6fb;
  --texte-2: #a9c6d4;
  --texte-3: #7c9caf;
  --alerte: #ffcf5c;
  --rayon: 18px;
  --ombre: 0 10px 30px rgba(0, 0, 0, 0.25);
  --nav-h: 68px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--font);
  color: var(--texte);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(20, 201, 201, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(255, 122, 89, 0.10), transparent 60%),
    linear-gradient(180deg, var(--ocean) 0%, var(--abysse) 70%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

a { color: inherit; }

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

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

/* ---------- Bandeau de démonstration ---------- */
.demo-banner {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  padding: calc(6px + env(safe-area-inset-top)) 16px 6px;
  background: repeating-linear-gradient(135deg, #3d2a00, #3d2a00 12px, #4a3300 12px, #4a3300 24px);
  color: var(--alerte);
  font-size: 13px; text-align: center;
  border-bottom: 1px solid rgba(255, 207, 92, 0.35);
}
.demo-banner strong { letter-spacing: 0.01em; }
.demo-banner__sub { color: #e8c983; font-size: 12px; }
.demo-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--alerte); box-shadow: 0 0 0 4px rgba(255, 207, 92, 0.2); }

/* ---------- Structure ---------- */
.shell { max-width: 1180px; margin: 0 auto; padding: 0 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 10px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand img { border-radius: 10px; flex: none; }
.brand__name { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.brand__name span { color: var(--lagon); }
.brand__zone { font-size: 12px; color: var(--texte-2); padding: 3px 8px; border: 1px solid var(--carte-bord); border-radius: 999px; white-space: nowrap; }

.spot-picker select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 16px; color: var(--texte);
  background: var(--carte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9c6d4' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--carte-bord); border-radius: 12px;
  padding: 10px 34px 10px 12px; max-width: 220px; width: 100%;
}
.spot-picker { min-width: 0; flex: 0 1 220px; }

@media (max-width: 520px) {
  .brand__zone { display: none; }
  .brand__name { font-size: 20px; }
  .demo-banner__sub { display: none; }
}

/* En-tête mobile : logo et compte sur une ligne, sélecteur de spot pleine largeur en dessous. */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar .topbar__actions { display: contents; }
  .topbar .brand { order: 1; }
  .topbar .compte-lien { order: 2; margin-left: auto; }
  .topbar .spot-picker { order: 3; flex: 1 1 100%; max-width: none; }
  .topbar .spot-picker select { max-width: none; }
}
.spot-picker select option { color: #0b2230; }

/* Navigation : barre basse sur mobile */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(4, 28, 41, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--carte-bord);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-decoration: none; font-size: 12px; color: var(--texte-3);
}
.nav a svg { width: 24px; height: 24px; }
.nav a[aria-current="page"] { color: var(--lagon); }
.nav a[aria-current="page"] svg { filter: drop-shadow(0 0 6px rgba(20, 201, 201, 0.5)); }

main { outline: none; }

/* ---------- Composants ---------- */
.titre-page { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 4px; }
.sous-titre { color: var(--texte-2); margin: 0 0 16px; font-size: 14px; }

.grille { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.grille > * { min-width: 0; }
.grille--2 { grid-template-columns: minmax(0, 1fr); }
main { min-width: 0; }
html, body { overflow-x: hidden; }

.carte {
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
}
.carte h2, .carte h3 { margin: 0 0 10px; font-size: 16px; }
.carte__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.carte__entete h2, .carte__entete h3 { margin: 0; }

.mention-demo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 4px 9px;
  font-size: 11px; color: var(--alerte);
  background: rgba(255, 207, 92, 0.08); border: 1px dashed rgba(255, 207, 92, 0.45); border-radius: 999px;
}
.mention-demo::before { content: "⚠"; }

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(500px 220px at 100% 0%, rgba(20, 201, 201, 0.35), transparent 70%),
    linear-gradient(135deg, #0b4a6b 0%, #082f45 100%);
}
.hero__lieu { font-size: 13px; color: var(--texte-2); margin: 0; }
.hero__nom { font-size: 22px; font-weight: 800; margin: 2px 0 12px; letter-spacing: -0.01em; }
.hero__principal { display: flex; align-items: center; gap: 14px; }
.hero__temp { font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.hero__ciel { width: 64px; height: 64px; }
.hero__resume { color: var(--texte-2); font-size: 14px; margin: 6px 0 0; }
.hero__heure { display: inline-block; margin-bottom: 8px; font-size: 12px; color: var(--texte-2); background: rgba(0, 0, 0, 0.2); padding: 4px 8px; border-radius: 999px; }
@media (min-width: 640px) {
  .hero__heure { position: absolute; top: 14px; right: 14px; margin: 0; }
}

.mesures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.mesure {
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--carte-bord); border-radius: 14px;
  padding: 12px; min-height: 92px;
  display: flex; flex-direction: column; gap: 4px;
}
.mesure__label { font-size: 12px; color: var(--texte-2); display: flex; align-items: center; gap: 6px; }
.mesure__label svg { width: 16px; height: 16px; color: var(--lagon); }
.mesure__valeur { font-size: 22px; font-weight: 700; }
.mesure__valeur small { font-size: 13px; font-weight: 500; color: var(--texte-2); }
.mesure__detail { font-size: 12px; color: var(--texte-3); display: flex; align-items: center; gap: 6px; }
.fleche { width: 16px; height: 16px; color: var(--sable); }

.onglets { display: inline-flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; border: 1px solid var(--carte-bord); }
.onglets button {
  font: inherit; font-size: 13px; color: var(--texte-2); background: transparent; border: 0;
  padding: 8px 12px; border-radius: 9px; cursor: pointer;
}
.onglets button[aria-pressed="true"] { background: var(--lagon-doux); color: var(--texte); box-shadow: inset 0 0 0 1px rgba(20, 201, 201, 0.45); }

.frise { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.frise__case {
  scroll-snap-align: start;
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--carte-bord); border-radius: 14px;
  padding: 10px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px;
}
.frise__case--actuelle { border-color: var(--lagon); background: var(--lagon-doux); }
.frise__case svg.ciel { width: 30px; height: 30px; }
.frise__heure { color: var(--texte-2); font-size: 12px; }
.frise__temp { font-weight: 700; font-size: 16px; }
.frise__ligne { color: var(--texte-3); font-size: 12px; }

.raccourcis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .raccourcis { grid-template-columns: repeat(4, 1fr); } }
.raccourci {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  text-decoration: none; padding: 14px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--carte-bord); font-size: 13px;
}
.raccourci svg { width: 22px; height: 22px; color: var(--corail); }
.raccourci strong { font-size: 14px; }
.raccourci span { color: var(--texte-3); font-size: 12px; }
.raccourci:hover { border-color: rgba(20, 201, 201, 0.5); }

/* ---------- Carte schématique ---------- */
.schema { position: relative; }
.schema svg { width: 100%; height: auto; display: block; border-radius: 14px; }
.schema__mention {
  display: inline-block; margin-bottom: 8px; font-size: 11px; color: var(--alerte);
  background: rgba(4, 28, 41, 0.75); border: 1px dashed rgba(255, 207, 92, 0.45); padding: 4px 8px; border-radius: 999px;
}
/* Score de pêche (démonstration) */
.score { --niveau: var(--lagon); }
.score--tres-bon { --niveau: #3fe0a0; }
.score--bon { --niveau: var(--lagon); }
.score--moyen { --niveau: var(--alerte); }
.score--faible { --niveau: var(--corail); }
.score--danger { --niveau: #ff5a5a; }
.score__alerte--danger { color: #ffd0d0; background: rgba(255, 90, 90, 0.14); border-color: rgba(255, 90, 90, 0.6); }
.frise__score--danger { background: #ff5a5a; }
.champ__erreur { color: #ffb4a2; font-size: 12px; }
.champ [aria-invalid="true"] { border-color: #ff8a70; }
.score__principal { display: flex; align-items: center; gap: 16px; }
.jauge { width: 112px; height: 112px; flex: none; }
.jauge__fond { stroke: rgba(255, 255, 255, 0.08); }
.jauge__valeur { stroke: var(--niveau); filter: drop-shadow(0 0 6px rgba(20, 201, 201, 0.35)); }
.jauge__total { font: 800 30px var(--font); fill: var(--texte); }
.jauge__sur { font: 600 10px var(--font); fill: var(--texte-2); }
.score__niveau { margin: 0; font-size: 20px; font-weight: 800; color: var(--niveau); }
.score__alerte {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px;
  color: #ffd9cf; background: rgba(255, 122, 89, 0.12); border: 1px solid rgba(255, 122, 89, 0.45);
}
.score__alerte::before { content: "⚠ "; }
.facteurs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.facteur { display: grid; grid-template-columns: 74px minmax(0, 1fr) 56px; align-items: center; gap: 4px 10px; font-size: 13px; }
.facteur__nom { font-weight: 600; }
.facteur__barre { width: 100%; height: 8px; display: block; }
.facteur__fond { fill: rgba(255, 255, 255, 0.08); }
.facteur__plein { fill: var(--niveau); }
.facteur__points { text-align: right; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.facteur__detail { grid-column: 2 / -1; font-size: 12px; color: var(--texte-3); margin-top: -4px; }
.fenetres { margin-top: 16px; }
.fenetres h3 { font-size: 14px; margin: 0 0 8px; color: var(--texte-2); }
.fenetres__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fenetre {
  display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px;
  background: var(--lagon-doux); border: 1px solid rgba(20, 201, 201, 0.45); font-size: 12px; color: var(--texte-2);
}
.fenetre strong { font-size: 14px; color: var(--texte); }
.frise, .frise__case, .facteur { position: relative; }
.frise__score {
  position: relative;
  font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
  color: #04202e; background: var(--lagon);
}
.frise__score--tres-bon { background: #3fe0a0; }
.frise__score--moyen { background: var(--alerte); }
.frise__score--faible { background: var(--corail); }
@keyframes jauge { from { stroke-dasharray: 0 100; } }
.anime .jauge__valeur { animation: jauge 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.anime .facteur__plein { transform-box: fill-box; transform-origin: left; animation: barre-facteur 0.8s ease both; }
@keyframes barre-facteur { from { transform: scaleX(0); } }

/* Journal de captures (démonstration) */
.formulaire__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.champ:nth-last-child(-n+2) { grid-column: 1 / -1; }
.champ__libelle { color: var(--texte-2); font-weight: 600; }
.champ__aide { color: var(--texte-3); font-size: 11px; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 16px; color: var(--texte); width: 100%;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--carte-bord); border-radius: 12px; padding: 10px 12px;
}
.champ select option { color: #0b2230; }
.champ input[type="file"] { font-size: 13px; padding: 8px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--lagon); outline: none; box-shadow: 0 0 0 3px rgba(20, 201, 201, 0.25); }
.formulaire .bouton svg { width: 18px; height: 18px; }
.journal__message { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; color: #9ff6ea; }
.journal__message--erreur { color: #ffb4a2; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--carte-bord); min-width: 0; }
.stat__valeur { font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat__libelle { font-size: 11px; color: var(--texte-3); }
.captures { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.capture {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--carte-bord);
}
.capture__photo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; }
.capture__photo--vide { background: var(--lagon-doux); color: var(--lagon); }
.capture__photo--vide svg { width: 26px; height: 26px; }
.capture__infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.capture__infos small { color: var(--texte-3); font-size: 12px; }
.capture__note { font-style: italic; }
.capture__retirer {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 20px; line-height: 1;
  color: var(--texte-2); background: transparent; border: 1px solid var(--carte-bord);
}
.capture__retirer:hover { color: var(--corail); border-color: rgba(255, 122, 89, 0.5); }
@media (max-width: 420px) {
  .formulaire__grille { grid-template-columns: minmax(0, 1fr); }
  .nav a { font-size: 11px; }
}

/* En-tête : bouton de compte */
.topbar__actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.compte-lien {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--texte); text-decoration: none; background: var(--carte); border: 1px solid var(--carte-bord);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.compte-lien svg { width: 22px; height: 22px; }
.compte-lien:hover, .compte-lien[aria-current="page"] { border-color: var(--lagon); }
.compte-lien--connecte { background: linear-gradient(135deg, var(--lagon), #3fe0c0); border-color: transparent; color: #04202e; }
.compte-lien__initiale { font-weight: 800; font-size: 17px; }

/* Écrans de compte (démonstration) */
.auth { position: relative; display: grid; place-items: center; padding: 8px 0 24px; min-height: calc(100vh - 220px); }
.auth__carte {
  position: relative; z-index: 1; width: 100%; max-width: 440px; padding: 28px 22px 22px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(11, 74, 107, 0.65), rgba(6, 42, 61, 0.85));
  border: 1px solid rgba(20, 201, 201, 0.28); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.auth__logo { display: grid; place-items: center; margin-bottom: 10px; }
.auth__logo img { border-radius: 16px; box-shadow: 0 8px 24px rgba(20, 201, 201, 0.35); }
.auth__titre { margin: 0; text-align: center; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.auth__sous-titre { margin: 6px 0 0; text-align: center; color: var(--texte-2); font-size: 14px; }
.auth__demo { display: flex; margin: 14px auto 0; width: fit-content; text-align: center; }
.auth__form { display: grid; gap: 14px; margin-top: 18px; }
.champ-auth { display: grid; gap: 6px; }
.champ-auth__libelle { font-size: 13px; font-weight: 600; color: var(--texte-2); }
.champ-auth__saisie {
  display: flex; align-items: center; gap: 10px; padding: 0 6px 0 12px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--carte-bord); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.champ-auth__saisie:focus-within { border-color: var(--lagon); box-shadow: 0 0 0 3px rgba(20, 201, 201, 0.25); }
.champ-auth__saisie--erreur { border-color: #ff8a70; }
.champ-auth__icone { width: 18px; height: 18px; color: var(--texte-3); flex: none; }
.champ-auth__saisie input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--texte);
  background: transparent; border: 0; padding: 13px 0; outline: none;
}
.champ-auth__saisie input::placeholder { color: var(--texte-3); }
.champ-auth__voir {
  width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--texte-2);
  display: grid; place-items: center; cursor: pointer;
}
.champ-auth__voir svg { width: 20px; height: 20px; }
.champ-auth__voir:hover { color: var(--lagon); }
.auth__ligne { display: flex; justify-content: flex-end; margin-top: -6px; }
.auth__lien { color: var(--lagon); font-weight: 600; text-decoration: none; font-size: 14px; }
.auth__lien:hover { text-decoration: underline; }
.auth__bouton.bouton { width: 100%; justify-content: center; margin-top: 4px; padding: 14px; font-size: 16px; }
.auth__pied { margin-top: 18px; text-align: center; font-size: 14px; color: var(--texte-2); }
.auth__case { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texte-2); cursor: pointer; }
.auth__case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lagon); flex: none; }
.auth__case--erreur { color: #ffb4a2; }
.auth__confirmation { display: grid; justify-items: center; gap: 10px; margin-top: 18px; text-align: center; color: var(--texte-2); outline: none; }
.auth__confirmation-icone { width: 54px; height: 54px; padding: 12px; border-radius: 50%; color: #04202e; background: linear-gradient(135deg, var(--lagon), #3fe0c0); }
.auth__infos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.auth__infos dt { color: var(--texte-2); }
.auth__infos dd { margin: 0; font-weight: 700; }
.auth__vagues { position: absolute; left: -16px; right: -16px; bottom: 0; width: calc(100% + 32px); height: 90px; pointer-events: none; }
.force { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--texte-2); margin-top: -6px; }
.force__barres { display: grid; grid-template-columns: repeat(4, 28px); gap: 4px; }
.force__barres span { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); transition: background 0.25s ease; }
.force--1 .force__barres span:nth-child(-n+1) { background: var(--corail); }
.force--2 .force__barres span:nth-child(-n+2) { background: var(--alerte); }
.force--3 .force__barres span:nth-child(-n+3) { background: var(--lagon); }
.force--4 .force__barres span { background: #3fe0a0; }
.anime .auth__carte { animation: entree 0.55s cubic-bezier(.2, .7, .2, 1) both; }
.auth__avertissement {
  margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13px;
  color: var(--alerte); background: rgba(255, 207, 92, 0.08); border: 1px dashed rgba(255, 207, 92, 0.45);
}
.auth__info { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; color: var(--texte-2); background: var(--lagon-doux); }
/* Sur les écrans de compte, le sélecteur de spot est masqué : il redessinerait la page et effacerait la saisie. */
.page-auth .spot-picker { display: none; }
.champ-auth__voir { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .anime .auth__carte { animation-name: apparition !important; }
}

/* Aide à l'identification (simulation) */
.bouton.bouton--secondaire { color: var(--texte); background: rgba(20, 201, 201, 0.14); box-shadow: inset 0 0 0 1px rgba(20, 201, 201, 0.5); }
.bouton.bouton--lien { color: var(--texte-2); background: transparent; box-shadow: none; padding-left: 4px; padding-right: 4px; text-decoration: underline; font-weight: 600; }
.bouton.bouton--petit { margin-top: 0; padding: 6px 10px; font-size: 13px; }
.bouton svg { width: 18px; height: 18px; }
.idf__corps { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.idf__apercu {
  position: relative; width: 120px; height: 120px; border-radius: 16px; overflow: hidden;
  background: rgba(0, 0, 0, 0.22); border: 1px dashed rgba(20, 201, 201, 0.5); display: grid; place-items: center;
}
.idf__apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idf__apercu--vide svg { width: 40px; height: 40px; color: var(--lagon); opacity: 0.8; }
.idf__apercu--analyse { border-style: solid; border-color: var(--lagon); }
.idf__balayage {
  position: absolute; left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(180deg, rgba(20, 201, 201, 0), rgba(20, 201, 201, 0.55), rgba(20, 201, 201, 0));
  animation: balayage 1.2s ease-in-out infinite alternate;
}
@keyframes balayage { from { transform: translateY(-30%); } to { transform: translateY(260%); } }
.idf__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.idf__actions .bouton { margin-top: 0; }
.idf__choisir { cursor: pointer; }
.idf__choisir:focus-within { outline: 3px solid var(--lagon); outline-offset: 2px; }
.idf__etat { display: flex; align-items: center; gap: 10px; color: var(--texte-2); margin: 14px 0 0; }
.idf__points { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(20, 201, 201, 0.25); border-top-color: var(--lagon); animation: tourne 0.9s linear infinite; }
.idf h3 { font-size: 15px; margin: 14px 0 8px; }
.idf h3:focus { outline: none; }
.idf__suggestions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: sug; }
.idf__suggestion {
  counter-increment: sug; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--carte-bord);
}
.idf__suggestion::before {
  content: counter(sug); grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #04202e; background: var(--lagon);
}
.idf__suggestion--retenue { border-color: var(--lagon); background: var(--lagon-doux); }
.idf__espece { font-weight: 700; }
.idf__indice { grid-column: 2; font-size: 12px; color: var(--texte-3); }
.idf__suggestion .bouton { grid-column: 3; grid-row: 1 / 3; }
.idf__conseils { margin-top: 12px; font-size: 13px; color: var(--texte-2); }
.idf__conseils summary { cursor: pointer; color: var(--texte); font-weight: 600; }
.idf__conseils ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 420px) {
  .idf__corps { grid-template-columns: 96px minmax(0, 1fr); }
  .idf__apercu { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .idf__balayage, .idf__points { animation: none; }
}

/* Carte stylisée BlueCast */
.carte-style__cadre {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(20, 201, 201, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 30px rgba(0, 0, 0, 0.3);
}
.carte-style__svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.carte-style__svg:active { cursor: grabbing; }
.repere { cursor: pointer; outline: none; }
.repere__nom { font: 600 4.2px var(--font); fill: var(--texte); letter-spacing: 0.01em; }
.repere__nom--actif { fill: #04202e; font-weight: 800; }
.repere__anneau, .repere__point, .repere__puce { transition: transform 0.2s ease; transform-box: fill-box; transform-origin: center; }
.repere:hover .repere__point, .repere:focus-visible .repere__point { transform: scale(1.25); }
.repere:hover .repere__anneau, .repere:focus-visible .repere__anneau { transform: scale(1.35); }
.repere:focus-visible .repere__puce rect { stroke: var(--lagon); stroke-width: 0.8; }
.repere__onde { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
.relief__nom { font: 600 3.2px var(--font); fill: rgba(234, 246, 251, 0.82); letter-spacing: 0.06em; text-transform: uppercase; }
.boussole { font: 800 3px var(--font); fill: var(--texte-2); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12px; color: var(--texte-2); }
.legende__item { display: inline-flex; align-items: center; gap: 6px; }
.legende__point { width: 10px; height: 10px; border-radius: 50%; background: var(--lagon); box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(20, 201, 201, 0.25); }
.legende__point--actif { background: var(--corail); box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255, 122, 89, 0.25); }
.legende__relief { width: 14px; height: 10px; border-radius: 6px; background: radial-gradient(circle, #9ff0d2, #1f9a76); }
.note--alerte { color: var(--alerte); }

@media (prefers-reduced-motion: reduce) {
  .repere__onde { animation: none; }
}

/* Fond Plan IGN */
.carte-ign__cadre { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--carte-bord); }
.carte-ign__svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; background: #aad3df; user-select: none; -webkit-user-select: none; }
.carte-ign__svg:active { cursor: grabbing; }
.etiquette-ign { font-size: 13px; fill: #062a3d; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.carte-ign__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.carte-ign__barre .schema__mention { margin: 0; }
.carte-ign__controles { display: flex; gap: 6px; }
.carte-ign__controles button {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--carte-bord); cursor: pointer;
  background: rgba(4, 28, 41, 0.85); color: var(--texte); font: inherit; font-size: 20px; line-height: 1;
}
.carte-ign__controles button:disabled { opacity: 0.4; cursor: default; }
.carte-ign__attribution { margin: 6px 0 0; font-size: 12px; color: var(--texte-2); }
.carte-ign__erreur {
  position: absolute; left: 10px; top: 10px; right: 60px; margin: 0; padding: 8px 10px; border-radius: 10px;
  font-size: 12px; color: var(--alerte); background: rgba(4, 28, 41, 0.9);
}
.carte-ign__erreur[hidden] { display: none; }

.marqueur { cursor: pointer; }
.marqueur:focus { outline: none; }
.marqueur:focus-visible .marqueur__halo, .marqueur:hover .marqueur__halo { opacity: 1; }
.marqueur__halo { opacity: 0; transition: opacity 0.2s; }

.liste-spots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste-spots button {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--carte-bord);
}
.liste-spots button[aria-pressed="true"] { border-color: var(--lagon); background: var(--lagon-doux); }
.liste-spots small { display: block; color: var(--texte-3); font-size: 12px; }
.pastille { font-size: 12px; color: var(--sable); white-space: nowrap; }

.fiche-spot dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0 0; }
.fiche-spot dt { font-size: 12px; color: var(--texte-2); }
.fiche-spot dd { margin: 0; font-weight: 700; }

.bouton {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font: inherit; font-size: 14px; font-weight: 700; color: #04202e; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--lagon), #3fe0c0); border: 0; border-radius: 12px; padding: 10px 14px;
}

/* ---------- Graphiques ---------- */
.graphique svg { width: 100%; height: auto; display: block; }
.axe { fill: var(--texte-3); font-size: 10px; }
.liste-maree { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.liste-maree li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--carte-bord);
}
.type-maree { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.type-maree::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lagon); }
.type-maree--basse::before { background: var(--sable); }

.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th, .tableau td { padding: 9px 6px; text-align: left; border-bottom: 1px solid var(--carte-bord); }
.tableau th { color: var(--texte-2); font-weight: 600; font-size: 12px; }
.tableau td .fleche { vertical-align: middle; margin-right: 4px; }

.grande-valeur { font-size: 44px; font-weight: 300; letter-spacing: -0.03em; }
.grande-valeur small { font-size: 16px; color: var(--texte-2); }

.note { font-size: 12px; color: var(--texte-3); margin: 10px 0 0; }

.noscript { padding: 24px; text-align: center; }

/* ---------- Écrans plus larges ---------- */
@media (min-width: 640px) {
  .mesures { grid-template-columns: repeat(3, 1fr); }
  .grille--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 960px) {
  .shell {
    display: grid; grid-template-columns: 210px 1fr; grid-template-rows: auto 1fr; column-gap: 24px;
    padding-bottom: 40px;
  }
  .topbar { grid-column: 1 / -1; }
  .nav {
    position: sticky; top: 64px; align-self: start;
    display: flex; flex-direction: column; gap: 6px;
    height: auto; padding: 10px; border: 1px solid var(--carte-bord); border-radius: var(--rayon);
    background: var(--carte);
  }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px; border-radius: 12px; font-size: 14px; }
  .nav a[aria-current="page"] { background: var(--lagon-doux); }
  .grille--accueil { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .grille--carte { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- Animations ---------- */
@keyframes entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes flotte { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes pluie { 0% { transform: translateY(-2px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes houle { from { transform: translateX(0); } to { transform: translateX(-200px); } }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes ressac { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bandeau { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 207, 92, 0.2); } 50% { box-shadow: 0 0 0 7px rgba(255, 207, 92, 0.05); } }

.anime > *, .anime .grille > * { animation: entree 0.5s cubic-bezier(.2, .7, .2, 1) both; }
.anime > :nth-child(2) { animation-delay: 0.05s; }
.anime > :nth-child(3) { animation-delay: 0.1s; }
.anime .grille > :nth-child(2) { animation-delay: 0.15s; }
.anime .grille > :nth-child(3) { animation-delay: 0.22s; }

.anime .mesure, .anime .frise__case { animation: entree 0.45s ease both; }
.anime .mesure:nth-child(2), .anime .frise__case:nth-child(2) { animation-delay: 0.04s; }
.anime .mesure:nth-child(3), .anime .frise__case:nth-child(3) { animation-delay: 0.08s; }
.anime .mesure:nth-child(4), .anime .frise__case:nth-child(4) { animation-delay: 0.12s; }
.anime .mesure:nth-child(5), .anime .frise__case:nth-child(5) { animation-delay: 0.16s; }
.anime .mesure:nth-child(6), .anime .frise__case:nth-child(6) { animation-delay: 0.2s; }
.anime .frise__case:nth-child(7) { animation-delay: 0.24s; }
.anime .frise__case:nth-child(8) { animation-delay: 0.28s; }

.mesure, .raccourci, .liste-spots button, .frise__case { transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.mesure:hover, .raccourci:hover, .liste-spots button:hover { transform: translateY(-2px); }
.bouton { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20, 201, 201, 0.35); }
.onglets button { transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.nav a { transition: color 0.25s ease, background 0.25s ease; }
.nav a svg { transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1); }
.nav a[aria-current="page"] svg { transform: translateY(-2px) scale(1.08); }

.demo-banner__dot { animation: bandeau 2.4s ease-in-out infinite; }

.soleil-rayons { transform-box: view-box; transform-origin: 24px 24px; animation: tourne 24s linear infinite; }
.nuage { animation: flotte 6s ease-in-out infinite; }
.gouttes line { animation: pluie 1.2s linear infinite; }
.gouttes line:nth-child(2) { animation-delay: 0.3s; }
.gouttes line:nth-child(3) { animation-delay: 0.6s; }

.hero > :not(.hero__vagues):not(.hero__heure) { position: relative; z-index: 1; }
.hero__heure { z-index: 1; }
.hero { padding-bottom: 28px; }
.hero__vagues { position: absolute; left: 0; bottom: 0; width: 200%; height: 46px; pointer-events: none; }
.vague { animation: houle 7s linear infinite; }
.vague--2 { animation-duration: 11s; animation-direction: reverse; }

.marqueur__pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
.marqueur__pulse--actif { animation-duration: 1.6s; }
.houle-carte__ligne { transform-box: fill-box; transform-origin: center; animation: ressac 4.5s ease-out infinite; }
.houle-carte__ligne--1 { animation-delay: 1.5s; }
.houle-carte__ligne--2 { animation-delay: 3s; }

@keyframes trace-depart { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.anime .courbe-trace { stroke-dasharray: 1; animation: trace-depart 1.4s ease-out both; }
.anime .courbe-aire { animation: apparition 1s ease 0.6s both; }
.anime .point-maree { animation: apparition 0.4s ease 1.2s both; }

.barre { transform-box: fill-box; transform-origin: bottom; }
.anime .barre { animation: monte 0.6s cubic-bezier(.2, .7, .2, 1) both; }
.anime .barre.r1 { animation-delay: 0.05s; } .anime .barre.r2 { animation-delay: 0.1s; } .anime .barre.r3 { animation-delay: 0.15s; }
.anime .barre.r4 { animation-delay: 0.2s; } .anime .barre.r5 { animation-delay: 0.25s; } .anime .barre.r6 { animation-delay: 0.3s; }
.anime .barre.r7 { animation-delay: 0.35s; }

/* Mouvement réduit (réglage du système) : plus de boucles ni de déplacements, seulement des fondus et des tracés. */
@media (prefers-reduced-motion: reduce) {
  .vague, .soleil-rayons, .nuage, .gouttes line, .marqueur__pulse, .houle-carte__ligne, .demo-banner__dot { animation: none !important; }
  .anime > *, .anime .grille > *, .anime .mesure, .anime .frise__case, .anime .barre { animation-name: apparition !important; }
  .mesure:hover, .raccourci:hover, .liste-spots button:hover, .bouton:hover, .nav a[aria-current="page"] svg { transform: none; }
  html { scroll-behavior: auto; }
}