/* GoSurf — un seul jeu de jetons de couleur, sombre par défaut, clair si le système le demande. */
:root {
  --fond: #0b1220;
  --panneau: #131c2e;
  --panneau-2: #1a2540;
  --trait: #26324d;
  --texte: #e8eef8;
  --sourdine: #8b9bb8;
  --accent: #38bdf8;
  --houle: #60a5fa;
  --maree: #a78bfa;
  --n0: #64748b;   /* notes : 0–2 */
  --n1: #ef4444;   /* 2–4 */
  --n2: #f59e0b;   /* 4–6 */
  --n3: #84cc16;   /* 6–8 */
  --n4: #10b981;   /* 8–10 */
  --v-bon: #10b981;
  --v-moyen: #f59e0b;
  --v-mauvais: #ef4444;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --fond: #f4f7fb; --panneau: #ffffff; --panneau-2: #eef2f8; --trait: #dbe3ef;
    --texte: #0f172a; --sourdine: #5b6b85; --accent: #0284c7; --houle: #2563eb; --maree: #7c3aed;
    --n0: #94a3b8; --n1: #dc2626; --n2: #d97706; --n3: #65a30d; --n4: #059669;
    --ombre: 0 1px 3px rgba(15, 23, 42, .08);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--sourdine); font-weight: 600; margin: 22px 0 10px; }
button { font: inherit; color: inherit; }

.barre {
  position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--trait);
}
.logo { display: flex; gap: 8px; align-items: center; color: var(--texte); text-decoration: none; font-weight: 700; font-size: 18px; }
.fraicheur { font-size: 12px; color: var(--sourdine); }
.droite-barre { display: flex; align-items: center; gap: 12px; }
.reglages { display: grid; place-items: center; width: 32px; height: 32px; color: var(--sourdine); }
.reglages svg { width: 22px; height: 22px; fill: currentColor; }
.fraicheur.vieux { color: var(--v-moyen); }
.bandeau { margin: 10px 16px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--v-moyen) 18%, var(--panneau)); font-size: 13px; }

main { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; outline: none; }
.chargement { color: var(--sourdine); text-align: center; margin-top: 40px; }

.onglets {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-around;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--panneau); border-top: 1px solid var(--trait);
}
.onglets a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--sourdine); text-decoration: none; padding: 4px 0; }
.onglets svg { width: 24px; height: 24px; fill: currentColor; }
.onglets a[aria-current="page"] { color: var(--accent); }

/* ------------------------------------------------------------------ éléments */
.carte { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; box-shadow: var(--ombre); }
.carte + .carte { margin-top: 10px; }
.puces { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.puces::-webkit-scrollbar { display: none; }
.puce {
  flex: none; border: 1px solid var(--trait); background: var(--panneau); border-radius: 999px; padding: 6px 12px;
  font-size: 13px; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 58px; line-height: 1.2;
  color: var(--texte); text-decoration: none;
}
.puce small { font-size: 11px; color: var(--sourdine); }
.puce[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panneau)); }
.puce .pt { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; }

.note { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; font-weight: 800; font-size: 18px; color: #fff; padding: 0 6px; font-variant-numeric: tabular-nums; }
.note.grande { min-width: 76px; height: 76px; font-size: 32px; border-radius: 18px; }
.note.petite { min-width: 30px; height: 26px; font-size: 13px; border-radius: 7px; }
.fourchette { font-size: 12px; color: var(--sourdine); }

.heros { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.heros h1 { font-size: 22px; }
.heros .sous { color: var(--sourdine); font-size: 14px; margin-top: 2px; }
.heros .pourquoi { margin-top: 6px; font-size: 14px; }
.etiquette { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--panneau-2); color: var(--sourdine); margin-right: 4px; }
.etiquette.haute { color: var(--v-bon); } .etiquette.moyenne { color: var(--v-moyen); } .etiquette.faible { color: var(--v-mauvais); }

.conditions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.cond { background: var(--panneau-2); border-radius: 10px; padding: 8px; text-align: center; min-width: 0; }
.cond .val { font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.cond .lib { font-size: 11px; color: var(--sourdine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleche { width: 16px; height: 16px; flex: none; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li a { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 2px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--trait); }
.liste li:last-child a { border-bottom: 0; }
.liste .nom { font-weight: 600; }
.liste .detail { font-size: 13px; color: var(--sourdine); }
.liste .droite { text-align: right; font-size: 13px; white-space: nowrap; }
.liste .droite b { font-size: 15px; }

/* ------------------------------------------------------------------ semaine */
.grille { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.grille table { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 520px; }
.grille th { font-size: 11px; font-weight: 600; color: var(--sourdine); padding: 2px; }
.grille th.spot { text-align: left; font-size: 13px; color: var(--texte); font-weight: 500; white-space: nowrap; position: sticky; left: 0; background: var(--fond); padding-right: 6px; }
.grille td { padding: 0; }
.grille td a { display: grid; place-items: center; height: 34px; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.grille .large { font-weight: 400; display: block; }

/* ------------------------------------------------------------------ spot */
.retour { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-size: 14px; margin: 6px 0 4px; }
.graphe { width: 100%; height: auto; display: block; touch-action: pan-y; }
.graphe text { fill: var(--sourdine); font-size: 10px; }
.graphe .barre-note { cursor: pointer; }
.graphe .sel { stroke: var(--texte); stroke-width: 2; }
.legende { display: flex; gap: 12px; font-size: 12px; color: var(--sourdine); margin-top: 6px; flex-wrap: wrap; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.facteurs { display: grid; gap: 8px; margin-top: 8px; }
.facteur { display: grid; grid-template-columns: 92px 1fr 44px; gap: 8px; align-items: center; font-size: 13px; }
.facteur .jauge { height: 8px; border-radius: 4px; background: var(--panneau-2); overflow: hidden; }
.facteur .jauge span { display: block; height: 100%; border-radius: 4px; }
.facteur .v { text-align: right; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.planche { width: 100%; border-radius: 10px; margin-top: 8px; display: block; }
.verdict { font-size: 20px; font-weight: 800; }
.verdict.oui { color: var(--v-bon); } .verdict.limite { color: var(--v-moyen); } .verdict.non { color: var(--v-mauvais); }

/* ------------------------------------------------------------------ carte */
.vue-carte { position: fixed; inset: 0; top: calc(49px + env(safe-area-inset-top)); bottom: calc(60px + env(safe-area-inset-bottom)); }
#carte { position: absolute; inset: 0; background: var(--panneau-2); }
.panneau-carte { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 500; background: color-mix(in srgb, var(--panneau) 92%, transparent); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.panneau-carte input[type=range] { width: 100%; accent-color: var(--accent); }
.panneau-carte .ligne { display: flex; justify-content: space-between; font-size: 13px; gap: 8px; }
.marqueur { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.leaflet-container { font: inherit; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; font-size: 14px; }
.btn.secondaire { background: var(--panneau-2); color: var(--texte); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vide { color: var(--sourdine); font-size: 14px; }
.prose p { margin: 0 0 10px; }
.prose li { margin-bottom: 4px; }

/* ------------------------------------------------------------------ favoris, réglages, retours */
.etoile { color: var(--n2); }
.favori { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--n2); cursor: pointer; padding: 0 4px; vertical-align: 2px; }
h2 .filtre { text-transform: none; letter-spacing: 0; font-weight: 500; text-decoration: none; }
.choix { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.choix.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
.choix label, .interrupteur { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.choix input, .interrupteur input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.ligne-retour { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--trait); }
.liste li:last-child .ligne-retour { border-bottom: 0; }
.btn.petit { padding: 6px 10px; font-size: 13px; }
.formulaire { display: grid; gap: 14px; }
.formulaire label { display: grid; gap: 6px; font-size: 14px; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.formulaire legend { padding: 0; margin-bottom: 6px; }
.formulaire select, .formulaire textarea {
  font: inherit; color: var(--texte); background: var(--panneau-2); border: 1px solid var(--trait); border-radius: 10px; padding: 9px 10px; width: 100%;
}
.formulaire input[type=range] { width: 100%; accent-color: var(--accent); }
.formulaire .choix label { display: flex; }

/* ------------------------------------------------------------------ webcams */
.cams { display: grid; gap: 12px; }
@media (min-width: 640px) { .cams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cam { padding: 0; overflow: hidden; }
.cam + .cam { margin-top: 0; }
.cam-image { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--panneau-2); color: var(--sourdine); text-decoration: none; }
.cam-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-vide { font-size: 13px; padding: 12px; text-align: center; }
.cam-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.cam-notes { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.cam-notes a { color: var(--texte); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 420px) {
  .conditions { grid-template-columns: repeat(2, 1fr); }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .onglets { top: 0; bottom: auto; left: auto; right: 16px; width: 360px; background: transparent; border: 0; padding-top: calc(8px + env(safe-area-inset-top)); }
  .onglets a { flex-direction: row; justify-content: center; gap: 6px; font-size: 13px; }
  .onglets svg { width: 18px; height: 18px; }
  .vue-carte { bottom: 0; }
  .barre { padding-right: 400px; }
}